diff options
Diffstat (limited to 'ext/bg/settings2.html')
| -rw-r--r-- | ext/bg/settings2.html | 107 |
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…</div> + <div class="settings-item-label">Configure standard keyboard shortcuts…</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…</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> |