mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-12-23 10:11:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

31
client/web/src/App.vue
View file

@ -3,12 +3,38 @@
</template>
<style lang="scss">
:root {
--color-0-black: #000;
--color-1-nearblack: #111;
--color-2-mildblack: #222;
--color-3-darkgray: #333;
--color-4-dimgray: #444;
--color-5-dullgray: #555;
--color-6-lowergray: #666;
--color-7-middlegray: #777;
--color-8-uppergray: #888;
--color-9-palegray: #999;
--color-a-softgray: #aaa;
--color-b-lightgray: #bbb;
--color-c-brightgray: #ccc;
--color-d-mildwhite: #ddd;
--color-e-nearwhite: #eee;
--color-f-white: #fff;
--color-accent: #3194d6;
--color-accent-hover: #49a5e2;
// TODO: Replace with CSS color() function to calculate alpha when browsers support it
// See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color() and https://caniuse.com/css-color-function
// E6 = 90% alpha
--popover-opacity-color-2-mildblack: #222222e6;
}
html,
body,
#app {
margin: 0;
height: 100%;
background: #222;
background: var(--color-2-mildblack);
user-select: none;
}
@ -19,7 +45,7 @@ button {
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 14px;
line-height: 1;
color: #ddd;
color: var(--color-e-nearwhite);
}
svg,
@ -38,6 +64,7 @@ img {
p {
margin: 0;
}
p {
margin-top: 8px;
}

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>,
};
},

8
client/web/src/components/popovers/ColorPicker.vue
View file

@ -53,8 +53,8 @@
display: block;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%),
linear-gradient(#fff, #fff);
background: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%),
linear-gradient(#ffffff, #ffffff);
background-size: 16px 16px;
background-position: 0 0, 8px 8px;
position: relative;
@ -97,7 +97,7 @@
left: 0;
border-style: solid;
border-width: 4px 0 4px 4px;
border-color: transparent transparent transparent black;
border-color: transparent transparent transparent #000000;
}
&::after {
@ -107,7 +107,7 @@
right: 0;
border-style: solid;
border-width: 4px 4px 4px 0;
border-color: transparent black transparent transparent;
border-color: transparent #000000 transparent transparent;
}
}
}

50
client/web/src/components/widgets/ItemDivider.vue
View file

@ -1,50 +0,0 @@
<template>
<div class="item-spacer" :class="{ horizontal: horizontal }">
<div></div>
</div>
</template>
<style lang="scss">
.item-spacer {
margin-left: 0;
& + * {
margin-left: 0;
}
&:not(.horizontal) {
height: 100%;
padding: 0 8px;
div {
height: calc(100% - 8px);
width: 1px;
margin: 4px 0;
background: #888;
}
}
&.horizontal {
width: 100%;
padding: 8px 0;
div {
height: 1px;
width: calc(100% - 8px);
margin: 0 4px;
background: #888;
}
}
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
components: {},
props: {
horizontal: { type: Boolean, default: false },
},
});
</script>

82
client/web/src/components/widgets/Separator.vue Normal file
View file

@ -0,0 +1,82 @@
<template>
<div class="separator" :class="[direction.toLowerCase(), type.toLowerCase()]">
<div v-if="type === SeparatorType.Section"></div>
</div>
</template>
<style lang="scss">
.separator {
&.vertical {
&.related {
margin-top: 4px;
}
&.unrelated {
margin-top: 8px;
}
&.section {
width: 100%;
margin: 8px 0;
div {
height: 1px;
width: calc(100% - 8px);
margin: 0 4px;
background: var(--color-7-middlegray);
}
}
}
&.horizontal {
&.related {
margin-left: 4px;
}
&.unrelated {
margin-left: 8px;
}
&.section {
height: 100%;
margin: 0 8px;
div {
height: calc(100% - 8px);
width: 1px;
margin: 4px 0;
background: var(--color-7-middlegray);
}
}
}
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
export enum SeparatorDirection {
"Horizontal" = "Horizontal",
"Vertical" = "Vertical",
}
export enum SeparatorType {
"Related" = "Related",
"Unrelated" = "Unrelated",
"Section" = "Section",
}
export default defineComponent({
components: {},
props: {
direction: { type: String, default: SeparatorDirection.Horizontal },
type: { type: String, default: SeparatorType.Unrelated },
},
data() {
return {
SeparatorDirection,
SeparatorType,
};
},
});
</script>

4
client/web/src/components/widgets/ShelfItem.vue
View file

@ -10,11 +10,11 @@
border-radius: 2px;
&:hover {
background: #666;
background: var(--color-6-lowergray);
}
&.active {
background: #3194d6;
background: var(--color-accent);
}
svg {

14
client/web/src/components/widgets/buttons/IconButton.vue
View file

@ -1,5 +1,5 @@
<template>
<button class="icon-button" :class="[`size-${String(size)}`, gapAfter && 'gap-after']">
<button class="icon-button" :class="`size-${String(size)}`">
<slot></slot>
</button>
</template>
@ -14,7 +14,7 @@
border-radius: 2px;
background: none;
vertical-align: top;
fill: #ddd;
fill: var(--color-e-nearwhite);
width: 16px;
height: 16px;
@ -23,14 +23,10 @@
margin-left: 0;
}
&.gap-after + .icon-button {
margin-left: 8px;
}
&:hover {
background: #666;
color: white;
fill: white;
background: var(--color-6-lowergray);
color: var(--color-f-white);
fill: var(--color-f-white);
}
&.size-10 {

10
client/web/src/components/widgets/buttons/PopoverButton.vue
View file

@ -15,7 +15,7 @@
position: relative;
width: 16px;
height: 24px;
margin: 2px 4px;
flex: 0 0 auto;
.popover {
left: 50%;
@ -29,12 +29,12 @@
border: none;
border-radius: 2px;
vertical-align: top;
background: #111;
fill: #ddd;
background: var(--color-1-nearblack);
fill: var(--color-e-nearwhite);
&:hover {
background: #666;
fill: #fff;
background: var(--color-6-lowergray);
fill: var(--color-f-white);
}
}
}

8
client/web/src/components/widgets/inputs/MenuBarInput.vue
View file

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

23
client/web/src/components/widgets/inputs/NumberInput.vue
View file

@ -2,7 +2,7 @@
<div class="number-input">
<button class="arrow left"></button>
<button class="arrow right"></button>
<input type="text" spellcheck="false" value="25%" />
<input type="text" spellcheck="false" :value="`${value}${unit}`" />
</div>
</template>
@ -12,7 +12,7 @@
height: 24px;
position: relative;
border-radius: 2px;
background: #111;
background: var(--color-1-nearblack);
overflow: hidden;
input {
@ -23,13 +23,13 @@
background: none;
padding: 0;
line-height: 24px;
color: #ddd;
color: var(--color-e-nearwhite);
font-size: inherit;
text-align: center;
font-family: inherit;
&::selection {
background: #3194d6;
background: var(--color-accent);
}
}
@ -46,14 +46,14 @@
padding: 9px 0;
&:hover {
background: #666;
background: var(--color-6-lowergray);
&.right::before {
border-color: transparent transparent transparent #fff;
border-color: transparent transparent transparent var(--color-f-white);
}
&.left::after {
border-color: transparent #fff transparent transparent;
border-color: transparent var(--color-f-white) transparent transparent;
}
}
@ -68,7 +68,7 @@
height: 0;
border-style: solid;
border-width: 3px 0 3px 3px;
border-color: transparent transparent transparent #ddd;
border-color: transparent transparent transparent var(--color-e-nearwhite);
display: block;
}
}
@ -84,7 +84,7 @@
height: 0;
border-style: solid;
border-width: 3px 3px 3px 0;
border-color: transparent #ddd transparent transparent;
border-color: transparent var(--color-e-nearwhite) transparent transparent;
display: block;
}
}
@ -97,6 +97,9 @@ import { defineComponent } from "vue";
export default defineComponent({
components: {},
props: {},
props: {
value: { type: Number, required: true },
unit: { type: String, default: "" },
},
});
</script>

12
client/web/src/components/widgets/inputs/RadioInput.vue
View file

@ -29,17 +29,17 @@
}
}
button {
background: #555;
fill: #ddd;
& > button {
background: var(--color-5-dullgray);
fill: var(--color-e-nearwhite);
&:hover {
background: #666;
background: var(--color-6-lowergray);
}
&.active {
background: #3194d6;
fill: #fff;
background: var(--color-accent);
fill: var(--color-f-white);
}
}
}

10
client/web/src/components/widgets/inputs/SwatchPairInput.vue
View file

@ -1,13 +1,13 @@
<template>
<div class="swatch-pair">
<div class="secondary swatch">
<button @click="clickSecondarySwatch" style="background: white"></button>
<button @click="clickSecondarySwatch" style="background: #ffffff"></button>
<Popover :direction="PopoverDirection.Right" horizontal ref="secondarySwatchPopover">
<ColorPicker />
</Popover>
</div>
<div class="primary swatch">
<button @click="clickPrimarySwatch" style="background: black"></button>
<button @click="clickPrimarySwatch" style="background: #000000"></button>
<Popover :direction="PopoverDirection.Right" horizontal ref="primarySwatchPopover">
<ColorPicker />
</Popover>
@ -24,15 +24,15 @@
.swatch {
width: 28px;
height: 28px;
margin: 2px;
margin: 0 2px;
position: relative;
button {
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px #888 solid;
box-shadow: 0 0 0 2px #333;
border: 2px var(--color-7-middlegray) solid;
box-shadow: 0 0 0 2px var(--color-3-darkgray);
margin: 0;
padding: 0;
box-sizing: border-box;

9
client/web/src/components/widgets/labels/Icon.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="icon" :class="[`size-${String(size)}`, gapAfter && 'gap-after']">
<div class="icon" :class="`size-${String(size)}`">
<slot></slot>
</div>
</template>
@ -8,14 +8,11 @@
.icon {
display: inline-block;
flex: 0 0 auto;
fill: #ddd;
fill: var(--color-e-nearwhite);
vertical-align: top;
width: 16px;
height: 16px;
&:not(.gap-after) + .icon {
margin-left: 0;
}
margin-left: 0;
&.size-10 {
width: 10px;

10
client/web/src/components/widgets/labels/UserInputLabel.vue
View file

@ -38,12 +38,12 @@
font-family: "Inconsolata", monospace;
font-weight: bold;
text-align: center;
color: #111;
background: #ddd;
color: var(--color-2-mildblack);
background: var(--color-e-nearwhite);
border: 1px;
box-sizing: border-box;
border-style: solid;
border-color: #888;
border-color: var(--color-7-middlegray);
border-radius: 4px;
height: 16px;
line-height: 16px;
@ -71,11 +71,11 @@
.input-mouse {
.bright {
fill: #ddd;
fill: var(--color-e-nearwhite);
}
.dim {
fill: #888;
fill: var(--color-7-middlegray);
}
svg {

16
client/web/src/components/widgets/overlays/Popover.vue
View file

@ -10,6 +10,8 @@
</template>
<style lang="scss">
@use "sass:color";
.popover {
position: absolute;
width: 0;
@ -35,28 +37,28 @@
.top > & {
border-width: 8px 6px 0 6px;
border-color: #222222e6 transparent transparent transparent;
border-color: var(--popover-opacity-color-2-mildblack) transparent transparent transparent;
margin-left: -6px;
margin-bottom: 2px;
}
.bottom > & {
border-width: 0 6px 8px 6px;
border-color: transparent transparent #222222e6 transparent;
border-color: transparent transparent var(--popover-opacity-color-2-mildblack) transparent;
margin-left: -6px;
margin-top: 2px;
}
.left > & {
border-width: 6px 0 6px 8px;
border-color: transparent transparent transparent #222222e6;
border-color: transparent transparent transparent var(--popover-opacity-color-2-mildblack);
margin-top: -6px;
margin-right: 2px;
}
.right > & {
border-width: 6px 8px 6px 0;
border-color: transparent #222222e6 transparent transparent;
border-color: transparent var(--popover-opacity-color-2-mildblack) transparent transparent;
margin-top: -6px;
margin-left: 2px;
}
@ -86,10 +88,10 @@
}
.popover-content {
background: #222222e6;
box-shadow: #000 0 0 4px;
background: var(--popover-opacity-color-2-mildblack);
box-shadow: var(--color-0-black) 0 0 4px;
border-radius: 4px;
color: #eee;
color: var(--color-e-nearwhite);
font-size: inherit;
padding: 8px;
z-index: 0;

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);
}
}

22
client/web/src/components/workspace/Panel.vue
View file

@ -22,7 +22,7 @@
<style lang="scss">
.panel {
background: #111;
background: var(--color-1-nearblack);
border-radius: 8px;
flex-grow: 1;
display: flex;
@ -35,7 +35,7 @@
flex-direction: row;
&.min-widths .tab-group .tab {
min-width: 120px;
min-width: 124px;
max-width: 360px;
}
@ -47,13 +47,13 @@
.tab {
height: 100%;
padding: 0 10px;
padding: 0 8px;
display: flex;
align-items: center;
position: relative;
&.active {
background: #333;
background: var(--color-3-darkgray);
border-radius: 8px 8px 0 0;
position: relative;
@ -69,13 +69,13 @@
&:not(:first-child)::before {
left: -16px;
border-bottom-right-radius: 8px;
box-shadow: 8px 0 0 0 #333;
box-shadow: 8px 0 0 0 var(--color-3-darkgray);
}
&::after {
right: -16px;
border-bottom-left-radius: 8px;
box-shadow: -8px 0 0 0 #333;
box-shadow: -8px 0 0 0 var(--color-3-darkgray);
}
}
@ -102,7 +102,7 @@
left: -1px;
width: 1px;
height: 16px;
background: #444;
background: var(--color-4-dimgray);
}
}
@ -115,15 +115,19 @@
right: -1px;
width: 1px;
height: 16px;
background: #444;
background: var(--color-4-dimgray);
}
}
}
}
.popover-button {
margin: 2px 4px;
}
}
.panel-body {
background: #333;
background: var(--color-3-darkgray);
flex-grow: 1;
}
}

14
client/web/src/components/workspace/Workspace.vue
View file

@ -5,21 +5,21 @@
:panelType="'Document'"
:tabCloseButtons="true"
:tabMinWidths="true"
:tabLabels="['X-35B Over Death Valley*', 'Document 2', 'Document 3', 'Document 4', 'Document 5']"
:tabLabels="['X-35B Over Death Valley*', 'Document 1', 'Document 2', 'Document 3', 'Document 4', 'Document 5']"
:tabActiveIndex="0"
/>
</LayoutCol>
<LayoutCol class="workspace-grid-resize-gutter"></LayoutCol>
<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 319">
<LayoutRow class="workspace-grid-subdivision">
<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 402">
<Panel :panelType="'Properties'" :tabLabels="['Properties', 'Spreadsheet', 'Palettes']" :tabActiveIndex="0" />
</LayoutRow>
<LayoutRow class="workspace-grid-resize-gutter"></LayoutRow>
<LayoutRow class="workspace-grid-subdivision">
<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 590">
<Panel :panelType="'LayerTree'" :tabLabels="['Layer Tree']" :tabActiveIndex="0" />
</LayoutRow>
<LayoutRow class="workspace-grid-resize-gutter"></LayoutRow>
<LayoutRow class="workspace-grid-subdivision" style="flex-grow: 0; height: 0">
<LayoutRow class="workspace-grid-subdivision folded">
<Panel :panelType="'Minimap'" :tabLabels="['Minimap', 'Asset Manager']" :tabActiveIndex="0" />
</LayoutRow>
</LayoutCol>
@ -29,6 +29,12 @@
<style lang="scss">
.workspace-grid-subdivision {
min-height: 28px;
flex: 1 1 0;
&.folded {
flex-grow: 0;
height: 0;
}
}
.workspace-grid-resize-gutter {