Mirrors/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-09-14 23:12:28 +02:00
Code Issues Releases Wiki Activity

First pass to Re-design the dashboard

Browse Source 
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
This commit is contained in:
Raymond Hill 2020-04-05 15:19:07 -04:00
parent 20332c65b4
commit 453f5450b6
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
7 changed files with 121 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/css/dashboard-common.css
View File

@ -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;

76
src/css/dashboard.css
View File

@ -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;
}
}

57
src/css/settings.css
View File

@ -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;
}

22
src/dashboard.html
View File

@ -2,25 +2,23 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title data-i18n="dashboardName"></title>
<link href="css/dashboard.css" rel="stylesheet" type="text/css">
<link href="css/common.css" rel="stylesheet" type="text/css">
<link href="css/dashboard.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/png" href="img/icon_16.png"/>
</head>
<body>
<div id="dashboard-nav">
<div id="dashboard-nav-widgets">
<span class="hverbose" data-i18n-title="extName"><img src="img/ublock.svg"></span><!--
--><a class="tabButton" href="#settings.html" data-i18n="settingsPageName"></a><!--
--><a class="tabButton" href="#3p-filters.html" data-i18n="3pPageName"></a><!--
--><a class="tabButton" href="#1p-filters.html" data-i18n="1pPageName"></a><!--
--><a class="tabButton" href="#dyna-rules.html" data-i18n="rulesPageName"></a><!--
--><a class="tabButton" href="#whitelist.html" data-i18n="whitelistPageName"></a><!--
--><a class="tabButton" href="#shortcuts.html" data-i18n="shortcutsPageName"></a><!--
--><a class="tabButton" href="#about.html" data-i18n="aboutPageName"></a>
</div>
<span class="hverbose" ><img data-i18n-title="extName" src="img/ublock.svg"></span><!--
--><a class="tabButton" href="#settings.html" data-i18n="settingsPageName"></a><!--
--><a class="tabButton" href="#3p-filters.html" data-i18n="3pPageName"></a><!--
--><a class="tabButton" href="#1p-filters.html" data-i18n="1pPageName"></a><!--
--><a class="tabButton" href="#dyna-rules.html" data-i18n="rulesPageName"></a><!--
--><a class="tabButton" href="#whitelist.html" data-i18n="whitelistPageName"></a><!--
--><a class="tabButton" href="#shortcuts.html" data-i18n="shortcutsPageName"></a><!--
--><a class="tabButton" href="#about.html" data-i18n="aboutPageName"></a>
</div>
<div id="unsavedWarning">
<div>

9
src/js/dashboard.js
View File

@ -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);
};

27
src/js/settings.js
View File

@ -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 ) {

76
src/settings.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>uBlock — Settings</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/dashboard-common.css">
@ -11,48 +11,42 @@
<body>
<div class="body">
<ul id="userSettings">
<li><input id="collapse-blocked" type="checkbox" data-setting-name="collapseBlocked" data-setting-type="bool"><label data-i18n="settingsCollapseBlockedPrompt" for="collapse-blocked"></label>
<li><input id="icon-badge" type="checkbox" data-setting-name="showIconBadge" data-setting-type="bool"><label data-i18n="settingsIconBadgePrompt" for="icon-badge"></label>
<li><input id="context-menu-enabled" type="checkbox" data-setting-name="contextMenuEnabled" data-setting-type="bool"><label data-i18n="settingsContextMenuPrompt" for="context-menu-enabled"></label>
<li><input id="tooltips-disabled" type="checkbox" data-setting-name="tooltipsDisabled" data-setting-type="bool"><label data-i18n="settingsTooltipsPrompt" for="tooltips-disabled"></label>
<li><input id="color-blind-friendly" type="checkbox" data-setting-name="colorBlindFriendly" data-setting-type="bool"><label data-i18n="settingsColorBlindPrompt" for="color-blind-friendly"></label>
<li><input id="cloud-storage-enabled" type="checkbox" data-setting-name="cloudStorageEnabled" data-setting-type="bool"><label data-i18n="settingsCloudStorageEnabledPrompt" for="cloud-storage-enabled"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Cloud-storage" target="_blank">&#xf05a;</a>
<li><input id="advanced-user-enabled" type="checkbox" data-setting-name="advancedUserEnabled" data-setting-type="bool"><label data-i18n="settingsAdvancedUserPrompt" for="advanced-user-enabled"></label> <a class="fa info" href="advanced-settings.html" data-i18n-title="settingsAdvancedUserSettings">&#xf085;</a>
<li class="subgroup"><span data-i18n="3pGroupPrivacy"></span><ul>
<li><input id="prefetching-disabled" type="checkbox" data-setting-name="prefetchingDisabled" data-setting-type="bool"><label data-i18n="settingsPrefetchingDisabledPrompt" for="prefetching-disabled"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#disable-pre-fetching" target="_blank">&#xf05a;</a>
<li><input id="hyperlink-auditing-disabled" type="checkbox" data-setting-name="hyperlinkAuditingDisabled" data-setting-type="bool"><label data-i18n="settingsHyperlinkAuditingDisabledPrompt" for="hyperlink-auditing-disabled"></label> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#disable-hyperlink-auditing" target="_blank">&#xf05a;</a>
<li><input id="webrtc-ipaddress-hidden" type="checkbox" data-setting-name="webrtcIPAddressHidden" data-setting-type="bool"><label data-i18n="settingsWebRTCIPAddressHiddenPrompt" for="webrtc-ipaddress-hidden"></label> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Prevent-WebRTC-from-leaking-local-IP-address" target="_blank">&#xf05a;</a>
<li><input id="no-csp-reports" type="checkbox" data-setting-name="noCSPReports" data-setting-type="bool"><label data-i18n="settingsNoCSPReportsPrompt" for="no-csp-reports"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#block-csp-reports" target="_blank">&#xf05a;</a>
</ul>
<li class="subgroup"><span data-i18n="settingPerSiteSwitchGroup"></span><ul>
<li><label class="synopsis"><span data-i18n="settingPerSiteSwitchGroupSynopsis"></span> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches" target="_blank">&#xf05a;</a></label>
<li><input id="no-cosmetic-filtering" type="checkbox" data-setting-name="noCosmeticFiltering" data-setting-type="bool"><label data-i18n="settingsNoCosmeticFilteringPrompt" for="no-cosmetic-filtering"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-cosmetic-filtering" target="_blank">&#xf05a;</a>
<li><input id="no-large-media" type="checkbox" data-setting-name="noLargeMedia" data-setting-type="bool"><label data-i18n="settingsNoLargeMediaPrompt" for="no-large-media"><input type="number" min="0"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-large-media-elements" target="_blank">&#xf05a;</a>
<li><input id="no-remote-fonts" type="checkbox" data-setting-name="noRemoteFonts" data-setting-type="bool"><label data-i18n="settingsNoRemoteFontsPrompt" for="no-remote-fonts"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-remote-fonts" target="_blank">&#xf05a;</a>
<li><input id="no-scripting" type="checkbox" data-setting-name="noScripting" data-setting-type="bool"><label data-i18n="settingsNoScriptingPrompt" for="no-scripting"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-scripting" target="_blank">&#xf05a;</a>
</ul>
</ul>
<div class="entries">
<div class="entry"><input id="collapse-blocked" type="checkbox" data-setting-name="collapseBlocked" data-setting-type="bool"><label data-i18n="settingsCollapseBlockedPrompt" for="collapse-blocked"></label></div>
<div class="entry"><input id="icon-badge" type="checkbox" data-setting-name="showIconBadge" data-setting-type="bool"><label data-i18n="settingsIconBadgePrompt" for="icon-badge"></label></div>
<div class="entry"><input id="context-menu-enabled" type="checkbox" data-setting-name="contextMenuEnabled" data-setting-type="bool"><label data-i18n="settingsContextMenuPrompt" for="context-menu-enabled"></label></div>
<div class="entry"><input id="tooltips-disabled" type="checkbox" data-setting-name="tooltipsDisabled" data-setting-type="bool"><label data-i18n="settingsTooltipsPrompt" for="tooltips-disabled"></label></div>
<div class="entry"><input id="color-blind-friendly" type="checkbox" data-setting-name="colorBlindFriendly" data-setting-type="bool"><label data-i18n="settingsColorBlindPrompt" for="color-blind-friendly"></label></div>
<div class="entry"><input id="cloud-storage-enabled" type="checkbox" data-setting-name="cloudStorageEnabled" data-setting-type="bool"><label data-i18n="settingsCloudStorageEnabledPrompt" for="cloud-storage-enabled"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Cloud-storage" target="_blank">&#xf05a;</a></div>
<div class="entry"><input id="advanced-user-enabled" type="checkbox" data-setting-name="advancedUserEnabled" data-setting-type="bool"><label data-i18n="settingsAdvancedUserPrompt" for="advanced-user-enabled"></label> <a class="fa info" href="advanced-settings.html" data-i18n-title="settingsAdvancedUserSettings">&#xf085;</a></div>
</div>
<div class="section" data-i18n="3pGroupPrivacy"></div>
<div class="entries">
<div class="entry"><input id="prefetching-disabled" type="checkbox" data-setting-name="prefetchingDisabled" data-setting-type="bool"><label data-i18n="settingsPrefetchingDisabledPrompt" for="prefetching-disabled"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#disable-pre-fetching" target="_blank">&#xf05a;</a></div>
<div class="entry"><input id="hyperlink-auditing-disabled" type="checkbox" data-setting-name="hyperlinkAuditingDisabled" data-setting-type="bool"><label data-i18n="settingsHyperlinkAuditingDisabledPrompt" for="hyperlink-auditing-disabled"></label> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#disable-hyperlink-auditing" target="_blank">&#xf05a;</a></div>
<div class="entry"><input id="webrtc-ipaddress-hidden" type="checkbox" data-setting-name="webrtcIPAddressHidden" data-setting-type="bool"><label data-i18n="settingsWebRTCIPAddressHiddenPrompt" for="webrtc-ipaddress-hidden"></label> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Prevent-WebRTC-from-leaking-local-IP-address" target="_blank">&#xf05a;</a></div>
<div class="entry"><input id="no-csp-reports" type="checkbox" data-setting-name="noCSPReports" data-setting-type="bool"><label data-i18n="settingsNoCSPReportsPrompt" for="no-csp-reports"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#block-csp-reports" target="_blank">&#xf05a;</a></div>
</div>
<div class="section" data-i18n="settingPerSiteSwitchGroup"></div>
<div class="entries">
<div class="synopsis"><label><span data-i18n="settingPerSiteSwitchGroupSynopsis"></span> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches" target="_blank">&#xf05a;</a></label></div>
<div class="entry"><input id="no-cosmetic-filtering" type="checkbox" data-setting-name="noCosmeticFiltering" data-setting-type="bool"><label data-i18n="settingsNoCosmeticFilteringPrompt" for="no-cosmetic-filtering"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-cosmetic-filtering" target="_blank">&#xf05a;</a></div>
<div class="entry"><input id="no-large-media" type="checkbox" data-setting-name="noLargeMedia" data-setting-type="bool"><label data-i18n="settingsNoLargeMediaPrompt" for="no-large-media"><input type="number" min="0"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-large-media-elements" target="_blank">&#xf05a;</a></div>
<div class="entry"><input id="no-remote-fonts" type="checkbox" data-setting-name="noRemoteFonts" data-setting-type="bool"><label data-i18n="settingsNoRemoteFontsPrompt" for="no-remote-fonts"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-remote-fonts" target="_blank">&#xf05a;</a></div>
<div class="entry"><input id="no-scripting" type="checkbox" data-setting-name="noScripting" data-setting-type="bool"><label data-i18n="settingsNoScriptingPrompt" for="no-scripting"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-scripting" target="_blank">&#xf05a;</a></div>
</div>
<div id="localData" style="margin: 0 1em;">
<div style="margin: 2.5em 0; border-top: 1px solid #ccc;"></div>
<ul>
<li>
<li style="display: none;"><span data-i18n="settingsLastBackupPrompt"></span><ul>
<li>
</ul>
<li style="display: none;"><span data-i18n="settingsLastRestorePrompt"></span><ul>
<li>
<li>
</ul>
</ul>
</div>
<div style="margin: 2.5em 1em;">
<p><button class="custom" type="button" id="export" data-i18n="aboutBackupDataButton"></button>&ensp;
<button class="custom" type="button" id="import" data-i18n="aboutRestoreDataButton"></button>
<p><button class="custom" type="button" id="reset" data-i18n="aboutResetDataButton"></button>
<div id="localData" class="entrie">
<hr>
<div id="storageUsed" class="entry"></div>
<div style="margin: 1.5em 0">
<div class="entry" id="settingsLastBackupPrompt" style="display:none;"></div>
<div class="entry" id="settingsLastRestorePrompt" style="display:none;"></div>
<p><button class="custom" type="button" id="export" data-i18n="aboutBackupDataButton"></button>&ensp;
<button class="custom" type="button" id="import" data-i18n="aboutRestoreDataButton"></button>
<p><button class="custom" type="button" id="reset" data-i18n="aboutResetDataButton"></button>
</div>
</div>
</div>
<div class="hidden">