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

46
client/web/src/components/panels/Document.vue
View File

@@ -4,35 +4,47 @@
<div class="left side">
<span class="label">Select</span>
<ItemDivider />
<Separator :type="SeparatorType.Section" />
<IconButton :size="24" title="Horizontal Align Left"><AlignHorizontalLeft /></IconButton>
<IconButton :size="24" title="Horizontal Align Center"><AlignHorizontalCenter /></IconButton>
<IconButton :size="24" gapAfter title="Horizontal Align Right"><AlignHorizontalRight /></IconButton>
<Separator :type="SeparatorType.Unrelated" />
<IconButton :size="24" title="Vertical Align Top"><AlignVerticalTop /></IconButton>
<IconButton :size="24" title="Vertical Align Center"><AlignVerticalCenter /></IconButton>
<IconButton :size="24" title="Vertical Align Bottom"><AlignVerticalBottom /></IconButton>
<Separator :type="SeparatorType.Related" />
<PopoverButton>
<h3>Align</h3>
<p>More alignment-related buttons will be here</p>
</PopoverButton>
<ItemDivider />
<Separator :type="SeparatorType.Section" />
<IconButton :size="24" title="Flip Horizontal"><FlipHorizontal /></IconButton>
<IconButton :size="24" title="Flip Vertical"><FlipVertical /></IconButton>
<Separator :type="SeparatorType.Related" />
<PopoverButton>
<h3>Flip</h3>
<p>More flip-related buttons will be here</p>
</PopoverButton>
<ItemDivider />
<Separator :type="SeparatorType.Section" />
<IconButton :size="24" title="Boolean Union"><BooleanUnion /></IconButton>
<IconButton :size="24" title="Boolean Subtract Front"><BooleanSubtractFront /></IconButton>
<IconButton :size="24" title="Boolean Subtract Back"><BooleanSubtractBack /></IconButton>
<IconButton :size="24" title="Boolean Intersect"><BooleanIntersect /></IconButton>
<IconButton :size="24" title="Boolean Difference"><BooleanDifference /></IconButton>
<Separator :type="SeparatorType.Related" />
<PopoverButton>
<h3>Boolean</h3>
<p>More boolean-related buttons will be here</p>
@@ -50,12 +62,15 @@
</PopoverButton>
</RadioInput>
<ItemDivider />
<Separator :type="SeparatorType.Section" />
<IconButton :size="24" title="Zoom In"><ZoomIn /></IconButton>
<IconButton :size="24" title="Zoom Out"><ZoomOut /></IconButton>
<IconButton :size="24" title="Zoom to 100%"><ZoomReset /></IconButton>
<NumberInput />
<Separator :type="SeparatorType.Related" />
<NumberInput :value="25" :unit="`%`" />
</div>
</LayoutRow>
<LayoutRow :class="'shelf-and-viewport'">
@@ -66,13 +81,13 @@
<ShelfItem title="Navigate Tool" :active="activeTool === 'Navigate'" @click="'tool not implemented' || selectTool('Navigate')"><NavigateTool /></ShelfItem>
<ShelfItem title="Eyedropper Tool" :active="activeTool === 'Eyedropper'" @click="'tool not implemented' || selectTool('Eyedropper')"><EyedropperTool /></ShelfItem>
<ItemDivider horizontal />
<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
<ShelfItem title="Text Tool" :active="activeTool === 'Text'" @click="'tool not implemented' || selectTool('Text')"><TextTool /></ShelfItem>
<ShelfItem title="Fill Tool" :active="activeTool === 'Fill'" @click="'tool not implemented' || selectTool('Fill')"><FillTool /></ShelfItem>
<ShelfItem title="Gradient Tool" :active="activeTool === 'Gradient'" @click="'tool not implemented' || selectTool('Gradient')"><GradientTool /></ShelfItem>
<ItemDivider horizontal />
<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
<ShelfItem title="Brush Tool" :active="activeTool === 'Brush'" @click="'tool not implemented' || selectTool('Brush')"><BrushTool /></ShelfItem>
<ShelfItem title="Heal Tool" :active="activeTool === 'Heal'" @click="'tool not implemented' || selectTool('Heal')"><HealTool /></ShelfItem>
@@ -81,7 +96,7 @@
<ShelfItem title="Detail Tool" :active="activeTool === 'BlurSharpen'" @click="'tool not implemented' || selectTool('BlurSharpen')"><BlurSharpenTool /></ShelfItem>
<ShelfItem title="Relight Tool" :active="activeTool === 'Relight'" @click="'tool not implemented' || selectTool('Relight')"><RelightTool /></ShelfItem>
<ItemDivider horizontal />
<Separator :type="SeparatorType.Section" :direction="SeparatorDirection.Vertical" />
<ShelfItem title="Path Tool" :active="activeTool === 'Path'" @click="'tool not implemented' || selectTool('Path')"><PathTool /></ShelfItem>
<ShelfItem title="Pen Tool (P)" :active="activeTool === 'Pen'" @click="selectTool('Pen')"><PenTool /></ShelfItem>
@@ -116,7 +131,7 @@
flex: 0 0 auto;
display: flex;
align-items: center;
margin: 0 8px;
margin: 0 4px;
.label {
white-space: nowrap;
@@ -134,7 +149,7 @@
flex: 1 1 100%;
.canvas {
background: #111;
background: var(--color-1-nearblack);
width: 100%;
height: 100%;
@@ -146,11 +161,6 @@
}
}
}
// The `where` pseduo-class does not contribtue to specificity
:where(.document .options-bar .side > :not(:first-child)) {
margin-left: 8px;
}
</style>
<script lang="ts">
@@ -161,7 +171,7 @@ import LayoutCol from "../layout/LayoutCol.vue";
import WorkingColors from "../widgets/WorkingColors.vue";
import { PopoverDirection } from "../widgets/overlays/Popover.vue";
import ShelfItem from "../widgets/ShelfItem.vue";
import ItemDivider from "../widgets/ItemDivider.vue";
import Separator, { SeparatorDirection, SeparatorType } from "../widgets/Separator.vue";
import IconButton from "../widgets/buttons/IconButton.vue";
import PopoverButton from "../widgets/buttons/PopoverButton.vue";
import RadioInput from "../widgets/inputs/RadioInput.vue";
@@ -215,7 +225,7 @@ export default defineComponent({
LayoutCol,
WorkingColors,
ShelfItem,
ItemDivider,
Separator,
IconButton,
PopoverButton,
RadioInput,
@@ -318,6 +328,8 @@ export default defineComponent({
viewportSvg: "",
activeTool: "Select",
PopoverDirection,
SeparatorDirection,
SeparatorType,
};
},
});

17
client/web/src/components/panels/LayerTree.vue
View File

@@ -1,8 +1,10 @@
<template>
<LayoutCol :class="'layer-tree-panel'">
<LayoutRow :class="'options-bar'">
<NumberInput />
<NumberInput />
<NumberInput :value="100" :unit="`%`" />
<Separator :type="SeparatorType.Related" />
<PopoverButton>
<h3>Compositing Options</h3>
<p>More blend and compositing options will be here</p>
@@ -36,8 +38,12 @@
.layer-tree-panel {
.options-bar {
height: 32px;
margin: 0 8px;
margin: 0 4px;
align-items: center;
.number-input {
flex: 1 1 100%;
}
}
.layer-row {
@@ -49,7 +55,7 @@
.layer {
display: flex;
align-items: center;
background: #555;
background: var(--color-5-dullgray);
border-radius: 4px;
width: 100%;
height: 100%;
@@ -79,6 +85,7 @@ import { defineComponent } from "vue";
import { ResponseType, registerResponseHandler, Response, ExpandFolder, LayerPanelEntry } from "../../response-handler";
import LayoutRow from "../layout/LayoutRow.vue";
import LayoutCol from "../layout/LayoutCol.vue";
import Separator, { SeparatorType } from "../widgets/Separator.vue";
import NumberInput from "../widgets/inputs/NumberInput.vue";
import PopoverButton from "../widgets/buttons/PopoverButton.vue";
import { PopoverDirection } from "../widgets/overlays/Popover.vue";
@@ -94,6 +101,7 @@ export default defineComponent({
components: {
LayoutRow,
LayoutCol,
Separator,
PopoverButton,
NumberInput,
IconButton,
@@ -127,6 +135,7 @@ export default defineComponent({
data() {
return {
PopoverDirection,
SeparatorType,
layers: [] as Array<LayerPanelEntry>,
};
},