Add "Move to" menu option for moving dictionary options to a specific location (#1651)

* Add "Move to" option

* Fix IDs
This commit is contained in:
toasted-nutbread 2021-05-02 21:04:39 -04:00 committed by GitHub
parent a8b602834f
commit 32f5544021
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 57 additions and 3 deletions

View File

@ -2124,11 +2124,14 @@ button.hotkey-list-item-enabled-button[data-scope-count='0'] {
.dictionary-list { .dictionary-list {
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: auto 1fr auto auto; grid-template-columns: auto auto 1fr auto auto;
grid-template-rows: auto; grid-template-rows: auto;
place-items: center start; place-items: center start;
margin-top: 0.5em; margin-top: 0.5em;
} }
.dictionary-list-index {
margin-right: 0.5em;
}
.dictionary-list[data-count='0']>.dictionary-item-top { .dictionary-list[data-count='0']>.dictionary-item-top {
display: none; display: none;
} }

View File

@ -83,6 +83,7 @@ class DictionaryEntry {
const count = this._dictionaryController.dictionaryOptionCount; const count = this._dictionaryController.dictionaryOptionCount;
this._setMenuActionEnabled(bodyNode, 'moveUp', this._index > 0); this._setMenuActionEnabled(bodyNode, 'moveUp', this._index > 0);
this._setMenuActionEnabled(bodyNode, 'moveDown', this._index < count - 1); this._setMenuActionEnabled(bodyNode, 'moveDown', this._index < count - 1);
this._setMenuActionEnabled(bodyNode, 'moveTo', count > 1);
} }
_onMenuClose(e) { _onMenuClose(e) {
@ -99,6 +100,9 @@ class DictionaryEntry {
case 'moveDown': case 'moveDown':
this._move(1); this._move(1);
break; break;
case 'moveTo':
this._showMoveToModal();
break;
} }
} }
@ -173,6 +177,20 @@ class DictionaryEntry {
if (element === null) { return; } if (element === null) { return; }
element.disabled = !enabled; 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 { class DictionaryExtraInfo {
@ -269,6 +287,7 @@ class DictionaryController {
this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
this._allCheckbox.addEventListener('change', this._onAllCheckboxChange.bind(this), false); 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-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) { if (this._checkIntegrityButton !== null) {
this._checkIntegrityButton.addEventListener('click', this._onCheckIntegrityButtonClick.bind(this), false); this._checkIntegrityButton.addEventListener('click', this._onCheckIntegrityButtonClick.bind(this), false);
} }
@ -291,7 +310,8 @@ class DictionaryController {
const {dictionaries} = options; const {dictionaries} = options;
if ( if (
index1 < 0 || index1 >= dictionaries.length || index1 < 0 || index1 >= dictionaries.length ||
index2 < 0 || index2 >= dictionaries.length index2 < 0 || index2 >= dictionaries.length ||
index1 === index2
) { ) {
return; return;
} }
@ -497,6 +517,19 @@ class DictionaryController {
this._checkIntegrity(); 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) { _updateMainDictionarySelectOptions(dictionaries) {
for (const select of document.querySelectorAll('[data-setting="general.mainDictionary"]')) { for (const select of document.querySelectorAll('[data-setting="general.mainDictionary"]')) {
const fragment = document.createDocumentFragment(); const fragment = document.createDocumentFragment();

View File

@ -2080,7 +2080,8 @@
for a list free dictionaries or click the <em>Import</em> button below to select a dictionary file to import. for a list free dictionaries or click the <em>Import</em> button below to select a dictionary file to import.
</div> </div>
<div id="dictionary-error" class="danger-text margin-above" hidden></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> <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 dictionary-item-title-container">All</div>
<div class="dictionary-item-top">Priority</div> <div class="dictionary-item-top">Priority</div>
@ -2226,9 +2227,24 @@
</div> </div>
</div></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 --> <!-- Dictionary templates -->
<template id="dictionary-template"> <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> <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"> <div class="dictionary-item-title-container">
<span> <span>
@ -2251,6 +2267,7 @@
</div></template> </div></template>
<template id="dictionary-extra-template"> <template id="dictionary-extra-template">
<div class="dictionary-item-bottom"></div>
<div class="dictionary-item-bottom"></div> <div class="dictionary-item-bottom"></div>
<div class="dictionary-item-bottom dictionary-item-title-container"> <div class="dictionary-item-bottom dictionary-item-title-container">
<span> <span>
@ -2268,6 +2285,7 @@
<button class="popup-menu-item" data-menu-action="showDetails">Details&hellip;</button> <button class="popup-menu-item" data-menu-action="showDetails">Details&hellip;</button>
<button class="popup-menu-item" data-menu-action="moveUp">Move up</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="moveDown">Move down</button>
<button class="popup-menu-item" data-menu-action="moveTo">Move to&hellip;</button>
<button class="popup-menu-item" data-menu-action="delete">Delete</button> <button class="popup-menu-item" data-menu-action="delete">Delete</button>
</div></div></div></template> </div></div></div></template>