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

Update UI colors and alignment for consistency with the design mockup (#157)

Browse Source 
Closes #111
This commit is contained in:
Keavon Chambers
2021-05-23 19:01:13 -07:00
parent 4b19a459b7
commit 34efac990b
21 changed files with 286 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
client/web/src/components/window/MainWindow.vue
View File

@@ -1,12 +1,12 @@
<template>
<LayoutCol class="main-window">
<LayoutRow :class="'title-bar'">
<LayoutRow :class="'title-bar-row'">
<TitleBar :platform="platform" :maximized="maximized" />
</LayoutRow>
<LayoutRow :class="'workspace'">
<LayoutRow :class="'workspace-row'">
<Workspace />
</LayoutRow>
<LayoutRow :class="'status-bar'">
<LayoutRow :class="'status-bar-row'">
<StatusBar />
</LayoutRow>
</LayoutCol>
@@ -17,17 +17,17 @@
height: 100%;
}
.title-bar {
.title-bar-row {
height: 28px;
flex: 0 0 auto;
}
.workspace {
.workspace-row {
flex: 1 1 100%;
height: 100%;
}
.status-bar {
.status-bar-row {
height: 24px;
flex: 0 0 auto;
}

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

@@ -1,21 +1,25 @@
<template>
<div class="status-bar">
<UserInputLabel :inputMouse="'LMB'">Select Object</UserInputLabel>
<span class="plus">+</span>
<UserInputLabel :inputKeys="['⇧']">Grow/Shrink Selection</UserInputLabel>
<div class="divider"></div>
<UserInputLabel :inputMouse="'LMBDrag'">Select Area</UserInputLabel>
<span class="plus">+</span>
<UserInputLabel :inputKeys="['⇧']">Grow/Shrink Selection</UserInputLabel>
<div class="divider"></div>
<UserInputLabel :inputMouse="'LMBDrag'">Drag Selected</UserInputLabel>
<Separator :type="SeparatorType.Section" />
<UserInputLabel :inputKeys="['G']">Grab Selected</UserInputLabel>
<UserInputLabel :inputKeys="['R']">Rotate Selected</UserInputLabel>
<UserInputLabel :inputKeys="['S']">Scale Selected</UserInputLabel>
<div class="divider"></div>
<Separator :type="SeparatorType.Section" />
<UserInputLabel :inputMouse="'LMB'">Select Object</UserInputLabel>
<span class="plus">+</span>
<UserInputLabel :inputKeys="['Ctrl']">Innermost</UserInputLabel>
<span class="plus">+</span>
<UserInputLabel :inputKeys="['⇧']">Grow/Shrink Selection</UserInputLabel>
<Separator :type="SeparatorType.Section" />
<UserInputLabel :inputMouse="'LMBDrag'">Select Area</UserInputLabel>
<span class="plus">+</span>
<UserInputLabel :inputKeys="['⇧']">Grow/Shrink Selection</UserInputLabel>
<Separator :type="SeparatorType.Section" />
<UserInputLabel :inputKeys="['↑', '→', '↓', '←']">Nudge Selected</UserInputLabel>
<span class="plus">+</span>
<UserInputLabel :inputKeys="['⇧']">Big Increment Nudge</UserInputLabel>
<div class="divider"></div>
<Separator :type="SeparatorType.Section" />
<UserInputLabel :inputKeys="['Alt']" :inputMouse="'LMBDrag'">Move Duplicate</UserInputLabel>
<UserInputLabel :inputKeys="['Ctrl', 'D']">Duplicate</UserInputLabel>
</div>
@@ -24,33 +28,45 @@
<style lang="scss">
.status-bar {
display: flex;
}
.plus {
display: flex;
align-items: center;
font-weight: bold;
}
.plus {
display: flex;
align-items: center;
font-weight: bold;
}
.divider {
width: 1px;
height: 16px;
margin: 4px 0;
background: #888;
}
.user-input-label + .user-input-label {
margin-left: 0;
}
.user-input-label + .user-input-label {
margin-left: 0;
.separator.section {
margin: 0;
}
> :first-child {
margin-left: 4px;
}
> :last-child {
margin-right: 4px;
}
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
import UserInputLabel from "../../widgets/labels/UserInputLabel.vue";
import Separator, { SeparatorType } from "../../widgets/Separator.vue";
export default defineComponent({
components: {
UserInputLabel,
Separator,
},
data() {
return {
SeparatorType,
};
},
});
</script>

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

@@ -20,14 +20,14 @@
padding: 0 20px;
svg {
fill: #ddd;
fill: var(--color-e-nearwhite);
}
&:hover {
background: #666;
background: var(--color-6-lowergray);
svg {
fill: #fff;
fill: var(--color-f-white);
}
}