summaryrefslogtreecommitdiff
path: root/ext/fg
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-11-26 14:13:53 -0500
committerGitHub <noreply@github.com>2020-11-26 14:13:53 -0500
commit3f7c76dbc787e443c6afb13f1a44520885159c1b (patch)
tree20b7b2e3f0be02ba215e824160f06ae3929389e3 /ext/fg
parent92e9f69c8069644c544301a51fbbd351e799e99d (diff)
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
Diffstat (limited to 'ext/fg')
-rw-r--r--ext/fg/css/client.css51
-rw-r--r--ext/fg/js/popup.js13
2 files changed, 7 insertions, 57 deletions
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 <https://www.gnu.org/licenses/>.
- */
-
-
-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;