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

Improved UI consistency

Browse Source
This commit is contained in:
Lucas Dower 2022-10-24 20:45:02 +01:00
parent d7ebd9c78e
commit 872eb9bf9a
6 changed files with 68 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/ui/elements/button.ts
View File

@ -13,8 +13,8 @@ export class ButtonElement extends BaseUIElement<any> {
public generateHTML() {
return `
<div class="button" id="${this._id}">
<div class="btn">${this._label}</div>
<div class="progress" id="${this._id}-progress"></div>
<div class="button-label">${this._label}</div>
<div class="button-progress" id="${this._id}-progress"></div>
</div>
`;
}

14
src/ui/elements/file_input.ts
View File

@ -18,7 +18,7 @@ export class FileInputElement extends LabelledElement<string> {
public generateInnerHTML() {
return `
<div class="input-text" id="${this._id}">
<div class="input-file" id="${this._id}">
${this._loadedFilePath}
</div>
`;
@ -59,15 +59,15 @@ export class FileInputElement extends LabelledElement<string> {
};
document.onmousemove = () => {
element.classList.remove('input-text-disabled');
element.classList.remove('input-text-hover');
element.classList.remove('input-file-disabled');
element.classList.remove('input-file-hover');
if (this._isEnabled) {
if (this._hovering) {
element.classList.add('input-text-hover');
element.classList.add('input-file-hover');
}
} else {
element.classList.add('input-text-disabled');
element.classList.add('input-file-disabled');
}
};
}
@ -79,9 +79,9 @@ export class FileInputElement extends LabelledElement<string> {
ASSERT(element !== null);
if (this._isEnabled) {
element.classList.remove('input-text-disabled');
element.classList.remove('input-file-disabled');
} else {
element.classList.add('input-text-disabled');
element.classList.add('input-file-disabled');
}
}
}

8
src/ui/elements/slider.ts
View File

@ -24,11 +24,9 @@ export class SliderElement extends LabelledElement<number> {
public generateInnerHTML() {
const norm = (this.getValue() - this._min) / (this._max - this._min);
return `
<div style="display: flex; flex-direction: row;">
<input type="number" id="${this._id}-value" min="${this._min}" max="${this._max}" step="${this._step}" value="${this.getValue().toFixed(this._decimals)}">
<div class="new-slider" id="${this._id}" style="flex-grow: 1;">
<div class="new-slider-bar" id="${this._id}-bar"style="width: ${norm * 100}%;">
</div>
<input type="number" id="${this._id}-value" min="${this._min}" max="${this._max}" step="${this._step}" value="${this.getValue().toFixed(this._decimals)}">
<div class="new-slider" id="${this._id}" style="flex-grow: 1;">
<div class="new-slider-bar" id="${this._id}-bar"style="width: ${norm * 100}%;">
</div>
</div>
`;

6
src/ui/elements/vector_spinbox.ts
View File

@ -35,14 +35,14 @@ export class VectorSpinboxElement extends LabelledElement<Vector3> {
${this._value.x}
</div>
</div>
<div class="invis-divider"></div>
<div class="spinbox-divider"></div>
<div style="display: flex; flex-direction: row; width: 33%"">
<div class="spinbox-key" id="${this._id}-ky" style="background-color: #34BF49;">Y</div>
<div class="spinbox-value" id="${this._id}-vy">
${this._value.y}
</div>
</div>
<div class="invis-divider"></div>
<div class="spinbox-divider"></div>
<div style="display: flex; flex-direction: row; width: 33%"">
<div class="spinbox-key" id="${this._id}-kz" style="background-color: #0099E5;">Z</div>
<div class="spinbox-value" id="${this._id}-vz">
@ -55,7 +55,7 @@ export class VectorSpinboxElement extends LabelledElement<Vector3> {
private _registerAxis(axis: EAxis) {
ASSERT(axis !== EAxis.None);
const elementXK = document.getElementById(this._id + '-k' + axis) as HTMLDivElement;
const elementXV = document.getElementById(this._id + '-v' + axis) as HTMLDivElement;
ASSERT(elementXK !== null && elementXV !== null);

8
src/ui/layout.ts
View File

@ -339,14 +339,14 @@ export class UI {
const group = this._uiDull[groupName];
groupHTML[groupName] = `
<div class="property">
<div class="prop-value-container">
<div style="flex-grow: 1">
<div class="h-div">
</div>
</div>
<div class="group-heading">
${group.label.toUpperCase()}
</div>
<div class="prop-value-container">
<div style="flex-grow: 1">
<div class="h-div">
</div>
</div>
@ -426,9 +426,7 @@ export class UI {
</div>
</div>
<div class="property">
<div class="prop-value-container">
${group.output.generateHTML()}
</div>
${group.output.generateHTML()}
</div>
${postGroupHTML}
`;

117
styles.css
View File

@ -19,6 +19,9 @@
--text-standard: #A8A8A8;
--text-disabled: #535353;
--border-radius: 5px;
--property-height: 34px;
}
@ -60,15 +63,13 @@ canvas {
}
.property {
padding: 0px 0px;
display: flex;
flex-direction: row;
align-items: center;
color: var(--text-standard);
font-size: 85%;
margin: 0px 0px;
min-height: 30px;
padding: 5px 0px;
padding: 5px 10px;
}
.group-heading {
@ -82,8 +83,9 @@ canvas {
.prop-key-container {
align-self: center;
padding: 0px 10px;
padding: 0px 10px 0px 0px;
width: 125px;
/*border: 1px solid red;*/
}
.prop-key-container-disabled {
@ -92,27 +94,33 @@ canvas {
.prop-value-container {
flex-grow: 1;
display: flex;
align-items: center;
/*border: 1px solid yellow;*/
height: var(--property-height);
}
.item-body-sunken {
background: var(--prop-sunken);
box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 10px 0px inset;
border-radius: 5px;
border-radius: var(--border-radius);
color: #8C8C8C80;
font-weight: 300;
font-size: 90%;
padding: 12px 18px;
line-height: 180%;
min-height: 22px;
width: 100%;
border: 1.5px solid var(--prop-sunken);
transition-duration: 1s;
overflow-wrap: anywhere;
}
input {
user-select: none;
height: calc(100% - 4px);
margin-right: 3px;
border-radius: 5px;
border: 1px solid rgb(255, 255, 255, 0.0);
border-radius: var(--border-radius);
text-align: center;
background: var(--prop-standard);
font-family: 'Lexend', sans-serif;
@ -138,9 +146,9 @@ input::-webkit-inner-spin-button {
select {
width: 100%;
height: 30px;
height: 100%;
padding-left: 10px;
border-radius: 5px;
border-radius: var(--border-radius);
font-family: 'Lexend', sans-serif;
font-weight: 300;
color: var(--text-standard);
@ -162,56 +170,34 @@ select:disabled {
color: var(--text-disabled);
}
.file-input {
border-radius: 5px;
border: 1px solid rgb(255, 255, 255, 0);
font-family: 'Lexend', sans-serif;
font-weight: 300;
background: var(--prop-standard);
padding: 0px 16px;
cursor: pointer;
height: 40px;
}
.file-input:hover {
border: 1px solid rgb(255, 255, 255, 0.1);
}
.new-slider {
border-radius: 5px;
border-radius: var(--border-radius);
font-family: 'Lexend', sans-serif;
font-weight: 300;
background: var(--prop-standard);
cursor: ew-resize;
height: 30px;
font-size: 90%;
height: calc(100% - 2px);
border: 1px solid var(--prop-bg);
}
.new-slider-hover {
border: 1px solid rgba(255, 255, 255, 0.1) !important;
background: var(--prop-hovered) !important;
}
.new-slider-disabled {
background: var(--prop-disabled) !important;
cursor: inherit !important;
}
.new-slider-bar {
border-radius: 5px;
height: 28px;
border-radius: var(--border-radius);
height: calc(100% - 1px);
background: var(--prop-accent-standard);
border: 1px solid rgb(255, 255, 255, 0.0);
}
.new-slider-bar-hover {
border: 1px solid rgb(255, 255, 255, 0.2) !important;
background: var(--prop-accent-hovered) !important;
}
.new-slider-bar-disabled {
background: var(--prop-accent-disabled) !important;
cursor: inherit !important;
@ -221,30 +207,40 @@ select:disabled {
.button {
width: calc(100% - 2px);
height: calc(100% - 2px);
background: var(--prop-accent-standard);
border-radius: 5px;
height: 25px;
border-radius: var(--border-radius);
color: white;
text-align: center;
padding: 5px 0px 0px 0px;
border: 1px solid rgb(255, 255, 255, 0);
position: relative;
cursor: pointer;
display: inline-block;
width: calc(100% - 2px);
display: flex;
align-items: center;
justify-content: center;
}
.button:hover {
border: 1px solid rgb(255, 255, 255, 0.2);
background: var(--prop-accent-hovered);
cursor: pointer;
}
.button-disabled {
cursor: inherit !important;
background: var(--prop-accent-disabled) !important;
border: 1px solid rgb(255, 255, 255, 0) !important;
color: #808080 !important;
}
.progress {
.button-label {
}
.button-progress {
/*border: 1px solid green;*/
z-index: 5;
background: white;
opacity: 0.1;
border-radius: 5px;
border-radius: var(--border-radius);
position: absolute;
left: 0;
top: 0;
@ -254,29 +250,23 @@ select:disabled {
transition: width 0.2s;
}
.button-disabled {
cursor: inherit !important;
background: var(--prop-accent-disabled) !important;
border: 1px solid rgb(255, 255, 255, 0) !important;
color: #808080 !important;
}
.input-text {
.input-file {
display: flex;
align-items: center;
width: 100%;
height: calc(100% - 2px);
background: var(--prop-standard);
border-radius: 5px;
height: 24px;
border-radius: var(--border-radius);
font-weight: 300;
padding: 6px 0px 0px 10px;
padding: 0px 10px;
border: 1px solid rgb(255, 255, 255, 0);
}
.input-text-hover {
.input-file-hover {
border: 1px solid rgb(255, 255, 255, 0.2);
background: var(--prop-hovered);
cursor: pointer;
}
.input-text-disabled {
.input-file-disabled {
background: var(--prop-disabled) !important;
color: var(--text-disabled) !important;
}
@ -287,13 +277,6 @@ select:disabled {
background: var(--prop-alt);
}
.divider {
width: 2px;
border-radius: 1px;
background: var(--prop-alt);
align-self: stretch;
}
.disabled {
opacity: 0.5;
cursor: inherit !important;
@ -384,7 +367,7 @@ select:disabled {
background: var(--prop-disabled) !important;
}
.invis-divider {
.spinbox-divider {
width: 6px;
}
@ -412,7 +395,7 @@ select:disabled {
display: flex;
flex-direction: row;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 16px;
border-radius: 5px;
border-radius: var(--border-radius);
margin-left: 10px;
margin-right: 10px;
}