Minor UI style changes

2025-02-17 13:39:28 +08:00 · 2023-03-20 19:08:38 +00:00 · 2023-03-20 19:08:38 +00:00 · e9a913a615
commit e9a913a615
parent 4e303de0c8
6 changed files with 101 additions and 110 deletions
--- a/src/app_context.ts
+++ b/src/app_context.ts
@ -9,6 +9,9 @@ import { MaterialMapManager } from './material-map';
 import { MaterialType } from './mesh';
 import { MeshType, Renderer } from './renderer';
 import { AppConsole, TMessage } from './ui/console';
+import { ButtonElement } from './ui/elements/button';
+import { CheckboxElement } from './ui/elements/checkbox';
+import { PlaceholderElement } from './ui/elements/placeholder_element';
 import { SolidMaterialElement } from './ui/elements/solid_material_element';
 import { TexturedMaterialElement } from './ui/elements/textured_material_element';
 import { UI } from './ui/layout';
@ -48,6 +51,7 @@ export class AppContext {
        this._ui.build();
        this._ui.registerEvents();
        this._ui.disable(EAction.Materials);
+        this._updateMaterialsAction();

        this._workerController = new WorkerController();
        this._workerController.addJob({ id: 'init', payload: { action: 'Init', params: {} } });
@ -229,29 +233,35 @@ export class AppContext {
        this._ui.layoutDull['materials'].elements = {};
        this._ui.layoutDull['materials'].elementsOrder = [];

-        this._materialManager.materials.forEach((material, materialName) => {
-            if (material.type === MaterialType.solid) {
-                this._ui.layoutDull['materials'].elements[`mat_${materialName}`] = new SolidMaterialElement(materialName, material)
-                    .setLabel(materialName)
-                    .onChangeTypeDelegate(() => {
-                        this._materialManager.changeMaterialType(materialName, MaterialType.textured);
-                        this._updateMaterialsAction();
-                    });
-            } else {
-                this._ui.layoutDull['materials'].elements[`mat_${materialName}`] = new TexturedMaterialElement(materialName, material)
-                    .setLabel(materialName)
-                    .onChangeTypeDelegate(() => {
-                        this._materialManager.changeMaterialType(materialName, MaterialType.solid);
-                        this._updateMaterialsAction();
-                    })
-                    .onChangeTransparencyTypeDelegate((newTransparency) => {
-                        this._materialManager.changeTransparencyType(materialName, newTransparency);
-                        this._updateMaterialsAction();
-                    });
-            }
+        if (this._materialManager.materials.size == 0) {
+            this._ui.layoutDull['materials'].elements[`placeholder_element`] = new PlaceholderElement('No materials loaded');
+            this._ui.layoutDull['materials'].elementsOrder.push(`placeholder_element`);
+        } else {
+            this._materialManager.materials.forEach((material, materialName) => {
+                if (material.type === MaterialType.solid) {
+                    this._ui.layoutDull['materials'].elements[`mat_${materialName}`] = new SolidMaterialElement(materialName, material)
+                        .setLabel(materialName)
+                        .onChangeTypeDelegate(() => {
+                            this._materialManager.changeMaterialType(materialName, MaterialType.textured);
+                            this._updateMaterialsAction();
+                        });
+                } else {
+                    this._ui.layoutDull['materials'].elements[`mat_${materialName}`] = new TexturedMaterialElement(materialName, material)
+                        .setLabel(materialName)
+                        .onChangeTypeDelegate(() => {
+                            this._materialManager.changeMaterialType(materialName, MaterialType.solid);
+                            this._updateMaterialsAction();
+                        })
+                        .onChangeTransparencyTypeDelegate((newTransparency) => {
+                            this._materialManager.changeTransparencyType(materialName, newTransparency);
+                            this._updateMaterialsAction();
+                        });
+                }
+
+                this._ui.layoutDull['materials'].elementsOrder.push(`mat_${materialName}`);
+            });
+        }

-            this._ui.layoutDull['materials'].elementsOrder.push(`mat_${materialName}`);
-        });
        this._ui.refreshSubcomponents(this._ui.layoutDull['materials']);
    }

--- a/src/ui/elements/header_element.ts
+++ b/src/ui/elements/header_element.ts
@ -43,28 +43,26 @@ export class HeaderUIElement extends BaseUIElement<HTMLDivElement> {

    public override generateHTML(): string {
        return `
-            <div class="container-header">
-                <div class="col-container header-cols">
-                    <div class="col-container">
-                        <div class="col-item">
-                            <img class="logo" alt="Logo" src="${IMAGE_LOGO}">
-                        </div>
-                        <div class="col-item">
-                            <div class="row-container">
-                                <div class="row-item title">
-                                    ObjToSchematic
-                                </div>
-                                <div class="row-item subtitle">
-                                    v${AppConfig.Get.MAJOR_VERSION}.${AppConfig.Get.MINOR_VERSION}.${AppConfig.Get.HOTFIX_VERSION}${AppConfig.Get.VERSION_TYPE} • Minecraft ${AppConfig.Get.MINECRAFT_VERSION}
-                                </div>
+            <div class="col-container header-cols">
+                <div class="col-container">
+                    <div class="col-item">
+                        <img class="logo" alt="Logo" src="${IMAGE_LOGO}">
+                    </div>
+                    <div class="col-item">
+                        <div class="row-container">
+                            <div class="row-item title">
+                                ObjToSchematic
+                            </div>
+                            <div class="row-item subtitle">
+                                v${AppConfig.Get.MAJOR_VERSION}.${AppConfig.Get.MINOR_VERSION}.${AppConfig.Get.HOTFIX_VERSION}${AppConfig.Get.VERSION_TYPE} • Minecraft ${AppConfig.Get.MINECRAFT_VERSION}
                            </div>
                        </div>
                    </div>
-                    <div class="col-container toolbar-group" style="gap: 0px;">
-                        ${this._githubButton.generateHTML()}
-                        ${this._bugButton.generateHTML()}
-                        ${this._discordButton.generateHTML()}
-                    </div>
+                </div>
+                <div class="toolbar-group" style="margin-right: 0px;">
+                    ${this._githubButton.generateHTML()}
+                    ${this._bugButton.generateHTML()}
+                    ${this._discordButton.generateHTML()}
                </div>
            </div>
        `;
--- a/src/ui/elements/placeholder_element.ts
+++ b/src/ui/elements/placeholder_element.ts
@ -0,0 +1,30 @@
+import { ConfigUIElement } from './config_element';
+
+export class PlaceholderElement extends ConfigUIElement<undefined, HTMLDivElement> {
+    private _placeholderText: string;
+
+    public constructor(placeholderText: string) {
+        super(undefined);
+
+        this._placeholderText = placeholderText;
+    }
+
+    public override generateHTML(): string {
+        return `
+            <div class="property" style="justify-content: center;">
+                ${this._generateInnerHTML()}
+            </div>
+        `;
+    }
+
+    protected override _generateInnerHTML(): string {
+        return `
+            <div class="text-dark">
+                ${this._placeholderText}
+            </div>
+        `;
+    }
+
+    public override registerEvents(): void {
+    }
+}
--- a/src/ui/layout.ts
+++ b/src/ui/layout.ts
@ -11,6 +11,7 @@ import { ASSERT } from '../util/error_util';
 import { LOG } from '../util/log_util';
 import { TAxis } from '../util/type_util';
 import { TDithering } from '../util/type_util';
+import { UIUtil } from '../util/ui_util';
 import { TVoxelOverlapRule } from '../voxel_mesh';
 import { TVoxelisers } from '../voxelisers/voxelisers';
 import { AppConsole } from './console';
@ -412,6 +413,13 @@ export class UI {
            document.body.style.cursor = 'default';
        }

+        const canvasColumn = UIUtil.getElementById('col-canvas');
+        if (ArcballCamera.Get.isUserRotating || ArcballCamera.Get.isUserTranslating) {
+            canvasColumn.style.cursor = 'grabbing';
+        } else {
+            canvasColumn.style.cursor = 'grab';
+        }
+
        for (const groupName in this._toolbarLeftDull) {
            const toolbarGroup = this._toolbarLeftDull[groupName];
            for (const toolbarItem of toolbarGroup.elementsOrder) {
@ -485,23 +493,15 @@ export class UI {
        Split(['.column-sidebar', '.column-canvas'], {
            sizes: [20, 80],
            minSize: [450, 500],
+            gutterSize: 5,
        });

        Split(['.column-properties', '.column-console'], {
            sizes: [85, 15],
            minSize: [0, 0],
            direction: 'vertical',
+            gutterSize: 5,
        });
-
-        const itemA = document.getElementsByClassName('gutter').item(1);
-        if (itemA !== null) {
-            itemA.innerHTML = `<div class='gutter-line'></div>`;
-        }
-
-        const itemB = document.getElementsByClassName('gutter').item(0);
-        if (itemB !== null) {
-            itemB.innerHTML = `<div class='gutter-line-horizontal'></div>`;
-        }
    }

    public cacheValues(action: EAction) {
--- a/styles.css
+++ b/styles.css
@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');

 :root {
@ -11,7 +11,7 @@
  --gray-500: hsl(0, 0%, 18%); /* standard property */
  --gray-600: hsl(0, 0%, 22%); /* standard border  */
  --gray-700: hsl(0, 0%, 25%); /* hovered border */
-  /*--gray-800: hsl(0, 0%, 38%);*/
+  --gray-800: hsl(0, 0%, 38%);

  --blue-400: hsl(190, 100%, 15%);
  --blue-450: hsl(190, 90%, 18%);
@ -44,7 +44,6 @@ body {
  font-family: 'Rubik', sans-serif;
  overflow: hidden;
  user-select: none;
-  font-weight: 300;
 }

 canvas {
@ -80,27 +79,13 @@ canvas {
 }
 .gutter:hover {
  background: var(--gray-600);
-  color: white;
+  color: var(--gray-800);
 }

 .gutter.gutter-vertical {
  cursor: row-resize;
 }

-.gutter-line {
-  width: 3px;
-  height: 20%;
-  background-color: currentColor;
-  border-radius: 2px;
-}
-
-.gutter-line-horizontal {
-  width: 20%;
-  height: 3px;
-  background-color: var(--gray-700);
-  border-radius: 2px;
-}
-
 .column-properties {
  background: var(--gray-300);
  overflow: auto;
@ -108,7 +93,7 @@ canvas {
 }

 .column-canvas {
-  cursor: crosshair;
+  cursor: grab;
 }

 .column-console {
@ -132,7 +117,6 @@ canvas {
  padding: 5px 10px;
  border: 1px solid var(--gray-400);
  border-radius: 10px;
-  border-top-left-radius: 0px;
 }

 .container-checkbox {
@ -140,14 +124,6 @@ canvas {
  height: var(--property-height);
 }

-.container-header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  color: var(--text-standard);
-  font-size: 85%;
-  padding: 5px;
-}

 .property {
  display: flex;
@ -171,15 +147,6 @@ canvas {
 }
 */

-.container-header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  color: var(--text-standard);
-  font-size: 85%;
-  padding: 5px 0px;
-}
-
 .container-button {
  display: flex;
  flex-direction: row;
@ -194,21 +161,14 @@ canvas {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
-  padding-top: 30px;
+  padding-top: 20px;
 }

 .group-heading {
  color: var(--gray-600);
  letter-spacing: 4px;
-  font-weight: 400;
  font-size: 85%;
-  padding: 12px 14px;
-  padding-bottom: 8px;
-  background: var(--gray-350);
-  border: 1px solid var(--gray-400);
-  border-bottom-width: 0px;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
+  padding: 12px 0px;
 }

 .prop-key-container {
@ -263,15 +223,12 @@ canvas {
  min-height: var(--subproperty-height);
  width: var(--subprop-value-width);
  overflow: auto;
-  font-weight: 300;
-  /*border-left: 1px solid var(--vertical-divider);*/
  padding-left: 5px;
 }

 input {
  font-family: 'Rubik', sans-serif;
  text-align: center;
-  font-weight: 300;
 }
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
@ -305,7 +262,6 @@ select {
  display: flex;
  align-items: center;
  justify-content: center;
-  font-weight: 400;
 }

 .button-progress {
@ -400,7 +356,6 @@ select {
 .spinbox-key {
  color: #ffffffb9;
  font-size: 85%;
-  font-weight: 300;
  padding-right: 5px;
 }

@ -570,7 +525,6 @@ svg {

 .checkbox-text {
  padding-left: 10px;
-  font-weight: 300;
  color: var(--text-dim)
 }
 .checkbox-text-hover {
@ -629,20 +583,21 @@ svg {
 }

 .title {
-  font-weight: 400;
  font-size: 110%;
 }

 .subtitle {
  font-size: 90%;
-  font-weight: 300;
  color: var(--text-dim);
 }

 .header-cols {
+  align-items: start;
  justify-content: space-between;
  width: 100%;
-  padding-top: 7px;
+  color: var(--text-standard);
+  font-size: 85%;
+  padding-top: 5px;
 }

 .struct-prop.container-icon-button {
@ -676,7 +631,6 @@ svg {
 }

 a {
-  font-weight: 400;
  color: var(--blue-600)
 }

@ -710,5 +664,4 @@ a {

 ::-webkit-scrollbar-corner {
  background: rgb(20, 20, 20);
-}
-
+}
--- a/template.html
+++ b/template.html
@ -38,7 +38,7 @@
        <div class="split column-console" id="console">
        </div>
      </div>
-      <div class="split column-canvas">
+      <div class="split column-canvas" id="col-canvas">
        <canvas id="canvas"></canvas>
        <div class="toolbar" id="toolbar"></div>
      </div>