diff options
| -rw-r--r-- | ext/css/settings.css | 5 | ||||
| -rw-r--r-- | ext/js/pages/settings/dictionary-controller.js | 35 | ||||
| -rw-r--r-- | ext/settings.html | 20 |
3 files changed, 57 insertions, 3 deletions
diff --git a/ext/css/settings.css b/ext/css/settings.css index f0070a1f..588a5f90 100644 --- a/ext/css/settings.css +++ b/ext/css/settings.css @@ -2124,11 +2124,14 @@ button.hotkey-list-item-enabled-button[data-scope-count='0'] { .dictionary-list { width: 100%; display: grid; - grid-template-columns: auto 1fr auto auto; + grid-template-columns: auto auto 1fr auto auto; grid-template-rows: auto; place-items: center start; margin-top: 0.5em; } +.dictionary-list-index { + margin-right: 0.5em; +} .dictionary-list[data-count='0']>.dictionary-item-top { display: none; } diff --git a/ext/js/pages/settings/dictionary-controller.js b/ext/js/pages/settings/dictionary-controller.js index 6f37798c..eca2a7d2 100644 --- a/ext/js/pages/settings/dictionary-controller.js +++ b/ext/js/pages/settings/dictionary-controller.js @@ -83,6 +83,7 @@ class DictionaryEntry { const count = this._dictionaryController.dictionaryOptionCount; this._setMenuActionEnabled(bodyNode, 'moveUp', this._index > 0); this._setMenuActionEnabled(bodyNode, 'moveDown', this._index < count - 1); + this._setMenuActionEnabled(bodyNode, 'moveTo', count > 1); } _onMenuClose(e) { @@ -99,6 +100,9 @@ class DictionaryEntry { case 'moveDown': this._move(1); break; + case 'moveTo': + this._showMoveToModal(); + break; } } @@ -173,6 +177,20 @@ class DictionaryEntry { if (element === null) { return; } element.disabled = !enabled; } + + _showMoveToModal() { + const {title} = this._dictionaryInfo; + const count = this._dictionaryController.dictionaryOptionCount; + const modal = this._dictionaryController.modalController.getModal('dictionary-move-location'); + const input = modal.node.querySelector('#dictionary-move-location'); + + modal.node.dataset.index = `${this._index}`; + modal.node.querySelector('.dictionary-title').textContent = title; + input.value = `${this._index + 1}`; + input.max = `${count}`; + + modal.setVisible(true); + } } class DictionaryExtraInfo { @@ -269,6 +287,7 @@ class DictionaryController { this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); this._allCheckbox.addEventListener('change', this._onAllCheckboxChange.bind(this), false); document.querySelector('#dictionary-confirm-delete-button').addEventListener('click', this._onDictionaryConfirmDelete.bind(this), false); + document.querySelector('#dictionary-move-button').addEventListener('click', this._onDictionaryMoveButtonClick.bind(this), false); if (this._checkIntegrityButton !== null) { this._checkIntegrityButton.addEventListener('click', this._onCheckIntegrityButtonClick.bind(this), false); } @@ -291,7 +310,8 @@ class DictionaryController { const {dictionaries} = options; if ( index1 < 0 || index1 >= dictionaries.length || - index2 < 0 || index2 >= dictionaries.length + index2 < 0 || index2 >= dictionaries.length || + index1 === index2 ) { return; } @@ -497,6 +517,19 @@ class DictionaryController { this._checkIntegrity(); } + _onDictionaryMoveButtonClick() { + const modal = this._modalController.getModal('dictionary-move-location'); + let {index} = modal.node.dataset; + index = Number.parseInt(index, 10); + + let target = document.querySelector('#dictionary-move-location').value; + target = Number.parseInt(target, 10) - 1; + + if (!Number.isFinite(target) || !Number.isFinite(index) || index === target) { return; } + + this.swapDictionaryOptions(index, target); + } + _updateMainDictionarySelectOptions(dictionaries) { for (const select of document.querySelectorAll('[data-setting="general.mainDictionary"]')) { const fragment = document.createDocumentFragment(); diff --git a/ext/settings.html b/ext/settings.html index 6f0c67ad..f7730eb4 100644 --- a/ext/settings.html +++ b/ext/settings.html @@ -2080,7 +2080,8 @@ for a list free dictionaries or click the <em>Import</em> button below to select a dictionary file to import. </div> <div id="dictionary-error" class="danger-text margin-above" hidden></div> - <div id="dictionary-list" class="dictionary-list" data-count="0"> + <div id="dictionary-list" class="dictionary-list generic-list" data-count="0"> + <div class="dictionary-item-top"></div> <label class="dictionary-item-top toggle dictionary-item-enabled-toggle-container"><input type="checkbox" id="all-dictionaries-enabled"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label> <div class="dictionary-item-top dictionary-item-title-container">All</div> <div class="dictionary-item-top">Priority</div> @@ -2226,9 +2227,24 @@ </div> </div></div> +<div id="dictionary-move-location-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small"> + <div class="modal-header"><div class="modal-title">Move Dictionary Options</div></div> + <div class="modal-body"> + <p>Input the location the dictionary <strong class="dictionary-title"></strong> should be moved to:</p> + <div class="margin-above"> + <input type="number" id="dictionary-move-location" min="1" step="1"> + </div> + </div> + <div class="modal-footer"> + <button class="low-emphasis" data-modal-action="hide">Cancel</button> + <button data-modal-action="hide" id="dictionary-move-button">Move</button> + </div> +</div></div> + <!-- Dictionary templates --> <template id="dictionary-template"> + <div class="dictionary-list-index generic-list-index-prefix"></div> <label class="toggle dictionary-item-enabled-toggle-container"><input type="checkbox" class="dictionary-enabled"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label> <div class="dictionary-item-title-container"> <span> @@ -2252,6 +2268,7 @@ <template id="dictionary-extra-template"> <div class="dictionary-item-bottom"></div> + <div class="dictionary-item-bottom"></div> <div class="dictionary-item-bottom dictionary-item-title-container"> <span> <strong class="dictionary-title">Unassociated Data</strong> <span class="light dictionary-total-count"></span> @@ -2268,6 +2285,7 @@ <button class="popup-menu-item" data-menu-action="showDetails">Details…</button> <button class="popup-menu-item" data-menu-action="moveUp">Move up</button> <button class="popup-menu-item" data-menu-action="moveDown">Move down</button> + <button class="popup-menu-item" data-menu-action="moveTo">Move to…</button> <button class="popup-menu-item" data-menu-action="delete">Delete</button> </div></div></div></template> |