mirror of
https://github.com/gorhill/uBlock.git
synced 2024-11-05 10:22:30 +01: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:
Raymond Hill
parent
a0a6ae0d0c
commit
6266c4718d
@ -13,7 +13,6 @@ html#ublock0-epicker,
|
||||
#ublock0-epicker aside {
|
||||
background-color: var(--surface-1);
|
||||
border: 1px solid var(--border-2);
|
||||
bottom: 2px;
|
||||
box-sizing: border-box;
|
||||
cursor: default;
|
||||
display: none;
|
||||
@ -22,14 +21,21 @@ html#ublock0-epicker,
|
||||
min-width: min(24rem, 100vw - 4px);
|
||||
overflow-y: auto;
|
||||
position: fixed;
|
||||
right: 2px;
|
||||
width: min(32rem, 100vw - 4px);
|
||||
}
|
||||
#ublock0-epicker.paused:not(.zap) aside {
|
||||
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) {
|
||||
padding: 2px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
#ublock0-epicker #toolbar {
|
||||
@ -43,16 +49,6 @@ html#ublock0-epicker,
|
||||
background-color: var(--button-preferred-surface);
|
||||
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 {
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
@ -129,8 +125,8 @@ html#ublock0-epicker,
|
||||
);
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
.resultsetModifier > span > span:nth-of-type(3) {
|
||||
background-color: var(--surface-3);
|
||||
@ -174,7 +170,7 @@ html#ublock0-epicker,
|
||||
overflow: hidden;
|
||||
}
|
||||
#ublock0-epicker #candidateFilters {
|
||||
max-height: min(14em, 20vh);
|
||||
max-height: min(12em, 18vh);
|
||||
overflow-y: auto;
|
||||
}
|
||||
#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/uBlockOrigin/uBlock-issues/issues/55
|
||||
**/
|
||||
@keyframes startDialog {
|
||||
0% { opacity: 1.0; }
|
||||
60% { opacity: 1.0; }
|
||||
100% { opacity: 0.1; }
|
||||
}
|
||||
#ublock0-epicker.paused aside {
|
||||
opacity: 0.1;
|
||||
visibility: visible;
|
||||
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;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
@ -245,26 +221,62 @@ html#ublock0-epicker,
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
#ublock0-epicker.paused svg {
|
||||
#ublock0-epicker.paused svg#sea {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
#ublock0-epicker svg > path:first-child {
|
||||
#ublock0-epicker svg#sea > path:first-child {
|
||||
fill: rgba(0,0,0,0.5);
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
#ublock0-epicker svg > path + path {
|
||||
#ublock0-epicker svg#sea > path + path {
|
||||
stroke: #F00;
|
||||
stroke-width: 0.5px;
|
||||
fill: rgba(255,63,63,0.20);
|
||||
}
|
||||
#ublock0-epicker.zap svg > path + path {
|
||||
#ublock0-epicker.zap svg#sea > path + path {
|
||||
stroke: #FF0;
|
||||
stroke-width: 0.5px;
|
||||
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);
|
||||
}
|
||||
#ublock0-epicker.preview svg > path + path {
|
||||
#ublock0-epicker.preview svg#sea > path + path {
|
||||
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 punycode from '../lib/punycode.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');
|
||||
let staticFilteringParser;
|
||||
|
||||
const svgRoot = $stor('svg');
|
||||
const svgRoot = $stor('svg#sea');
|
||||
const svgOcean = svgRoot.children[0];
|
||||
const svgIslands = svgRoot.children[1];
|
||||
const NoPaths = 'M0 0';
|
||||
@ -594,8 +595,9 @@ const onStartMoving = (( ) => {
|
||||
let isTouch = false;
|
||||
let mx0 = 0, my0 = 0;
|
||||
let mx1 = 0, my1 = 0;
|
||||
let r0 = 0, b0 = 0;
|
||||
let rMax = 0, bMax = 0;
|
||||
let pw = 0, ph = 0;
|
||||
let dw = 0, dh = 0;
|
||||
let cx0 = 0, cy0 = 0;
|
||||
let timer;
|
||||
|
||||
const eatEvent = function(ev) {
|
||||
@ -605,10 +607,22 @@ const onStartMoving = (( ) => {
|
||||
|
||||
const move = ( ) => {
|
||||
timer = undefined;
|
||||
const r1 = Math.min(Math.max(r0 - mx1 + mx0, 2), rMax);
|
||||
const b1 = Math.min(Math.max(b0 - my1 + my0, 2), bMax);
|
||||
dialog.style.setProperty('right', `${r1}px`);
|
||||
dialog.style.setProperty('bottom', `${b1}px`);
|
||||
const cx1 = cx0 + mx1 - mx0;
|
||||
const cy1 = cy0 + my1 - my0;
|
||||
if ( cx1 < pw / 2 ) {
|
||||
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 => {
|
||||
@ -635,7 +649,7 @@ const onStartMoving = (( ) => {
|
||||
eatEvent(ev);
|
||||
};
|
||||
|
||||
return function(ev) {
|
||||
return ev => {
|
||||
const target = dialog.querySelector('#move');
|
||||
if ( ev.target !== target ) { return; }
|
||||
if ( dialog.classList.contains('moving') ) { return; }
|
||||
@ -648,12 +662,13 @@ const onStartMoving = (( ) => {
|
||||
mx0 = ev.pageX;
|
||||
my0 = ev.pageY;
|
||||
}
|
||||
const style = self.getComputedStyle(dialog);
|
||||
r0 = parseInt(style.right, 10);
|
||||
b0 = parseInt(style.bottom, 10);
|
||||
const rect = dialog.getBoundingClientRect();
|
||||
rMax = pickerRoot.clientWidth - 2 - rect.width ;
|
||||
bMax = pickerRoot.clientHeight - 2 - rect.height;
|
||||
dw = rect.width;
|
||||
dh = rect.height;
|
||||
cx0 = rect.x + dw / 2;
|
||||
cy0 = rect.y + dh / 2;
|
||||
pw = pickerRoot.clientWidth;
|
||||
ph = pickerRoot.clientHeight;
|
||||
dialog.classList.add('moving');
|
||||
if ( isTouch ) {
|
||||
self.addEventListener('touchmove', moveAsync, { capture: true });
|
||||
@ -806,7 +821,7 @@ const unpausePicker = function() {
|
||||
|
||||
const startPicker = function() {
|
||||
self.addEventListener('keydown', onKeyPressed, true);
|
||||
const svg = $stor('svg');
|
||||
const svg = $stor('svg#sea');
|
||||
svg.addEventListener('click', onSvgClicked);
|
||||
svg.addEventListener('touchstart', onSvgTouch);
|
||||
svg.addEventListener('touchend', onSvgTouch);
|
||||
@ -820,6 +835,9 @@ const startPicker = function() {
|
||||
$id('preview').addEventListener('click', onPreviewClicked);
|
||||
$id('create').addEventListener('click', onCreateClicked);
|
||||
$id('pick').addEventListener('click', onPickClicked);
|
||||
$id('minimize').addEventListener('click', ( ) => {
|
||||
dom.cl.toggle(dom.html, 'minimized');
|
||||
});
|
||||
$id('quit').addEventListener('click', onQuitClicked);
|
||||
$id('move').addEventListener('mousedown', onStartMoving);
|
||||
$id('move').addEventListener('touchstart', onStartMoving);
|
||||
|
||||
@ -15,8 +15,8 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<aside>
|
||||
<div id="move"></div>
|
||||
<aside style="right: 2px; bottom: 2px;">
|
||||
<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>
|
||||
<div>
|
||||
<div class="codeMirrorContainer codeMirrorBreakAll cm-theme-override"></div>
|
||||
@ -35,14 +35,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="toolbar">
|
||||
<div>
|
||||
<button id="preview" type="button" data-i18n="pickerPreview">_<span class="hover"></span></button>
|
||||
</div>
|
||||
<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>
|
||||
<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="create" type="button" class="preferred" disabled data-i18n="pickerCreate">_<span class="hover"></span></button>
|
||||
</div>
|
||||
</section>
|
||||
<ul id="candidateFilters">
|
||||
@ -56,7 +51,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
</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/addon/edit/closebrackets.js"></script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user