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) {

23
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
<a tabindex="0" class="more-toggle more-only" data-parent-distance="4">(?)</a>
</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 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 valid source is found. This allows for selecting a fallback source if the
first choice is not available. first choice is not available.
</p> </div>
<p> </div>
<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>