Skip to content

Commit

Permalink
Move "Quit" button to top bar in element picker
Browse files Browse the repository at this point in the history 
Additionally:

- Removed auto fade out of dialog when mouse does not hover the
  dialog.
- Added a minimize/maximize button in top bar

Related issue:
- uBlockOrigin/uBlock-issues#55
  • Loading branch information
@gorhill
gorhill committed Mar 2, 2024
1 parent a0a6ae0 commit 6266c47
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 68 deletions.
98 changes: 55 additions & 43 deletions src/css/epicker-ui.css
View file
Expand Up @@ -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;
Expand All @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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%;
Expand All @@ -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;
}
46 changes: 32 additions & 14 deletions src/js/epicker-ui.js
View file
Expand Up @@ -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';

/******************************************************************************/
/******************************************************************************/
Expand All @@ -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';
Expand Down Expand Up @@ -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) {
Expand All @@ -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 => {
Expand All @@ -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; }
Expand All @@ -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 });
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand Down
17 changes: 6 additions & 11 deletions src/web_accessible_resources/epicker-ui.html
View file
Expand Up @@ -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>
Expand All @@ -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">
Expand All @@ -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>
Expand Down

0 comments on commit 6266c47

Please sign in to comment.