summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-01-26 19:58:58 -0500
committerGitHub <noreply@github.com>2021-01-26 19:58:58 -0500
commit898498c8a33c0a2d1af9a4177852cc6c00c32f53 (patch)
treea0932dbb6a3a84361c12b39dec9669dec9674cf3
parent8d292363d4d7363134a66e6d35e549f4634521a1 (diff)
Clipboard settings organization (#1319)
* Create clipboard icon * Move clipboard options * Update clipboard options * Update labels * Add info * Update all clipboard settings to request permissions
-rw-r--r--ext/bg/js/settings/clipboard-popups-controller.js26
-rw-r--r--ext/bg/settings.html2
-rw-r--r--ext/bg/settings2.html139
-rw-r--r--ext/mixed/css/material.css1
-rw-r--r--ext/mixed/img/clipboard.svg1
-rw-r--r--resources/icons.svg69
6 files changed, 158 insertions, 80 deletions
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 <https://www.gnu.org/licenses/>.
*/
+/* 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 @@
</div>
<div class="checkbox options-advanced ignore-form-changes" data-hide-for-browser="firefox-mobile">
- <label><input type="checkbox" id="clipboard-enable-background-monitor"> Enable native popups when copying Japanese text</label>
+ <label><input type="checkbox" class="clipboard-toggle" data-clipboard-setting="clipboard.enableBackgroundMonitor"> Enable native popups when copying Japanese text</label>
</div>
<div class="checkbox options-advanced">
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 @@
<a href="#!sentence-parsing" class="outline-item advanced-only"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="sentence-parsing"></span></span><span class="outline-item-label">Sentence Parsing</span></a>
<a href="#!translation" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="translation"></span></span><span class="outline-item-label">Translation</span></a>
<a href="#!anki" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="note-card"></span></span><span class="outline-item-label">Anki</span></a>
+ <a href="#!clipboard" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="clipboard"></span></span><span class="outline-item-label">Clipboard</span></a>
<a href="#!shortcuts" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="keyboard"></span></span><span class="outline-item-label">Shortcuts</span></a>
<a href="#!backup" class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="backup"></span></span><span class="outline-item-label">Backup</span></a>
<a href="#!security" class="outline-item advanced-only"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="lock"></span></span><span class="outline-item-label">Security</span></a>
@@ -951,69 +952,6 @@
</p>
</div>
</div>
- <div class="settings-item">
- <div class="settings-item-inner">
- <div class="settings-item-left">
- <div class="settings-item-label">
- Open a native browser window when copying Japanese text
- <a class="more-toggle more-only" data-parent-distance="4">(?)</a>
- </div>
- </div>
- <div class="settings-item-right">
- <label class="toggle"><input type="checkbox" id="clipboard-enable-background-monitor"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
- </div>
- </div>
- <div class="settings-item-children more" hidden>
- <p>
- When Japanese text is copied to the clipboard, a browser window popup searching for the clipboard
- text will be opened.
- This can be useful for using Yomichan to scan text from external applications.
- </p>
- <p>
- This feature requires Yomichan to have clipboard reading permissions, and when this option is enabled,
- the clipboard will be frequently polled for new text.
- </p>
- <p>
- Alternatively, this feature can be enabled only on the search page, and clipboard contents polling will
- only be performed when the search page is already open.
- </p>
- <p>
- <a class="more-toggle" data-parent-distance="3">Less&hellip;</a>
- </p>
- </div>
- </div>
- <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
- <div class="settings-item-left">
- <div class="settings-item-label">Maximum clipboard text search length</div>
- <div class="settings-item-description">Limit the number of text characters used when searching clipboard content.</div>
- </div>
- <div class="settings-item-right">
- <input type="number" min="0" step="1" data-setting="clipboard.maximumSearchLength">
- </div>
- </div></div>
- <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
- <div class="settings-item-left">
- <div class="settings-item-label">Clipboard text search mode</div>
- <div class="settings-item-description">Change how the search page reacts to new text in the clipboard.</div>
- </div>
- <div class="settings-item-right">
- <select data-setting="clipboard.autoSearchContent"
- data-transform='[
- {
- "step": "pre",
- "type": "toBoolean"
- },
- {
- "step": "post",
- "type": "toString"
- }
- ]'
- >
- <option value="true">Search for definitions</option>
- <option value="false">Update search query only</option>
- </select>
- </div>
- </div></div>
<div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
<div class="settings-item-left">
<div class="settings-item-label">Size</div>
@@ -1605,6 +1543,81 @@
</div></div>
</div>
+ <!-- Clipboard -->
+ <div>
+ <div class="heading-container">
+ <div class="heading-container-icon"><span class="icon" data-icon="clipboard"></span></div>
+ <div class="heading-container-left"><h2 id="clipboard"><a href="#!clipboard">Clipboard</a></h2></div>
+ <div class="heading-container-right"><a class="more-toggle more-only heading-link-light" data-parent-distance="3">Info&hellip;</a></div>
+ </div>
+ <div class="heading-description more" hidden>
+ <p>
+ Yomichan can watch the system copy clipboard for Japanese text and automatically search the
+ text on the search page.
+ This can be useful for using Yomichan to scan text from external applications.
+ </p>
+ <p>
+ This feature requires Yomichan to have clipboard reading permissions, and when this option is enabled,
+ the clipboard will be frequently checked for new text.
+ </p>
+ <p>
+ <a class="more-toggle" data-parent-distance="3">Less&hellip;</a>
+ </p>
+ </div>
+ </div>
+ <div class="settings-group">
+ <div class="settings-item"><div class="settings-item-inner">
+ <div class="settings-item-left">
+ <div class="settings-item-label">Enable background clipboard text monitoring</div>
+ <div class="settings-item-description">Open the search page in a new window when the clipboard contains Japanese text.</div>
+ </div>
+ <div class="settings-item-right">
+ <label class="toggle"><input type="checkbox" class="clipboard-toggle" data-clipboard-setting="clipboard.enableBackgroundMonitor"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+ </div>
+ </div></div>
+ <div class="settings-item"><div class="settings-item-inner">
+ <div class="settings-item-left">
+ <div class="settings-item-label">Enable search page clipboard text monitoring</div>
+ <div class="settings-item-description">The query on the search page will be automatically updated with text in the clipboard.</div>
+ </div>
+ <div class="settings-item-right">
+ <label class="toggle"><input type="checkbox" class="clipboard-toggle" data-clipboard-setting="clipboard.enableSearchPageMonitor"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+ </div>
+ </div></div>
+ <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
+ <div class="settings-item-left">
+ <div class="settings-item-label">Maximum clipboard text search length</div>
+ <div class="settings-item-description">Limit the number of characters used when searching clipboard text.</div>
+ </div>
+ <div class="settings-item-right">
+ <input type="number" min="0" step="1" data-setting="clipboard.maximumSearchLength">
+ </div>
+ </div></div>
+ <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
+ <div class="settings-item-left">
+ <div class="settings-item-label">Clipboard text search mode</div>
+ <div class="settings-item-description">Change how the search page reacts to new text in the clipboard.</div>
+ </div>
+ <div class="settings-item-right">
+ <select data-setting="clipboard.autoSearchContent"
+ data-transform='[
+ {
+ "step": "pre",
+ "type": "toBoolean"
+ },
+ {
+ "step": "post",
+ "type": "toString"
+ }
+ ]'
+ >
+ <option value="true">Search for definitions</option>
+ <option value="false">Update query only</option>
+ </select>
+ </div>
+ </div></div>
+ </div>
+
<!-- Shortcuts -->
<div class="heading-container">
<div class="heading-container-icon"><span class="icon" data-icon="keyboard"></span></div>
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 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M8 .5c-.41421 0-.75.33579-.75.75 0 .25-.25.25-.75.25-.554 0-1 .446-1 1V3h5v-.5c0-.554-.446-1-1-1-.5 0-.75 0-.75-.25C8.75.83579 8.41421.5 8 .5zM2.5 2v13h11V2h-2.5938c.05663.15724.09375.32437.09375.5V3h1.5v11h-9V3h1.5v-.5c0-.17563.03712-.34276.09375-.5zm2 3v1h7V5zm0 2v1h7V7zm0 2v1h7V9zm0 2v1h5v-1z"/></svg> \ 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 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
@@ -14,7 +12,7 @@
inkscape:export-ydpi="192"
inkscape:export-xdpi="192"
sodipodi:docname="icons.svg"
- inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+ inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)"
id="svg8"
version="1.1"
viewBox="0 0 16 16"
@@ -27,11 +25,11 @@
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
- inkscape:zoom="45.254834"
- inkscape:cx="8.4539164"
- inkscape:cy="8.0625778"
+ inkscape:zoom="32"
+ inkscape:cx="7.2634756"
+ inkscape:cy="9.0903162"
inkscape:document-units="px"
- inkscape:current-layer="layer49"
+ inkscape:current-layer="layer50"
showgrid="true"
units="px"
inkscape:snap-center="true"
@@ -48,7 +46,8 @@
inkscape:snap-intersection-paths="true"
inkscape:object-paths="true"
inkscape:snap-others="true"
- inkscape:snap-nodes="true">
+ inkscape:snap-nodes="true"
+ inkscape:document-rotation="0">
<inkscape:grid
type="xygrid"
id="grid815"
@@ -64,6 +63,40 @@
</sodipodi:namedview>
<defs
id="defs2">
+ <inkscape:path-effect
+ effect="fillet_chamfer"
+ id="path-effect1089"
+ is_visible="true"
+ lpeversion="1"
+ satellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,1,1,0,0.5,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,1,1,0,0.5,0,1 @ F,0,0,1,0,0,0,1"
+ unit="px"
+ method="auto"
+ mode="F"
+ radius="0.5"
+ chamfer_steps="1"
+ flexible="false"
+ use_knot_distance="true"
+ apply_no_radius="true"
+ apply_with_radius="true"
+ only_selected="true"
+ hide_knots="false" />
+ <inkscape:path-effect
+ effect="fillet_chamfer"
+ id="path-effect1087"
+ is_visible="false"
+ lpeversion="1"
+ satellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,0,0,1"
+ unit="px"
+ method="auto"
+ mode="F"
+ radius="0.5"
+ chamfer_steps="1"
+ flexible="false"
+ use_knot_distance="true"
+ apply_no_radius="true"
+ apply_with_radius="true"
+ only_selected="true"
+ hide_knots="false" />
<linearGradient
id="linearGradient5225"
inkscape:collect="always">
@@ -1098,7 +1131,7 @@
inkscape:groupmode="layer"
id="layer34"
inkscape:label="Note Card"
- style="display:none"
+ style="display:none;opacity:1"
sodipodi:insensitive="true">
<path
inkscape:connector-curvature="0"
@@ -1550,10 +1583,22 @@
<g
inkscape:groupmode="layer"
id="layer49"
- inkscape:label="Plus Thick">
+ inkscape:label="Plus Thick"
+ style="display:none">
+ <path
+ style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
+ 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" />
+ </g>
+ <g
+ inkscape:groupmode="layer"
+ id="layer50"
+ inkscape:label="Clipboard">
<path
+ id="rect1074"
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
- d="M 6 2 L 6 6 L 2 6 L 2 10 L 6 10 L 6 14 L 10 14 L 10 10 L 14 10 L 14 6 L 10 6 L 10 2 L 6 2 z "
- id="rect1068" />
+ d="M 8,0.5 C 7.5857864,0.5 7.25,0.83578644 7.25,1.25 7.25,1.5 7,1.5 6.5,1.5 c -0.554,0 -1,0.446 -1,1 V 3 h 5 V 2.5 c 0,-0.554 -0.446,-1 -1,-1 C 9,1.5 8.75,1.5 8.75,1.25 8.75,0.83578644 8.4142136,0.5 8,0.5 Z M 2.5,2 v 13 h 11 V 2 H 10.90625 C 10.962878,2.1572391 11,2.3243683 11,2.5 V 3 h 1.5 v 11 h -9 V 3 H 5 V 2.5 C 5,2.3243683 5.0371223,2.1572391 5.09375,2 Z m 2,3 v 1 h 7 V 5 Z m 0,2 v 1 h 7 V 7 Z m 0,2 v 1 h 7 V 9 Z m 0,2 v 1 h 5 v -1 z"
+ sodipodi:nodetypes="ssssccsssscccccsccccccscccccccccccccccccccccc" />
</g>
</svg>