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

Revamp UI styling to remove accent color; improve tab navigation

Browse Source
This commit is contained in:
Keavon Chambers
2022-11-04 05:56:33 -07:00
parent 69fd3dfc35
commit afc84d30f8
30 changed files with 258 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
editor/src/messages/layout/utility_types/widgets/input_widgets.rs
+5
View File
@@ -11,6 +11,8 @@ use serde::{Deserialize, Serialize};
pub struct CheckboxInput { pub struct CheckboxInput {
pub checked: bool, pub checked: bool,
pub disabled: bool,
pub icon: String, pub icon: String,
pub tooltip: String, pub tooltip: String,
@@ -28,6 +30,7 @@ impl Default for CheckboxInput {
fn default() -> Self { fn default() -> Self {
Self { Self {
checked: false, checked: false,
disabled: false,
icon: "Checkmark".into(), icon: "Checkmark".into(),
tooltip: Default::default(), tooltip: Default::default(),
tooltip_shortcut: Default::default(), tooltip_shortcut: Default::default(),
@@ -215,6 +218,8 @@ pub enum NumberInputIncrementBehavior {
pub struct OptionalInput { pub struct OptionalInput {
pub checked: bool, pub checked: bool,
pub disabled: bool,
pub icon: String, pub icon: String,
pub tooltip: String, pub tooltip: String,
frontend/assets/icon-12px-solid/empty-12px.svg
+2
View File
@@ -0,0 +1,2 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 68 B

frontend/assets/icon-12px-solid/grid.svg
+8 -8
View File
@@ -1,10 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
<rect width="1" height="12" x="4" y="0" /> <rect width="1" height="10" x="1" y="1" />
<rect width="1" height="12" x="1" y="0" /> <rect width="1" height="10" x="4" y="1" />
<rect width="1" height="12" x="7" y="0" /> <rect width="1" height="10" x="7" y="1" />
<rect width="1" height="12" x="10" y="0" /> <rect width="1" height="10" x="10" y="1" />
<rect width="12" height="1" x="0" y="4" /> <rect width="10" height="1" x="1" y="1" />
<rect width="12" height="1" x="0" y="1" /> <rect width="10" height="1" x="1" y="4" />
<rect width="12" height="1" x="0" y="7" /> <rect width="10" height="1" x="1" y="7" />
<rect width="12" height="1" x="0" y="10" /> <rect width="10" height="1" x="1" y="10" />
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 422 B

After

Width:  |  Height:  |  Size: 422 B

frontend/public/index.html
-1
View File
@@ -19,7 +19,6 @@
<body> <body>
<noscript>JavaScript is required</noscript> <noscript>JavaScript is required</noscript>
<!-- tabindex is used to allow the app to have focus while inside of it -->
<div data-app id="app" tabindex="0"></div> <div data-app id="app" tabindex="0"></div>
<script> <script>
// Confirm the browser is compatible before initializing the application // Confirm the browser is compatible before initializing the application
frontend/src/App.vue
+40 -28
View File
@@ -39,18 +39,6 @@
--color-f-white: #fff; --color-f-white: #fff;
--color-f-white-rgb: 255, 255, 255; --color-f-white-rgb: 255, 255, 255;
--color-accent: #3194d6;
--color-accent-rgb: 49, 148, 214;
--color-accent-hover: #49a5e2;
--color-accent-hover-rgb: 73, 165, 226;
--color-accent-disabled: #416277;
--color-accent-disabled-rgb: 65, 98, 119;
--color-node-background: #f1decd;
--color-node-background-rgb: 241, 222, 205;
--color-node-icon: #473a3a;
--color-node-icon-rgb: 71, 58, 58;
--color-data-general: #c5c5c5; --color-data-general: #c5c5c5;
--color-data-general-rgb: 197, 197, 197; --color-data-general-rgb: 197, 197, 197;
--color-data-vector: #65bbe5; --color-data-vector: #65bbe5;
@@ -78,10 +66,10 @@
--color-none-size-32px: 80px 32px; --color-none-size-32px: 80px 32px;
--color-none-image-32px: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 32"><line stroke="red" stroke-width="4px" x1="0" y1="36" x2="80" y2="-4" /></svg>'); --color-none-image-32px: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 32"><line stroke="red" stroke-width="4px" x1="0" y1="36" x2="80" y2="-4" /></svg>');
--transparent-checkered-background: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%), --color-transparent-checkered-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); linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%), linear-gradient(#ffffff, #ffffff);
--transparent-checkered-background-size: 16px 16px; --color-transparent-checkered-background-size: 16px 16px;
--transparent-checkered-background-position: 0 0, 8px 8px; --color-transparent-checkered-background-position: 0 0, 8px 8px;
} }
html, html,
@@ -92,7 +80,6 @@ body,
background: var(--color-2-mildblack); background: var(--color-2-mildblack);
user-select: none; user-select: none;
overscroll-behavior: none; overscroll-behavior: none;
outline: none;
} }
html, html,
@@ -107,10 +94,6 @@ button {
color: var(--color-e-nearwhite); color: var(--color-e-nearwhite);
} }
::selection {
background: var(--color-accent);
}
svg, svg,
img { img {
display: block; display: block;
@@ -190,21 +173,50 @@ img {
} }
} }
// List of all elements that should show an outline when focused by tabbing or by clicking the element
.dropdown-input .dropdown-box,
.font-input .dropdown-box {
&:focus {
outline: 1px dashed var(--color-e-nearwhite);
outline-offset: -1px;
}
}
// List of all elements that should show an outline when focused by tabbing, but not by clicking the element
.icon-button, .icon-button,
.text-button, .text-button,
.popover-button, .popover-button,
.checkbox-input label, .color-input > button,
.color-input .swatch .swatch-button, .color-picker .preset-color,
.dropdown-input .dropdown-box, .swatch-pair .swatch > button,
.font-input .dropdown-box,
.radio-input button, .radio-input button,
.menu-list, .menu-list,
.menu-bar-input .entry { .menu-bar-input .entry,
&:focus-visible, .layer-tree .expand-arrow,
&.dropdown-box:focus { .widget-section .header {
outline: 1px dashed var(--color-accent); &:focus-visible {
outline: 1px dashed var(--color-e-nearwhite);
outline-offset: -1px; outline-offset: -1px;
} }
// Variant: dark outline over light colors
&.preset-color.white,
&.text-button.emphasized {
&:focus-visible {
outline: 1px dashed var(--color-2-mildblack);
}
}
}
// Checkbox needs to apply the focus outline to its sibling label
.checkbox-input input:focus-visible + label {
outline: 1px dashed var(--color-e-nearwhite);
outline-offset: -1px;
// Variant: dark outline over light colors
&.checked {
outline: 1px dashed var(--color-2-mildblack);
}
} }
// For placeholder messages (remove eventually) // For placeholder messages (remove eventually)
frontend/src/components/floating-menus/ColorPicker.vue
+13 -13
View File
@@ -108,13 +108,13 @@
/> />
<LayoutRow class="leftover-space"></LayoutRow> <LayoutRow class="leftover-space"></LayoutRow>
<LayoutRow> <LayoutRow>
<button class="preset-color none" @click="() => setColorPreset('none')" v-if="allowNone" title="Set none"></button> <button class="preset-color none" @click="() => setColorPreset('none')" v-if="allowNone" title="Set none" tabindex="0"></button>
<Separator :type="'Related'" v-if="allowNone" /> <Separator :type="'Related'" v-if="allowNone" />
<button class="preset-color black" @click="() => setColorPreset('black')" title="Set black"></button> <button class="preset-color black" @click="() => setColorPreset('black')" title="Set black" tabindex="0"></button>
<Separator :type="'Related'" /> <Separator :type="'Related'" />
<button class="preset-color white" @click="() => setColorPreset('white')" title="Set white"></button> <button class="preset-color white" @click="() => setColorPreset('white')" title="Set white" tabindex="0"></button>
<Separator :type="'Related'" /> <Separator :type="'Related'" />
<button class="preset-color pure" @click="(e: MouseEvent) => setColorPresetSubtile(e)"> <button class="preset-color pure" @click="(e: MouseEvent) => setColorPresetSubtile(e)" tabindex="-1">
<div data-pure-tile="red" style="--pure-color: #ff0000; --pure-color-gray: #4c4c4c" title="Set red"></div> <div data-pure-tile="red" style="--pure-color: #ff0000; --pure-color-gray: #4c4c4c" title="Set red"></div>
<div data-pure-tile="yellow" style="--pure-color: #ffff00; --pure-color-gray: #e3e3e3" title="Set yellow"></div> <div data-pure-tile="yellow" style="--pure-color: #ffff00; --pure-color-gray: #e3e3e3" title="Set yellow"></div>
<div data-pure-tile="green" style="--pure-color: #00ff00; --pure-color-gray: #969696" title="Set green"></div> <div data-pure-tile="green" style="--pure-color: #00ff00; --pure-color-gray: #969696" title="Set green"></div>
@@ -170,9 +170,9 @@
height: 100%; height: 100%;
z-index: -1; z-index: -1;
position: relative; position: relative;
background: var(--transparent-checkered-background); background: var(--color-transparent-checkered-background);
background-size: var(--transparent-checkered-background-size); background-size: var(--color-transparent-checkered-background-size);
background-position: var(--transparent-checkered-background-position); background-position: var(--color-transparent-checkered-background-position);
} }
--selection-pincers-color: var(--new-color-contrasting); --selection-pincers-color: var(--new-color-contrasting);
} }
@@ -256,7 +256,7 @@
overflow: hidden; overflow: hidden;
.new-color { .new-color {
background: linear-gradient(var(--new-color), var(--new-color)), var(--transparent-checkered-background); background: linear-gradient(var(--new-color), var(--new-color)), var(--color-transparent-checkered-background);
.text-label { .text-label {
text-align: left; text-align: left;
@@ -266,7 +266,7 @@
} }
.initial-color { .initial-color {
background: linear-gradient(var(--initial-color), var(--initial-color)), var(--transparent-checkered-background); background: linear-gradient(var(--initial-color), var(--initial-color)), var(--color-transparent-checkered-background);
.text-label { .text-label {
text-align: right; text-align: right;
@@ -279,8 +279,8 @@
.initial-color { .initial-color {
width: 50%; width: 50%;
height: 100%; height: 100%;
background-size: var(--transparent-checkered-background-size); background-size: var(--color-transparent-checkered-background-size);
background-position: var(--transparent-checkered-background-position); background-position: var(--color-transparent-checkered-background-position);
&.none { &.none {
background: var(--color-none); background: var(--color-none);
@@ -299,7 +299,6 @@
.preset-color { .preset-color {
border: none; border: none;
outline: none;
padding: 0; padding: 0;
border-radius: 2px; border-radius: 2px;
width: calc(48px + (48px + 4px) / 2); width: calc(48px + (48px + 4px) / 2);
@@ -342,7 +341,8 @@
background: var(--pure-color-gray); background: var(--pure-color-gray);
} }
&:hover div { &:hover div,
&:focus div {
background: var(--pure-color); background: var(--pure-color);
} }
} }
frontend/src/components/floating-menus/MenuList.vue
+10 -6
View File
@@ -127,20 +127,24 @@
} }
&:hover, &:hover,
&.open, &.open {
&.active {
background: var(--color-6-lowergray); background: var(--color-6-lowergray);
color: var(--color-f-white); color: var(--color-f-white);
&.active {
background: var(--color-accent);
}
.entry-icon svg { .entry-icon svg {
fill: var(--color-f-white); fill: var(--color-f-white);
} }
} }
&.active {
background: var(--color-e-nearwhite);
color: var(--color-2-mildblack);
.entry-icon svg {
fill: var(--color-2-mildblack);
}
}
&.disabled { &.disabled {
color: var(--color-8-uppergray); color: var(--color-8-uppergray);
frontend/src/components/layout/FloatingMenu.vue
+2
View File
@@ -513,6 +513,8 @@ export default defineComponent({
async open(newState: boolean, oldState: boolean) { async open(newState: boolean, oldState: boolean) {
// Switching from closed to open // Switching from closed to open
if (newState && !oldState) { if (newState && !oldState) {
// TODO: Close any other floating menus that may already be open, which can happen using tab navigation and Enter/Space Bar to open
// Close floating menu if pointer strays far enough away // Close floating menu if pointer strays far enough away
window.addEventListener("pointermove", this.pointerMoveHandler); window.addEventListener("pointermove", this.pointerMoveHandler);
// Close floating menu if esc is pressed // Close floating menu if esc is pressed
frontend/src/components/panels/Document.vue
+19 -16
View File
@@ -105,20 +105,22 @@
} }
} }
.color-solid { .icon-button:not(.active) {
fill: var(--color-f-white); .color-solid {
} fill: var(--color-f-white);
}
.color-general { .color-general {
fill: var(--color-data-general); fill: var(--color-data-general);
} }
.color-vector { .color-vector {
fill: var(--color-data-vector); fill: var(--color-data-vector);
} }
.color-raster { .color-raster {
fill: var(--color-data-raster); fill: var(--color-data-raster);
}
} }
} }
@@ -190,6 +192,7 @@
pointer-events: auto; pointer-events: auto;
} }
} }
foreignObject { foreignObject {
width: 10000px; width: 10000px;
height: 10000px; height: 10000px;
@@ -207,12 +210,12 @@
// Workaround to force Chrome to display the flashing text entry cursor when text is empty // Workaround to force Chrome to display the flashing text entry cursor when text is empty
padding-left: 1px; padding-left: 1px;
margin-left: -1px; margin-left: -1px;
}
div:focus { &:focus {
border: none; border: none;
outline: none; outline: none; // Ok for contenteditable element
margin: -1px; margin: -1px;
}
} }
} }
} }
frontend/src/components/panels/LayerTree.vue
+4 -4
View File
@@ -27,6 +27,7 @@
class="expand-arrow" class="expand-arrow"
:class="{ expanded: listing.entry.layerMetadata.expanded }" :class="{ expanded: listing.entry.layerMetadata.expanded }"
@click.stop="handleExpandArrowClick(listing.entry.path)" @click.stop="handleExpandArrowClick(listing.entry.path)"
tabindex="0"
></button> ></button>
<LayoutRow <LayoutRow
class="layer" class="layer"
@@ -128,7 +129,6 @@
width: 16px; width: 16px;
height: 100%; height: 100%;
padding: 0; padding: 0;
outline: none;
border: none; border: none;
position: relative; position: relative;
background: none; background: none;
@@ -193,7 +193,7 @@
color: inherit; color: inherit;
background: none; background: none;
border: none; border: none;
outline: none; outline: none; // Ok for input element
margin: 0; margin: 0;
padding: 0; padding: 0;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -243,7 +243,7 @@
} }
&.insert-folder .layer { &.insert-folder .layer {
outline: 3px solid var(--color-accent-hover); outline: 3px solid var(--color-e-nearwhite);
outline-offset: -3px; outline-offset: -3px;
} }
} }
@@ -252,7 +252,7 @@
position: absolute; position: absolute;
// `left` is applied dynamically // `left` is applied dynamically
right: 0; right: 0;
background: var(--color-accent-hover); background: var(--color-e-nearwhite);
margin-top: -2px; margin-top: -2px;
height: 5px; height: 5px;
z-index: 1; z-index: 1;
frontend/src/components/widgets/assists/PivotAssist.vue
+14 -15
View File
@@ -1,14 +1,14 @@
<template> <template>
<div class="pivot-assist"> <div class="pivot-assist">
<button @click="setPosition('TopLeft')" class="row-1 col-1" :class="{ active: position === 'TopLeft' }"></button> <button @click="setPosition('TopLeft')" class="row-1 col-1" :class="{ active: position === 'TopLeft' }" tabindex="-1"><div></div></button>
<button @click="setPosition('TopCenter')" class="row-1 col-2" :class="{ active: position === 'TopCenter' }"><div></div></button> <button @click="setPosition('TopCenter')" class="row-1 col-2" :class="{ active: position === 'TopCenter' }" tabindex="-1"><div></div></button>
<button @click="setPosition('TopRight')" class="row-1 col-3" :class="{ active: position === 'TopRight' }"><div></div></button> <button @click="setPosition('TopRight')" class="row-1 col-3" :class="{ active: position === 'TopRight' }" tabindex="-1"><div></div></button>
<button @click="setPosition('CenterLeft')" class="row-2 col-1" :class="{ active: position === 'CenterLeft' }"><div></div></button> <button @click="setPosition('CenterLeft')" class="row-2 col-1" :class="{ active: position === 'CenterLeft' }" tabindex="-1"><div></div></button>
<button @click="setPosition('Center')" class="row-2 col-2" :class="{ active: position === 'Center' }"><div></div></button> <button @click="setPosition('Center')" class="row-2 col-2" :class="{ active: position === 'Center' }" tabindex="-1"><div></div></button>
<button @click="setPosition('CenterRight')" class="row-2 col-3" :class="{ active: position === 'CenterRight' }"><div></div></button> <button @click="setPosition('CenterRight')" class="row-2 col-3" :class="{ active: position === 'CenterRight' }" tabindex="-1"><div></div></button>
<button @click="setPosition('BottomLeft')" class="row-3 col-1" :class="{ active: position === 'BottomLeft' }"><div></div></button> <button @click="setPosition('BottomLeft')" class="row-3 col-1" :class="{ active: position === 'BottomLeft' }" tabindex="-1"><div></div></button>
<button @click="setPosition('BottomCenter')" class="row-3 col-2" :class="{ active: position === 'BottomCenter' }"><div></div></button> <button @click="setPosition('BottomCenter')" class="row-3 col-2" :class="{ active: position === 'BottomCenter' }" tabindex="-1"><div></div></button>
<button @click="setPosition('BottomRight')" class="row-3 col-3" :class="{ active: position === 'BottomRight' }"><div></div></button> <button @click="setPosition('BottomRight')" class="row-3 col-3" :class="{ active: position === 'BottomRight' }" tabindex="-1"><div></div></button>
</div> </div>
</template> </template>
@@ -25,9 +25,8 @@
height: 5px; height: 5px;
margin: 0; margin: 0;
padding: 0; padding: 0;
outline: none; background: var(--color-1-nearblack);
background: none; border: 1px solid var(--color-5-dullgray);
border: 1px solid var(--color-7-middlegray);
&:hover { &:hover {
border-color: transparent; border-color: transparent;
@@ -36,7 +35,7 @@
&.active { &.active {
border-color: transparent; border-color: transparent;
background: var(--color-f-white); background: var(--color-e-nearwhite);
} }
&.col-1::before, &.col-1::before,
@@ -45,7 +44,7 @@
pointer-events: none; pointer-events: none;
width: 2px; width: 2px;
height: 0; height: 0;
border-top: 1px solid var(--color-7-middlegray); border-top: 1px solid var(--color-5-dullgray);
position: absolute; position: absolute;
top: 1px; top: 1px;
right: -3px; right: -3px;
@@ -57,7 +56,7 @@
pointer-events: none; pointer-events: none;
width: 0; width: 0;
height: 2px; height: 2px;
border-left: 1px solid var(--color-7-middlegray); border-left: 1px solid var(--color-5-dullgray);
position: absolute; position: absolute;
bottom: -3px; bottom: -3px;
right: 1px; right: 1px;
frontend/src/components/widgets/buttons/IconButton.vue
+6 -3
View File
@@ -1,5 +1,5 @@
<template> <template>
<button :class="['icon-button', `size-${size}`, active && 'active']" @click="(e: MouseEvent) => action(e)" :title="tooltip"> <button :class="['icon-button', `size-${size}`, active && 'active']" @click="(e: MouseEvent) => action(e)" :title="tooltip" :tabindex="active ? -1 : 0">
<IconLabel :icon="icon" /> <IconLabel :icon="icon" />
</button> </button>
</template> </template>
@@ -11,7 +11,6 @@
align-items: center; align-items: center;
flex: 0 0 auto; flex: 0 0 auto;
padding: 0; padding: 0;
outline: none;
border: none; border: none;
border-radius: 2px; border-radius: 2px;
background: none; background: none;
@@ -26,7 +25,11 @@
} }
&.active { &.active {
background: var(--color-accent); background: var(--color-e-nearwhite);
svg {
fill: var(--color-2-mildblack);
}
} }
&:hover:not(.active) { &:hover:not(.active) {
frontend/src/components/widgets/buttons/PopoverButton.vue
+3 -3
View File
@@ -1,6 +1,6 @@
<template> <template>
<LayoutRow class="popover-button"> <LayoutRow class="popover-button">
<IconButton :action="() => onClick()" :icon="icon" :size="16" data-floating-menu-spawner :tooltip="tooltip" /> <IconButton :class="{ open }" :action="() => onClick()" :icon="icon" :size="16" data-floating-menu-spawner :tooltip="tooltip" />
<FloatingMenu v-model:open="open" :type="'Popover'" :direction="'Bottom'"> <FloatingMenu v-model:open="open" :type="'Popover'" :direction="'Bottom'">
<slot></slot> <slot></slot>
</FloatingMenu> </FloatingMenu>
@@ -23,13 +23,13 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0; padding: 0;
outline: none;
border: none; border: none;
border-radius: 2px; border-radius: 2px;
background: var(--color-1-nearblack); background: var(--color-1-nearblack);
fill: var(--color-e-nearwhite); fill: var(--color-e-nearwhite);
&:hover { &:hover,
&.open {
background: var(--color-6-lowergray); background: var(--color-6-lowergray);
fill: var(--color-f-white); fill: var(--color-f-white);
} }
frontend/src/components/widgets/buttons/TextButton.vue
+14 -14
View File
@@ -8,6 +8,7 @@
:title="tooltip" :title="tooltip"
:style="minWidth > 0 ? `min-width: ${minWidth}px` : ''" :style="minWidth > 0 ? `min-width: ${minWidth}px` : ''"
@click="(e: MouseEvent) => action(e)" @click="(e: MouseEvent) => action(e)"
:tabindex="disabled ? -1 : 0"
> >
<IconLabel v-if="icon" :icon="icon" /> <IconLabel v-if="icon" :icon="icon" />
<TextLabel>{{ label }}</TextLabel> <TextLabel>{{ label }}</TextLabel>
@@ -23,7 +24,6 @@
height: 24px; height: 24px;
padding: 0 8px; padding: 0 8px;
box-sizing: border-box; box-sizing: border-box;
outline: none;
border: none; border: none;
border-radius: 2px; border-radius: 2px;
background: var(--color-5-dullgray); background: var(--color-5-dullgray);
@@ -34,24 +34,24 @@
color: var(--color-f-white); color: var(--color-f-white);
} }
&.emphasized {
background: var(--color-accent);
color: var(--color-f-white);
&:hover {
background: var(--color-accent-hover);
}
&.disabled {
background: var(--color-accent-disabled);
}
}
&.disabled { &.disabled {
background: var(--color-4-dimgray); background: var(--color-4-dimgray);
color: var(--color-8-uppergray); color: var(--color-8-uppergray);
} }
&.emphasized {
background: var(--color-e-nearwhite);
color: var(--color-2-mildblack);
&:hover {
background: var(--color-f-white);
}
&.disabled {
background: var(--color-8-uppergray);
}
}
& + .text-button { & + .text-button {
margin-left: 8px; margin-left: 8px;
} }
frontend/src/components/widgets/groups/WidgetSection.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<!-- TODO: Implement collapsable sections with properties system --> <!-- TODO: Implement collapsable sections with properties system -->
<template> <template>
<LayoutCol class="widget-section"> <LayoutCol class="widget-section">
<button class="header" @click.stop="() => (expanded = !expanded)"> <button class="header" @click.stop="() => (expanded = !expanded)" tabindex="0">
<div class="expand-arrow" :class="{ expanded }"></div> <div class="expand-arrow" :class="{ expanded }"></div>
<Separator :type="'Related'" /> <Separator :type="'Related'" />
<TextLabel :bold="true">{{ widgetData.name }}</TextLabel> <TextLabel :bold="true">{{ widgetData.name }}</TextLabel>
frontend/src/components/widgets/inputs/CheckboxInput.vue
+50 -17
View File
@@ -1,9 +1,16 @@
<template> <template>
<LayoutRow class="checkbox-input"> <LayoutRow class="checkbox-input">
<input type="checkbox" :id="`checkbox-input-${id}`" :checked="checked" @change="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" /> <input
<label :for="`checkbox-input-${id}`" tabindex="0" @keydown.enter="(e) => toggleCheckboxFromLabel(e)" :title="tooltip"> type="checkbox"
:id="`checkbox-input-${id}`"
:checked="checked"
@change="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)"
:disabled="disabled"
:tabindex="disabled ? -1 : 0"
/>
<label :class="{ disabled, checked }" :for="`checkbox-input-${id}`" @keydown.enter="(e) => toggleCheckboxFromLabel(e)" :title="tooltip">
<LayoutRow class="checkbox-box"> <LayoutRow class="checkbox-box">
<IconLabel :icon="icon" /> <IconLabel :icon="displayIcon" />
</LayoutRow> </LayoutRow>
</label> </label>
</LayoutRow> </LayoutRow>
@@ -15,9 +22,14 @@
align-items: center; align-items: center;
input { input {
display: none; // We can't use `display: none` because it must be visible to work as a tabbale input that accepts a space bar actuation
width: 0;
height: 0;
margin: 0;
opacity: 0;
} }
// Unchecked
label { label {
display: flex; display: flex;
height: 16px; height: 16px;
@@ -26,31 +38,44 @@
.checkbox-box { .checkbox-box {
flex: 0 0 auto; flex: 0 0 auto;
background: var(--color-e-nearwhite); background: var(--color-5-dullgray);
padding: 2px; padding: 2px;
border-radius: 2px; border-radius: 2px;
.icon-label {
fill: var(--color-8-uppergray);
}
}
// Hovered
&:hover .checkbox-box {
background: var(--color-6-lowergray);
}
// Disabled
&.disabled .checkbox-box {
background: var(--color-4-dimgray);
}
}
// Checked
input:checked + label {
.checkbox-box {
background: var(--color-e-nearwhite);
.icon-label { .icon-label {
fill: var(--color-2-mildblack); fill: var(--color-2-mildblack);
} }
} }
// Hovered
&:hover .checkbox-box { &:hover .checkbox-box {
background: var(--color-f-white); background: var(--color-f-white);
} }
}
input:checked + label { // Hovered
.checkbox-box { &.disabled .checkbox-box {
background: var(--color-accent); background: var(--color-8-uppergray);
.icon-label {
fill: var(--color-f-white);
}
}
&:hover .checkbox-box {
background: var(--color-accent-hover);
} }
} }
} }
@@ -68,6 +93,7 @@ export default defineComponent({
emits: ["update:checked"], emits: ["update:checked"],
props: { props: {
checked: { type: Boolean as PropType<boolean>, default: false }, checked: { type: Boolean as PropType<boolean>, default: false },
disabled: { type: Boolean as PropType<boolean>, default: false },
icon: { type: String as PropType<IconName>, default: "Checkmark" }, icon: { type: String as PropType<IconName>, default: "Checkmark" },
tooltip: { type: String as PropType<string | undefined>, required: false }, tooltip: { type: String as PropType<string | undefined>, required: false },
}, },
@@ -76,6 +102,13 @@ export default defineComponent({
id: `${Math.random()}`.substring(2), id: `${Math.random()}`.substring(2),
}; };
}, },
computed: {
displayIcon(): IconName {
if (!this.checked && this.icon === "Checkmark") return "Empty12px";
return this.icon;
},
},
methods: { methods: {
isChecked() { isChecked() {
return this.checked; return this.checked;
frontend/src/components/widgets/inputs/ColorInput.vue
+9 -6
View File
@@ -1,6 +1,6 @@
<template> <template>
<LayoutRow class="color-input" :title="tooltip"> <LayoutRow class="color-input" :title="tooltip">
<button :class="{ none: value.none }" :style="{ '--color': value.toHexOptionalAlpha() }" @click="() => $emit('update:open', true)" data-floating-menu-spawner> <button :class="{ none: value.none }" :style="{ '--chosen-color': value.toHexOptionalAlpha() }" @click="() => $emit('update:open', true)" tabindex="0" data-floating-menu-spawner>
<TextLabel :bold="true" class="chip" v-if="chip">{{ chip }}</TextLabel> <TextLabel :bold="true" class="chip" v-if="chip">{{ chip }}</TextLabel>
</button> </button>
<ColorPicker v-model:open="isOpen" :color="value" @update:color="(color: Color) => colorPickerUpdated(color)" :allowNone="true" /> <ColorPicker v-model:open="isOpen" :color="value" @update:color="(color: Color) => colorPickerUpdated(color)" :allowNone="true" />
@@ -11,14 +11,13 @@
.color-input { .color-input {
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
border: 1px solid var(--color-7-middlegray); border: 1px solid var(--color-5-dullgray);
border-radius: 2px; border-radius: 2px;
padding: 1px; padding: 1px;
> button { > button {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
outline: none;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
@@ -34,9 +33,9 @@
padding: 2px; padding: 2px;
top: -2px; top: -2px;
left: -2px; left: -2px;
background: linear-gradient(var(--color), var(--color)), var(--transparent-checkered-background); background: linear-gradient(var(--chosen-color), var(--chosen-color)), var(--color-transparent-checkered-background);
background-size: var(--transparent-checkered-background-size); background-size: var(--color-transparent-checkered-background-size);
background-position: var(--transparent-checkered-background-position); background-position: var(--color-transparent-checkered-background-position);
} }
&.none { &.none {
@@ -62,6 +61,10 @@
} }
} }
&.color-input.color-input > button {
outline-offset: 0;
}
> .floating-menu { > .floating-menu {
left: 50%; left: 50%;
bottom: 0; bottom: 0;
frontend/src/components/widgets/inputs/DropdownInput.vue
+1 -1
View File
@@ -8,7 +8,7 @@
@click="() => !disabled && (open = true)" @click="() => !disabled && (open = true)"
@blur="(e: FocusEvent) => unFocusDropdownBox(e)" @blur="(e: FocusEvent) => unFocusDropdownBox(e)"
@keydown="(e: KeyboardEvent) => keydown(e)" @keydown="(e: KeyboardEvent) => keydown(e)"
tabindex="0" :tabindex="disabled ? -1 : 0"
data-floating-menu-spawner data-floating-menu-spawner
> >
<IconLabel class="dropdown-icon" :icon="activeEntry.icon" v-if="activeEntry.icon" /> <IconLabel class="dropdown-icon" :icon="activeEntry.icon" v-if="activeEntry.icon" />
frontend/src/components/widgets/inputs/FieldInput.vue
+6 -1
View File
@@ -71,10 +71,15 @@
line-height: 18px; line-height: 18px;
margin: 0 8px; margin: 0 8px;
padding: 3px 0; padding: 3px 0;
outline: none; outline: none; // Ok for input/textarea element
border: none; border: none;
background: none; background: none;
color: var(--color-e-nearwhite); color: var(--color-e-nearwhite);
caret-color: var(--color-e-nearwhite);
&::selection {
background: var(--color-5-dullgray);
}
} }
input { input {
frontend/src/components/widgets/inputs/FontInput.vue
+10 -1
View File
@@ -1,6 +1,15 @@
<template> <template>
<LayoutRow class="font-input"> <LayoutRow class="font-input">
<LayoutRow class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" :title="tooltip" tabindex="0" @click="toggleOpen" @keydown="keydown" data-floating-menu-spawner> <LayoutRow
class="dropdown-box"
:class="{ disabled }"
:style="{ minWidth: `${minWidth}px` }"
:title="tooltip"
:tabindex="disabled ? -1 : 0"
@click="toggleOpen"
@keydown="keydown"
data-floating-menu-spawner
>
<span>{{ activeEntry?.value || "" }}</span> <span>{{ activeEntry?.value || "" }}</span>
<IconLabel class="dropdown-arrow" :icon="'DropdownArrow'" /> <IconLabel class="dropdown-arrow" :icon="'DropdownArrow'" />
</LayoutRow> </LayoutRow>
frontend/src/components/widgets/inputs/MenuBarInput.vue
+1 -1
View File
@@ -8,7 +8,7 @@
class="entry" class="entry"
:class="{ open: entry.ref?.isOpen }" :class="{ open: entry.ref?.isOpen }"
tabindex="0" tabindex="0"
data-floating-menu-spawner :data-floating-menu-spawner="entry.children && entry.children.length > 0 ? '' : 'no-hover-transfer'"
> >
<IconLabel v-if="entry.icon" :icon="entry.icon" /> <IconLabel v-if="entry.icon" :icon="entry.icon" />
<span v-if="entry.label">{{ entry.label }}</span> <span v-if="entry.label">{{ entry.label }}</span>
frontend/src/components/widgets/inputs/NumberInput.vue
+2 -3
View File
@@ -12,8 +12,8 @@
@cancelTextChange="() => onCancelTextChange()" @cancelTextChange="() => onCancelTextChange()"
ref="fieldInput" ref="fieldInput"
> >
<button v-if="value !== undefined" class="arrow left" @click="() => onIncrement('Decrease')"></button> <button v-if="value !== undefined" class="arrow left" @click="() => onIncrement('Decrease')" tabindex="-1"></button>
<button v-if="value !== undefined" class="arrow right" @click="() => onIncrement('Increase')"></button> <button v-if="value !== undefined" class="arrow right" @click="() => onIncrement('Increase')" tabindex="-1"></button>
</FieldInput> </FieldInput>
</template> </template>
@@ -31,7 +31,6 @@
position: absolute; position: absolute;
top: 0; top: 0;
padding: 9px 0; padding: 9px 0;
outline: none;
border: none; border: none;
background: rgba(var(--color-1-nearblack-rgb), 0.75); background: rgba(var(--color-1-nearblack-rgb), 0.75);
frontend/src/components/widgets/inputs/OptionalInput.vue
+3 -15
View File
@@ -1,6 +1,6 @@
<template> <template>
<LayoutRow class="optional-input"> <LayoutRow class="optional-input">
<CheckboxInput :checked="checked" @input="(e: Event) => $emit('update:checked', (e.target as HTMLInputElement).checked)" :icon="icon" :tooltip="tooltip" /> <CheckboxInput :checked="checked" :disabled="disabled" @input="(e: Event) => $emit('update:checked', (e.target as HTMLInputElement).checked)" :icon="icon" :tooltip="tooltip" />
</LayoutRow> </LayoutRow>
</template> </template>
@@ -14,22 +14,9 @@
white-space: nowrap; white-space: nowrap;
width: 24px; width: 24px;
height: 24px; height: 24px;
border: 1px solid var(--color-7-middlegray); border: 1px solid var(--color-5-dullgray);
border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px;
box-sizing: border-box; box-sizing: border-box;
&:hover {
background: var(--color-6-lowergray);
}
}
input:checked + label {
border: 1px solid var(--color-accent);
&:hover {
border: 1px solid var(--color-accent-hover);
background: none;
}
} }
} }
</style> </style>
@@ -46,6 +33,7 @@ export default defineComponent({
emits: ["update:checked"], emits: ["update:checked"],
props: { props: {
checked: { type: Boolean as PropType<boolean>, required: true }, checked: { type: Boolean as PropType<boolean>, required: true },
disabled: { type: Boolean as PropType<boolean>, default: false },
icon: { type: String as PropType<IconName>, default: "Checkmark" }, icon: { type: String as PropType<IconName>, default: "Checkmark" },
tooltip: { type: String as PropType<string | undefined>, required: false }, tooltip: { type: String as PropType<string | undefined>, required: false },
}, },
frontend/src/components/widgets/inputs/RadioInput.vue
+11 -5
View File
@@ -1,6 +1,13 @@
<template> <template>
<LayoutRow class="radio-input"> <LayoutRow class="radio-input">
<button :class="{ active: index === selectedIndex }" v-for="(entry, index) in entries" :key="index" @click="() => handleEntryClick(entry)" :title="entry.tooltip"> <button
:class="{ active: index === selectedIndex }"
v-for="(entry, index) in entries"
:key="index"
@click="() => handleEntryClick(entry)"
:title="entry.tooltip"
:tabindex="index === selectedIndex ? -1 : 0"
>
<IconLabel v-if="entry.icon" :icon="entry.icon" /> <IconLabel v-if="entry.icon" :icon="entry.icon" />
<TextLabel v-if="entry.label">{{ entry.label }}</TextLabel> <TextLabel v-if="entry.label">{{ entry.label }}</TextLabel>
</button> </button>
@@ -14,7 +21,6 @@
fill: var(--color-e-nearwhite); fill: var(--color-e-nearwhite);
height: 24px; height: 24px;
padding: 0 4px; padding: 0 4px;
outline: none;
border: none; border: none;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -29,11 +35,11 @@
} }
&.active { &.active {
background: var(--color-accent); background: var(--color-e-nearwhite);
color: var(--color-f-white); color: var(--color-2-mildblack);
svg { svg {
fill: var(--color-f-white); fill: var(--color-2-mildblack);
} }
} }
frontend/src/components/widgets/inputs/SwatchPairInput.vue
+10 -12
View File
@@ -1,20 +1,18 @@
<template> <template>
<LayoutCol class="swatch-pair"> <LayoutCol class="swatch-pair">
<LayoutRow class="secondary swatch">
<button @click="() => clickSecondarySwatch()" :style="`--swatch-color: ${secondary.toRgbaCSS()}`" data-floating-menu-spawner="no-hover-transfer"></button>
<ColorPicker v-model:open="secondaryOpen" :color="secondary" @update:color="(color: Color) => secondaryColorChanged(color)" :direction="'Right'" />
</LayoutRow>
<LayoutRow class="primary swatch"> <LayoutRow class="primary swatch">
<button @click="() => clickPrimarySwatch()" :style="`--swatch-color: ${primary.toRgbaCSS()}`" data-floating-menu-spawner="no-hover-transfer"></button> <button @click="() => clickPrimarySwatch()" :style="`--swatch-color: ${primary.toRgbaCSS()}`" data-floating-menu-spawner="no-hover-transfer" tabindex="0"></button>
<ColorPicker v-model:open="primaryOpen" :color="primary" @update:color="(color: Color) => primaryColorChanged(color)" :direction="'Right'" /> <ColorPicker v-model:open="primaryOpen" :color="primary" @update:color="(color: Color) => primaryColorChanged(color)" :direction="'Right'" />
</LayoutRow> </LayoutRow>
<LayoutRow class="secondary swatch">
<button @click="() => clickSecondarySwatch()" :style="`--swatch-color: ${secondary.toRgbaCSS()}`" data-floating-menu-spawner="no-hover-transfer" tabindex="0"></button>
<ColorPicker v-model:open="secondaryOpen" :color="secondary" @update:color="(color: Color) => secondaryColorChanged(color)" :direction="'Right'" />
</LayoutRow>
</LayoutCol> </LayoutCol>
</template> </template>
<style lang="scss"> <style lang="scss">
.swatch-pair { .swatch-pair {
// Reversed order of elements paired with `column-reverse` allows primary to overlap secondary without relying on `z-index`
flex-direction: column-reverse;
flex: 0 0 auto; flex: 0 0 auto;
.swatch { .swatch {
@@ -28,15 +26,14 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
border: 2px var(--color-7-middlegray) solid; border: 2px var(--color-5-dullgray) solid;
box-shadow: 0 0 0 2px var(--color-3-darkgray); box-shadow: 0 0 0 2px var(--color-3-darkgray);
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
outline: none; background: linear-gradient(var(--swatch-color), var(--swatch-color)), var(--color-transparent-checkered-background);
background: linear-gradient(var(--swatch-color), var(--swatch-color)), var(--transparent-checkered-background); background-size: var(--color-transparent-checkered-background-size);
background-size: var(--transparent-checkered-background-size); background-position: var(--color-transparent-checkered-background-position);
background-position: var(--transparent-checkered-background-position);
overflow: hidden; overflow: hidden;
} }
@@ -47,6 +44,7 @@
&.primary { &.primary {
margin-bottom: -8px; margin-bottom: -8px;
z-index: 1;
} }
} }
} }
frontend/src/components/widgets/labels/UserInputLabel.vue
+5 -12
View File
@@ -51,7 +51,7 @@
box-sizing: border-box; box-sizing: border-box;
border: 1px solid; border: 1px solid;
border-radius: 4px; border-radius: 4px;
border-color: var(--color-7-middlegray); border-color: var(--color-5-dullgray);
color: var(--color-e-nearwhite); color: var(--color-e-nearwhite);
&.width-1 { &.width-1 {
@@ -85,7 +85,7 @@
} }
.dim { .dim {
fill: var(--color-7-middlegray); fill: var(--color-8-uppergray);
} }
} }
@@ -93,9 +93,9 @@
margin-left: 4px; margin-left: 4px;
} }
.floating-menu-content & { .floating-menu-content .row > & {
.input-key { .input-key {
border-color: var(--color-4-dimgray); border-color: var(--color-3-darkgray);
color: var(--color-8-uppergray); color: var(--color-8-uppergray);
} }
@@ -106,20 +106,13 @@
} }
.input-mouse .dim { .input-mouse .dim {
fill: var(--color-4-dimgray); fill: var(--color-3-darkgray);
} }
} }
.floating-menu-content .row:hover > & { .floating-menu-content .row:hover > & {
.input-key { .input-key {
border-color: var(--color-7-middlegray); border-color: var(--color-7-middlegray);
color: var(--color-9-palegray);
}
.input-key .icon-label svg,
&.keyboard-lock-notice.keyboard-lock-notice svg,
.input-mouse .bright {
fill: var(--color-9-palegray);
} }
.input-mouse .dim { .input-mouse .dim {
frontend/src/components/widgets/metrics/PersistentScrollbar.vue
+2 -3
View File
@@ -1,10 +1,10 @@
<template> <template>
<div class="persistent-scrollbar" :class="direction.toLowerCase()"> <div class="persistent-scrollbar" :class="direction.toLowerCase()">
<button class="arrow decrease" @pointerdown="() => changePosition(-50)"></button> <button class="arrow decrease" @pointerdown="() => changePosition(-50)" tabindex="-1"></button>
<div class="scroll-track" ref="scrollTrack" @pointerdown="(e) => grabArea(e)"> <div class="scroll-track" ref="scrollTrack" @pointerdown="(e) => grabArea(e)">
<div class="scroll-thumb" @pointerdown="(e) => grabHandle(e)" :class="{ dragging }" :style="[thumbStart, thumbEnd, sides]"></div> <div class="scroll-thumb" @pointerdown="(e) => grabHandle(e)" :class="{ dragging }" :style="[thumbStart, thumbEnd, sides]"></div>
</div> </div>
<button class="arrow increase" @click="() => changePosition(50)"></button> <button class="arrow increase" @click="() => changePosition(50)" tabindex="-1"></button>
</div> </div>
</template> </template>
@@ -16,7 +16,6 @@
.arrow { .arrow {
flex: 0 0 auto; flex: 0 0 auto;
background: none; background: none;
outline: none;
border: none; border: none;
border-style: solid; border-style: solid;
width: 0; width: 0;
frontend/src/io-managers/input.ts
+1 -5
View File
@@ -43,11 +43,7 @@ export function createInputManager(editor: Editor, container: HTMLElement, dialo
{ target: window, eventName: "wheel", action: (e: WheelEvent): void => onWheelScroll(e), options: { passive: false } }, { target: window, eventName: "wheel", action: (e: WheelEvent): void => onWheelScroll(e), options: { passive: false } },
{ target: window, eventName: "modifyinputfield", action: (e: CustomEvent): void => onModifyInputField(e) }, { target: window, eventName: "modifyinputfield", action: (e: CustomEvent): void => onModifyInputField(e) },
{ target: window.document.body, eventName: "paste", action: (e: ClipboardEvent): void => onPaste(e) }, { target: window.document.body, eventName: "paste", action: (e: ClipboardEvent): void => onPaste(e) },
{ { target: app as EventListenerTarget, eventName: "blur", action: (): void => blurApp() },
target: app as EventListenerTarget,
eventName: "blur",
action: (): void => blurApp(),
},
]; ];
// Event bindings // Event bindings
frontend/src/utility-functions/icons.ts
+2
View File
@@ -11,6 +11,7 @@ const GRAPHICS = {
import Checkmark from "@/../assets/icon-12px-solid/checkmark.svg"; import Checkmark from "@/../assets/icon-12px-solid/checkmark.svg";
import CloseX from "@/../assets/icon-12px-solid/close-x.svg"; import CloseX from "@/../assets/icon-12px-solid/close-x.svg";
import DropdownArrow from "@/../assets/icon-12px-solid/dropdown-arrow.svg"; import DropdownArrow from "@/../assets/icon-12px-solid/dropdown-arrow.svg";
import Empty12px from "@/../assets/icon-12px-solid/empty-12px.svg";
import FullscreenEnter from "@/../assets/icon-12px-solid/fullscreen-enter.svg"; import FullscreenEnter from "@/../assets/icon-12px-solid/fullscreen-enter.svg";
import FullscreenExit from "@/../assets/icon-12px-solid/fullscreen-exit.svg"; import FullscreenExit from "@/../assets/icon-12px-solid/fullscreen-exit.svg";
import Grid from "@/../assets/icon-12px-solid/grid.svg"; import Grid from "@/../assets/icon-12px-solid/grid.svg";
@@ -43,6 +44,7 @@ const SOLID_12PX = {
Checkmark: { component: Checkmark, size: 12 }, Checkmark: { component: Checkmark, size: 12 },
CloseX: { component: CloseX, size: 12 }, CloseX: { component: CloseX, size: 12 },
DropdownArrow: { component: DropdownArrow, size: 12 }, DropdownArrow: { component: DropdownArrow, size: 12 },
Empty12px: { component: Empty12px, size: 12 },
FullscreenEnter: { component: FullscreenEnter, size: 12 }, FullscreenEnter: { component: FullscreenEnter, size: 12 },
FullscreenExit: { component: FullscreenExit, size: 12 }, FullscreenExit: { component: FullscreenExit, size: 12 },
Grid: { component: Grid, size: 12 }, Grid: { component: Grid, size: 12 },
frontend/src/wasm-communication/messages.ts
+4
View File
@@ -708,6 +708,8 @@ export abstract class WidgetProps {
export class CheckboxInput extends WidgetProps { export class CheckboxInput extends WidgetProps {
checked!: boolean; checked!: boolean;
disabled!: boolean;
icon!: IconName; icon!: IconName;
@Transform(({ value }: { value: string }) => (value.length > 0 ? value : undefined)) @Transform(({ value }: { value: string }) => (value.length > 0 ? value : undefined))
@@ -833,6 +835,8 @@ export class NumberInput extends WidgetProps {
export class OptionalInput extends WidgetProps { export class OptionalInput extends WidgetProps {
checked!: boolean; checked!: boolean;
disabled!: boolean;
icon!: IconName; icon!: IconName;
@Transform(({ value }: { value: string }) => (value.length > 0 ? value : undefined)) @Transform(({ value }: { value: string }) => (value.length > 0 ? value : undefined))