holm/easydiffusion
1
0
Fork 0
forked from extern/easydiffusion
Code Issues Pull Requests 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;
cursor: pointer;
font-size: 8pt;
transition: none;
}
.model-input {

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

@ -53,6 +53,15 @@ class ModelDropdown
this.modelFilter.dataset.path = 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) {
return this.modelFilter.addEventListener(type, listener, options)
}
@ -350,13 +359,15 @@ class ModelDropdown
toggleModelList(e) {
e.preventDefault()
if (this.modelList.style.display != 'block') {
this.showModelList()
}
else
{
this.hideModelList()
this.modelFilter.select()
if (!this.modelFilter.disabled) {
if (this.modelList.style.display != 'block') {
this.showModelList()
}
else
{
this.hideModelList()
this.modelFilter.select()
}
}
}
@ -547,6 +558,9 @@ class ModelDropdown
this.modelFilter.insertAdjacentHTML('afterend', this.parseModels(this.flatModelList))
this.modelFilter.classList.add('model-selector')
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.modelResult = document.querySelector(`#${this.modelFilter.id}-model-result`)
this.modelNoResult = document.querySelector(`#${this.modelFilter.id}-model-no-result`)