From 3f7c76dbc787e443c6afb13f1a44520885159c1b Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Thu, 26 Nov 2020 14:13:53 -0500 Subject: 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/css/client.css | 51 ------------------------------- ext/fg/js/popup.js | 13 ++++---- ext/mixed/css/popup-outer.css | 48 +++++++++++++++++++++++++++++ 6 files changed, 58 insertions(+), 60 deletions(-) delete mode 100644 ext/fg/css/client.css create mode 100644 ext/mixed/css/popup-outer.css 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 @@

Custom popup outer CSS -

diff --git a/ext/fg/css/client.css b/ext/fg/css/client.css deleted file mode 100644 index 0957c758..00000000 --- a/ext/fg/css/client.css +++ /dev/null @@ -1,51 +0,0 @@ -/* - * Copyright (C) 2016-2020 Yomichan Authors - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - - -iframe.yomichan-float { - all: initial; - background-color: #fff; - border: 1px solid #999; - box-shadow: 0 0 10px 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] { - background-color: #1e1e1e; - border: 1px solid #666; - box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); -} - -iframe.yomichan-float.yomichan-float-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) { - border-bottom: none; -} - -iframe.yomichan-float.yomichan-float-full-width.yomichan-float-above { - border-top: none; -} 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/mixed/css/popup-outer.css b/ext/mixed/css/popup-outer.css new file mode 100644 index 00000000..74307d9f --- /dev/null +++ b/ext/mixed/css/popup-outer.css @@ -0,0 +1,48 @@ +/* + * Copyright (C) 2016-2020 Yomichan Authors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +iframe.yomichan-popup { + all: initial; + 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-popup[data-theme=dark] { + background-color: #1e1e1e; + border-color: #666666; +} +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; + resize: none; +} +iframe.yomichan-popup[data-popup-display-mode=full-width][data-below=true] { + border-bottom: none; +} +iframe.yomichan-popup[data-popup-display-mode=full-width]:not([data-below=true]) { + border-top: none; +} -- cgit v1.2.3