Fixed disabled styles for various material components, closes LucasDower#145

Author: LucasDower

src/ui/components/colour.ts

@@ -21,9 +21,9 @@ export class ColourComponent extends ConfigComponent<RGBA, HTMLInputElement> {
         super._onEnabledChanged();
 
         if (this.enabled) {
-            this._getElement().classList.add('enabled');
+            this._getElement().disabled = false;
         } else {
-            this._getElement().classList.remove('enabled');
+            this._getElement().disabled = true;
         }
     }
 }

src/ui/components/image.ts

@@ -75,12 +75,22 @@ export class ImageComponent extends ConfigComponent<Promise<TImageRawWrap>, HTML
     protected override _onEnabledChanged(): void {
         super._onEnabledChanged();
 
+        const imageElement = UIUtil.getElementById(this._imageId) as HTMLImageElement;
+        const placeholderComponent = UIUtil.getElementById(this._imageId + '-placeholder');
+        if (!this.enabled) {
+            imageElement.classList.add('disabled');
+            placeholderComponent.classList.add('disabled');
+        } else {
+            imageElement.classList.remove('disabled');
+            placeholderComponent.classList.remove('disabled');
+        }
+
         this._switchElement.setEnabled(this.enabled);
     }
 
     protected override _onValueChanged(): void {
         const inputElement = UIUtil.getElementById(this._imageId) as HTMLImageElement;
-        const PlaceholderComponent = UIUtil.getElementById(this._imageId + '-placeholder');
+        const placeholderComponent = UIUtil.getElementById(this._imageId + '-placeholder');
 
         this.getValue()
             .then((res) => {
@@ -90,13 +100,13 @@ export class ImageComponent extends ConfigComponent<Promise<TImageRawWrap>, HTML
                 this._switchElement.setActive(false);
                 inputElement.src = res.raw;
                 inputElement.style.display = 'unset';
-                PlaceholderComponent.style.display = 'none';
+                placeholderComponent.style.display = 'none';
             })
             .catch((err) => {
                 this._switchElement.setActive(true);
                 inputElement.src = '';
                 inputElement.style.display = 'none';
-                PlaceholderComponent.style.display = 'flex';
+                placeholderComponent.style.display = 'flex';
             });
     }
 

styles.css

@@ -488,11 +488,14 @@ svg {
   border-radius: 5px;
   border: 1px solid var(--gray-600);
 }
-.enabled.colour-swatch::-webkit-color-swatch:hover {
+.colour-swatch:enabled::-webkit-color-swatch:hover {
   border: 1px solid var(--gray-700);
   filter: brightness(1.1);
   cursor: pointer;
 }
+.colour-swatch:disabled::-webkit-color-swatch {
+  opacity: 0.25;
+}
 
 .texture-preview {
   border: 1px solid var(--gray-600);
@@ -502,6 +505,10 @@ svg {
 .texture-preview-missing {
   border-color: orange !important;
 }
+.texture-preview.disabled {
+  filter: grayscale(0.5);
+  opacity: 0.5;
+}
 
 .texture-preview-placeholder {
   border: 1px solid var(--gray-400);
@@ -513,6 +520,9 @@ svg {
   align-items: center;
   justify-content: center;
 }
+.texture-preview-placeholder.disabled {
+  color: var(--text-dark);
+}
 
 .texture-hover {
   border-color: var(--text-standard) !important;