extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-06-20 09:57:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add support for disabled state to model dropdown (#886)

Browse Source 
* Add support for disabled state to model dropdown

As per https://discord.com/channels/1014774730907209781/1021695193499582494/1075068193753804831

The only limitation is that we cannot visually gray out the chevron itself because the corresponding font-awesome icon is a Pro icon (https://fontawesome.com/icons/angle-down?s=duotone&f=classic).

* Gray out the chevron when the control is disabled

* Remove empty line

* Disable the transition on the chevron

Apply effect immediately when the dropdown is enabled/disabled.
This commit is contained in:
patriceac 2023-02-16 05:59:08 -08:00 committed by GitHub
parent 9f5f213cd3
commit 282c4cca82
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/media/css/searchable-models.css
View File

@ -75,6 +75,7 @@
padding-top: 3px; padding-top: 3px;
cursor: pointer; cursor: pointer;
font-size: 8pt; font-size: 8pt;
transition: none;
} }
.model-input { .model-input {

14
ui/media/js/searchable-models.js
View File

@ -53,6 +53,15 @@ class ModelDropdown
this.modelFilter.dataset.path = path this.modelFilter.dataset.path = path
this.selectEntry(path) this.selectEntry(path)
} }
get disabled() {
return this.modelFilter.disabled
}
set disabled(state) {
this.modelFilter.disabled = state
if (this.modelFilterArrow) {
this.modelFilterArrow.style.color = state ? 'dimgray' : ''
}
}
addEventListener(type, listener, options) { addEventListener(type, listener, options) {
return this.modelFilter.addEventListener(type, listener, options) return this.modelFilter.addEventListener(type, listener, options)
} }
@ -350,6 +359,7 @@ class ModelDropdown
toggleModelList(e) { toggleModelList(e) {
e.preventDefault() e.preventDefault()
if (!this.modelFilter.disabled) {
if (this.modelList.style.display != 'block') { if (this.modelList.style.display != 'block') {
this.showModelList() this.showModelList()
} }
@ -359,6 +369,7 @@ class ModelDropdown
this.modelFilter.select() this.modelFilter.select()
} }
} }
}
selectEntry(path) { selectEntry(path) {
if (path !== undefined) { if (path !== undefined) {
@ -547,6 +558,9 @@ class ModelDropdown
this.modelFilter.insertAdjacentHTML('afterend', this.parseModels(this.flatModelList)) this.modelFilter.insertAdjacentHTML('afterend', this.parseModels(this.flatModelList))
this.modelFilter.classList.add('model-selector') this.modelFilter.classList.add('model-selector')
this.modelFilterArrow = document.querySelector(`#${this.modelFilter.id}-model-filter-arrow`) this.modelFilterArrow = document.querySelector(`#${this.modelFilter.id}-model-filter-arrow`)
if (this.modelFilterArrow) {
this.modelFilterArrow.style.color = state ? 'dimgray' : ''
}
this.modelList = document.querySelector(`#${this.modelFilter.id}-model-list`) this.modelList = document.querySelector(`#${this.modelFilter.id}-model-list`)
this.modelResult = document.querySelector(`#${this.modelFilter.id}-model-result`) this.modelResult = document.querySelector(`#${this.modelFilter.id}-model-result`)
this.modelNoResult = document.querySelector(`#${this.modelFilter.id}-model-no-result`) this.modelNoResult = document.querySelector(`#${this.modelFilter.id}-model-no-result`)