diff --git a/src/css/epicker-ui.css b/src/css/epicker-ui.css index 45e546181..716018d29 100644 --- a/src/css/epicker-ui.css +++ b/src/css/epicker-ui.css @@ -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; +} diff --git a/src/js/epicker-ui.js b/src/js/epicker-ui.js index 49fc11683..00621718b 100644 --- a/src/js/epicker-ui.js +++ b/src/js/epicker-ui.js @@ -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); diff --git a/src/web_accessible_resources/epicker-ui.html b/src/web_accessible_resources/epicker-ui.html index 3794b7596..ce0fdd9e9 100644 --- a/src/web_accessible_resources/epicker-ui.html +++ b/src/web_accessible_resources/epicker-ui.html @@ -15,8 +15,8 @@
-