Mirrors
/
uBlock
mirror of https://github.com/gorhill/uBlock.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

further improving UI for small screens

This commit is contained in:
Raymond Hill 2018-03-28 16:15:50 -04:00
parent b65923a00e
commit fce2eaf3c3
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
17 changed files with 213 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/1p-filters.html
View File

@ -17,19 +17,22 @@
<body> <body>
<div class="body">
<div id="cloudWidget" class="hide" data-cloud-entry="myFiltersPane"></div> <div id="cloudWidget" class="hide" data-cloud-entry="myFiltersPane"></div>
<p class="vverbose"><span data-i18n="1pFormatHint"></span> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Static-filter-syntax" target="_blank">&#xf05a;</a></p> <p class="vverbose"><span data-i18n="1pFormatHint"></span> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Static-filter-syntax" target="_blank">&#xf05a;</a></p>
<p> <p>
<button id="userFiltersApply" class="custom important" type="button" disabled="true" data-i18n="1pApplyChanges"></button>&ensp; <button id="userFiltersApply" class="custom important iconifiable" type="button" disabled><span class="fa">&#xf00c;</span><span data-i18n="1pApplyChanges"></span></button>
<button id="userFiltersRevert" class="custom" type="button" disabled="true" data-i18n="genericRevert"></button> <button id="userFiltersRevert" class="custom iconifiable" type="button" disabled><span class="fa">&#xf0e2;</span><span data-i18n="genericRevert"></span></button>
</p> &emsp;&emsp;
<p><div class="codeMirrorContainer" id="userFilters" spellcheck="false"></div></p> <button id="importUserFiltersFromFile" class="custom iconifiable" type="button"><span class="fa">&#xf019;</span><span data-i18n="1pImport"></span></button>
<p> <button id="exportUserFiltersToFile" class="custom iconifiable" type="button"><span class="fa">&#xf093;</span><span data-i18n="1pExport"></span></button>
<button id="importUserFiltersFromFile" class="custom" data-i18n="1pImport"></button>&ensp;
<button id="exportUserFiltersToFile" class="custom" data-i18n="1pExport"></button>
<input id="importFilePicker" type="file" accept="text/plain" class="hiddenFileInput">
</p> </p>
</div>
<div id="userFilters" class="codeMirrorContainer codeMirrorFillVertical" spellcheck="false"></div>
<div class="hidden">
<input id="importFilePicker" type="file" accept="text/plain">
</div>
<script src="lib/codemirror/lib/codemirror.js"></script> <script src="lib/codemirror/lib/codemirror.js"></script>
<script src="lib/codemirror/addon/display/panel.js"></script> <script src="lib/codemirror/addon/display/panel.js"></script>

4
src/3p-filters.html
View File

@ -12,8 +12,8 @@
<body> <body>
<div class="body">
<div id="cloudWidget" class="hide" data-cloud-entry="tpFiltersPane"></div> <div id="cloudWidget" class="hide" data-cloud-entry="tpFiltersPane"></div>
<div> <div>
<ul id="options"> <ul id="options">
<li><button id="buttonUpdate" class="custom important disabled" data-i18n="3pUpdateNow"></button> <li><button id="buttonUpdate" class="custom important disabled" data-i18n="3pUpdateNow"></button>
@ -28,13 +28,13 @@
<p><span id="listsOfBlockedHostsPrompt"></span></p> <p><span id="listsOfBlockedHostsPrompt"></span></p>
<ul id="lists"></ul> <ul id="lists"></ul>
</div> </div>
<div id="externalListsDiv"> <div id="externalListsDiv">
<p> <p>
<span data-i18n="3pExternalListsHint" style="margin: 0 0 0.25em 0; font-size: 13px;"></span> <span data-i18n="3pExternalListsHint" style="margin: 0 0 0.25em 0; font-size: 13px;"></span>
<a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Filter-lists-from-around-the-web" target="_blank">&#xf05a;</a> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Filter-lists-from-around-the-web" target="_blank">&#xf05a;</a>
<textarea id="externalLists" dir="ltr" spellcheck="false"></textarea> <textarea id="externalLists" dir="ltr" spellcheck="false"></textarea>
</div> </div>
</div>
<div id="templates" style="display: none;"> <div id="templates" style="display: none;">
<ul> <ul>

8
src/_locales/en/messages.json
View File

@ -380,8 +380,8 @@
"description":"English: Custom" "description":"English: Custom"
}, },
"3pExternalListsHint":{ "3pExternalListsHint":{
"message":"One URL per line. Lines prefixed with &lsquo;!&rsquo; will be ignored. Invalid URLs will be silently ignored.", "message":"One URL per line. Lines prefixed with <code>!</code> will be ignored. Invalid URLs will be silently ignored.",
"description":"English: One URL per line. Lines prefixed with &lsquo;!&rsquo; will be ignored. Invalid URLs will be silently ignored." "description":"Short information about how to use the textarea to import external filter lists by URL"
}, },
"3pExternalListObsolete":{ "3pExternalListObsolete":{
"message":"Out of date.", "message":"Out of date.",
@ -400,8 +400,8 @@
"description":"used as a tooltip for error icon beside a list" "description":"used as a tooltip for error icon beside a list"
}, },
"1pFormatHint":{ "1pFormatHint":{
"message":"One filter per line. A filter can be a plain hostname, or an Adblock Plus-compatible filter. Lines prefixed with &lsquo;!&rsquo; will be ignored.", "message":"One filter per line. A filter can be a plain hostname, or an Adblock Plus-compatible filter. Lines prefixed with <code>!</code> will be ignored.",
"description":"English: One filter per line. A filter can be a plain hostname, or an Adblock Plus-compatible filter. Lines prefixed with &lsquo;!&rsquo; will be ignored." "description":"Short information about how to create custom filters"
}, },
"1pImport":{ "1pImport":{
"message":"Import and append", "message":"Import and append",

2
src/about.html
View File

@ -10,6 +10,7 @@
<body> <body>
<div class="body">
<p id="aboutNameVer"></p> <p id="aboutNameVer"></p>
<ul> <ul>
<li><a href="https://github.com/gorhill/uBlock/releases" data-i18n="aboutChangelog"></a> <li><a href="https://github.com/gorhill/uBlock/releases" data-i18n="aboutChangelog"></a>
@ -26,6 +27,7 @@
<li><a href="https://codemirror.net/" target="_blank">CodeMirror</a> by <a href="https://github.com/marijnh">Marijn Haverbeke</a> <li><a href="https://codemirror.net/" target="_blank">CodeMirror</a> by <a href="https://github.com/marijnh">Marijn Haverbeke</a>
<li><a href="https://github.com/Swatinem/diff" target="_blank">An implementation of Myers' diff algorithm</a> by <a href="https://github.com/Swatinem">Arpad Borsos</a> <li><a href="https://github.com/Swatinem/diff" target="_blank">An implementation of Myers' diff algorithm</a> by <a href="https://github.com/Swatinem">Arpad Borsos</a>
</ul> </ul>
</div>
<script src="js/vapi.js"></script> <script src="js/vapi.js"></script>
<script src="js/vapi-common.js"></script> <script src="js/vapi-common.js"></script>

4
src/advanced-settings.html
View File

@ -10,10 +10,12 @@
</head> </head>
<body> <body>
<div class="body">
<p><span data-i18n="advancedSettingsWarning"></span> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Advanced-settings" target="_blank">&#xf05a;</a> <p><span data-i18n="advancedSettingsWarning"></span> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Advanced-settings" target="_blank">&#xf05a;</a>
<p> <p>
<button id="advancedSettingsApply" class="custom important" type="button" disabled="true" data-i18n="genericApplyChanges"></button>&ensp; <button id="advancedSettingsApply" class="custom important" type="button" disabled data-i18n="genericApplyChanges"></button>&ensp;
<p><textarea id="advancedSettings" dir="auto" spellcheck="false"></textarea> <p><textarea id="advancedSettings" dir="auto" spellcheck="false"></textarea>
</div>
<script src="js/vapi.js"></script> <script src="js/vapi.js"></script>
<script src="js/vapi-common.js"></script> <script src="js/vapi-common.js"></script>

9
src/css/1p-filters.css
View File

@ -1,11 +1,8 @@
div > p:first-child { body {
margin-top: 0; overflow: hidden;
}
div > p:last-child {
margin-bottom: 0;
} }
#userFilters { #userFilters {
height: 60vh; height: 75vh;
text-align: left; text-align: left;
width: 100%; width: 100%;
word-wrap: normal; word-wrap: normal;

6
src/css/advanced-settings.css
View File

@ -1,9 +1,3 @@
div > p:first-child {
margin-top: 0;
}
div > p:last-child {
margin-bottom: 0;
}
textarea { textarea {
box-sizing: border-box; box-sizing: border-box;
height: 60vh; height: 60vh;

1
src/css/codemirror.css
View File

@ -4,7 +4,6 @@
position: relative; position: relative;
} }
.CodeMirror { .CodeMirror {
border: 1px solid #ddd;
box-sizing: border-box; box-sizing: border-box;
flex-grow: 1; flex-grow: 1;
height: 100%; height: 100%;

48
src/css/common.css
View File

@ -20,6 +20,10 @@ body {
color: black; color: black;
font: 14px sans-serif; font: 14px sans-serif;
} }
code {
background-color: #eee;
padding: 0 0.25em;
}
textarea { textarea {
font-size: 90%; font-size: 90%;
} }
@ -35,8 +39,18 @@ button.custom {
color: #000; color: #000;
opacity: 0.8; opacity: 0.8;
} }
button.custom:hover {
opacity: 1.0;
}
button.custom.important {
border-color: #ffcc7f #ffcc7f hsl(36, 100%, 73%);
background-color: hsl(36, 100%, 75%);
background-image: linear-gradient(#ffdca8, #ffcc7f);
}
button.custom.disabled, button.custom.disabled,
button.custom[disabled] { button.custom[disabled],
button.custom.important.disabled,
button.custom.important[disabled] {
border-color: #ddd #ddd hsl(36, 0%, 85%); border-color: #ddd #ddd hsl(36, 0%, 85%);
background-color: hsl(36, 0%, 72%); background-color: hsl(36, 0%, 72%);
background-image: linear-gradient(#f2f2f2, #dddddd); background-image: linear-gradient(#f2f2f2, #dddddd);
@ -44,25 +58,25 @@ button.custom[disabled] {
opacity: 0.6; opacity: 0.6;
pointer-events: none; pointer-events: none;
} }
button.custom:hover { button.custom.iconifiable > .fa {
opacity: 1.0; padding-right: 0.5em;
} }
button.important { body[dir="rtl"] button.custom.iconifiable > .fa {
padding: 0.6em 1em; padding-left: 0.5em;
border: 1px solid transparent;
border-color: #ffcc7f #ffcc7f hsl(36, 100%, 73%);
border-radius: 3px;
background-color: hsl(36, 100%, 75%);
background-image: linear-gradient(#ffdca8, #ffcc7f);
background-repeat: repeat-x;
color: #222;
opacity: 0.8;
} }
button.important:hover { .hidden {
opacity: 1.0; display: none;
}
.hiddenFileInput {
height: 0; height: 0;
visibility: hidden; visibility: hidden;
width: 0; width: 0;
} }
@media (max-width: 640px) {
button.custom.iconifiable > .fa {
font-size: 150%;
padding: 0;
}
button.custom.iconifiable > [data-i18n] {
display: none;
}
}

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

@ -1,5 +1,15 @@
body { body {
box-sizing: border-box;
left: 0;
height: 100vh;
margin: 0; margin: 0;
overflow: auto;
padding: 0;
position: absolute;
right: 0;
top: 0;
}
body > div.body {
padding: 0 0.5em 0.5em 0.5em; padding: 0 0.5em 0.5em 0.5em;
} }
@media screen and (max-device-width: 960px) { @media screen and (max-device-width: 960px) {
@ -33,12 +43,6 @@ a.info.important {
button { button {
padding: 0.33em; padding: 0.33em;
} }
div > p:first-child {
margin-top: 0;
}
div > p:last-child {
margin-bottom: 0;
}
input[type="number"] { input[type="number"] {
width: 5em; width: 5em;
} }

47
src/css/dyna-rules.css
View File

@ -1,11 +1,7 @@
body { body {
bottom: 0;
display: flex; display: flex;
left: 0;
position: absolute;
right: 0;
top: 0;
flex-direction: column; flex-direction: column;
overflow: hidden;
} }
#diff { #diff {
border: 0; border: 0;
@ -42,53 +38,16 @@ body {
#ruleFilter .fa { #ruleFilter .fa {
color: #888; color: #888;
} }
body[dir="ltr"] #revertButton:after {
content: '\2009\f061';
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
vertical-align: baseline;
display: inline-block;
}
body[dir="rtl"] #revertButton:after {
content: '\2009\f060';
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
vertical-align: baseline;
display: inline-block;
}
body[dir="ltr"] #commitButton:before {
content: '\f060\2009';
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
vertical-align: baseline;
display: inline-block;
}
body[dir="rtl"] #commitButton:before {
content: '\f061\2009';
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
vertical-align: baseline;
display: inline-block;
}
#revertButton, #revertButton,
#commitButton, #commitButton,
#diff.editing #exportButton, #diff.editing #exportButton,
#diff.editing #importButton, #diff.editing #importButton {
#editSaveButton {
opacity: 0.25; opacity: 0.25;
pointer-events: none; pointer-events: none;
} }
#diff.dirty:not(.editing) #revertButton, #diff.dirty:not(.editing) #revertButton,
#diff.dirty:not(.editing) #commitButton, #diff.dirty:not(.editing) #commitButton,
#diff.editing #editSaveButton { #diff.editing {
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
} }

9
src/css/whitelist.css
View File

@ -1,11 +1,8 @@
div > p:first-child { body {
margin-top: 0; overflow: hidden;
}
div > p:last-child {
margin-bottom: 0;
} }
#whitelist { #whitelist {
height: 60vh; height: 75vh;
text-align: left; text-align: left;
width: 100%; width: 100%;
} }

15
src/dyna-rules.html
View File

@ -16,26 +16,27 @@
<body> <body>
<div class="body">
<div id="cloudWidget" class="hide" data-cloud-entry="myRulesPane"></div> <div id="cloudWidget" class="hide" data-cloud-entry="myRulesPane"></div>
<p class="vverbose"><span data-i18n="rulesHint"></span> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Dynamic-filtering:-rule-syntax" target="_blank">&#xf05a;</a></p> <p class="vverbose"><span data-i18n="rulesHint"></span> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Dynamic-filtering:-rule-syntax" target="_blank">&#xf05a;</a></p>
<div id="diff"> <div id="diff">
<div class="tools"> <div class="tools">
<div class="ruleActions"> <div class="ruleActions">
<h3 data-i18n="rulesPermanentHeader"></h3> <h3 data-i18n="rulesPermanentHeader"></h3>
<button type="button" class="custom" id="exportButton" data-i18n="rulesExport"></button> <button type="button" class="custom iconifiable" id="exportButton"><span class="fa">&#xf093;</span><span data-i18n="rulesExport"></span></button>
<button type="button" class="custom" id="revertButton" data-i18n="rulesRevert"></button> <button type="button" class="custom iconifiable" id="revertButton"><span class="fa">&#xf061;</span><span data-i18n="rulesRevert"></span></button>
</div> </div>
<div class="ruleActions"> <div class="ruleActions">
<h3 data-i18n="rulesTemporaryHeader"></h3> <h3 data-i18n="rulesTemporaryHeader"></h3>
<button type="button" class="custom" id="commitButton" data-i18n="rulesCommit"></button> <button type="button" class="custom iconifiable" id="commitButton"><span class="fa">&#xf060;</span><span data-i18n="rulesCommit"></span></button>
<button type="button" class="custom" id="importButton" data-i18n="rulesImport"></button> <button type="button" class="custom iconifiable" id="importButton"><span class="fa">&#xf019;</span><span data-i18n="rulesImport"></span></button>
<button type="button" class="custom" id="editSaveButton" data-i18n="rulesEditSave"></button> <button type="button" class="custom iconifiable important disabled" id="editSaveButton"><span class="fa">&#xf0c7;</span><span data-i18n="rulesEditSave"></span></button>
</div> </div>
<div id="ruleFilter"><span class="fa">&#xf0b0;</span>&ensp;<input type="text" size="20"></div> <div id="ruleFilter"><span class="fa">&#xf0b0;</span>&ensp;<input type="text" size="20"></div>
</div> </div>
<div class="codeMirrorContainer codeMirrorMergeContainer"></div>
</div> </div>
</div>
<div class="codeMirrorContainer codeMirrorMergeContainer codeMirrorFillVertical"></div>
<div id="templates" style="display: none;"> <div id="templates" style="display: none;">
<input class="hidden" id="importFilePicker" type="file" accept="text/plain"> <input class="hidden" id="importFilePicker" type="file" accept="text/plain">

19
src/js/dashboard-common.js
View File

@ -1,7 +1,7 @@
/******************************************************************************* /*******************************************************************************
uBlock Origin - a browser extension to block requests. uBlock Origin - a browser extension to block requests.
Copyright (C) 2014-2016 Raymond Hill Copyright (C) 2014-2018 Raymond Hill
This program is free software: you can redistribute it and/or modify This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by it under the terms of the GNU General Public License as published by
@ -168,7 +168,24 @@ self.uBlockDashboard.patchCodeMirrorEditor = (function() {
grabFocusAsync(cm); grabFocusAsync(cm);
}; };
var resizeTimer;
var resize = function() {
resizeTimer = undefined;
let prect = document.body.getBoundingClientRect();
let child = document.querySelector('.codeMirrorFillVertical');
let crect = child.getBoundingClientRect();
let height = Math.max(prect.bottom - crect.top, 80);
child.style.height = height + 'px';
};
return function(cm) { return function(cm) {
if ( document.querySelector('.codeMirrorFillVertical') !== null ) {
resize();
window.addEventListener('resize', function() {
if ( resizeTimer !== undefined ) { return; }
resizeTimer = vAPI.setTimeout(resize, 66);
});
}
if ( cm.options.inputStyle === 'contenteditable' ) { if ( cm.options.inputStyle === 'contenteditable' ) {
cm.on('beforeSelectionChange', patchSelectAll); cm.on('beforeSelectionChange', patchSelectAll);
} }

4
src/js/dyna-rules.js
View File

@ -327,6 +327,10 @@ var onTextChanged = (function() {
} }
diff.classList.toggle('editing', isClean === false); diff.classList.toggle('editing', isClean === false);
diff.classList.toggle('dirty', mergeView.leftChunks().length !== 0); diff.classList.toggle('dirty', mergeView.leftChunks().length !== 0);
document.getElementById('editSaveButton').classList.toggle(
'disabled',
isClean
);
var input = document.querySelector('#ruleFilter input'); var input = document.querySelector('#ruleFilter input');
if ( isClean ) { if ( isClean ) {
input.removeAttribute('disabled'); input.removeAttribute('disabled');

3
src/settings.html
View File

@ -10,7 +10,7 @@
</head> </head>
<body> <body>
<div class="body">
<ul id="userSettings"> <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="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="icon-badge" type="checkbox" data-setting-name="showIconBadge" data-setting-type="bool"><label data-i18n="settingsIconBadgePrompt" for="icon-badge"></label>
@ -54,6 +54,7 @@
<p> <p>
<p><button class="custom" type="button" id="reset" data-i18n="aboutResetDataButton"></button> <p><button class="custom" type="button" id="reset" data-i18n="aboutResetDataButton"></button>
</div> </div>
</div>
<script src="js/vapi.js"></script> <script src="js/vapi.js"></script>
<script src="js/vapi-common.js"></script> <script src="js/vapi-common.js"></script>

21
src/whitelist.html
View File

@ -17,17 +17,24 @@
<body> <body>
<div class="body">
<div id="cloudWidget" class="hide" data-cloud-entry="whitelistPane"></div> <div id="cloudWidget" class="hide" data-cloud-entry="whitelistPane"></div>
<p class="vverbose"><span data-i18n="whitelistPrompt"></span> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Whitelist">&#xf05a;</a> <p class="vverbose"><span data-i18n="whitelistPrompt"></span> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Whitelist">&#xf05a;</a>
</p>
<p> <p>
<button id="whitelistApply" class="custom important" type="button" disabled="true" data-i18n="whitelistApply"></button>&ensp; <button id="whitelistApply" class="custom important iconifiable" type="button" disabled><span class="fa">&#xf00c;</span><span data-i18n="whitelistApply"></span></button>
<button id="whitelistRevert" class="custom" type="button" disabled="true" data-i18n="genericRevert"></button> <button id="whitelistRevert" class="custom iconifiable" type="button" disabled><span class="fa">&#xf0e2;</span><span data-i18n="genericRevert"></span></button>
<p><div id="whitelist" class="codeMirrorContainer"></div> &emsp;&emsp;
<p> <button id="importWhitelistFromFile" class="custom iconifiable" type="button"><span class="fa">&#xf019;</span><span data-i18n="whitelistImport"></span></button>
<button id="importWhitelistFromFile" class="custom" data-i18n="whitelistImport"></button>&ensp; <button id="exportWhitelistToFile" class="custom iconifiable" type="button"><span class="fa">&#xf093;</span><span data-i18n="whitelistExport"></span></button>
<button id="exportWhitelistToFile" class="custom" data-i18n="whitelistExport"></button> </p>
<input id="importFilePicker" type="file" accept="text/plain" class="hiddenFileInput"> </div>
<div id="whitelist" class="codeMirrorContainer codeMirrorFillVertical"></div>
<div class="hidden">
<input id="importFilePicker" type="file" accept="text/plain">
</div>
<script src="lib/codemirror/lib/codemirror.js"></script> <script src="lib/codemirror/lib/codemirror.js"></script>
<script src="lib/codemirror/addon/display/panel.js"></script> <script src="lib/codemirror/addon/display/panel.js"></script>