Rename and organize widget components to conform to design terminology (#132)

2026-09-24 02:48:12 +08:00 · 2021-05-21 13:10:32 -07:00
parent c8eea1e4b1
commit c97cb9905c
17 changed files with 251 additions and 220 deletions
@@ -0,0 +1,51 @@
+<template>
+	<div class="icon" :class="[`size-${String(size)}`, gapAfter && 'gap-after']">
+		<slot></slot>
+	</div>
+</template>
+
+<style lang="scss">
+.icon {
+	display: inline-block;
+	flex: 0 0 auto;
+	fill: #ddd;
+	vertical-align: top;
+	width: 16px;
+	height: 16px;
+
+	&:not(.gap-after) + .icon {
+		margin-left: 0;
+	}
+
+	&.size-10 {
+		width: 10px;
+		height: 10px;
+	}
+
+	&.size-12 {
+		width: 12px;
+		height: 12px;
+	}
+
+	&.size-16 {
+		width: 16px;
+		height: 16px;
+	}
+
+	&.size-24 {
+		width: 24px;
+		height: 24px;
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+	props: {
+		size: { type: Number, required: true },
+		gapAfter: { type: Boolean, default: false },
+	},
+});
+</script>
@@ -0,0 +1,142 @@
+<template>
+	<div class="user-input-label">
+		<span class="input-key" v-for="inputKey in inputKeys" :key="inputKey" :class="keyCapWidth(inputKey)">
+			{{ inputKey }}
+		</span>
+		<span class="input-mouse" v-if="inputMouse">
+			<MouseHintNone v-if="inputMouse === MouseInputInteraction.None" width="16" height="16" />
+			<MouseHintLMB v-if="inputMouse === MouseInputInteraction.LMB" width="16" height="16" />
+			<MouseHintRMB v-if="inputMouse === MouseInputInteraction.RMB" width="16" height="16" />
+			<MouseHintMMB v-if="inputMouse === MouseInputInteraction.MMB" width="16" height="16" />
+			<MouseHintScrollUp v-if="inputMouse === MouseInputInteraction.ScrollUp" width="16" height="16" />
+			<MouseHintScrollDown v-if="inputMouse === MouseInputInteraction.ScrollDown" width="16" height="16" />
+			<MouseHintDrag v-if="inputMouse === MouseInputInteraction.Drag" width="16" height="16" />
+			<MouseHintLMBDrag v-if="inputMouse === MouseInputInteraction.LMBDrag" width="16" height="16" />
+			<MouseHintRMBDrag v-if="inputMouse === MouseInputInteraction.RMBDrag" width="16" height="16" />
+			<MouseHintMMBDrag v-if="inputMouse === MouseInputInteraction.MMBDrag" width="16" height="16" />
+		</span>
+		<span class="hint-text">
+			<slot></slot>
+		</span>
+	</div>
+</template>
+
+<style lang="scss">
+.user-input-label {
+	height: 100%;
+	margin: 0 8px;
+	display: flex;
+	align-items: center;
+	white-space: nowrap;
+
+	.input-key,
+	.input-mouse {
+		margin-right: 4px;
+	}
+
+	.input-key {
+		font-family: "Inconsolata", monospace;
+		font-weight: bold;
+		text-align: center;
+		color: #111;
+		background: #ddd;
+		border: 1px;
+		box-sizing: border-box;
+		border-style: solid;
+		border-color: #888;
+		border-radius: 4px;
+		height: 16px;
+		line-height: 16px;
+	}
+
+	.input-key.width-16 {
+		width: 16px;
+	}
+
+	.input-key.width-24 {
+		width: 24px;
+	}
+
+	.input-key.width-32 {
+		width: 32px;
+	}
+
+	.input-key.width-40 {
+		width: 40px;
+	}
+
+	.input-key.width-48 {
+		width: 48px;
+	}
+
+	.input-mouse {
+		.bright {
+			fill: #ddd;
+		}
+
+		.dim {
+			fill: #888;
+		}
+
+		svg {
+			vertical-align: top;
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import MouseHintNone from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-none.svg";
+import MouseHintLMB from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-lmb.svg";
+import MouseHintRMB from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-rmb.svg";
+import MouseHintMMB from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-mmb.svg";
+import MouseHintScrollUp from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-scroll-up.svg";
+import MouseHintScrollDown from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-scroll-down.svg";
+import MouseHintDrag from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-drag.svg";
+import MouseHintLMBDrag from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-lmb-drag.svg";
+import MouseHintRMBDrag from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-rmb-drag.svg";
+import MouseHintMMBDrag from "../../../../assets/svg/16x16-bounds-16x16-icon/mouse-hint-mmb-drag.svg";
+
+export enum MouseInputInteraction {
+	"None" = "None",
+	"LMB" = "LMB",
+	"RMB" = "RMB",
+	"MMB" = "MMB",
+	"ScrollUp" = "ScrollUp",
+	"ScrollDown" = "ScrollDown",
+	"Drag" = "Drag",
+	"LMBDrag" = "LMBDrag",
+	"RMBDrag" = "RMBDrag",
+	"MMBDrag" = "MMBDrag",
+}
+
+export default defineComponent({
+	components: {
+		MouseHintNone,
+		MouseHintLMB,
+		MouseHintRMB,
+		MouseHintMMB,
+		MouseHintScrollUp,
+		MouseHintScrollDown,
+		MouseHintDrag,
+		MouseHintLMBDrag,
+		MouseHintRMBDrag,
+		MouseHintMMBDrag,
+	},
+	props: {
+		inputKeys: { type: Array, default: () => [] },
+		inputMouse: { type: String },
+	},
+	methods: {
+		keyCapWidth(keyText: string) {
+			return `width-${keyText.length * 8 + 8}`;
+		},
+	},
+	data() {
+		return {
+			MouseInputInteraction,
+		};
+	},
+});
+</script>