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>
<div class="body">
<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>
<button id="userFiltersApply" class="custom important" type="button" disabled="true" data-i18n="1pApplyChanges"></button>&ensp;
<button id="userFiltersRevert" class="custom" type="button" disabled="true" data-i18n="genericRevert"></button>
</p>
<p><div class="codeMirrorContainer" id="userFilters" spellcheck="false"></div></p>
<p>
<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">
<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 iconifiable" type="button" disabled><span class="fa">&#xf0e2;</span><span data-i18n="genericRevert"></span></button>
&emsp;&emsp;
<button id="importUserFiltersFromFile" class="custom iconifiable" type="button"><span class="fa">&#xf019;</span><span data-i18n="1pImport"></span></button>
<button id="exportUserFiltersToFile" class="custom iconifiable" type="button"><span class="fa">&#xf093;</span><span data-i18n="1pExport"></span></button>
</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/addon/display/panel.js"></script>

4
src/3p-filters.html
View File

@ -12,8 +12,8 @@
<body>
<div class="body">
<div id="cloudWidget" class="hide" data-cloud-entry="tpFiltersPane"></div>
<div>
<ul id="options">
<li><button id="buttonUpdate" class="custom important disabled" data-i18n="3pUpdateNow"></button>
@ -28,13 +28,13 @@
<p><span id="listsOfBlockedHostsPrompt"></span></p>
<ul id="lists"></ul>
</div>
<div id="externalListsDiv">
<p>
<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>
<textarea id="externalLists" dir="ltr" spellcheck="false"></textarea>
</div>
</div>
<div id="templates" style="display: none;">
<ul>

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

@ -380,8 +380,8 @@
"description":"English: Custom"
},
"3pExternalListsHint":{
"message":"One URL per line. Lines prefixed with &lsquo;!&rsquo; 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."
"message":"One URL per line. Lines prefixed with <code>!</code> 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":{
"message":"Out of date.",
@ -400,8 +400,8 @@
"description":"used as a tooltip for error icon beside a list"
},
"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.",
"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."
"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":"Short information about how to create custom filters"
},
"1pImport":{
"message":"Import and append",

2
src/about.html
View File

@ -10,6 +10,7 @@
<body>
<div class="body">
<p id="aboutNameVer"></p>
<ul>
<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://github.com/Swatinem/diff" target="_blank">An implementation of Myers' diff algorithm</a> by <a href="https://github.com/Swatinem">Arpad Borsos</a>
</ul>
</div>
<script src="js/vapi.js"></script>
<script src="js/vapi-common.js"></script>

4
src/advanced-settings.html
View File

@ -10,10 +10,12 @@
</head>
<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>
<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>
</div>
<script src="js/vapi.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 {
margin-top: 0;
}
div > p:last-child {
margin-bottom: 0;
body {
overflow: hidden;
}
#userFilters {
height: 60vh;
height: 75vh;
text-align: left;
width: 100%;
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 {
box-sizing: border-box;
height: 60vh;

1
src/css/codemirror.css
View File

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

48
src/css/common.css
View File

@ -20,6 +20,10 @@ body {
color: black;
font: 14px sans-serif;
}
code {
background-color: #eee;
padding: 0 0.25em;
}
textarea {
font-size: 90%;
}
@ -35,8 +39,18 @@ button.custom {
color: #000;
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.important.disabled,
button.custom.important[disabled] {
border-color: #ddd #ddd hsl(36, 0%, 85%);
background-color: hsl(36, 0%, 72%);
background-image: linear-gradient(#f2f2f2, #dddddd);
@ -44,25 +58,25 @@ button.custom[disabled] {
opacity: 0.6;
pointer-events: none;
}
button.custom:hover {
opacity: 1.0;
button.custom.iconifiable > .fa {
padding-right: 0.5em;
}
button.important {
padding: 0.6em 1em;
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;
body[dir="rtl"] button.custom.iconifiable > .fa {
padding-left: 0.5em;
}
button.important:hover {
opacity: 1.0;
}
.hiddenFileInput {
.hidden {
display: none;
height: 0;
visibility: hidden;
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 {
box-sizing: border-box;
left: 0;
height: 100vh;
margin: 0;
overflow: auto;
padding: 0;
position: absolute;
right: 0;
top: 0;
}
body > div.body {
padding: 0 0.5em 0.5em 0.5em;
}
@media screen and (max-device-width: 960px) {
@ -33,12 +43,6 @@ a.info.important {
button {
padding: 0.33em;
}
div > p:first-child {
margin-top: 0;
}
div > p:last-child {
margin-bottom: 0;
}
input[type="number"] {
width: 5em;
}

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

@ -1,11 +1,7 @@
body {
bottom: 0;
display: flex;
left: 0;
position: absolute;
right: 0;
top: 0;
flex-direction: column;
overflow: hidden;
}
#diff {
border: 0;
@ -42,53 +38,16 @@ body {
#ruleFilter .fa {
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,
#commitButton,
#diff.editing #exportButton,
#diff.editing #importButton,
#editSaveButton {
#diff.editing #importButton {
opacity: 0.25;
pointer-events: none;
}
#diff.dirty:not(.editing) #revertButton,
#diff.dirty:not(.editing) #commitButton,
#diff.editing #editSaveButton {
#diff.editing {
opacity: 1;
pointer-events: auto;
}

9
src/css/whitelist.css
View File

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

15
src/dyna-rules.html
View File

@ -16,26 +16,27 @@
<body>
<div class="body">
<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>
<div id="diff">
<div class="tools">
<div class="ruleActions">
<h3 data-i18n="rulesPermanentHeader"></h3>
<button type="button" class="custom" id="exportButton" data-i18n="rulesExport"></button>
<button type="button" class="custom" id="revertButton" data-i18n="rulesRevert"></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 iconifiable" id="revertButton"><span class="fa">&#xf061;</span><span data-i18n="rulesRevert"></span></button>
</div>
<div class="ruleActions">
<h3 data-i18n="rulesTemporaryHeader"></h3>
<button type="button" class="custom" id="commitButton" data-i18n="rulesCommit"></button>
<button type="button" class="custom" id="importButton" data-i18n="rulesImport"></button>
<button type="button" class="custom" id="editSaveButton" data-i18n="rulesEditSave"></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 iconifiable" id="importButton"><span class="fa">&#xf019;</span><span data-i18n="rulesImport"></span></button>
<button type="button" class="custom iconifiable important disabled" id="editSaveButton"><span class="fa">&#xf0c7;</span><span data-i18n="rulesEditSave"></span></button>
</div>
<div id="ruleFilter"><span class="fa">&#xf0b0;</span>&ensp;<input type="text" size="20"></div>
</div>
<div class="codeMirrorContainer codeMirrorMergeContainer"></div>
</div>
</div>
<div class="codeMirrorContainer codeMirrorMergeContainer codeMirrorFillVertical"></div>
<div id="templates" style="display: none;">
<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.
Copyright (C) 2014-2016 Raymond Hill
Copyright (C) 2014-2018 Raymond Hill
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
@ -168,7 +168,24 @@ self.uBlockDashboard.patchCodeMirrorEditor = (function() {
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) {
if ( document.querySelector('.codeMirrorFillVertical') !== null ) {
resize();
window.addEventListener('resize', function() {
if ( resizeTimer !== undefined ) { return; }
resizeTimer = vAPI.setTimeout(resize, 66);
});
}
if ( cm.options.inputStyle === 'contenteditable' ) {
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('dirty', mergeView.leftChunks().length !== 0);
document.getElementById('editSaveButton').classList.toggle(
'disabled',
isClean
);
var input = document.querySelector('#ruleFilter input');
if ( isClean ) {
input.removeAttribute('disabled');

3
src/settings.html
View File

@ -10,7 +10,7 @@
</head>
<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>
@ -54,6 +54,7 @@
<p>
<p><button class="custom" type="button" id="reset" data-i18n="aboutResetDataButton"></button>
</div>
</div>
<script src="js/vapi.js"></script>
<script src="js/vapi-common.js"></script>

21
src/whitelist.html
View File

@ -17,17 +17,24 @@
<body>
<div class="body">
<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>
<p>
<button id="whitelistApply" class="custom important" type="button" disabled="true" data-i18n="whitelistApply"></button>&ensp;
<button id="whitelistRevert" class="custom" type="button" disabled="true" data-i18n="genericRevert"></button>
<p><div id="whitelist" class="codeMirrorContainer"></div>
<p>
<button id="importWhitelistFromFile" class="custom" data-i18n="whitelistImport"></button>&ensp;
<button id="exportWhitelistToFile" class="custom" data-i18n="whitelistExport"></button>
<input id="importFilePicker" type="file" accept="text/plain" class="hiddenFileInput">
<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 iconifiable" type="button" disabled><span class="fa">&#xf0e2;</span><span data-i18n="genericRevert"></span></button>
&emsp;&emsp;
<button id="importWhitelistFromFile" class="custom iconifiable" type="button"><span class="fa">&#xf019;</span><span data-i18n="whitelistImport"></span></button>
<button id="exportWhitelistToFile" class="custom iconifiable" type="button"><span class="fa">&#xf093;</span><span data-i18n="whitelistExport"></span></button>
</p>
</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/addon/display/panel.js"></script>