mirror of
https://github.com/gorhill/uBlock.git
synced 2024-10-06 09:37:12 +02:00
Move "Quit" button to top bar in element picker
Additionally: - Removed auto fade out of dialog when mouse does not hover the dialog. - Added a minimize/maximize button in top bar Related issue: - https://github.com/uBlockOrigin/uBlock-issues/issues/55
This commit is contained in:
parent
a0a6ae0d0c
commit
6266c4718d
@ -13,7 +13,6 @@ html#ublock0-epicker,
|
|||||||
#ublock0-epicker aside {
|
#ublock0-epicker aside {
|
||||||
background-color: var(--surface-1);
|
background-color: var(--surface-1);
|
||||||
border: 1px solid var(--border-2);
|
border: 1px solid var(--border-2);
|
||||||
bottom: 2px;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
display: none;
|
display: none;
|
||||||
@ -22,14 +21,21 @@ html#ublock0-epicker,
|
|||||||
min-width: min(24rem, 100vw - 4px);
|
min-width: min(24rem, 100vw - 4px);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 2px;
|
|
||||||
width: min(32rem, 100vw - 4px);
|
width: min(32rem, 100vw - 4px);
|
||||||
}
|
}
|
||||||
#ublock0-epicker.paused:not(.zap) aside {
|
#ublock0-epicker.paused:not(.zap) aside {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
#ublock0-epicker.minimized aside {
|
||||||
|
min-width: min(16rem, 100vw - 4px);
|
||||||
|
overflow: hidden;
|
||||||
|
width: min(16rem, 100vw - 4px);
|
||||||
|
}
|
||||||
|
#ublock0-epicker.minimized aside > *:not(#windowbar) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
#ublock0-epicker aside > *:not(:first-child) {
|
#ublock0-epicker aside > *:not(:first-child) {
|
||||||
padding: 2px;
|
padding: 0 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#ublock0-epicker #toolbar {
|
#ublock0-epicker #toolbar {
|
||||||
@ -43,16 +49,6 @@ html#ublock0-epicker,
|
|||||||
background-color: var(--button-preferred-surface);
|
background-color: var(--button-preferred-surface);
|
||||||
color: var(--button-preferred-ink);
|
color: var(--button-preferred-ink);
|
||||||
}
|
}
|
||||||
#ublock0-epicker #move {
|
|
||||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAFElEQVQI12NgwAfKy8v/M5ANYLoBshgEyQo6H9UAAAAASUVORK5CYII=');
|
|
||||||
cursor: grab;
|
|
||||||
height: 1.5rem;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
#ublock0-epicker aside.moving #move {
|
|
||||||
cursor: grabbing;
|
|
||||||
}
|
|
||||||
#ublock0-epicker section {
|
#ublock0-epicker section {
|
||||||
border: 0;
|
border: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@ -129,8 +125,8 @@ html#ublock0-epicker,
|
|||||||
);
|
);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
height: 16px;
|
height: 20px;
|
||||||
width: 16px;
|
width: 20px;
|
||||||
}
|
}
|
||||||
.resultsetModifier > span > span:nth-of-type(3) {
|
.resultsetModifier > span > span:nth-of-type(3) {
|
||||||
background-color: var(--surface-3);
|
background-color: var(--surface-3);
|
||||||
@ -174,7 +170,7 @@ html#ublock0-epicker,
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
#ublock0-epicker #candidateFilters {
|
#ublock0-epicker #candidateFilters {
|
||||||
max-height: min(14em, 20vh);
|
max-height: min(12em, 18vh);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
#ublock0-epicker .changeFilter > li > span:nth-of-type(1) {
|
#ublock0-epicker .changeFilter > li > span:nth-of-type(1) {
|
||||||
@ -211,32 +207,12 @@ html#ublock0-epicker,
|
|||||||
https://github.com/gorhill/uBlock/issues/3449
|
https://github.com/gorhill/uBlock/issues/3449
|
||||||
https://github.com/uBlockOrigin/uBlock-issues/issues/55
|
https://github.com/uBlockOrigin/uBlock-issues/issues/55
|
||||||
**/
|
**/
|
||||||
@keyframes startDialog {
|
|
||||||
0% { opacity: 1.0; }
|
|
||||||
60% { opacity: 1.0; }
|
|
||||||
100% { opacity: 0.1; }
|
|
||||||
}
|
|
||||||
#ublock0-epicker.paused aside {
|
#ublock0-epicker.paused aside {
|
||||||
opacity: 0.1;
|
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
#ublock0-epicker.paused:not(.show):not(.hide) aside:not(:hover) {
|
|
||||||
animation-duration: 1.6s;
|
|
||||||
animation-name: startDialog;
|
|
||||||
animation-timing-function: linear;
|
|
||||||
}
|
|
||||||
#ublock0-epicker.paused aside:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
#ublock0-epicker.paused.show aside {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
#ublock0-epicker.paused.hide aside {
|
|
||||||
opacity: 0.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#ublock0-epicker svg {
|
#ublock0-epicker svg#sea {
|
||||||
cursor: crosshair;
|
cursor: crosshair;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -245,26 +221,62 @@ html#ublock0-epicker,
|
|||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
#ublock0-epicker.paused svg {
|
#ublock0-epicker.paused svg#sea {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
#ublock0-epicker svg > path:first-child {
|
#ublock0-epicker svg#sea > path:first-child {
|
||||||
fill: rgba(0,0,0,0.5);
|
fill: rgba(0,0,0,0.5);
|
||||||
fill-rule: evenodd;
|
fill-rule: evenodd;
|
||||||
}
|
}
|
||||||
#ublock0-epicker svg > path + path {
|
#ublock0-epicker svg#sea > path + path {
|
||||||
stroke: #F00;
|
stroke: #F00;
|
||||||
stroke-width: 0.5px;
|
stroke-width: 0.5px;
|
||||||
fill: rgba(255,63,63,0.20);
|
fill: rgba(255,63,63,0.20);
|
||||||
}
|
}
|
||||||
#ublock0-epicker.zap svg > path + path {
|
#ublock0-epicker.zap svg#sea > path + path {
|
||||||
stroke: #FF0;
|
stroke: #FF0;
|
||||||
stroke-width: 0.5px;
|
stroke-width: 0.5px;
|
||||||
fill: rgba(255,255,63,0.20);
|
fill: rgba(255,255,63,0.20);
|
||||||
}
|
}
|
||||||
#ublock0-epicker.preview svg > path {
|
#ublock0-epicker.preview svg#sea > path {
|
||||||
fill: rgba(0,0,0,0.10);
|
fill: rgba(0,0,0,0.10);
|
||||||
}
|
}
|
||||||
#ublock0-epicker.preview svg > path + path {
|
#ublock0-epicker.preview svg#sea > path + path {
|
||||||
stroke: none;
|
stroke: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#ublock0-epicker #windowbar {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
#ublock0-epicker #windowbar svg {
|
||||||
|
fill: none;
|
||||||
|
pointer-events: none;
|
||||||
|
stroke: var(--ink-1);
|
||||||
|
stroke-width: 3px;
|
||||||
|
}
|
||||||
|
#ublock0-epicker #windowbar #move {
|
||||||
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAFElEQVQI12NgwAfKy8v/M5ANYLoBshgEyQo6H9UAAAAASUVORK5CYII=');
|
||||||
|
cursor: grab;
|
||||||
|
flex-grow: 1;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
#ublock0-epicker aside.moving #windowbar #move {
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
|
#windowbar #quit,
|
||||||
|
#windowbar #minimize {
|
||||||
|
height: 2em;
|
||||||
|
width: 2em;
|
||||||
|
}
|
||||||
|
#windowbar #quit:hover,
|
||||||
|
#windowbar #minimize:hover {
|
||||||
|
background-color: var(--surface-2)
|
||||||
|
}
|
||||||
|
html.minimized #windowbar #minimize svg > path,
|
||||||
|
#windowbar #minimize svg > rect {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
html.minimized #windowbar #minimize svg > rect {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
@ -28,6 +28,7 @@ import './codemirror/ubo-static-filtering.js';
|
|||||||
import { hostnameFromURI } from './uri-utils.js';
|
import { hostnameFromURI } from './uri-utils.js';
|
||||||
import punycode from '../lib/punycode.js';
|
import punycode from '../lib/punycode.js';
|
||||||
import * as sfp from './static-filtering-parser.js';
|
import * as sfp from './static-filtering-parser.js';
|
||||||
|
import { dom } from './dom.js';
|
||||||
|
|
||||||
/******************************************************************************/
|
/******************************************************************************/
|
||||||
/******************************************************************************/
|
/******************************************************************************/
|
||||||
@ -46,7 +47,7 @@ const pickerRoot = document.documentElement;
|
|||||||
const dialog = $stor('aside');
|
const dialog = $stor('aside');
|
||||||
let staticFilteringParser;
|
let staticFilteringParser;
|
||||||
|
|
||||||
const svgRoot = $stor('svg');
|
const svgRoot = $stor('svg#sea');
|
||||||
const svgOcean = svgRoot.children[0];
|
const svgOcean = svgRoot.children[0];
|
||||||
const svgIslands = svgRoot.children[1];
|
const svgIslands = svgRoot.children[1];
|
||||||
const NoPaths = 'M0 0';
|
const NoPaths = 'M0 0';
|
||||||
@ -594,8 +595,9 @@ const onStartMoving = (( ) => {
|
|||||||
let isTouch = false;
|
let isTouch = false;
|
||||||
let mx0 = 0, my0 = 0;
|
let mx0 = 0, my0 = 0;
|
||||||
let mx1 = 0, my1 = 0;
|
let mx1 = 0, my1 = 0;
|
||||||
let r0 = 0, b0 = 0;
|
let pw = 0, ph = 0;
|
||||||
let rMax = 0, bMax = 0;
|
let dw = 0, dh = 0;
|
||||||
|
let cx0 = 0, cy0 = 0;
|
||||||
let timer;
|
let timer;
|
||||||
|
|
||||||
const eatEvent = function(ev) {
|
const eatEvent = function(ev) {
|
||||||
@ -605,10 +607,22 @@ const onStartMoving = (( ) => {
|
|||||||
|
|
||||||
const move = ( ) => {
|
const move = ( ) => {
|
||||||
timer = undefined;
|
timer = undefined;
|
||||||
const r1 = Math.min(Math.max(r0 - mx1 + mx0, 2), rMax);
|
const cx1 = cx0 + mx1 - mx0;
|
||||||
const b1 = Math.min(Math.max(b0 - my1 + my0, 2), bMax);
|
const cy1 = cy0 + my1 - my0;
|
||||||
dialog.style.setProperty('right', `${r1}px`);
|
if ( cx1 < pw / 2 ) {
|
||||||
dialog.style.setProperty('bottom', `${b1}px`);
|
dialog.style.setProperty('left', `${Math.max(cx1-dw/2,2)}px`);
|
||||||
|
dialog.style.removeProperty('right');
|
||||||
|
} else {
|
||||||
|
dialog.style.removeProperty('left');
|
||||||
|
dialog.style.setProperty('right', `${Math.max(pw-cx1-dw/2,2)}px`);
|
||||||
|
}
|
||||||
|
if ( cy1 < ph / 2 ) {
|
||||||
|
dialog.style.setProperty('top', `${Math.max(cy1-dh/2,2)}px`);
|
||||||
|
dialog.style.removeProperty('bottom');
|
||||||
|
} else {
|
||||||
|
dialog.style.removeProperty('top');
|
||||||
|
dialog.style.setProperty('bottom', `${Math.max(ph-cy1-dh/2,2)}px`);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const moveAsync = ev => {
|
const moveAsync = ev => {
|
||||||
@ -635,7 +649,7 @@ const onStartMoving = (( ) => {
|
|||||||
eatEvent(ev);
|
eatEvent(ev);
|
||||||
};
|
};
|
||||||
|
|
||||||
return function(ev) {
|
return ev => {
|
||||||
const target = dialog.querySelector('#move');
|
const target = dialog.querySelector('#move');
|
||||||
if ( ev.target !== target ) { return; }
|
if ( ev.target !== target ) { return; }
|
||||||
if ( dialog.classList.contains('moving') ) { return; }
|
if ( dialog.classList.contains('moving') ) { return; }
|
||||||
@ -648,12 +662,13 @@ const onStartMoving = (( ) => {
|
|||||||
mx0 = ev.pageX;
|
mx0 = ev.pageX;
|
||||||
my0 = ev.pageY;
|
my0 = ev.pageY;
|
||||||
}
|
}
|
||||||
const style = self.getComputedStyle(dialog);
|
|
||||||
r0 = parseInt(style.right, 10);
|
|
||||||
b0 = parseInt(style.bottom, 10);
|
|
||||||
const rect = dialog.getBoundingClientRect();
|
const rect = dialog.getBoundingClientRect();
|
||||||
rMax = pickerRoot.clientWidth - 2 - rect.width ;
|
dw = rect.width;
|
||||||
bMax = pickerRoot.clientHeight - 2 - rect.height;
|
dh = rect.height;
|
||||||
|
cx0 = rect.x + dw / 2;
|
||||||
|
cy0 = rect.y + dh / 2;
|
||||||
|
pw = pickerRoot.clientWidth;
|
||||||
|
ph = pickerRoot.clientHeight;
|
||||||
dialog.classList.add('moving');
|
dialog.classList.add('moving');
|
||||||
if ( isTouch ) {
|
if ( isTouch ) {
|
||||||
self.addEventListener('touchmove', moveAsync, { capture: true });
|
self.addEventListener('touchmove', moveAsync, { capture: true });
|
||||||
@ -806,7 +821,7 @@ const unpausePicker = function() {
|
|||||||
|
|
||||||
const startPicker = function() {
|
const startPicker = function() {
|
||||||
self.addEventListener('keydown', onKeyPressed, true);
|
self.addEventListener('keydown', onKeyPressed, true);
|
||||||
const svg = $stor('svg');
|
const svg = $stor('svg#sea');
|
||||||
svg.addEventListener('click', onSvgClicked);
|
svg.addEventListener('click', onSvgClicked);
|
||||||
svg.addEventListener('touchstart', onSvgTouch);
|
svg.addEventListener('touchstart', onSvgTouch);
|
||||||
svg.addEventListener('touchend', onSvgTouch);
|
svg.addEventListener('touchend', onSvgTouch);
|
||||||
@ -820,6 +835,9 @@ const startPicker = function() {
|
|||||||
$id('preview').addEventListener('click', onPreviewClicked);
|
$id('preview').addEventListener('click', onPreviewClicked);
|
||||||
$id('create').addEventListener('click', onCreateClicked);
|
$id('create').addEventListener('click', onCreateClicked);
|
||||||
$id('pick').addEventListener('click', onPickClicked);
|
$id('pick').addEventListener('click', onPickClicked);
|
||||||
|
$id('minimize').addEventListener('click', ( ) => {
|
||||||
|
dom.cl.toggle(dom.html, 'minimized');
|
||||||
|
});
|
||||||
$id('quit').addEventListener('click', onQuitClicked);
|
$id('quit').addEventListener('click', onQuitClicked);
|
||||||
$id('move').addEventListener('mousedown', onStartMoving);
|
$id('move').addEventListener('mousedown', onStartMoving);
|
||||||
$id('move').addEventListener('touchstart', onStartMoving);
|
$id('move').addEventListener('touchstart', onStartMoving);
|
||||||
|
@ -15,8 +15,8 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<aside>
|
<aside style="right: 2px; bottom: 2px;">
|
||||||
<div id="move"></div>
|
<div id="windowbar"><div id="minimize"><svg viewBox="0 0 64 64"><path d="M 16,48 H 48" /><rect x="16" y="16" height="32" width="32" /></div><div id="move"></div><div id="quit" data-i18n-title="pickerQuit"><svg viewBox="0 0 64 64"><path d="M16 16L48 48M16 48L48 16" /></div></div>
|
||||||
<section>
|
<section>
|
||||||
<div>
|
<div>
|
||||||
<div class="codeMirrorContainer codeMirrorBreakAll cm-theme-override"></div>
|
<div class="codeMirrorContainer codeMirrorBreakAll cm-theme-override"></div>
|
||||||
@ -35,14 +35,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="toolbar">
|
<div id="toolbar">
|
||||||
<div>
|
<button id="pick" type="button" data-i18n="pickerPick">_<span class="hover"></span></button>
|
||||||
<button id="preview" type="button" data-i18n="pickerPreview">_<span class="hover"></span></button>
|
<button id="preview" type="button" data-i18n="pickerPreview">_<span class="hover"></span></button>
|
||||||
</div>
|
<button id="create" type="button" class="preferred" disabled data-i18n="pickerCreate">_<span class="hover"></span></button>
|
||||||
<div>
|
|
||||||
<button id="create" type="button" class="preferred" disabled data-i18n="pickerCreate">_<span class="hover"></span></button>
|
|
||||||
<button id="pick" type="button" data-i18n="pickerPick">_<span class="hover"></span></button>
|
|
||||||
<button id="quit" type="button" data-i18n="pickerQuit">_<span class="hover"></span></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<ul id="candidateFilters">
|
<ul id="candidateFilters">
|
||||||
@ -56,7 +51,7 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</aside>
|
</aside>
|
||||||
<svg><path d></path><path d></path></svg>
|
<svg id="sea"><path d></path><path d></path></svg>
|
||||||
|
|
||||||
<script src="../lib/codemirror/lib/codemirror.js"></script>
|
<script src="../lib/codemirror/lib/codemirror.js"></script>
|
||||||
<script src="../lib/codemirror/addon/edit/closebrackets.js"></script>
|
<script src="../lib/codemirror/addon/edit/closebrackets.js"></script>
|
||||||
|
Loading…
Reference in New Issue
Block a user