Rework settings (#884)

* Add and remove settings from advanced * Add warning to Text scan length * Move Frequency sorting dictionary under Dictionaries, remove it from advanced, add child element Frequency sorting mode to advanced * Move Result grouping mode to Appearance * Move General above Dictionaries * Rename Popup Appearance to Appearance * Move Reading mode from Text Parsing to Appearance * Make Text scan length warning less scary * Move anki dupe settings back to advanced * Remove scan delay setting from welcome page * Move Recommended Permissions to top of welcome page, add bold, and add warning text * Improve wording of recommended permissions warning * Rename Enable content scanning to Enable Yomitan Co-authored-by: James Maa <[email protected]> Signed-off-by: Kuuuube <[email protected]> * Remove Auto-hide search popup option from welcome page * Fix appearance href and id * Add Result Display category * Add success text css * Split off quick start guide from welcome page * Add language selector on welcome page * Add success or danger text if recommended permissions are on or off * Remove unused placeholders in backup category * Rename Popup to Popup Behavior * Move Auto-hide search popup and Hide popup on cursor exit to Popup Behavior * Move Term display style, Reading mode, and Frequency display style to advanced * Move custom css to advanced * Remove unused setting * Add back setting with note and hidden * Remove Auto-hide search popup * Restore Auto-hide search popup * Fix Auto-hide search popup description --------- Signed-off-by: Kuuuube <[email protected]> Co-authored-by: James Maa <[email protected]>
yomidevs · May 13, 2024 · 0b02bf4 · 0b02bf4
1 parent fc83365
commit 0b02bf4
Show file tree

Hide file tree

Showing 7 changed files with 417 additions and 381 deletions.
diff --git a/ext/css/material.css b/ext/css/material.css
@@ -211,7 +211,9 @@ body {
 .danger-text {
     color: var(--danger-color);
 }
-
+.success-text {
+    color: var(--success-color);
+}
 
 /* Icons */
 .icon {
@@ -277,6 +279,7 @@ body {
 .icon[data-icon=accessibility]           { --icon-image: url(/images/accessibility.svg); }
 .icon[data-icon=connection]              { --icon-image: url(/images/connection.svg); }
 .icon[data-icon=external-link]           { --icon-image: url(/images/external-link.svg); }
+.icon[data-icon=monitor]                 { --icon-image: url(/images/monitor.svg); }
 .icon[data-icon=material-down-arrow] {
     --icon-image: url(/images/material-down-arrow.svg);
     --icon-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1);

diff --git a/ext/images/monitor.svg b/ext/images/monitor.svg
diff --git a/ext/js/pages/settings/recommended-permissions-controller.js b/ext/js/pages/settings/recommended-permissions-controller.js
@@ -19,6 +19,7 @@
 import {EventListenerCollection} from '../../core/event-listener-collection.js';
 import {toError} from '../../core/to-error.js';
 import {getAllPermissions, setPermissionsGranted} from '../../data/permissions-util.js';
+import {querySelectorNotNull} from '../../dom/query-selector.js';
 
 export class RecommendedPermissionsController {
     /**
@@ -27,8 +28,8 @@ export class RecommendedPermissionsController {
     constructor(settingsController) {
         /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
-        /** @type {?NodeListOf<HTMLInputElement>} */
-        this._originToggleNodes = null;
+        /** @type {HTMLInputElement} */
+        this._originToggleNode = querySelectorNotNull(document, '#recommended-permissions-toggle');
         /** @type {EventListenerCollection} */
         this._eventListeners = new EventListenerCollection();
         /** @type {?HTMLElement} */
@@ -37,11 +38,8 @@ export class RecommendedPermissionsController {
 
     /** */
     async prepare() {
-        this._originToggleNodes = document.querySelectorAll('.recommended-permissions-toggle');
         this._errorContainer = document.querySelector('#recommended-permissions-error');
-        for (const node of this._originToggleNodes) {
-            node.addEventListener('change', this._onOriginToggleChange.bind(this), false);
-        }
+        this._originToggleNode.addEventListener('change', this._onOriginToggleChange.bind(this), false);
 
         this._settingsController.on('permissionsChanged', this._onPermissionsChanged.bind(this));
         await this._updatePermissions();
@@ -55,12 +53,8 @@ export class RecommendedPermissionsController {
     _onPermissionsChanged({permissions}) {
         this._eventListeners.removeAllEventListeners();
         const originsSet = new Set(permissions.origins);
-        if (this._originToggleNodes !== null) {
-            for (const node of this._originToggleNodes) {
-                const {origin} = node.dataset;
-                node.checked = typeof origin === 'string' && originsSet.has(origin);
-            }
-        }
+        const {origin} = this._originToggleNode.dataset;
+        this._originToggleNode.checked = typeof origin === 'string' && originsSet.has(origin);
     }
 
     /**
@@ -80,6 +74,7 @@ export class RecommendedPermissionsController {
     async _updatePermissions() {
         const permissions = await getAllPermissions();
         this._onPermissionsChanged({permissions});
+        this._setWelcomePageText();
     }
 
     /**
@@ -101,4 +96,21 @@ export class RecommendedPermissionsController {
         await this._updatePermissions();
         return true;
     }
+
+    /** */
+    _setWelcomePageText() {
+        /** @type {HTMLElement | null} */
+        this._textIfEnabled = document.querySelector('#permissions-enabled');
+        /** @type {HTMLElement | null} */
+        this._textIfDisabled = document.querySelector('#permissions-disabled');
+        if (this._textIfEnabled && this._textIfDisabled) {
+            if (this._originToggleNode.checked) {
+                this._textIfEnabled.hidden = false;
+                this._textIfDisabled.hidden = true;
+            } else {
+                this._textIfEnabled.hidden = true;
+                this._textIfDisabled.hidden = false;
+            }
+        }
+    }
 }
diff --git a/ext/js/pages/welcome-main.js b/ext/js/pages/welcome-main.js
@@ -23,6 +23,7 @@ import {ExtensionContentController} from './common/extension-content-controller.
 import {DictionaryController} from './settings/dictionary-controller.js';
 import {DictionaryImportController} from './settings/dictionary-import-controller.js';
 import {GenericSettingController} from './settings/generic-setting-controller.js';
+import {LanguagesController} from './settings/languages-controller.js';
 import {ModalController} from './settings/modal-controller.js';
 import {RecommendedPermissionsController} from './settings/recommended-permissions-controller.js';
 import {ScanInputsSimpleController} from './settings/scan-inputs-simple-controller.js';
@@ -96,6 +97,9 @@ await Application.main(true, async (application) => {
     const recommendedPermissionsController = new RecommendedPermissionsController(settingsController);
     preparePromises.push(recommendedPermissionsController.prepare());
 
+    const languagesController = new LanguagesController(settingsController);
+    preparePromises.push(languagesController.prepare());
+
     await Promise.all(preparePromises);
 
     document.documentElement.dataset.loaded = 'true';

diff --git a/ext/quick-start-guide.html b/ext/quick-start-guide.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Quick Start Guide</title>
+    <link rel="icon" type="image/png" href="/images/icon16.png" sizes="16x16">
+    <link rel="icon" type="image/png" href="/images/icon19.png" sizes="19x19">
+    <link rel="icon" type="image/png" href="/images/icon32.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="/images/icon38.png" sizes="38x38">
+    <link rel="icon" type="image/png" href="/images/icon48.png" sizes="48x48">
+    <link rel="icon" type="image/png" href="/images/icon64.png" sizes="64x64">
+    <link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128">
+    <link rel="stylesheet" type="text/css" href="/css/material.css">
+    <link rel="stylesheet" type="text/css" href="/css/settings.css">
+</head>
+<body>
+
+<!-- Main content -->
+<div class="content-outer"><div class="content">
+<div class="content-left"></div>
+<div class="content-center">
+
+    <span tabindex="-1" id="content-scroll-focus"></span>
+
+    <h1>Welcome to Yomitan!</h1>
+
+    <!-- Content -->
+    <h2>Yomitan Quick Start Guide</h2>
+    <div class="settings-group">
+        <div class="settings-item">
+            <div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
+                Clicking the <img src="/images/yomitan-icon.svg" class="inline-icon" alt=""> <em>Yomitan</em> button in the browser bar will open the quick-actions popup.
+            </div></div></div>
+            <div class="settings-item-children settings-item-children-group">
+                <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
+                    The <img src="/images/cog.svg" class="inline-icon" alt=""> <em>cog</em> button will open the <a href="/settings.html" target="_blank" rel="noopener">Settings</a> page.
+                </div></div></div></div>
+                <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
+                    The <img src="/images/magnifying-glass.svg" class="inline-icon" alt=""> <em>magnifying glass</em> button will open the <a href="/search.html" target="_blank" rel="noopener">Search</a> page,
+                    enabling text and terms to be looked up using the installed dictionaries.
+                    This can even be used in offline mode!
+                </div></div></div></div>
+                <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
+                    The <img src="/images/question-mark-circle.svg" class="inline-icon" alt=""> <em>question mark</em> button will open the <a href="/info.html" target="_blank" rel="noopener">Information</a> page,
+                    which has some helpful information and links about Yomitan.
+                </div></div></div></div>
+            </div>
+        </div>
+        <div class="settings-item">
+            <div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
+                Yomitan requires one or more dictionaries to be installed in order to look up terms, kanji, and other information.
+                Several downloadable dictionaries can be found on the <a href="https://github.com/themoeway/yomitan/blob/master/docs/dictionaries.md#dictionaries" target="_blank" rel="noopener noreferrer">Yomitan homepage</a>.
+                Dictionaries can be configured from the <a href="/settings.html#!dictionaries" rel="noopener">Settings</a> page.
+            </div></div></div>
+        </div>
+        <div class="settings-item">
+            <div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
+                You can also import an exported collection of dictionaries from the <a href="/settings.html#!backup">Backup section of the Settings</a> page.
+
+                <br><br>
+
+                If you are migrating from Yomichan, you may be interested in importing your data into Yomitan.
+                Please follow instructions from <a href="https://github.com/themoeway/yomitan/blob/master/docs/yomichan-migration.md#migrating-from-yomichan" target="_blank" rel="noopener noreferrer">Yomitan's README</a> for that.
+
+                <br><br>
+
+                If you are using or planning to use custom templates for Anki note creation, note that <a href="https://github.com/themoeway/yomitan/blob/master/docs/yomichan-migration.md#custom-templates" target="_blank" rel="noopener noreferrer">some syntax has changed from Yomichan and Yomibaba.</a>
+                Please ensure that your custom templates are using the updated syntax.
+            </div></div></div>
+        </div>
+        <div class="settings-item">
+            <div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
+                After dictionaries have been installed, webpage text can be scanned by moving the cursor while holding a modifier key.
+                The default key is <kbd>Shift</kbd>, which can be disabled or configured below.
+            </div></div></div>
+            <div class="settings-item-children settings-item-children-group">
+                <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
+                    Clicking the <img src="/images/play-audio.svg" class="inline-icon" alt=""> <em>speaker</em> button of an entry in the search results
+                    will play an audio clip of a term's pronunciation using an online dictionary, if available.
+                </div></div></div></div>
+                <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
+                    Clicking on a kanji character in a term's definition will show additional information about that character.
+                    <span class="light">(Requires a kanji dictionary to be installed.)</span>
+                </div></div></div></div>
+            </div>
+        </div>
+        <a href="/welcome.html" rel="noopener" class="settings-item settings-item-button"><div class="settings-item-inner">
+            <div class="settings-item-left">
+                <div class="settings-item-label">Back to Welcome page</div>
+            </div>
+            <div class="settings-item-right open-panel-button-container">
+                <button type="button" class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
+            </div>
+        </div></a>
+    </div>
+
+    <div class="footer-padding"></div>
+
+</div>
+<div class="content-right"></div>
+</div></div>
+</body>
+</html>