aboutsummaryrefslogtreecommitdiff
path: root/ext/bg/settings2.html
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-01-27 19:34:14 -0500
committerGitHub <noreply@github.com>2021-01-27 19:34:14 -0500
commited0c0c20c095ac693dac3f1c4145e4c8dc83601a (patch)
tree6a426348a026e08c499f708b66797bfe14c91687 /ext/bg/settings2.html
parent97bb05147e256699cf1b5e85c4ef88e510b9ace1 (diff)
Native keyboard shortcuts settings (#1322)
* Fix style issue * Add ExtensionKeyboardShortcutController * Move descriptions * Add separator line
Diffstat (limited to 'ext/bg/settings2.html')
-rw-r--r--ext/bg/settings2.html107
1 files changed, 87 insertions, 20 deletions
diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html
index e55df47a..63498020 100644
--- a/ext/bg/settings2.html
+++ b/ext/bg/settings2.html
@@ -1628,32 +1628,32 @@
<div class="settings-item-left">
<div class="settings-item-label">
<p>
- Yomichan includes keyboard shortcuts for some common actions that can be configured
- using the web browser's settings.
- To configure these shortcuts:
+ Yomichan has two categories of keyboard shortcuts:
</p>
-
- <ul data-show-for-browser="chrome">
- <li>Open <a data-select-on-click="">chrome://extensions/shortcuts</a> in a new tab.</li>
- <li>Find the <em>Yomichan</em> section and configure the shortcuts.</li>
- </ul>
-
- <ul data-show-for-browser="edge">
- <li>Open <a data-select-on-click="">edge://extensions/shortcuts</a> in a new tab.</li>
- <li>Find the <em>Yomichan</em> section and configure the shortcuts.</li>
- </ul>
-
- <ul data-show-for-browser="firefox">
- <li>Open the extensions page (<a data-select-on-click="">about:addons</a>)</li>
- <li>Click the button on the right with the gear icon, then click <em>Manage Extension Shortcuts</em>.</li>
- <li>Find the <em>Yomichan</em> section and configure the shortcuts.</li>
+ <ul>
+ <li>
+ <strong>Standard</strong> keyboard shortcuts are controlled by the extension, and can be added, removed,
+ and configured to work on webpages that Yomichan functions on.
+ </li>
+ <li>
+ <strong>Native</strong> keyboard shortcuts are controlled by the web browser, and function globally
+ within the web browser<span data-show-for-browser="chrome edge"> or system-wide</span>.
+ </li>
</ul>
</div>
</div>
</div></div>
<div class="settings-item settings-item-button" data-modal-action="show,keyboard-shortcuts"><div class="settings-item-inner">
<div class="settings-item-left">
- <div class="settings-item-label">Configure keyboard shortcuts&hellip;</div>
+ <div class="settings-item-label">Configure standard keyboard shortcuts&hellip;</div>
+ </div>
+ <div class="settings-item-right open-panel-button-container">
+ <button class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
+ </div>
+ </div></div>
+ <div class="settings-item settings-item-button" data-modal-action="show,extension-keyboard-shortcuts"><div class="settings-item-inner">
+ <div class="settings-item-left">
+ <div class="settings-item-label">Configure native keyboard shortcuts&hellip;</div>
</div>
<div class="settings-item-right open-panel-button-container">
<button class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
@@ -2534,7 +2534,7 @@
</select>
</div>
</div></div>
- <div class="anki-card-primary-separator"></div>
+ <div class="modal-separator-line"></div>
<div class="settings-item"><div class="settings-item-inner">
<div class="settings-item-left">
<div class="settings-item-label">Deck</div>
@@ -3042,6 +3042,55 @@
</div>
</div></div>
+<div id="extension-keyboard-shortcuts" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content">
+ <div class="modal-header">
+ <div class="modal-title">Native Keyboard Shortcuts</div>
+ <div class="modal-header-button-container">
+ <div class="modal-header-button-group">
+ <button class="icon-button modal-header-button" data-modal-action="expand"><span class="icon-button-inner"><span class="icon" data-icon="expand"></span></span></button>
+ <button class="icon-button modal-header-button" data-modal-action="collapse"><span class="icon-button-inner"><span class="icon" data-icon="collapse"></span></span></button>
+ </div>
+ </div>
+ </div>
+ <div class="modal-body">
+ <div>
+ <p data-show-for-browser="chrome edge">
+ The native keyboard shortcuts are listed below,
+ but cannot be configured from within the extension on this browser.
+ To configure these shortcuts:
+ </p>
+
+ <p data-show-for-browser="firefox">
+ The native keyboard shortcuts can be configured below on this browser,
+ or by doing the following:
+ </p>
+
+ <ul data-show-for-browser="chrome">
+ <li>Open <a data-select-on-click="">chrome://extensions/shortcuts</a> in a new tab.</li>
+ <li>Find the <em>Yomichan</em> section and configure the shortcuts.</li>
+ </ul>
+
+ <ul data-show-for-browser="edge">
+ <li>Open <a data-select-on-click="">edge://extensions/shortcuts</a> in a new tab.</li>
+ <li>Find the <em>Yomichan</em> section and configure the shortcuts.</li>
+ </ul>
+
+ <ul data-show-for-browser="firefox">
+ <li>Open the extensions page (<a data-select-on-click="">about:addons</a>)</li>
+ <li>Click the button on the right with the gear icon, then click <em>Manage Extension Shortcuts</em>.</li>
+ <li>Find the <em>Yomichan</em> section and configure the shortcuts.</li>
+ </ul>
+ </div>
+ <div class="modal-separator-line"></div>
+ <div class="modal-settings-group" id="extension-hotkey-list"></div>
+ </div>
+ <div class="modal-footer">
+ <button class="low-emphasis danger" id="extension-hotkey-list-reset-all">Reset All</button>
+ <button class="low-emphasis danger" id="extension-hotkey-list-clear-all">Clear All</button>
+ <button data-modal-action="hide">Close</button>
+ </div>
+</div></div>
+
<!-- Keyboard shortcuts templates -->
<template id="hotkey-list-item-template"><div class="hotkey-list-item"><div class="hotkey-list-item-grid">
<div class="hotkey-list-item-index-cell generic-list-index-prefix"></div>
@@ -3101,12 +3150,29 @@
</div>
</div></div></template>
+<template id="extension-hotkey-list-item-template"><div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
+ <div class="settings-item-left">
+ <div class="settings-item-label"></div>
+ </div>
+ <div class="settings-item-right">
+ <div class="flex-row-nowrap">
+ <input type="text">
+ <button class="icon-button extension-hotkey-list-item-button" data-menu="extension-hotkey-list-item-menu" data-menu-position="below left"><span class="icon-button-inner"><span class="icon" data-icon="kebab-menu"></span></span></button>
+ </div>
+ </div>
+</div></div></template>
+
<template id="hotkey-list-item-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body">
<button class="popup-menu-item" data-menu-action="clearInputs">Clear input</button>
<button class="popup-menu-item" data-menu-action="resetInput">Reset input</button>
<button class="popup-menu-item" data-menu-action="delete">Delete</button>
</div></div></div></template>
+<template id="extension-hotkey-list-item-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body">
+ <button class="popup-menu-item" data-menu-action="clearInput">Clear input</button>
+ <button class="popup-menu-item" data-menu-action="resetInput">Reset input</button>
+</div></div></div></template>
+
<!-- Scripts -->
<script src="/mixed/lib/jszip.min.js"></script>
@@ -3165,6 +3231,7 @@
<script src="/bg/js/settings/status-footer.js"></script>
<script src="/bg/js/settings/storage-controller.js"></script>
+<script src="/bg/js/settings2/extension-keyboard-shortcuts-controller.js"></script>
<script src="/bg/js/settings2/keyboard-shortcuts-controller.js"></script>
<script src="/bg/js/settings2/nested-popups-controller.js"></script>
<script src="/bg/js/settings2/popup-window-controller.js"></script>