alex/yomichan
1
Fork 0
Code Releases Activity

Yomichan popup styles refactor (#1067)

Browse Source 
* 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
This commit is contained in:
toasted-nutbread 2020-11-26 14:13:53 -05:00 committed by GitHub
parent 92e9f69c80
commit 3f7c76dbc7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 24 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ext/bg/js/settings/popup-preview-frame.js
View File

@ -108,7 +108,7 @@ class PopupPreviewFrame {
_onCustomOuterCssChanged({node}) { _onCustomOuterCssChanged({node}) {
if (node === null) { return; } if (node === null) { return; }
const node2 = document.querySelector('#client-css'); const node2 = document.querySelector('#popup-outer-css');
if (node2 === null) { return; } if (node2 === null) { return; }
// This simulates the stylesheet priorities when injecting using the web extension API. // This simulates the stylesheet priorities when injecting using the web extension API.

2
ext/bg/popup-preview.html
View File

@ -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/icon64.png" sizes="64x64">
<link rel="icon" type="image/png" href="/mixed/img/icon128.png" sizes="128x128"> <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="/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> </head>
<body> <body>

2
ext/bg/settings.html
View File

@ -319,7 +319,7 @@
</div> </div>
<div class="col-xs-6"> <div class="col-xs-6">
<label for="custom-popup-outer-css">Custom popup outer CSS</label> <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> </div>
</div> </div>

13
ext/fg/js/popup.js
View File

@ -49,7 +49,7 @@ class Popup extends EventDispatcher {
this._frameSizeContentScale = null; this._frameSizeContentScale = null;
this._frameClient = null; this._frameClient = null;
this._frame = document.createElement('iframe'); this._frame = document.createElement('iframe');
this._frame.className = 'yomichan-float'; this._frame.className = 'yomichan-popup';
this._frame.style.width = '0'; this._frame.style.width = '0';
this._frame.style.height = '0'; this._frame.style.height = '0';
@ -178,6 +178,7 @@ class Popup extends EventDispatcher {
setContentScale(scale) { setContentScale(scale) {
this._contentScale = scale; this._contentScale = scale;
this._frame.style.fontSize = `${scale}px`;
this._invokeSafe('setContentScale', {scale}); this._invokeSafe('setContentScale', {scale});
} }
@ -333,7 +334,7 @@ class Popup extends EventDispatcher {
useWebExtensionApi = false; useWebExtensionApi = false;
parentNode = this._shadow; 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) { _observeFullscreen(observe) {
@ -361,6 +362,7 @@ class Popup extends EventDispatcher {
await this._inject(); await this._inject();
const optionsGeneral = this._options.general; const optionsGeneral = this._options.general;
const {popupDisplayMode} = optionsGeneral;
const frame = this._frame; const frame = this._frame;
const frameRect = frame.getBoundingClientRect(); const frameRect = frame.getBoundingClientRect();
@ -383,11 +385,10 @@ class Popup extends EventDispatcher {
this._getPositionForVerticalText(...getPositionArgs) this._getPositionForVerticalText(...getPositionArgs)
); );
const fullWidth = (optionsGeneral.popupDisplayMode === 'full-width'); frame.dataset.popupDisplayMode = popupDisplayMode;
frame.classList.toggle('yomichan-float-full-width', fullWidth); frame.dataset.below = `${below}`;
frame.classList.toggle('yomichan-float-above', !below);
if (optionsGeneral.popupDisplayMode === 'full-width') { if (popupDisplayMode === 'full-width') {
x = viewport.left; x = viewport.left;
y = below ? viewport.bottom - height : viewport.top; y = below ? viewport.bottom - height : viewport.top;
width = viewport.right - viewport.left; width = viewport.right - viewport.left;

31
ext/fg/css/client.css → ext/mixed/css/popup-outer.css
View File

@ -15,37 +15,34 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
iframe.yomichan-popup {
iframe.yomichan-float {
all: initial; all: initial;
background-color: #fff; font-size: 1px;
border: 1px solid #999; background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border: 1em solid #999999;
box-shadow: 0 0 10em rgba(0, 0, 0, 0.5);
position: fixed; position: fixed;
resize: both; resize: both;
visibility: hidden; visibility: hidden;
z-index: 2147483647; z-index: 2147483647;
box-sizing: border-box; box-sizing: border-box;
} }
iframe.yomichan-popup[data-theme=dark] {
iframe.yomichan-float[data-outer-theme=dark],
iframe.yomichan-float[data-outer-theme=auto][data-site-color=dark] {
background-color: #1e1e1e; background-color: #1e1e1e;
border: 1px solid #666; border-color: #666666;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
} }
iframe.yomichan-popup[data-outer-theme=dark],
iframe.yomichan-float.yomichan-float-full-width { 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-left: none;
border-right: none; border-right: none;
box-sizing: border-box;
resize: none; resize: none;
} }
iframe.yomichan-popup[data-popup-display-mode=full-width][data-below=true] {
iframe.yomichan-float.yomichan-float-full-width:not(.yomichan-float-above) {
border-bottom: none; border-bottom: none;
} }
iframe.yomichan-popup[data-popup-display-mode=full-width]:not([data-below=true]) {
iframe.yomichan-float.yomichan-float-full-width.yomichan-float-above {
border-top: none; border-top: none;
} }