From 872eb9bf9a2331e8b3937d1f6350f3ef46994413 Mon Sep 17 00:00:00 2001 From: Lucas Dower Date: Mon, 24 Oct 2022 20:45:02 +0100 Subject: [PATCH] Improved UI consistency --- src/ui/elements/button.ts | 4 +- src/ui/elements/file_input.ts | 14 ++-- src/ui/elements/slider.ts | 8 +- src/ui/elements/vector_spinbox.ts | 6 +- src/ui/layout.ts | 8 +- styles.css | 117 +++++++++++++----------------- 6 files changed, 68 insertions(+), 89 deletions(-) diff --git a/src/ui/elements/button.ts b/src/ui/elements/button.ts index f331807..707e3a9 100644 --- a/src/ui/elements/button.ts +++ b/src/ui/elements/button.ts @@ -13,8 +13,8 @@ export class ButtonElement extends BaseUIElement { public generateHTML() { return `
-
${this._label}
-
+
${this._label}
+
`; } diff --git a/src/ui/elements/file_input.ts b/src/ui/elements/file_input.ts index 752ec74..269ebd9 100644 --- a/src/ui/elements/file_input.ts +++ b/src/ui/elements/file_input.ts @@ -18,7 +18,7 @@ export class FileInputElement extends LabelledElement { public generateInnerHTML() { return ` -
+
${this._loadedFilePath}
`; @@ -59,15 +59,15 @@ export class FileInputElement extends LabelledElement { }; 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 { 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'); } } } diff --git a/src/ui/elements/slider.ts b/src/ui/elements/slider.ts index e007dfb..3370264 100644 --- a/src/ui/elements/slider.ts +++ b/src/ui/elements/slider.ts @@ -24,11 +24,9 @@ export class SliderElement extends LabelledElement { public generateInnerHTML() { const norm = (this.getValue() - this._min) / (this._max - this._min); return ` -
- -
-
-
+ +
+
`; diff --git a/src/ui/elements/vector_spinbox.ts b/src/ui/elements/vector_spinbox.ts index 1ca6ddb..b17c854 100644 --- a/src/ui/elements/vector_spinbox.ts +++ b/src/ui/elements/vector_spinbox.ts @@ -35,14 +35,14 @@ export class VectorSpinboxElement extends LabelledElement { ${this._value.x}
-
+
Y
${this._value.y}
-
+
Z
@@ -55,7 +55,7 @@ export class VectorSpinboxElement extends LabelledElement { 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); diff --git a/src/ui/layout.ts b/src/ui/layout.ts index 3ed3097..907aab6 100644 --- a/src/ui/layout.ts +++ b/src/ui/layout.ts @@ -339,14 +339,14 @@ export class UI { const group = this._uiDull[groupName]; groupHTML[groupName] = `
-
+
${group.label.toUpperCase()}
-
+
@@ -426,9 +426,7 @@ export class UI {
-
- ${group.output.generateHTML()} -
+ ${group.output.generateHTML()}
${postGroupHTML} `; diff --git a/styles.css b/styles.css index 5682655..5ab776e 100644 --- a/styles.css +++ b/styles.css @@ -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; }