From 0b02bf46c9fac64287b1fce338927e34b87f4144 Mon Sep 17 00:00:00 2001 From: Kuuuube <61125188+Kuuuube@users.noreply.github.com> Date: Sun, 12 May 2024 22:10:05 -0400 Subject: [PATCH] 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 Signed-off-by: Kuuuube <61125188+Kuuuube@users.noreply.github.com> * 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 <61125188+Kuuuube@users.noreply.github.com> Co-authored-by: James Maa --- ext/css/material.css | 5 +- ext/images/monitor.svg | 1 + .../recommended-permissions-controller.js | 36 +- ext/js/pages/welcome-main.js | 4 + ext/quick-start-guide.html | 104 ++++ ext/settings.html | 496 +++++++++--------- ext/welcome.html | 152 ++---- 7 files changed, 417 insertions(+), 381 deletions(-) create mode 100644 ext/images/monitor.svg create mode 100644 ext/quick-start-guide.html diff --git a/ext/css/material.css b/ext/css/material.css index bcc384ef3f..b1259294ab 100644 --- 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 new file mode 100644 index 0000000000..b2fd82d63d --- /dev/null +++ b/ext/images/monitor.svg @@ -0,0 +1 @@ + diff --git a/ext/js/pages/settings/recommended-permissions-controller.js b/ext/js/pages/settings/recommended-permissions-controller.js index 8aff51c467..80572a9b50 100644 --- 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} */ - 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 index 23511dd6db..7cb28cda22 100644 --- 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 new file mode 100644 index 0000000000..46f461e22d --- /dev/null +++ b/ext/quick-start-guide.html @@ -0,0 +1,104 @@ + + + + + + Quick Start Guide + + + + + + + + + + + + + +
+
+
+ + + +

Welcome to Yomitan!

+ + +

Yomitan Quick Start Guide

+
+
+
+ Clicking the Yomitan button in the browser bar will open the quick-actions popup. +
+
+
+ The cog button will open the Settings page. +
+
+ The magnifying glass button will open the Search page, + enabling text and terms to be looked up using the installed dictionaries. + This can even be used in offline mode! +
+
+ The question mark button will open the Information page, + which has some helpful information and links about Yomitan. +
+
+
+
+
+ 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 Yomitan homepage. + Dictionaries can be configured from the Settings page. +
+
+
+
+ You can also import an exported collection of dictionaries from the Backup section of the Settings page. + +

+ + If you are migrating from Yomichan, you may be interested in importing your data into Yomitan. + Please follow instructions from Yomitan's README for that. + +

+ + If you are using or planning to use custom templates for Anki note creation, note that some syntax has changed from Yomichan and Yomibaba. + Please ensure that your custom templates are using the updated syntax. +
+
+
+
+ After dictionaries have been installed, webpage text can be scanned by moving the cursor while holding a modifier key. + The default key is Shift, which can be disabled or configured below. +
+
+
+ Clicking the speaker button of an entry in the search results + will play an audio clip of a term's pronunciation using an online dictionary, if available. +
+
+ Clicking on a kanji character in a term's definition will show additional information about that character. + (Requires a kanji dictionary to be installed.) +
+
+
+
+
+
Back to Welcome page
+
+
+ +
+
+
+ +
+ +
+
+
+ + diff --git a/ext/settings.html b/ext/settings.html index f32b8415bb..252de038d2 100644 --- a/ext/settings.html +++ b/ext/settings.html @@ -27,8 +27,9 @@ Dictionaries General Scanning - Popup - Appearance + Popup Behavior + Appearance + Result Display Position & Size Window Audio @@ -112,6 +113,52 @@

Yomitan Settings

+ +
+
+

General

+
+
+
+
+
Enable Yomitan
+
+
+ +
+
+
+
+
+ Language +
+
+ Language of the text that is being looked up. +
+
+
+ +
+
+
+
+
Show the welcome guide on browser startup
+
+
+ +
+
+
+
+
Maximum number of results
+
Adjust the maximum number of results shown for lookups.
+
+
+ +
+
+
+
@@ -158,154 +205,7 @@

Yomitan Settings

-
-
-
-
Persistent storage
-
- Enable to help prevent the browser from unexpectedly clearing the database. - More… -
-
-
- -
-
- -
- - - -
-
-

General

-
-
-
-
-
Enable content scanning
-
-
- -
-
-
-
-
- Language -
-
- Language of the text that is being looked up. -
-
-
- -
-
-
-
-
Show the welcome guide on browser startup
-
-
- -
-
-
-
-
Result grouping mode
-
- Change how related results are grouped. - More… -
-
-
- -
-
- - -
-
Frequency sorting dictionary
@@ -328,7 +228,7 @@

Yomitan Settings

Less…

- -
-
-
-
Auto-hide search popup
-
When no definitions are found after scanning text, the popup will be hidden.
-
-
- -
-
- -
-
-
-
-
Hide popup on cursor exit
-
When the cursor exits the popup, the popup will be hidden.
-
-
- -
-
- -
-
+
Scan delay (in milliseconds)
Change the delay before scanning occurs when no modifier key is required.
@@ -589,6 +465,9 @@

Yomitan Settings

Text scan length
Change how many characters are read when scanning for terms.
+
+ Setting this value too high (100+) may impact performance. +
@@ -640,10 +519,10 @@

Yomitan Settings

- +
-
+
@@ -685,6 +564,60 @@

Yomitan Settings

+
+
+
+
Auto-hide search popup
+
When an existing popup is present, upon scanning again, hide the existing popup even if no definitions are found when scanning again.
+
+
+ +
+
+ +
+
+
+
+
Hide popup on cursor exit
+
When the cursor exits the popup, the popup will be hidden.
+
+
+ +
+
+ +
Search terms when clicking text from the results list
@@ -723,10 +656,10 @@

Yomitan Settings

- +
-
+

Appearance

@@ -855,6 +788,21 @@

Yomitan Settings

+
+
+
Reading mode
+
Change what type of furigana is displayed for parsed text.
+
+
+ +
+
Frequency display style
@@ -890,7 +838,7 @@

Yomitan Settings

-
+
@@ -962,7 +910,7 @@

Yomitan Settings

-
+
Configure custom CSS…
@@ -972,6 +920,85 @@

Yomitan Settings

+ +
+
+

Result Display

+
+
+
+
+
+
Result grouping mode
+
+ Change how related results are grouped. + More… +
+
+
+ +
+
+ + +
+
+
@@ -1368,7 +1395,7 @@

Yomitan Settings

-
+
Parse sentences using Yomitan's internal parser
@@ -1435,21 +1462,6 @@

Yomitan Settings

-
-
-
Reading mode
-
Change what type of furigana is displayed for parsed text.
-
-
- -
-
Sentence scanning extent
@@ -1895,7 +1907,7 @@

Yomitan Settings

-
+
Maximum clipboard text search length
Limit the number of characters used when searching clipboard text.
@@ -2039,20 +2051,6 @@

Yomitan Settings

-
-
-
- Placeholder text. -
-
-
-
-
-
- Placeholder text. -
-
-
diff --git a/ext/welcome.html b/ext/welcome.html index d15686a1ad..f219268633 100644 --- a/ext/welcome.html +++ b/ext/welcome.html @@ -26,6 +26,22 @@

Welcome to Yomitan!

+

Recommended Permissions (Important)

+
+
+
+
Enable recommended permissions
+
This will allow Yomitan to scan text from most sites. Further configuration is available on the Permissions page.
+ + + +
+
+ +
+
+
+
@@ -41,103 +57,37 @@

Welcome to Yomitan!

Here are some basics to get started

-
-
- Clicking the Yomitan button in the browser bar will open the quick-actions popup. -
-
-
- The cog button will open the Settings page. -
-
- The magnifying glass button will open the Search page, - enabling text and terms to be looked up using the installed dictionaries. - This can even be used in offline mode! -
-
- The question mark button will open the Information page, - which has some helpful information and links about Yomitan. -
-
-
-
-
- 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 Yomitan homepage. - Dictionaries can be configured using the button below, - or later from the Settings page. -
-
-
-
-
Install or remove dictionaries…
-
-
- -
-
+
+
+
Yomitan Quick Start Guide
-
-
-
- You can also import an exported collection of dictionaries from the Backup section of the Settings page. - -

- - If you are migrating from Yomichan, you may be interested in importing your data into Yomitan. - Please follow instructions from Yomitan's README for that. - -

- - If you are using or planning to use custom templates for Anki note creation, note that some syntax has changed from Yomichan and Yomibaba. - Please ensure that your custom templates are using the updated syntax. -
-
-
-
- After dictionaries have been installed, webpage text can be scanned by moving the cursor while holding a modifier key. - The default key is Shift, which can be disabled or configured below. -
-
-
- Clicking the speaker button of an entry in the search results - will play an audio clip of a term's pronunciation using an online dictionary, if available. -
-
- Clicking on a kanji character in a term's definition will show additional information about that character. - (Requires a kanji dictionary to be installed.) -
+
+
-
-
-
- This startup notification can be turned off using the options below, or later from the Settings page. -
-
+
-

Recommended Permissions (Important)

+

Basic customization

-
Enable recommended permissions
-
This will allow Yomitan to scan text from most sites. Further configuration is available on the Permissions page.
+
Show this welcome guide on browser startup
- +
-
-
- -

Basic customization

-
-
+
-
Show this welcome guide on browser startup
+
+ Language +
+
+ Language of the text that is being looked up. +
- +
@@ -160,42 +110,6 @@

Basic customization

-
-
-
-
Auto-hide search popup
-
When no definitions are found after scanning text, the popup will be hidden.
-
-
- -
-
- -
-
-
-
Scan delay (in milliseconds)
-
Change the delay before scanning occurs when no modifier key is required.
-
-
- -
-
Theme