Add the ability for NumberInput widgets to display labels

Part of #313

client/web/src/App.vue

@@ -20,23 +20,41 @@
 <style lang="scss">
 :root {
 	--color-0-black: #000;
+	--color-0-black-rgb: 0, 0, 0;
 	--color-1-nearblack: #111;
+	--color-1-nearblack-rgb: 17, 17, 17;
 	--color-2-mildblack: #222;
+	--color-2-mildblack-rgb: 34, 34, 34;
 	--color-3-darkgray: #333;
+	--color-3-darkgray-rgb: 51, 51, 51;
 	--color-4-dimgray: #444;
+	--color-4-dimgray-rgb: 68, 68, 68;
 	--color-5-dullgray: #555;
+	--color-5-dullgray-rgb: 85, 85, 85;
 	--color-6-lowergray: #666;
+	--color-6-lowergray-rgb: 102, 102, 102;
 	--color-7-middlegray: #777;
+	--color-7-middlegray-rgb: 109, 109, 109;
 	--color-8-uppergray: #888;
+	--color-8-uppergray-rgb: 136, 136, 136;
 	--color-9-palegray: #999;
+	--color-9-palegray-rgb: 153, 153, 153;
 	--color-a-softgray: #aaa;
+	--color-a-softgray-rgb: 170, 170, 170;
 	--color-b-lightgray: #bbb;
+	--color-b-lightgray-rgb: 187, 187, 187;
 	--color-c-brightgray: #ccc;
+	--color-c-brightgray-rgb: 204, 204, 204;
 	--color-d-mildwhite: #ddd;
+	--color-d-mildwhite-rgb: 221, 221, 221;
 	--color-e-nearwhite: #eee;
+	--color-e-nearwhite-rgb: 238, 238, 238;
 	--color-f-white: #fff;
+	--color-f-white-rgb: 255, 255, 255;
 	--color-accent: #3194d6;
+	--color-accent-rgb: 49, 148, 214;
 	--color-accent-hover: #49a5e2;
+	--color-accent-hover-rgb: 73, 165, 226;
 
 	// TODO: Replace with CSS color() function to calculate alpha when browsers support it
 	// See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color() and https://caniuse.com/css-color-function

client/web/src/components/panels/LayerTree.vue

@@ -5,7 +5,7 @@
 
 			<Separator :type="SeparatorType.Related" />
 
-			<NumberInput v-model:value="opacity" @update:value="setLayerOpacity" :min="0" :max="100" :unit="`%`" :displayDecimalPlaces="2" :disabled="opacityNumberInputDisabled" />
+			<NumberInput v-model:value="opacity" @update:value="setLayerOpacity" :min="0" :max="100" :unit="`%`" :displayDecimalPlaces="2" :label="'Opacity'" :disabled="opacityNumberInputDisabled" />
 
 			<Separator :type="SeparatorType.Related" />
 

client/web/src/components/widgets/inputs/CheckboxInput.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="checkbox-input">
-		<input type="checkbox" :id="`checkbox-${id}`" :checked="checked" @input="(e) => $emit('update:checked', e.target.checked)" />
-		<label :for="`checkbox-${id}`">
+		<input type="checkbox" :id="`checkbox-input-${id}`" :checked="checked" @input="(e) => $emit('update:checked', e.target.checked)" />
+		<label :for="`checkbox-input-${id}`">
 			<div class="checkbox-box">
 				<IconLabel :icon="icon" />
 			</div>

client/web/src/components/widgets/inputs/NumberInput.vue

@@ -1,6 +1,17 @@
 <template>
 	<div class="number-input" :class="{ disabled }">
-		<input type="text" spellcheck="false" v-model="text" @change="onTextChanged()" @keydown.esc="onCancelTextChange" ref="input" :disabled="disabled" />
+		<input
+			:class="{ 'has-label': label }"
+			:id="`number-input-${id}`"
+			type="text"
+			spellcheck="false"
+			v-model="text"
+			@change="onTextChanged()"
+			@keydown.esc="onCancelTextChange"
+			ref="input"
+			:disabled="disabled"
+		/>
+		<label v-if="label" :for="`number-input-${id}`">{{ label }}</label>
 		<button v-if="!Number.isNaN(value)" class="arrow left" @click="onIncrement(IncrementDirection.Decrease)"></button>
 		<button v-if="!Number.isNaN(value)" class="arrow right" @click="onIncrement(IncrementDirection.Increase)"></button>
 	</div>
@@ -14,19 +25,38 @@
 	border-radius: 2px;
 	background: var(--color-1-nearblack);
 	overflow: hidden;
+	display: flex;
+	flex-direction: row-reverse;
+
+	label {
+		flex: 0 0 auto;
+		cursor: text;
+		line-height: 18px;
+		margin-left: 8px;
+		padding: 3px 0;
+	}
 
 	input {
-		width: calc(100% - 8px);
+		flex: 1 1 100%;
+		width: 100%;
+		height: 18px;
 		line-height: 18px;
-		margin: 3px 4px;
+		margin: 0 8px;
+		padding: 3px 0;
 		outline: none;
 		border: none;
 		background: none;
-		padding: 0;
 		color: var(--color-e-nearwhite);
 		font-size: inherit;
-		text-align: center;
 		font-family: inherit;
+		text-align: center;
+
+		&:not(:focus).has-label {
+			text-align: right;
+			padding-left: 4px;
+			margin-left: 0;
+			margin-right: 8px;
+		}
 
 		&::selection {
 			background: var(--color-accent);
@@ -34,10 +64,8 @@
 
 		&:focus {
 			text-align: left;
-			width: calc(100% - 16px);
-			margin-left: 8px;
-			margin-right: 8px;
 
+			& + label,
 			& ~ .arrow {
 				display: none;
 			}
@@ -51,10 +79,10 @@
 	.arrow {
 		position: absolute;
 		top: 0;
+		padding: 9px 0;
 		outline: none;
 		border: none;
-		background: none;
-		padding: 9px 0;
+		background: rgba(var(--color-1-nearblack-rgb), 0.75);
 
 		&:hover {
 			background: var(--color-6-lowergray);
@@ -104,6 +132,7 @@
 	&.disabled {
 		background: var(--color-2-mildblack);
 
+		label,
 		input {
 			color: var(--color-8-uppergray);
 		}
@@ -135,6 +164,7 @@ export default defineComponent({
 		unit: { type: String, default: "" },
 		unitIsHiddenWhenEditing: { type: Boolean, default: true },
 		displayDecimalPlaces: { type: Number, default: 3 },
+		label: { type: String, required: false },
 		disabled: { type: Boolean, default: false },
 	},
 	data() {
@@ -142,6 +172,7 @@ export default defineComponent({
 			text: `${this.value}${this.unit}`,
 			editing: false,
 			IncrementDirection,
+			id: `${Math.random()}`.substring(2),
 		};
 	},
 	methods: {

client/web/src/components/widgets/options/ToolOptions.vue

@@ -19,7 +19,7 @@
 				:title="option.tooltip"
 				v-bind="option.props"
 			/>
-			<Separator v-if="option.kind === 'Separator'" :type="option.type" />
+			<Separator v-if="option.kind === 'Separator'" v-bind="option.props" />
 		</template>
 	</div>
 </template>