From f764435812121511fec7d70fc2981d2b6e32019c Mon Sep 17 00:00:00 2001 From: Raymond Hill Date: Wed, 28 Mar 2018 09:11:55 -0400 Subject: [PATCH] various changes to enhance UI for mobile devices --- src/1p-filters.html | 2 +- src/_locales/en/messages.json | 2 +- src/asset-viewer.html | 1 + src/css/dashboard-common.css | 5 +++++ src/css/dashboard.css | 30 ++++++++++++++------------- src/css/dyna-rules.css | 1 + src/dashboard.html | 2 +- src/dyna-rules.html | 4 ++-- src/js/asset-viewer.js | 1 + src/js/codemirror/search.js | 2 +- src/js/dashboard-common.js | 38 +++++++++++++++++++++++++++++++++++ src/whitelist.html | 2 +- 12 files changed, 69 insertions(+), 21 deletions(-) diff --git a/src/1p-filters.html b/src/1p-filters.html index 82db2bcbe..e14c06961 100644 --- a/src/1p-filters.html +++ b/src/1p-filters.html @@ -19,7 +19,7 @@
-

+

  diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index c0716de42..20418b2a3 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -1,6 +1,6 @@ { "extName":{ - "message":"uBlockâ‚€", + "message":"uBlock Origin", "description":"extension name." }, "extShortDesc":{ diff --git a/src/asset-viewer.html b/src/asset-viewer.html index 6add32465..02ea2b167 100644 --- a/src/asset-viewer.html +++ b/src/asset-viewer.html @@ -39,6 +39,7 @@ body { + diff --git a/src/css/dashboard-common.css b/src/css/dashboard-common.css index bc8f3ddd2..25895f46e 100644 --- a/src/css/dashboard-common.css +++ b/src/css/dashboard-common.css @@ -90,3 +90,8 @@ input[type="checkbox"][disabled] + label { padding: 5px; background-color: #FEDAE0; } +@media (max-height: 640px) { + .vverbose { + display: none !important; + } + } diff --git a/src/css/dashboard.css b/src/css/dashboard.css index 142c3bd9a..ba9bd678d 100644 --- a/src/css/dashboard.css +++ b/src/css/dashboard.css @@ -21,15 +21,22 @@ html, body { z-index: 10; } #dashboard-nav-widgets { - margin: 0; + align-items: stretch; + background-color: white; border-bottom: 1px solid #ccc; + display: flex; + margin: 0; padding: 4px 0 0; white-space: nowrap; - background-color: white; } -#dashboard-nav-widgets span { +#dashboard-nav-widgets > span { + align-items: center; + display: inline-flex; padding: 0 0.5em; - font-size: larger; + width: 1.25em; + } +#dashboard-nav-widgets > span > img { + width: 100%; } .tabButton { background-color: #eee; @@ -42,6 +49,7 @@ html, body { display: inline-block; font-size: 110%; margin: 0 0.2em 0 0; + overflow: hidden; padding: 4px; position: relative; text-decoration: none; @@ -65,24 +73,18 @@ iframe { width: 100%; } -@media (max-width: 600px) { +@media (max-width: 640px) { #dashboard-nav { position: relative; } #dashboard-nav-widgets { padding: 1px 0 0 0; - white-space: normal; } - [data-i18n="extName"] { - display: none; + .hverbose { + display: none !important; } .tabButton { - border-radius: 0; - display: inline-block; - font-size: 100%; - margin-bottom: 1px; - margin-right: 1px; - top: 0; + font-size: 90%; } .tabButton.selected { border-bottom: 1px solid #ccc; diff --git a/src/css/dyna-rules.css b/src/css/dyna-rules.css index 3c692000f..5b5fbb6dc 100644 --- a/src/css/dyna-rules.css +++ b/src/css/dyna-rules.css @@ -29,6 +29,7 @@ body { text-align: center; vertical-align: top; width: 50%; + white-space: normal; } #diff .ruleActions h3 { font-weight: normal; diff --git a/src/dashboard.html b/src/dashboard.html index 45e7083e5..2b89b4d2b 100644 --- a/src/dashboard.html +++ b/src/dashboard.html @@ -12,7 +12,7 @@

- 0' + '' + diff --git a/src/js/dashboard-common.js b/src/js/dashboard-common.js index db28b6b8a..efe7d6099 100644 --- a/src/js/dashboard-common.js +++ b/src/js/dashboard-common.js @@ -113,6 +113,19 @@ self.uBlockDashboard.dateNowToSensibleString = function() { /******************************************************************************/ self.uBlockDashboard.patchCodeMirrorEditor = (function() { + var grabFocusTimer; + var grabFocusTarget; + var grabFocus = function() { + grabFocusTarget.focus(); + grabFocusTimer = grabFocusTarget = undefined; + }; + var grabFocusAsync = function(cm) { + grabFocusTarget = cm; + if ( grabFocusTimer === undefined ) { + grabFocusTimer = vAPI.setTimeout(grabFocus, 1); + } + }; + // https://github.com/gorhill/uBlock/issues/3646 var patchSelectAll = function(cm, details) { var vp = cm.getViewport(); @@ -128,12 +141,37 @@ self.uBlockDashboard.patchCodeMirrorEditor = (function() { head: { line: cm.lineCount(), ch: 0 } } ]); + grabFocusAsync(cm); + }; + + var lastGutterClick = 0; + var lastGutterLine = 0; + + var onGutterClicked = function(cm, line) { + var delta = Date.now() - lastGutterClick; + if ( delta >= 500 || line !== lastGutterLine ) { + cm.setSelection( + { line: line, ch: 0 }, + { line: line + 1, ch: 0 } + ); + lastGutterClick = Date.now(); + lastGutterLine = line; + } else { + cm.setSelection( + { line: 0, ch: 0 }, + { line: cm.lineCount(), ch: 0 }, + { scroll: false } + ); + lastGutterClick = 0; + } + grabFocusAsync(cm); }; return function(cm) { if ( cm.options.inputStyle === 'contenteditable' ) { cm.on('beforeSelectionChange', patchSelectAll); } + cm.on('gutterClick', onGutterClicked); }; })(); diff --git a/src/whitelist.html b/src/whitelist.html index 344472511..59b002314 100644 --- a/src/whitelist.html +++ b/src/whitelist.html @@ -19,7 +19,7 @@
-

+