zhangyuheng/ObjToSchematic
1
0
Fork 0
forked from mirror/ObjToSchematic
Code Pull Requests 1 Activity

Minor UI style changes

Browse Source
This commit is contained in:
Lucas Dower 2023-03-20 19:08:38 +00:00
parent 4e303de0c8
commit e9a913a615
No known key found for this signature in database
GPG Key ID: B3EE6B8499593605
6 changed files with 101 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/app_context.ts
View File

@ -9,6 +9,9 @@ import { MaterialMapManager } from './material-map';
import { MaterialType } from './mesh'; import { MaterialType } from './mesh';
import { MeshType, Renderer } from './renderer'; import { MeshType, Renderer } from './renderer';
import { AppConsole, TMessage } from './ui/console'; 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 { SolidMaterialElement } from './ui/elements/solid_material_element';
import { TexturedMaterialElement } from './ui/elements/textured_material_element'; import { TexturedMaterialElement } from './ui/elements/textured_material_element';
import { UI } from './ui/layout'; import { UI } from './ui/layout';
@ -48,6 +51,7 @@ export class AppContext {
this._ui.build(); this._ui.build();
this._ui.registerEvents(); this._ui.registerEvents();
this._ui.disable(EAction.Materials); this._ui.disable(EAction.Materials);
this._updateMaterialsAction();
this._workerController = new WorkerController(); this._workerController = new WorkerController();
this._workerController.addJob({ id: 'init', payload: { action: 'Init', params: {} } }); 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'].elements = {};
this._ui.layoutDull['materials'].elementsOrder = []; this._ui.layoutDull['materials'].elementsOrder = [];
this._materialManager.materials.forEach((material, materialName) => { if (this._materialManager.materials.size == 0) {
if (material.type === MaterialType.solid) { this._ui.layoutDull['materials'].elements[`placeholder_element`] = new PlaceholderElement('No materials loaded');
this._ui.layoutDull['materials'].elements[`mat_${materialName}`] = new SolidMaterialElement(materialName, material) this._ui.layoutDull['materials'].elementsOrder.push(`placeholder_element`);
.setLabel(materialName) } else {
.onChangeTypeDelegate(() => { this._materialManager.materials.forEach((material, materialName) => {
this._materialManager.changeMaterialType(materialName, MaterialType.textured); if (material.type === MaterialType.solid) {
this._updateMaterialsAction(); this._ui.layoutDull['materials'].elements[`mat_${materialName}`] = new SolidMaterialElement(materialName, material)
}); .setLabel(materialName)
} else { .onChangeTypeDelegate(() => {
this._ui.layoutDull['materials'].elements[`mat_${materialName}`] = new TexturedMaterialElement(materialName, material) this._materialManager.changeMaterialType(materialName, MaterialType.textured);
.setLabel(materialName) this._updateMaterialsAction();
.onChangeTypeDelegate(() => { });
this._materialManager.changeMaterialType(materialName, MaterialType.solid); } else {
this._updateMaterialsAction(); this._ui.layoutDull['materials'].elements[`mat_${materialName}`] = new TexturedMaterialElement(materialName, material)
}) .setLabel(materialName)
.onChangeTransparencyTypeDelegate((newTransparency) => { .onChangeTypeDelegate(() => {
this._materialManager.changeTransparencyType(materialName, newTransparency); this._materialManager.changeMaterialType(materialName, MaterialType.solid);
this._updateMaterialsAction(); 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']); this._ui.refreshSubcomponents(this._ui.layoutDull['materials']);
} }

36
src/ui/elements/header_element.ts
View File

@ -43,28 +43,26 @@ export class HeaderUIElement extends BaseUIElement<HTMLDivElement> {
public override generateHTML(): string { public override generateHTML(): string {
return ` return `
<div class="container-header"> <div class="col-container header-cols">
<div class="col-container header-cols"> <div class="col-container">
<div class="col-container"> <div class="col-item">
<div class="col-item"> <img class="logo" alt="Logo" src="${IMAGE_LOGO}">
<img class="logo" alt="Logo" src="${IMAGE_LOGO}"> </div>
</div> <div class="col-item">
<div class="col-item"> <div class="row-container">
<div class="row-container"> <div class="row-item title">
<div class="row-item title"> ObjToSchematic
ObjToSchematic </div>
</div> <div class="row-item subtitle">
<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}
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> </div>
</div> </div>
<div class="col-container toolbar-group" style="gap: 0px;"> </div>
${this._githubButton.generateHTML()} <div class="toolbar-group" style="margin-right: 0px;">
${this._bugButton.generateHTML()} ${this._githubButton.generateHTML()}
${this._discordButton.generateHTML()} ${this._bugButton.generateHTML()}
</div> ${this._discordButton.generateHTML()}
</div> </div>
</div> </div>
`; `;

30
src/ui/elements/placeholder_element.ts Normal file
View File

@ -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 {
}
}

20
src/ui/layout.ts
View File

@ -11,6 +11,7 @@ import { ASSERT } from '../util/error_util';
import { LOG } from '../util/log_util'; import { LOG } from '../util/log_util';
import { TAxis } from '../util/type_util'; import { TAxis } from '../util/type_util';
import { TDithering } from '../util/type_util'; import { TDithering } from '../util/type_util';
import { UIUtil } from '../util/ui_util';
import { TVoxelOverlapRule } from '../voxel_mesh'; import { TVoxelOverlapRule } from '../voxel_mesh';
import { TVoxelisers } from '../voxelisers/voxelisers'; import { TVoxelisers } from '../voxelisers/voxelisers';
import { AppConsole } from './console'; import { AppConsole } from './console';
@ -412,6 +413,13 @@ export class UI {
document.body.style.cursor = 'default'; 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) { for (const groupName in this._toolbarLeftDull) {
const toolbarGroup = this._toolbarLeftDull[groupName]; const toolbarGroup = this._toolbarLeftDull[groupName];
for (const toolbarItem of toolbarGroup.elementsOrder) { for (const toolbarItem of toolbarGroup.elementsOrder) {
@ -485,23 +493,15 @@ export class UI {
Split(['.column-sidebar', '.column-canvas'], { Split(['.column-sidebar', '.column-canvas'], {
sizes: [20, 80], sizes: [20, 80],
minSize: [450, 500], minSize: [450, 500],
gutterSize: 5,
}); });
Split(['.column-properties', '.column-console'], { Split(['.column-properties', '.column-console'], {
sizes: [85, 15], sizes: [85, 15],
minSize: [0, 0], minSize: [0, 0],
direction: 'vertical', 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) { public cacheValues(action: EAction) {

69
styles.css
View File

@ -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'); @import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');
:root { :root {
@ -11,7 +11,7 @@
--gray-500: hsl(0, 0%, 18%); /* standard property */ --gray-500: hsl(0, 0%, 18%); /* standard property */
--gray-600: hsl(0, 0%, 22%); /* standard border */ --gray-600: hsl(0, 0%, 22%); /* standard border */
--gray-700: hsl(0, 0%, 25%); /* hovered 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-400: hsl(190, 100%, 15%);
--blue-450: hsl(190, 90%, 18%); --blue-450: hsl(190, 90%, 18%);
@ -44,7 +44,6 @@ body {
font-family: 'Rubik', sans-serif; font-family: 'Rubik', sans-serif;
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
font-weight: 300;
} }
canvas { canvas {
@ -80,27 +79,13 @@ canvas {
} }
.gutter:hover { .gutter:hover {
background: var(--gray-600); background: var(--gray-600);
color: white; color: var(--gray-800);
} }
.gutter.gutter-vertical { .gutter.gutter-vertical {
cursor: row-resize; 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 { .column-properties {
background: var(--gray-300); background: var(--gray-300);
overflow: auto; overflow: auto;
@ -108,7 +93,7 @@ canvas {
} }
.column-canvas { .column-canvas {
cursor: crosshair; cursor: grab;
} }
.column-console { .column-console {
@ -132,7 +117,6 @@ canvas {
padding: 5px 10px; padding: 5px 10px;
border: 1px solid var(--gray-400); border: 1px solid var(--gray-400);
border-radius: 10px; border-radius: 10px;
border-top-left-radius: 0px;
} }
.container-checkbox { .container-checkbox {
@ -140,14 +124,6 @@ canvas {
height: var(--property-height); height: var(--property-height);
} }
.container-header {
display: flex;
flex-direction: row;
align-items: center;
color: var(--text-standard);
font-size: 85%;
padding: 5px;
}
.property { .property {
display: flex; 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 { .container-button {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -194,21 +161,14 @@ canvas {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
padding-top: 30px; padding-top: 20px;
} }
.group-heading { .group-heading {
color: var(--gray-600); color: var(--gray-600);
letter-spacing: 4px; letter-spacing: 4px;
font-weight: 400;
font-size: 85%; font-size: 85%;
padding: 12px 14px; padding: 12px 0px;
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;
} }
.prop-key-container { .prop-key-container {
@ -263,15 +223,12 @@ canvas {
min-height: var(--subproperty-height); min-height: var(--subproperty-height);
width: var(--subprop-value-width); width: var(--subprop-value-width);
overflow: auto; overflow: auto;
font-weight: 300;
/*border-left: 1px solid var(--vertical-divider);*/
padding-left: 5px; padding-left: 5px;
} }
input { input {
font-family: 'Rubik', sans-serif; font-family: 'Rubik', sans-serif;
text-align: center; text-align: center;
font-weight: 300;
} }
input::-webkit-outer-spin-button, input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { input::-webkit-inner-spin-button {
@ -305,7 +262,6 @@ select {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: 400;
} }
.button-progress { .button-progress {
@ -400,7 +356,6 @@ select {
.spinbox-key { .spinbox-key {
color: #ffffffb9; color: #ffffffb9;
font-size: 85%; font-size: 85%;
font-weight: 300;
padding-right: 5px; padding-right: 5px;
} }
@ -570,7 +525,6 @@ svg {
.checkbox-text { .checkbox-text {
padding-left: 10px; padding-left: 10px;
font-weight: 300;
color: var(--text-dim) color: var(--text-dim)
} }
.checkbox-text-hover { .checkbox-text-hover {
@ -629,20 +583,21 @@ svg {
} }
.title { .title {
font-weight: 400;
font-size: 110%; font-size: 110%;
} }
.subtitle { .subtitle {
font-size: 90%; font-size: 90%;
font-weight: 300;
color: var(--text-dim); color: var(--text-dim);
} }
.header-cols { .header-cols {
align-items: start;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
padding-top: 7px; color: var(--text-standard);
font-size: 85%;
padding-top: 5px;
} }
.struct-prop.container-icon-button { .struct-prop.container-icon-button {
@ -676,7 +631,6 @@ svg {
} }
a { a {
font-weight: 400;
color: var(--blue-600) color: var(--blue-600)
} }
@ -710,5 +664,4 @@ a {
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background: rgb(20, 20, 20); background: rgb(20, 20, 20);
} }

2
template.html
View File

@ -38,7 +38,7 @@
<div class="split column-console" id="console"> <div class="split column-console" id="console">
</div> </div>
</div> </div>
<div class="split column-canvas"> <div class="split column-canvas" id="col-canvas">
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
<div class="toolbar" id="toolbar"></div> <div class="toolbar" id="toolbar"></div>
</div> </div>