diff --git a/platform/mv3/extension/css/popup.css b/platform/mv3/extension/css/popup.css index b2f208a7e..d408b716d 100644 --- a/platform/mv3/extension/css/popup.css +++ b/platform/mv3/extension/css/popup.css @@ -1,4 +1,12 @@ - /* External CSS values override */ +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } +@keyframes busy { + to { opacity: 90%; } +} + +/* External CSS values override */ .fa-icon.fa-icon-badged > .fa-icon-badge { bottom: auto; top: -20%; @@ -30,14 +38,39 @@ a { outline: 0; } -#main { +main { align-self: flex-start; display: flex; flex-direction: column; } -:root.portrait #main { +body.busy main { + pointer-events: none; +} +:root.portrait main { align-self: inherit; } +aside { + background-color: var(--surface-1); + bottom: 0; + display: none; + left: 0; + opacity: 0; + position: absolute; + right: 0; + top: 0; + z-index: 1000; +} +aside .fa-icon { + animation: spin 1s steps(8) infinite; + fill: var(--surface-3); + font-size: 4em; + margin: 2em; +} +body.busy aside { + animation: busy 0s step-start 1s; + animation-fill-mode: forwards; + display: block; +} hr { margin: 0.5em 0; } @@ -185,7 +218,7 @@ body.needReload #refresh { overflow-y: auto; width: 100%; } -:root.portrait #main { +:root.portrait main { max-width: unset; } /* mouse-driven devices */ diff --git a/platform/mv3/extension/js/popup.js b/platform/mv3/extension/js/popup.js index b2a39500f..904df6f32 100644 --- a/platform/mv3/extension/js/popup.js +++ b/platform/mv3/extension/js/popup.js @@ -42,7 +42,7 @@ function renderAdminRules() { const BLOCKING_MODE_MAX = 3; -function setFilteringMode(level, commit = false) { +async function setFilteringMode(level, commit = false) { const modeSlider = qs$('.filteringModeSlider'); modeSlider.dataset.level = level; if ( qs$('.filteringModeSlider.moving') === null ) { @@ -52,7 +52,9 @@ function setFilteringMode(level, commit = false) { ); } if ( commit !== true ) { return; } - commitFilteringMode(); + dom.cl.add(dom.body, 'busy'); + await commitFilteringMode(); + dom.cl.remove(dom.body, 'busy'); } async function commitFilteringMode() { diff --git a/platform/mv3/extension/popup.html b/platform/mv3/extension/popup.html index eb54d528a..24da977a3 100644 --- a/platform/mv3/extension/popup.html +++ b/platform/mv3/extension/popup.html @@ -15,7 +15,7 @@ -
+
­
@@ -52,7 +52,10 @@ list-altShow matched rules cogs
-
+ +