From 3f7c76dbc787e443c6afb13f1a44520885159c1b Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
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/fg/js/popup.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

(limited to 'ext/fg/js/popup.js')

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;
-- 
cgit v1.2.3