1
0
mirror of https://github.com/gorhill/uBlock.git synced 2024-10-06 09:37:12 +02:00

various changes to enhance UI for mobile devices

This commit is contained in:
Raymond Hill 2018-03-28 09:11:55 -04:00
parent 25512b981c
commit f764435812
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
12 changed files with 69 additions and 21 deletions

View File

@ -19,7 +19,7 @@
<div id="cloudWidget" class="hide" data-cloud-entry="myFiltersPane"></div>
<p><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>
<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>

View File

@ -1,6 +1,6 @@
{
"extName":{
"message":"uBlock",
"message":"uBlock Origin",
"description":"extension name."
},
"extShortDesc":{

View File

@ -39,6 +39,7 @@ body {
<script src="js/vapi-common.js"></script>
<script src="js/vapi-client.js"></script>
<script src="js/udom.js"></script>
<script src="js/dashboard-common.js"></script>
<script src="js/asset-viewer.js"></script>
</body>

View File

@ -90,3 +90,8 @@ input[type="checkbox"][disabled] + label {
padding: 5px;
background-color: #FEDAE0;
}
@media (max-height: 640px) {
.vverbose {
display: none !important;
}
}

View File

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

View File

@ -29,6 +29,7 @@ body {
text-align: center;
vertical-align: top;
width: 50%;
white-space: normal;
}
#diff .ruleActions h3 {
font-weight: normal;

View File

@ -12,7 +12,7 @@
<body>
<div id="dashboard-nav">
<div id="dashboard-nav-widgets">
<span data-i18n="extName"></span><!--
<span class="hverbose" 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><!--

View File

@ -18,7 +18,7 @@
<div id="cloudWidget" class="hide" data-cloud-entry="myRulesPane"></div>
<p><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 class="tools">
<div class="ruleActions">
@ -32,7 +32,7 @@
<button type="button" class="custom" id="importButton" data-i18n="rulesImport"></button>
<button type="button" class="custom" id="editSaveButton" data-i18n="rulesEditSave"></button>
</div>
<div id="ruleFilter"><span class="fa">&#xf0b0;</span>&ensp;<input type="text" size="32"></div>
<div id="ruleFilter"><span class="fa">&#xf0b0;</span>&ensp;<input type="text" size="20"></div>
</div>
<div class="codeMirrorContainer codeMirrorMergeContainer"></div>
</div>

View File

@ -53,4 +53,5 @@
}
);
uBlockDashboard.patchCodeMirrorEditor(cmEditor);
})();

View File

@ -55,7 +55,7 @@
'<div class="cm-search-widget">' +
'<span class="fa">&#xf002;</span>&ensp;' +
'<span>' +
'<input type="text" size="32">' +
'<input type="text" size="20">' +
'<span class="cm-search-widget-count">' +
'<span><!-- future use --></span><span>0</span>' +
'</span>' +

View File

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

View File

@ -19,7 +19,7 @@
<div id="cloudWidget" class="hide" data-cloud-entry="whitelistPane"></div>
<p><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>
<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>