From 282c4cca829a21ec50eb3b858a1ad4295a5c15aa Mon Sep 17 00:00:00 2001
From: patriceac <48073125+patriceac@users.noreply.github.com>
Date: Thu, 16 Feb 2023 05:59:08 -0800
Subject: [PATCH] Add support for disabled state to model dropdown (#886)

* 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.
---
 ui/media/css/searchable-models.css |  1 +
 ui/media/js/searchable-models.js   | 28 +++++++++++++++++++++-------
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/ui/media/css/searchable-models.css b/ui/media/css/searchable-models.css
index 418e1a60..8cd6c9e8 100644
--- a/ui/media/css/searchable-models.css
+++ b/ui/media/css/searchable-models.css
@@ -75,6 +75,7 @@
     padding-top: 3px;
     cursor: pointer;
     font-size: 8pt;
+    transition: none;
 }
 
 .model-input {
diff --git a/ui/media/js/searchable-models.js b/ui/media/js/searchable-models.js
index 89fb38e6..ee15efa8 100644
--- a/ui/media/js/searchable-models.js
+++ b/ui/media/js/searchable-models.js
@@ -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`)