fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-25 03:48:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Move all icon SVG imports to the Icon component

Browse Source 
This change also removes the need to specify the icon size.
This commit is contained in:
Keavon Chambers
2021-05-27 02:14:32 -07:00
parent 313a1dfc65
commit c205fec0d4
11 changed files with 254 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/web/src/components/widgets/labels/UserInputLabel.vue
+28 -32
View File
@@ -4,16 +4,7 @@
{{ 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" />
<Icon :icon="mouseInputInteractionToIcon(inputMouse)" />
</span>
<span class="hint-text">
<slot></slot>
@@ -87,16 +78,7 @@
<script lang="ts">
import { defineComponent } from "vue";
import MouseHintNone from "../../../../assets/16px-two-tone/mouse-hint-none.svg";
import MouseHintLMB from "../../../../assets/16px-two-tone/mouse-hint-lmb.svg";
import MouseHintRMB from "../../../../assets/16px-two-tone/mouse-hint-rmb.svg";
import MouseHintMMB from "../../../../assets/16px-two-tone/mouse-hint-mmb.svg";
import MouseHintScrollUp from "../../../../assets/16px-two-tone/mouse-hint-scroll-up.svg";
import MouseHintScrollDown from "../../../../assets/16px-two-tone/mouse-hint-scroll-down.svg";
import MouseHintDrag from "../../../../assets/16px-two-tone/mouse-hint-drag.svg";
import MouseHintLMBDrag from "../../../../assets/16px-two-tone/mouse-hint-lmb-drag.svg";
import MouseHintRMBDrag from "../../../../assets/16px-two-tone/mouse-hint-rmb-drag.svg";
import MouseHintMMBDrag from "../../../../assets/16px-two-tone/mouse-hint-mmb-drag.svg";
import Icon from "./Icon.vue";
export enum MouseInputInteraction {
"None" = "None",
@@ -112,18 +94,7 @@ export enum MouseInputInteraction {
}
export default defineComponent({
components: {
MouseHintNone,
MouseHintLMB,
MouseHintRMB,
MouseHintMMB,
MouseHintScrollUp,
MouseHintScrollDown,
MouseHintDrag,
MouseHintLMBDrag,
MouseHintRMBDrag,
MouseHintMMBDrag,
},
components: { Icon },
props: {
inputKeys: { type: Array, default: () => [] },
inputMouse: { type: String },
@@ -132,6 +103,31 @@ export default defineComponent({
keyCapWidth(keyText: string) {
return `width-${keyText.length * 8 + 8}`;
},
mouseInputInteractionToIcon(mouseInputInteraction: MouseInputInteraction) {
switch (mouseInputInteraction) {
case MouseInputInteraction.LMB:
return "MouseHintLMB";
case MouseInputInteraction.RMB:
return "MouseHintRMB";
case MouseInputInteraction.MMB:
return "MouseHintMMB";
case MouseInputInteraction.ScrollUp:
return "MouseHintScrollUp";
case MouseInputInteraction.ScrollDown:
return "MouseHintScrollDown";
case MouseInputInteraction.Drag:
return "MouseHintDrag";
case MouseInputInteraction.LMBDrag:
return "MouseHintLMBDrag";
case MouseInputInteraction.RMBDrag:
return "MouseHintRMBDrag";
case MouseInputInteraction.MMBDrag:
return "MouseHintMMBDrag";
default:
case MouseInputInteraction.None:
return "MouseHintNone";
}
},
},
data() {
return {