From 3f7c76dbc787e443c6afb13f1a44520885159c1b Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Thu, 26 Nov 2020 14:13:53 -0500 Subject: [PATCH] Yomichan popup styles refactor (#1067) * Rename classes yomichan-float to yomichan-popup * Use attributes instead of classes * Refactor * Update popup outer scaling * Update outer theme usage * Move client.css to popup-outer.css in /mixed --- ext/bg/js/settings/popup-preview-frame.js | 2 +- ext/bg/popup-preview.html | 2 +- ext/bg/settings.html | 2 +- ext/fg/js/popup.js | 13 ++++---- .../client.css => mixed/css/popup-outer.css} | 31 +++++++++---------- 5 files changed, 24 insertions(+), 26 deletions(-) rename ext/{fg/css/client.css => mixed/css/popup-outer.css} (62%) diff --git a/ext/bg/js/settings/popup-preview-frame.js b/ext/bg/js/settings/popup-preview-frame.js index 5a402a71..c2c91202 100644 --- a/ext/bg/js/settings/popup-preview-frame.js +++ b/ext/bg/js/settings/popup-preview-frame.js @@ -108,7 +108,7 @@ class PopupPreviewFrame { _onCustomOuterCssChanged({node}) { if (node === null) { return; } - const node2 = document.querySelector('#client-css'); + const node2 = document.querySelector('#popup-outer-css'); if (node2 === null) { return; } // This simulates the stylesheet priorities when injecting using the web extension API. diff --git a/ext/bg/popup-preview.html b/ext/bg/popup-preview.html index 61df0876..75386e24 100644 --- a/ext/bg/popup-preview.html +++ b/ext/bg/popup-preview.html @@ -12,7 +12,7 @@ - + diff --git a/ext/bg/settings.html b/ext/bg/settings.html index 5083a6bc..c168d7d8 100644 --- a/ext/bg/settings.html +++ b/ext/bg/settings.html @@ -319,7 +319,7 @@
-
+
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index b3af3d6f..0328edda 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -49,7 +49,7 @@ class Popup extends EventDispatcher { this._frameSizeContentScale = null; this._frameClient = null; this._frame = document.createElement('iframe'); - this._frame.className = 'yomichan-float'; + this._frame.className = 'yomichan-popup'; this._frame.style.width = '0'; this._frame.style.height = '0'; @@ -178,6 +178,7 @@ class Popup extends EventDispatcher { setContentScale(scale) { this._contentScale = scale; + this._frame.style.fontSize = `${scale}px`; this._invokeSafe('setContentScale', {scale}); } @@ -333,7 +334,7 @@ class Popup extends EventDispatcher { useWebExtensionApi = false; parentNode = this._shadow; } - await dynamicLoader.loadStyle('yomichan-popup-outer-stylesheet', fileType, '/fg/css/client.css', useWebExtensionApi, parentNode); + await dynamicLoader.loadStyle('yomichan-popup-outer-stylesheet', fileType, '/mixed/css/popup-outer.css', useWebExtensionApi, parentNode); } _observeFullscreen(observe) { @@ -361,6 +362,7 @@ class Popup extends EventDispatcher { await this._inject(); const optionsGeneral = this._options.general; + const {popupDisplayMode} = optionsGeneral; const frame = this._frame; const frameRect = frame.getBoundingClientRect(); @@ -383,11 +385,10 @@ class Popup extends EventDispatcher { this._getPositionForVerticalText(...getPositionArgs) ); - const fullWidth = (optionsGeneral.popupDisplayMode === 'full-width'); - frame.classList.toggle('yomichan-float-full-width', fullWidth); - frame.classList.toggle('yomichan-float-above', !below); + frame.dataset.popupDisplayMode = popupDisplayMode; + frame.dataset.below = `${below}`; - if (optionsGeneral.popupDisplayMode === 'full-width') { + if (popupDisplayMode === 'full-width') { x = viewport.left; y = below ? viewport.bottom - height : viewport.top; width = viewport.right - viewport.left; diff --git a/ext/fg/css/client.css b/ext/mixed/css/popup-outer.css similarity index 62% rename from ext/fg/css/client.css rename to ext/mixed/css/popup-outer.css index 0957c758..74307d9f 100644 --- a/ext/fg/css/client.css +++ b/ext/mixed/css/popup-outer.css @@ -15,37 +15,34 @@ * along with this program. If not, see . */ - -iframe.yomichan-float { +iframe.yomichan-popup { all: initial; - background-color: #fff; - border: 1px solid #999; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); + font-size: 1px; + background-color: #ffffff; + border: 1em solid #999999; + box-shadow: 0 0 10em rgba(0, 0, 0, 0.5); position: fixed; resize: both; visibility: hidden; z-index: 2147483647; box-sizing: border-box; } - -iframe.yomichan-float[data-outer-theme=dark], -iframe.yomichan-float[data-outer-theme=auto][data-site-color=dark] { +iframe.yomichan-popup[data-theme=dark] { background-color: #1e1e1e; - border: 1px solid #666; - box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); + border-color: #666666; } - -iframe.yomichan-float.yomichan-float-full-width { +iframe.yomichan-popup[data-outer-theme=dark], +iframe.yomichan-popup[data-outer-theme=auto][data-site-color=dark] { + box-shadow: 0 0 10em rgba(255, 255, 255, 0.5); +} +iframe.yomichan-popup[data-popup-display-mode=full-width] { border-left: none; border-right: none; - box-sizing: border-box; resize: none; } - -iframe.yomichan-float.yomichan-float-full-width:not(.yomichan-float-above) { +iframe.yomichan-popup[data-popup-display-mode=full-width][data-below=true] { border-bottom: none; } - -iframe.yomichan-float.yomichan-float-full-width.yomichan-float-above { +iframe.yomichan-popup[data-popup-display-mode=full-width]:not([data-below=true]) { border-top: none; }