Add None Popup Shadow Option (#1423)

Add `None` Outer Theme Option
yomidevs · Sep 17, 2024 · 5bc916c · 5bc916c
1 parent 547a628
commit 5bc916c
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 9 deletions.
diff --git a/ext/css/popup-outer.css b/ext/css/popup-outer.css
@@ -35,6 +35,9 @@ iframe.yomitan-popup[data-theme=dark] {
 iframe.yomitan-popup[data-outer-theme=dark] {
     box-shadow: 0 0 10em rgba(255, 255, 255, 0.5);
 }
+iframe.yomitan-popup[data-outer-theme=none] {
+    box-shadow: none;
+}
 iframe.yomitan-popup[data-popup-display-mode=full-width] {
     border-left: none;
     border-right: none;

diff --git a/ext/data/schemas/options-schema.json b/ext/data/schemas/options-schema.json
@@ -251,7 +251,7 @@
                                     },
                                     "popupOuterTheme": {
                                         "type": "string",
-                                        "enum": ["light", "dark", "browser", "site"],
+                                        "enum": ["light", "dark", "browser", "site", "none"],
                                         "default": "site"
                                     },
                                     "customPopupCss": {

diff --git a/ext/js/app/theme-controller.js b/ext/js/app/theme-controller.js
@@ -27,9 +27,9 @@ export class ThemeController {
     constructor(element) {
         /** @type {?HTMLElement} */
         this._element = element;
-        /** @type {'light'|'dark'|'browser'|'site'} */
+        /** @type {import("settings.js").PopupTheme} */
         this._theme = 'site';
-        /** @type {'light'|'dark'|'browser'|'site'} */
+        /** @type {import("settings.js").PopupOuterTheme} */
         this._outerTheme = 'site';
         /** @type {?('dark'|'light')} */
         this._siteTheme = null;
@@ -57,31 +57,31 @@ export class ThemeController {
 
     /**
      * Gets the main theme for the content.
-     * @type {'light'|'dark'|'browser'|'site'}
+     * @type {import("settings.js").PopupTheme}
      */
     get theme() {
         return this._theme;
     }
 
     /**
      * Sets the main theme for the content.
-     * @param {'light'|'dark'|'browser'|'site'} value The theme value to assign.
+     * @param {import("settings.js").PopupTheme} value The theme value to assign.
      */
     set theme(value) {
         this._theme = value;
     }
 
     /**
      * Gets the outer theme for the content.
-     * @type {'light'|'dark'|'browser'|'site'}
+     * @type {import("settings.js").PopupOuterTheme}
      */
     get outerTheme() {
         return this._outerTheme;
     }
 
     /**
      * Sets the outer theme for the content.
-     * @param {'light'|'dark'|'browser'|'site'} value The outer theme value to assign.
+     * @param {import("settings.js").PopupOuterTheme} value The outer theme value to assign.
      */
     set outerTheme(value) {
         this._outerTheme = value;

diff --git a/ext/settings.html b/ext/settings.html
@@ -764,6 +764,7 @@ <h1>Yomitan Settings</h1>
                             <option value="light">Light</option>
                             <option value="dark">Dark</option>
                             <option value="browser">Browser</option>
+                            <option value="none">None</option>
                         </select>
                     </div>
                 </div>

diff --git a/types/ext/settings.d.ts b/types/ext/settings.d.ts
@@ -371,9 +371,9 @@ export type PopupVerticalTextPosition = 'default' | 'before' | 'after' | 'left'
 
 export type GlossaryLayoutMode = 'default' | 'compact';
 
-export type PopupTheme = 'light' | 'dark' | 'browser';
+export type PopupTheme = 'light' | 'dark' | 'browser' | 'site';
 
-export type PopupOuterTheme = 'light' | 'dark' | 'browser' | 'site';
+export type PopupOuterTheme = 'light' | 'dark' | 'browser' | 'site' | 'none';
 
 export type PopupCurrentIndicatorMode = 'none' | 'asterisk' | 'triangle' | 'bar-left' | 'bar-right' | 'dot-left' | 'dot-right';