From 453f5450b6e6550618bf97b5b0541f5f46c35d8e Mon Sep 17 00:00:00 2001 From: Raymond Hill Date: Sun, 5 Apr 2020 15:19:07 -0400 Subject: [PATCH] First pass to Re-design the dashboard This is a first pass in which only the dashboard navigation widget and the "Settings" pane have been revisited. Reference work: - https://app.abstract.com/share/54f1465e-8d1c-4e7b-9ae4-f37e21bef7fe --- src/css/dashboard-common.css | 4 -- src/css/dashboard.css | 76 ++++++++++++------------------------ src/css/settings.css | 57 +++++++++++++++------------ src/dashboard.html | 22 +++++------ src/js/dashboard.js | 9 +++-- src/js/settings.js | 27 ++++++------- src/settings.html | 76 +++++++++++++++++------------------- 7 files changed, 121 insertions(+), 150 deletions(-) diff --git a/src/css/dashboard-common.css b/src/css/dashboard-common.css index 4a8fcb5d7..990524798 100644 --- a/src/css/dashboard-common.css +++ b/src/css/dashboard-common.css @@ -48,10 +48,6 @@ input[type="checkbox"][disabled] + label { .para { width: 40em; } -.synopsis { - display: inline-block; - padding: 0.25em 0; - } .whatisthis { margin: 0 0 0 8px; border: 0; diff --git a/src/css/dashboard.css b/src/css/dashboard.css index bd25eced4..dd88a0d2f 100644 --- a/src/css/dashboard.css +++ b/src/css/dashboard.css @@ -1,69 +1,54 @@ html, body { - margin: 0; border: 0; + font: 16px/24px sans-serif; + height: 100%; + margin: 0; + overflow: hidden; padding: 0; position: relative; width: 100%; - height: 100%; - overflow: hidden; - } -@media screen and (max-device-width: 960px) { - #dashboard-nav { - zoom: 1.2; - } } #dashboard-nav { + background-color: #f9f9fb; border: 0; - margin: 0; + border-bottom: 1px solid rgba(14, 13, 26, 0.12); + display: flex; + flex-wrap: wrap; + overflow-x: hidden; padding: 0; + position: sticky; top: 0; width: 100%; z-index: 10; } -#dashboard-nav-widgets { - align-items: stretch; - background-color: white; - border-bottom: 1px solid #ccc; - display: flex; - margin: 0; - padding: 4px 0 0; - white-space: nowrap; - } -#dashboard-nav-widgets > span { +#dashboard-nav > span { align-items: center; display: inline-flex; padding: 0 0.5em; width: 1.25em; } -#dashboard-nav-widgets > span > img { +#dashboard-nav > span > img { width: 100%; } .tabButton { - background-color: #eee; - border: 1px solid #ccc; - border-top-left-radius: 3px; - border-top-right-radius: 3px; - border-bottom: 1px solid #ccc; - color: black; + border: 0; + border-bottom: 3px solid #f9f9fb; + box-sizing: border-box; + color: #20123a; cursor: pointer; - display: inline-block; - font-size: 110%; - margin: 0 0.2em 0 0; - overflow: hidden; - padding: 4px; - position: relative; + padding: 0.5em 1.5em; text-decoration: none; - top: 1px; + white-space: nowrap; } .tabButton:focus { outline: 0; } .tabButton:active,.tabButton:visited { - color: inherit; + color: #20123a; } .tabButton.selected { - background-color: white; - border-bottom: 1px solid white; + border-bottom: 3px solid #592acb; + color: #592acb; } iframe { background-color: transparent; @@ -97,20 +82,9 @@ body:not(.canUpdateShortcuts) .tabButton[href="#shortcuts.html"] { display: none; } -@media (max-width: 640px) { +@media (pointer: coarse) { #dashboard-nav { - position: relative; - } - #dashboard-nav-widgets { - padding: 1px 0 0 0; - } - .hverbose { - display: none !important; - } - .tabButton { - font-size: 90%; - } - .tabButton.selected { - border-bottom: 1px solid #ccc; - } + flex-wrap: nowrap; + overflow-x: auto; } +} diff --git a/src/css/settings.css b/src/css/settings.css index 58c9d78e3..bfab4dd31 100644 --- a/src/css/settings.css +++ b/src/css/settings.css @@ -1,27 +1,40 @@ -ul { - padding-left: 1em; - padding-right: 0; +body { + border: 0; + font: 16px/24px sans-serif; + margin: 0; + padding: 0; } -body[dir="rtl"] ul { - padding-left: 0; - padding-right: 1em; +hr { + border: 0; + border-top: 1px solid #ccc; + margin: 1.5em 0; } -ul#userSettings { - padding-left: 0; - } -li { - margin-top: 0.25em; - } -ul#userSettings, -ul#userSettings ul { - list-style-type: none; - } -ul#userSettings .subgroup { +.body { + color: #20123a; margin-top: 1em; } -ul#userSettings .subgroup > span { - font-size: larger; +.entries { + margin: 0.5em 0; + } +.section { + font-size: large; font-weight: bold; + margin-top: 0.75em; + } +.synopsis { + font-size: smaller; + } +.entry { + align-items: baseline; + display: flex; + margin: 0.5em 0; + } +.entry > * { + margin-inline-end: 0.5em; + -webkit-margin-end: 0.5em; + } +.entry > input[type="checkbox"] { + align-self: center; } #advanced-user-enabled ~ a.fa { display: none; @@ -29,9 +42,3 @@ ul#userSettings .subgroup > span { body.advancedUser #advanced-user-enabled ~ a.fa { display: inline; } -#localData > ul > li { - margin-top: 1em; - } -#localData > ul > li > ul > li:nth-of-type(2) { - font-family: monospace; - } diff --git a/src/dashboard.html b/src/dashboard.html index 92689608c..9ac6c5c10 100644 --- a/src/dashboard.html +++ b/src/dashboard.html @@ -2,25 +2,23 @@ - + - +
-
- -
+
diff --git a/src/js/dashboard.js b/src/js/dashboard.js index 20a4f618a..59d83c154 100644 --- a/src/js/dashboard.js +++ b/src/js/dashboard.js @@ -84,12 +84,15 @@ const discardUnsavedData = function(synchronous = false) { }; const loadDashboardPanel = function(pane, first) { - const tabButton = uDom(`[href="#${pane}"]`); - if ( !tabButton || tabButton.hasClass('selected') ) { return; } + const tabButton = uDom.nodeFromSelector(`[href="#${pane}"]`); + if ( tabButton === null || tabButton.classList.contains('selected') ) { + return; + } const loadPane = ( ) => { self.location.replace(`#${pane}`); uDom('.tabButton.selected').toggleClass('selected', false); - tabButton.toggleClass('selected', true); + tabButton.classList.add('selected'); + tabButton.scrollIntoView(); uDom.nodeFromId('iframe').setAttribute('src', pane); vAPI.localStorage.setItem('dashboardLastVisitedPane', pane); }; diff --git a/src/js/settings.js b/src/js/settings.js index 9ba495596..437f61a14 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -117,13 +117,11 @@ const exportToFile = async function() { /******************************************************************************/ const onLocalDataReceived = function(details) { - uDom('#localData > ul > li:nth-of-type(1)').text( - vAPI.i18n('settingsStorageUsed') - .replace( - '{{value}}', - typeof details.storageUsed === 'number' ? details.storageUsed.toLocaleString() : '?' - ) - ); + uDom.nodeFromId('storageUsed').textContent = + vAPI.i18n('settingsStorageUsed').replace( + '{{value}}', + typeof details.storageUsed === 'number' ? details.storageUsed.toLocaleString() : '?' + ); const timeOptions = { weekday: 'long', @@ -138,18 +136,19 @@ const onLocalDataReceived = function(details) { const lastBackupFile = details.lastBackupFile || ''; if ( lastBackupFile !== '' ) { const dt = new Date(details.lastBackupTime); - uDom('#localData > ul > li:nth-of-type(2) > ul > li:nth-of-type(1)').text(dt.toLocaleString('fullwide', timeOptions)); - //uDom('#localData > ul > li:nth-of-type(2) > ul > li:nth-of-type(2)').text(lastBackupFile); - uDom('#localData > ul > li:nth-of-type(2)').css('display', ''); + const text = vAPI.i18n('settingsLastBackupPrompt'); + const node = uDom.nodeFromId('settingsLastBackupPrompt'); + node.textContent = text + '\xA0' + dt.toLocaleString('fullwide', timeOptions); + node.style.display = ''; } const lastRestoreFile = details.lastRestoreFile || ''; - uDom('#localData > p:nth-of-type(3)'); if ( lastRestoreFile !== '' ) { const dt = new Date(details.lastRestoreTime); - uDom('#localData > ul > li:nth-of-type(3) > ul > li:nth-of-type(1)').text(dt.toLocaleString('fullwide', timeOptions)); - uDom('#localData > ul > li:nth-of-type(3) > ul > li:nth-of-type(2)').text(lastRestoreFile); - uDom('#localData > ul > li:nth-of-type(3)').css('display', ''); + const text = vAPI.i18n('settingsLastRestorePrompt'); + const node = uDom.nodeFromId('settingsLastRestorePrompt'); + node.textContent = text + '\xA0' + dt.toLocaleString('fullwide', timeOptions); + node.style.display = ''; } if ( details.cloudStorageSupported === false ) { diff --git a/src/settings.html b/src/settings.html index 84037319d..b3573d55c 100644 --- a/src/settings.html +++ b/src/settings.html @@ -2,7 +2,7 @@ - + uBlock — Settings @@ -11,48 +11,42 @@
- +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
    -
  • -
    • -
    • -
    -
    • -
    • -
    • -
    -
-
- -
-

  - -

+

+
+
+
+ + +

  + +

+