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

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

Browse Source
This commit is contained in:
Keavon Chambers
2021-05-21 13:10:32 -07:00
committed by GitHub
parent c8eea1e4b1
commit c97cb9905c
17 changed files with 251 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
client/web/src/components/window/status-bar/InputHint.vue
View File

@@ -1,142 +0,0 @@
<template>
<div class="input-hint">
<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">
.input-hint {
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>

28
client/web/src/components/window/status-bar/StatusBar.vue
View File

@@ -1,23 +1,23 @@
<template>
<div class="status-bar">
<InputHint :inputMouse="'LMB'">Select Object</InputHint>
<UserInputLabel :inputMouse="'LMB'">Select Object</UserInputLabel>
<span class="plus">+</span>
<InputHint :inputKeys="['⇧']">Grow/Shrink Selection</InputHint>
<UserInputLabel :inputKeys="['⇧']">Grow/Shrink Selection</UserInputLabel>
<div class="divider"></div>
<InputHint :inputMouse="'LMBDrag'">Select Area</InputHint>
<UserInputLabel :inputMouse="'LMBDrag'">Select Area</UserInputLabel>
<span class="plus">+</span>
<InputHint :inputKeys="['⇧']">Grow/Shrink Selection</InputHint>
<UserInputLabel :inputKeys="['⇧']">Grow/Shrink Selection</UserInputLabel>
<div class="divider"></div>
<InputHint :inputKeys="['G']">Grab Selected</InputHint>
<InputHint :inputKeys="['R']">Rotate Selected</InputHint>
<InputHint :inputKeys="['S']">Scale Selected</InputHint>
<UserInputLabel :inputKeys="['G']">Grab Selected</UserInputLabel>
<UserInputLabel :inputKeys="['R']">Rotate Selected</UserInputLabel>
<UserInputLabel :inputKeys="['S']">Scale Selected</UserInputLabel>
<div class="divider"></div>
<InputHint :inputKeys="['↑', '→', '↓', '←']">Nudge Selected</InputHint>
<UserInputLabel :inputKeys="['↑', '→', '↓', '←']">Nudge Selected</UserInputLabel>
<span class="plus">+</span>
<InputHint :inputKeys="['⇧']">Big Increment Nudge</InputHint>
<UserInputLabel :inputKeys="['⇧']">Big Increment Nudge</UserInputLabel>
<div class="divider"></div>
<InputHint :inputKeys="['Alt']" :inputMouse="'LMBDrag'">Move Duplicate</InputHint>
<InputHint :inputKeys="['Ctrl', 'D']">Duplicate</InputHint>
<UserInputLabel :inputKeys="['Alt']" :inputMouse="'LMBDrag'">Move Duplicate</UserInputLabel>
<UserInputLabel :inputKeys="['Ctrl', 'D']">Duplicate</UserInputLabel>
</div>
</template>
@@ -39,18 +39,18 @@
background: #888;
}
.input-hint + .input-hint {
.user-input-label + .user-input-label {
margin-left: 0;
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
import InputHint from "./InputHint.vue";
import UserInputLabel from "../../widgets/labels/UserInputLabel.vue";
export default defineComponent({
components: {
InputHint,
UserInputLabel,
},
});
</script>

50
client/web/src/components/window/title-bar/FileMenu.vue
View File

@@ -1,50 +0,0 @@
<template>
<div class="entry">
<GraphiteLogo width="16" height="16" />
</div>
<div class="entry"><span>File</span></div>
<div class="entry"><span>Edit</span></div>
<div class="entry"><span>Document</span></div>
<div class="entry"><span>View</span></div>
<div class="entry"><span>Help</span></div>
</template>
<style lang="scss">
.entry {
display: flex;
align-items: center;
white-space: nowrap;
padding: 0 8px;
svg {
fill: #ddd;
}
&:hover {
background: #666;
svg {
fill: #fff;
}
span {
color: #fff;
}
}
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
import { ApplicationPlatform } from "../MainWindow.vue";
import GraphiteLogo from "../../../../assets/svg/16x16-bounds-16x16-icon/graphite-logo.svg";
export default defineComponent({
components: { GraphiteLogo },
data() {
return {
ApplicationPlatform,
};
},
});
</script>

6
client/web/src/components/window/title-bar/TitleBar.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="header-third">
<WindowButtonsMac :maximized="maximized" v-if="platform === ApplicationPlatform.Mac" />
<FileMenu v-if="platform !== ApplicationPlatform.Mac" />
<MenuBarInput v-if="platform !== ApplicationPlatform.Mac" />
</div>
<div class="header-third">
<WindowTitle :title="'X-35B Over Death Valley.gdd* - Graphite'" />
@@ -32,7 +32,7 @@
<script lang="ts">
import { defineComponent } from "vue";
import FileMenu from "./FileMenu.vue";
import MenuBarInput from "../../widgets/inputs/MenuBarInput.vue";
import WindowTitle from "./WindowTitle.vue";
import WindowButtonsWindows from "./WindowButtonsWindows.vue";
import WindowButtonsMac from "./WindowButtonsMac.vue";
@@ -40,7 +40,7 @@ import { ApplicationPlatform } from "../MainWindow.vue";
export default defineComponent({
components: {
FileMenu,
MenuBarInput,
WindowTitle,
WindowButtonsWindows,
WindowButtonsMac,