From 898498c8a33c0a2d1af9a4177852cc6c00c32f53 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Tue, 26 Jan 2021 19:58:58 -0500 Subject: [PATCH] Clipboard settings organization (#1319) * Create clipboard icon * Move clipboard options * Update clipboard options * Update labels * Add info * Update all clipboard settings to request permissions --- .../settings/clipboard-popups-controller.js | 26 +++- ext/bg/settings.html | 2 +- ext/bg/settings2.html | 139 ++++++++++-------- ext/mixed/css/material.css | 1 + ext/mixed/img/clipboard.svg | 1 + resources/icons.svg | 69 +++++++-- 6 files changed, 158 insertions(+), 80 deletions(-) create mode 100644 ext/mixed/img/clipboard.svg diff --git a/ext/bg/js/settings/clipboard-popups-controller.js b/ext/bg/js/settings/clipboard-popups-controller.js index fcff444c..ab1a8288 100644 --- a/ext/bg/js/settings/clipboard-popups-controller.js +++ b/ext/bg/js/settings/clipboard-popups-controller.js @@ -15,14 +15,22 @@ * along with this program. If not, see . */ +/* global + * ObjectPropertyAccessor + */ + class ClipboardPopupsController { constructor(settingsController) { this._settingsController = settingsController; - this._checkbox = document.querySelector('#clipboard-enable-background-monitor'); + this._toggles = null; } async prepare() { - this._checkbox.addEventListener('change', this._onEnableBackgroundMonitorChanged.bind(this), false); + this._toggles = document.querySelectorAll('.clipboard-toggle'); + + for (const toggle of this._toggles) { + toggle.addEventListener('change', this._onClipboardToggleChange.bind(this), false); + } this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); const options = await this._settingsController.getOptions(); @@ -32,10 +40,20 @@ class ClipboardPopupsController { // Private _onOptionsChanged({options}) { - this._checkbox.checked = options.clipboard.enableBackgroundMonitor; + const accessor = new ObjectPropertyAccessor(options); + for (const toggle of this._toggles) { + const path = ObjectPropertyAccessor.getPathArray(toggle.dataset.clipboardSetting); + let value; + try { + value = accessor.get(path, path.length); + } catch (e) { + continue; + } + toggle.checked = !!value; + } } - async _onEnableBackgroundMonitorChanged(e) { + async _onClipboardToggleChange(e) { const checkbox = e.currentTarget; let value = checkbox.checked; diff --git a/ext/bg/settings.html b/ext/bg/settings.html index 208ac27c..e09a180e 100644 --- a/ext/bg/settings.html +++ b/ext/bg/settings.html @@ -162,7 +162,7 @@
- +
diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html index c8c35c3d..fce4d9a4 100644 --- a/ext/bg/settings2.html +++ b/ext/bg/settings2.html @@ -34,6 +34,7 @@ Sentence Parsing Translation Anki + Clipboard Shortcuts Backup Security @@ -951,69 +952,6 @@

-
-
-
-
- Open a native browser window when copying Japanese text - (?) -
-
-
- -
-
- -
-
-
-
Maximum clipboard text search length
-
Limit the number of text characters used when searching clipboard content.
-
-
- -
-
-
-
-
Clipboard text search mode
-
Change how the search page reacts to new text in the clipboard.
-
-
- -
-
Size
@@ -1605,6 +1543,81 @@
+ +
+
+
+

Clipboard

+
Info…
+
+ +
+
+
+
+
Enable background clipboard text monitoring
+
Open the search page in a new window when the clipboard contains Japanese text.
+
+
+ +
+
+
+
+
Enable search page clipboard text monitoring
+
The query on the search page will be automatically updated with text in the clipboard.
+
+
+ +
+
+
+
+
Maximum clipboard text search length
+
Limit the number of characters used when searching clipboard text.
+
+
+ +
+
+
+
+
Clipboard text search mode
+
Change how the search page reacts to new text in the clipboard.
+
+
+ +
+
+
+
diff --git a/ext/mixed/css/material.css b/ext/mixed/css/material.css index d144937b..2dd10791 100644 --- a/ext/mixed/css/material.css +++ b/ext/mixed/css/material.css @@ -214,6 +214,7 @@ .icon[data-icon=left-chevron] { --icon-image: url(/mixed/img/left-chevron.svg); } .icon[data-icon=right-chevron] { --icon-image: url(/mixed/img/right-chevron.svg); } .icon[data-icon=plus-thick] { --icon-image: url(/mixed/img/plus-thick.svg); } +.icon[data-icon=clipboard] { --icon-image: url(/mixed/img/clipboard.svg); } .icon[data-icon=material-down-arrow] { --icon-image: url(/mixed/img/material-down-arrow.svg); --icon-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1); diff --git a/ext/mixed/img/clipboard.svg b/ext/mixed/img/clipboard.svg new file mode 100644 index 00000000..75545134 --- /dev/null +++ b/ext/mixed/img/clipboard.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/icons.svg b/resources/icons.svg index 0ace4793..e009bc47 100644 --- a/resources/icons.svg +++ b/resources/icons.svg @@ -1,6 +1,4 @@ - - + inkscape:snap-nodes="true" + inkscape:document-rotation="0"> + + @@ -1098,7 +1131,7 @@ inkscape:groupmode="layer" id="layer34" inkscape:label="Note Card" - style="display:none" + style="display:none;opacity:1" sodipodi:insensitive="true"> + inkscape:label="Plus Thick" + style="display:none"> + d="M 6,2 V 6 H 2 v 4 h 4 v 4 h 4 v -4 h 4 V 6 H 10 V 2 Z" + id="rect1068" + inkscape:connector-curvature="0" /> + + +