alex/yomichan
1
Fork 0
Code Releases Activity

Settings modal updates (#2173)

Browse Source 
* Move the "Add" button into the footer

* Scroll to the bottom when adding

* Move the Audio Sources add button

* Simplify, remove the (?) link

* Move "Add" button to footer
This commit is contained in:
toasted-nutbread 2022-06-03 18:19:40 -04:00 committed by GitHub
parent c966d9b1eb
commit 6cc57d953d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ext/js/pages/settings/scan-inputs-controller.js
View File

@ -116,6 +116,12 @@ class ScanInputsController {
deleteCount: 0, deleteCount: 0,
items: [scanningInput] items: [scanningInput]
}]); }]);
// Scroll to bottom
const button = e.currentTarget;
const modalContainer = button.closest('.modal');
const scrollContainer = modalContainer.querySelector('.modal-body');
scrollContainer.scrollTop = scrollContainer.scrollHeight;
} }
_addOption(index, scanningInput) { _addOption(index, scanningInput) {

25
ext/settings.html
View File

@ -2706,23 +2706,11 @@
<div class="settings-item-inner"> <div class="settings-item-inner">
<div class="settings-item-left"> <div class="settings-item-left">
<div class="settings-item-label"> <div class="settings-item-label">
Audio sources When searching for audio, the sources are checked in order until the first
<a tabindex="0" class="more-toggle more-only" data-parent-distance="4">(?)</a> valid source is found. This allows for selecting a fallback source if the
first choice is not available.
</div> </div>
</div> </div>
<div class="settings-item-right">
<button id="audio-source-add" class="low-emphasis">Add</button>
</div>
</div>
<div class="settings-item-children more" hidden>
<p>
When searching for audio, the sources are checked in order until the first
valid source is found. This allows for selecting a fallback source if the
first choice is not available.
</p>
<p>
<a tabindex="0" class="more-toggle" data-parent-distance="3">Less&hellip;</a>
</p>
</div> </div>
<div class="settings-item-children"> <div class="settings-item-children">
<div id="audio-source-list" class="generic-list"></div> <div id="audio-source-list" class="generic-list"></div>
@ -2733,6 +2721,7 @@
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button id="audio-source-add" class="low-emphasis">Add</button>
<button data-modal-action="hide">Close</button> <button data-modal-action="hide">Close</button>
</div> </div>
</div></div> </div></div>
@ -2876,9 +2865,9 @@
No scanning inputs have been defined yet. No scanning inputs have been defined yet.
Click the <em>Add</em> button to add a new input. Click the <em>Add</em> button to add a new input.
</div> </div>
<div class="flex-row-nowrap right"><button class="low-emphasis" id="scan-input-add">Add</button></div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="low-emphasis" id="scan-input-add">Add</button>
<button data-modal-action="hide">Close</button> <button data-modal-action="hide">Close</button>
</div> </div>
</div></div> </div></div>
@ -3435,9 +3424,6 @@
<div class="settings-item-left"> <div class="settings-item-left">
<div class="settings-item-label">Text replacement patterns</div> <div class="settings-item-label">Text replacement patterns</div>
</div> </div>
<div class="settings-item-right">
<button id="translation-text-replacement-add" class="low-emphasis">Add</button>
</div>
</div> </div>
<div class="settings-item-children"> <div class="settings-item-children">
<div id="translation-text-replacement-list" class="generic-list"></div> <div id="translation-text-replacement-list" class="generic-list"></div>
@ -3446,6 +3432,7 @@
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button id="translation-text-replacement-add" class="low-emphasis">Add</button>
<button data-modal-action="hide">Close</button> <button data-modal-action="hide">Close</button>
</div> </div>
</div></div> </div></div>