From e9a913a615867b32563140f49166c0b959b715cb Mon Sep 17 00:00:00 2001 From: Lucas Dower Date: Mon, 20 Mar 2023 19:08:38 +0000 Subject: [PATCH] Minor UI style changes --- src/app_context.ts | 54 ++++++++++++-------- src/ui/elements/header_element.ts | 36 +++++++------- src/ui/elements/placeholder_element.ts | 30 +++++++++++ src/ui/layout.ts | 20 ++++---- styles.css | 69 ++++---------------------- template.html | 2 +- 6 files changed, 101 insertions(+), 110 deletions(-) create mode 100644 src/ui/elements/placeholder_element.ts diff --git a/src/app_context.ts b/src/app_context.ts index f4c64f2..b676395 100644 --- 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']); } diff --git a/src/ui/elements/header_element.ts b/src/ui/elements/header_element.ts index 3b89a4a..c2bc170 100644 --- a/src/ui/elements/header_element.ts +++ b/src/ui/elements/header_element.ts @@ -43,28 +43,26 @@ export class HeaderUIElement extends BaseUIElement { public override generateHTML(): string { return ` -
-
-
-
- -
-
-
-
- ObjToSchematic -
-
- v${AppConfig.Get.MAJOR_VERSION}.${AppConfig.Get.MINOR_VERSION}.${AppConfig.Get.HOTFIX_VERSION}${AppConfig.Get.VERSION_TYPE} • Minecraft ${AppConfig.Get.MINECRAFT_VERSION} -
+
+
+
+ +
+
+
+
+ ObjToSchematic +
+
+ v${AppConfig.Get.MAJOR_VERSION}.${AppConfig.Get.MINOR_VERSION}.${AppConfig.Get.HOTFIX_VERSION}${AppConfig.Get.VERSION_TYPE} • Minecraft ${AppConfig.Get.MINECRAFT_VERSION}
-
- ${this._githubButton.generateHTML()} - ${this._bugButton.generateHTML()} - ${this._discordButton.generateHTML()} -
+
+
+ ${this._githubButton.generateHTML()} + ${this._bugButton.generateHTML()} + ${this._discordButton.generateHTML()}
`; diff --git a/src/ui/elements/placeholder_element.ts b/src/ui/elements/placeholder_element.ts new file mode 100644 index 0000000..32aeff5 --- /dev/null +++ b/src/ui/elements/placeholder_element.ts @@ -0,0 +1,30 @@ +import { ConfigUIElement } from './config_element'; + +export class PlaceholderElement extends ConfigUIElement { + private _placeholderText: string; + + public constructor(placeholderText: string) { + super(undefined); + + this._placeholderText = placeholderText; + } + + public override generateHTML(): string { + return ` +
+ ${this._generateInnerHTML()} +
+ `; + } + + protected override _generateInnerHTML(): string { + return ` +
+ ${this._placeholderText} +
+ `; + } + + public override registerEvents(): void { + } +} diff --git a/src/ui/layout.ts b/src/ui/layout.ts index 311a57d..728a4cc 100644 --- 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 = `
`; - } - - const itemB = document.getElementsByClassName('gutter').item(0); - if (itemB !== null) { - itemB.innerHTML = `
`; - } } public cacheValues(action: EAction) { diff --git a/styles.css b/styles.css index c111535..5323f23 100644 --- 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); -} - +} \ No newline at end of file diff --git a/template.html b/template.html index df951a2..6b7e1f0 100644 --- a/template.html +++ b/template.html @@ -38,7 +38,7 @@
-
+