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
author: toasted-nutbread <toasted-nutbread@users.noreply.github.com> 2020-11-26 14:13:53 -0500
committer: GitHub <noreply@github.com> 2020-11-26 14:13:53 -0500
commit: 3f7c76dbc787e443c6afb13f1a44520885159c1b (patch)
tree: 20b7b2e3f0be02ba215e824160f06ae3929389e3
parent: 92e9f69c8069644c544301a51fbbd351e799e99d (diff)
5 files changed, 24 insertions, 26 deletions
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 @@
     <link rel="icon" type="image/png" href="/mixed/img/icon64.png" sizes="64x64">
     <link rel="icon" type="image/png" href="/mixed/img/icon128.png" sizes="128x128">
     <link rel="stylesheet" type="text/css" href="/bg/css/popup-preview.css">
-    <link rel="stylesheet" type="text/css" href="/fg/css/client.css" id="client-css">
+    <link rel="stylesheet" type="text/css" href="/mixed/css/popup-outer.css" id="popup-outer-css">
 </head>
 <body>
 
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 @@
                         </div>
                         <div class="col-xs-6">
                             <label for="custom-popup-outer-css">Custom popup outer CSS</label>
-                            <div><textarea autocomplete="off" spellcheck="false" wrap="soft" id="custom-popup-outer-css" class="form-control" data-setting="general.customPopupOuterCss" placeholder="iframe.yomichan-float { /*styles*/ }"></textarea></div>
+                            <div><textarea autocomplete="off" spellcheck="false" wrap="soft" id="custom-popup-outer-css" class="form-control" data-setting="general.customPopupOuterCss" placeholder="iframe.yomichan-popup { /*styles*/ }"></textarea></div>
                         </div>
                     </div>
                 </div>
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
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 <https://www.gnu.org/licenses/>.
  */
 
-
-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;
 }
author	toasted-nutbread <toasted-nutbread@users.noreply.github.com>	2020-11-26 14:13:53 -0500
committer	GitHub <noreply@github.com>	2020-11-26 14:13:53 -0500
commit	3f7c76dbc787e443c6afb13f1a44520885159c1b (patch)
tree	20b7b2e3f0be02ba215e824160f06ae3929389e3
parent	92e9f69c8069644c544301a51fbbd351e799e99d (diff)