Added support for minimising properties

src/ui/components/config.ts

@@ -2,6 +2,7 @@ import { TTranslationMap } from '../../../loc/base';
 import { DeepLeafKeys, LOC, TLocalisedString } from '../../localiser';
 import { ASSERT } from '../../util/error_util';
 import { UIUtil } from '../../util/ui_util';
+import { AppIcons } from '../icons';
 import { BaseComponent } from './base';
 
 /**
@@ -14,6 +15,7 @@ export abstract class ConfigComponent<T, F> extends BaseComponent<F> {
     private _value?: T;
     private _onValueChangedListeners: Array<(newValue: T) => void>;
     private _onEnabledChangedListeners: Array<(isEnabled: boolean) => void>;
+    private _canMinimise: boolean;
 
     public constructor(defaultValue?: T) {
         super();
@@ -21,6 +23,7 @@ export abstract class ConfigComponent<T, F> extends BaseComponent<F> {
         this._label = '' as TLocalisedString;
         this._onValueChangedListeners = [];
         this._onEnabledChangedListeners = [];
+        this._canMinimise = false;
     }
 
     public setDefaultValue(value: T) {
@@ -88,6 +91,33 @@ export abstract class ConfigComponent<T, F> extends BaseComponent<F> {
     }
 
     public override finalise(): void {
+        if (this._canMinimise) {
+            const minimiserElement = UIUtil.getElementById(this._getId() + '-minimiser') as HTMLDivElement;
+            const labelElement = UIUtil.getElementById(this._getLabelId()) as HTMLDivElement;
+            const propElement = UIUtil.getElementById(this._getId() + '-prop') as HTMLDivElement;
+
+            labelElement.addEventListener('click', () => {
+                propElement.classList.toggle('hide');
+                if (propElement.classList.contains('hide')) {
+                    minimiserElement.innerHTML = AppIcons.ARROW_RIGHT;
+                } else {
+                    minimiserElement.innerHTML = AppIcons.ARROW_DOWN;
+                }
+            });
+
+            labelElement.addEventListener('mouseenter', () => {
+                if (this.enabled) {
+                    labelElement.style.color = '#d9d9d9';
+                }
+                labelElement.style.cursor = 'pointer';
+            });
+
+            labelElement.addEventListener('mouseleave', () => {
+                labelElement.style.color = '';
+                labelElement.style.cursor = '';
+            });
+        }
+
         super.finalise();
 
         /*
@@ -98,11 +128,17 @@ export abstract class ConfigComponent<T, F> extends BaseComponent<F> {
         */
     }
 
+    public setCanMinimise() {
+        this._canMinimise = true;
+        return this;
+    }
+
     public override generateHTML() {
         return `
             <div class="property">
                 <div class="prop-key-container" id="${this._getLabelId()}">
                     ${this._label}
+                    ${this._canMinimise ? `<div style="display: flex;" id="${this._getId()}-minimiser">${AppIcons.ARROW_DOWN}</div>` : ''}
                 </div>
                 <div class="prop-value-container" id="${this._getId()}-prop">
                     ${this._generateInnerHTML()}

src/ui/components/material_type.ts

@@ -1,6 +1,6 @@
+import { LOC } from '../../localiser';
 import { MaterialType, SolidMaterial, TexturedMaterial } from '../../mesh';
 import { AppIcons } from '../icons';
-import { LOC } from '../../localiser';
 import { ConfigComponent } from './config';
 import { ToolbarItemComponent } from './toolbar_item';
 

src/ui/components/palette.ts

@@ -217,6 +217,8 @@ export class PaletteComponent extends ConfigComponent<Palette, HTMLDivElement> {
     }
 
     public override finalise(): void {
+        super.finalise();
+
         this._checkboxes.forEach((checkbox) => {
             checkbox.element.finalise();
         });

src/ui/components/placeholder.ts

@@ -28,6 +28,8 @@ export class PlaceholderComponent extends ConfigComponent<undefined, HTMLDivElem
     public override generateHTML(): string {
         return `
             <div class="property" style="justify-content: center;">
+                <div id="${this._getLabelId()}"></div>
+                <div id="${this._getId()}-prop"></div>
                 ${this._generateInnerHTML()}
             </div>
         `;

src/ui/components/solid_material.ts

@@ -25,6 +25,8 @@ export class SolidMaterialComponent extends ConfigComponent<SolidMaterial, HTMLD
             .setDefaultValue(material.colour.a)
             .setDecimals(2)
             .setStep(0.01);
+
+        this.setCanMinimise();
     }
 
     public override refresh() {
@@ -56,6 +58,8 @@ export class SolidMaterialComponent extends ConfigComponent<SolidMaterial, HTMLD
     }
 
     public override finalise(): void {
+        super.finalise();
+
         this._typeElement.finalise();
         this._ColourComponent.finalise();
         this._alphaElement.finalise();

src/ui/components/textured_material.ts

@@ -71,6 +71,8 @@ export class TexturedMaterialComponent extends ConfigComponent<TexturedMaterial,
                     .setDefaultValue(material.transparency.channel);
                 break;
         }
+
+        this.setCanMinimise();
     }
 
     public override refresh() {

src/ui/icons.ts

@@ -255,4 +255,11 @@ export namespace AppIcons {
             <path d="M3 19l15 -15l3 3l-6 6l2 2a14 14 0 0 1 -14 4" />
         </svg>
     `;
+
+    export const ARROW_RIGHT = `
+        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+            <polyline points="9 6 15 12 9 18" />
+        </svg>
+    `;
 }

styles.css

@@ -672,4 +672,8 @@ a {
 }
 .comp-slider.enabled {
   cursor: e-resize;
+}
+
+.hide {
+  display: none;
 }