mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-08-04 05:18:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

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 f7fd1d94eb
commit ff75e0eae9
30 changed files with 258 additions and 194 deletions
Download patch file Download diff file Expand all files Collapse all files

68
frontend/src/App.vue
View file

@ -39,18 +39,6 @@
--color-f-white: #fff;
--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-rgb: 197, 197, 197;
--color-data-vector: #65bbe5;
@ -78,10 +66,10 @@
--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>');
--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);
--transparent-checkered-background-size: 16px 16px;
--transparent-checkered-background-position: 0 0, 8px 8px;
--color-transparent-checkered-background-size: 16px 16px;
--color-transparent-checkered-background-position: 0 0, 8px 8px;
}
html,
@ -92,7 +80,6 @@ body,
background: var(--color-2-mildblack);
user-select: none;
overscroll-behavior: none;
outline: none;
}
html,
@ -107,10 +94,6 @@ button {
color: var(--color-e-nearwhite);
}
::selection {
background: var(--color-accent);
}
svg,
img {
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,
.text-button,
.popover-button,
.checkbox-input label,
.color-input .swatch .swatch-button,
.dropdown-input .dropdown-box,
.font-input .dropdown-box,
.color-input > button,
.color-picker .preset-color,
.swatch-pair .swatch > button,
.radio-input button,
.menu-list,
.menu-bar-input .entry {
&:focus-visible,
&.dropdown-box:focus {
outline: 1px dashed var(--color-accent);
.menu-bar-input .entry,
.layer-tree .expand-arrow,
.widget-section .header {
&:focus-visible {
outline: 1px dashed var(--color-e-nearwhite);
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)

26
frontend/src/components/floating-menus/ColorPicker.vue
View file

@ -108,13 +108,13 @@
/>
<LayoutRow class="leftover-space"></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" />
<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'" />
<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'" />
<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="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>
@ -170,9 +170,9 @@
height: 100%;
z-index: -1;
position: relative;
background: var(--transparent-checkered-background);
background-size: var(--transparent-checkered-background-size);
background-position: var(--transparent-checkered-background-position);
background: var(--color-transparent-checkered-background);
background-size: var(--color-transparent-checkered-background-size);
background-position: var(--color-transparent-checkered-background-position);
}
--selection-pincers-color: var(--new-color-contrasting);
}
@ -256,7 +256,7 @@
overflow: hidden;
.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-align: left;
@ -266,7 +266,7 @@
}
.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-align: right;
@ -279,8 +279,8 @@
.initial-color {
width: 50%;
height: 100%;
background-size: var(--transparent-checkered-background-size);
background-position: var(--transparent-checkered-background-position);
background-size: var(--color-transparent-checkered-background-size);
background-position: var(--color-transparent-checkered-background-position);
&.none {
background: var(--color-none);
@ -299,7 +299,6 @@
.preset-color {
border: none;
outline: none;
padding: 0;
border-radius: 2px;
width: calc(48px + (48px + 4px) / 2);
@ -342,7 +341,8 @@
background: var(--pure-color-gray);
}
&:hover div {
&:hover div,
&:focus div {
background: var(--pure-color);
}
}

16
frontend/src/components/floating-menus/MenuList.vue
View file

@ -127,20 +127,24 @@
}
&:hover,
&.open,
&.active {
&.open {
background: var(--color-6-lowergray);
color: var(--color-f-white);
&.active {
background: var(--color-accent);
}
.entry-icon svg {
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 {
color: var(--color-8-uppergray);

2
frontend/src/components/layout/FloatingMenu.vue
View file

@ -513,6 +513,8 @@ export default defineComponent({
async open(newState: boolean, oldState: boolean) {
// Switching from closed to open
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
window.addEventListener("pointermove", this.pointerMoveHandler);
// Close floating menu if esc is pressed

35
frontend/src/components/panels/Document.vue
View file

@ -105,20 +105,22 @@
}
}
.color-solid {
fill: var(--color-f-white);
}
.icon-button:not(.active) {
.color-solid {
fill: var(--color-f-white);
}
.color-general {
fill: var(--color-data-general);
}
.color-general {
fill: var(--color-data-general);
}
.color-vector {
fill: var(--color-data-vector);
}
.color-vector {
fill: var(--color-data-vector);
}
.color-raster {
fill: var(--color-data-raster);
.color-raster {
fill: var(--color-data-raster);
}
}
}
@ -190,6 +192,7 @@
pointer-events: auto;
}
}
foreignObject {
width: 10000px;
height: 10000px;
@ -207,12 +210,12 @@
// Workaround to force Chrome to display the flashing text entry cursor when text is empty
padding-left: 1px;
margin-left: -1px;
}
div:focus {
border: none;
outline: none;
margin: -1px;
&:focus {
border: none;
outline: none; // Ok for contenteditable element
margin: -1px;
}
}
}
}

8
frontend/src/components/panels/LayerTree.vue
View file

@ -27,6 +27,7 @@
class="expand-arrow"
:class="{ expanded: listing.entry.layerMetadata.expanded }"
@click.stop="handleExpandArrowClick(listing.entry.path)"
tabindex="0"
></button>
<LayoutRow
class="layer"
@ -128,7 +129,6 @@
width: 16px;
height: 100%;
padding: 0;
outline: none;
border: none;
position: relative;
background: none;
@ -193,7 +193,7 @@
color: inherit;
background: none;
border: none;
outline: none;
outline: none; // Ok for input element
margin: 0;
padding: 0;
text-overflow: ellipsis;
@ -243,7 +243,7 @@
}
&.insert-folder .layer {
outline: 3px solid var(--color-accent-hover);
outline: 3px solid var(--color-e-nearwhite);
outline-offset: -3px;
}
}
@ -252,7 +252,7 @@
position: absolute;
// `left` is applied dynamically
right: 0;
background: var(--color-accent-hover);
background: var(--color-e-nearwhite);
margin-top: -2px;
height: 5px;
z-index: 1;

29
frontend/src/components/widgets/assists/PivotAssist.vue
View file

@ -1,14 +1,14 @@
<template>
<div class="pivot-assist">
<button @click="setPosition('TopLeft')" class="row-1 col-1" :class="{ active: position === 'TopLeft' }"></button>
<button @click="setPosition('TopCenter')" class="row-1 col-2" :class="{ active: position === 'TopCenter' }"><div></div></button>
<button @click="setPosition('TopRight')" class="row-1 col-3" :class="{ active: position === 'TopRight' }"><div></div></button>
<button @click="setPosition('CenterLeft')" class="row-2 col-1" :class="{ active: position === 'CenterLeft' }"><div></div></button>
<button @click="setPosition('Center')" class="row-2 col-2" :class="{ active: position === 'Center' }"><div></div></button>
<button @click="setPosition('CenterRight')" class="row-2 col-3" :class="{ active: position === 'CenterRight' }"><div></div></button>
<button @click="setPosition('BottomLeft')" class="row-3 col-1" :class="{ active: position === 'BottomLeft' }"><div></div></button>
<button @click="setPosition('BottomCenter')" class="row-3 col-2" :class="{ active: position === 'BottomCenter' }"><div></div></button>
<button @click="setPosition('BottomRight')" class="row-3 col-3" :class="{ active: position === 'BottomRight' }"><div></div></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' }" tabindex="-1"><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' }" tabindex="-1"><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' }" tabindex="-1"><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' }" tabindex="-1"><div></div></button>
<button @click="setPosition('BottomRight')" class="row-3 col-3" :class="{ active: position === 'BottomRight' }" tabindex="-1"><div></div></button>
</div>
</template>
@ -25,9 +25,8 @@
height: 5px;
margin: 0;
padding: 0;
outline: none;
background: none;
border: 1px solid var(--color-7-middlegray);
background: var(--color-1-nearblack);
border: 1px solid var(--color-5-dullgray);
&:hover {
border-color: transparent;
@ -36,7 +35,7 @@
&.active {
border-color: transparent;
background: var(--color-f-white);
background: var(--color-e-nearwhite);
}
&.col-1::before,
@ -45,7 +44,7 @@
pointer-events: none;
width: 2px;
height: 0;
border-top: 1px solid var(--color-7-middlegray);
border-top: 1px solid var(--color-5-dullgray);
position: absolute;
top: 1px;
right: -3px;
@ -57,7 +56,7 @@
pointer-events: none;
width: 0;
height: 2px;
border-left: 1px solid var(--color-7-middlegray);
border-left: 1px solid var(--color-5-dullgray);
position: absolute;
bottom: -3px;
right: 1px;

9
frontend/src/components/widgets/buttons/IconButton.vue
View file

@ -1,5 +1,5 @@
<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" />
</button>
</template>
@ -11,7 +11,6 @@
align-items: center;
flex: 0 0 auto;
padding: 0;
outline: none;
border: none;
border-radius: 2px;
background: none;
@ -26,7 +25,11 @@
}
&.active {
background: var(--color-accent);
background: var(--color-e-nearwhite);
svg {
fill: var(--color-2-mildblack);
}
}
&:hover:not(.active) {

6
frontend/src/components/widgets/buttons/PopoverButton.vue
View file

@ -1,6 +1,6 @@
<template>
<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'">
<slot></slot>
</FloatingMenu>
@ -23,13 +23,13 @@
width: 100%;
height: 100%;
padding: 0;
outline: none;
border: none;
border-radius: 2px;
background: var(--color-1-nearblack);
fill: var(--color-e-nearwhite);
&:hover {
&:hover,
&.open {
background: var(--color-6-lowergray);
fill: var(--color-f-white);
}

28
frontend/src/components/widgets/buttons/TextButton.vue
View file

@ -8,6 +8,7 @@
:title="tooltip"
:style="minWidth > 0 ? `min-width: ${minWidth}px` : ''"
@click="(e: MouseEvent) => action(e)"
:tabindex="disabled ? -1 : 0"
>
<IconLabel v-if="icon" :icon="icon" />
<TextLabel>{{ label }}</TextLabel>
@ -23,7 +24,6 @@
height: 24px;
padding: 0 8px;
box-sizing: border-box;
outline: none;
border: none;
border-radius: 2px;
background: var(--color-5-dullgray);
@ -34,24 +34,24 @@
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 {
background: var(--color-4-dimgray);
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 {
margin-left: 8px;
}

2
frontend/src/components/widgets/groups/WidgetSection.vue
View file

@ -1,7 +1,7 @@
<!-- TODO: Implement collapsable sections with properties system -->
<template>
<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>
<Separator :type="'Related'" />
<TextLabel :bold="true">{{ widgetData.name }}</TextLabel>

67
frontend/src/components/widgets/inputs/CheckboxInput.vue
View file

@ -1,9 +1,16 @@
<template>
<LayoutRow class="checkbox-input">
<input type="checkbox" :id="`checkbox-input-${id}`" :checked="checked" @change="(e) => $emit('update:checked', (e.target as HTMLInputElement).checked)" />
<label :for="`checkbox-input-${id}`" tabindex="0" @keydown.enter="(e) => toggleCheckboxFromLabel(e)" :title="tooltip">
<input
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">
<IconLabel :icon="icon" />
<IconLabel :icon="displayIcon" />
</LayoutRow>
</label>
</LayoutRow>
@ -15,9 +22,14 @@
align-items: center;
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 {
display: flex;
height: 16px;
@ -26,31 +38,44 @@
.checkbox-box {
flex: 0 0 auto;
background: var(--color-e-nearwhite);
background: var(--color-5-dullgray);
padding: 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 {
fill: var(--color-2-mildblack);
}
}
// Hovered
&:hover .checkbox-box {
background: var(--color-f-white);
}
}
input:checked + label {
.checkbox-box {
background: var(--color-accent);
.icon-label {
fill: var(--color-f-white);
}
}
&:hover .checkbox-box {
background: var(--color-accent-hover);
// Hovered
&.disabled .checkbox-box {
background: var(--color-8-uppergray);
}
}
}
@ -68,6 +93,7 @@ export default defineComponent({
emits: ["update:checked"],
props: {
checked: { type: Boolean as PropType<boolean>, default: false },
disabled: { type: Boolean as PropType<boolean>, default: false },
icon: { type: String as PropType<IconName>, default: "Checkmark" },
tooltip: { type: String as PropType<string | undefined>, required: false },
},
@ -76,6 +102,13 @@ export default defineComponent({
id: `${Math.random()}`.substring(2),
};
},
computed: {
displayIcon(): IconName {
if (!this.checked && this.icon === "Checkmark") return "Empty12px";
return this.icon;
},
},
methods: {
isChecked() {
return this.checked;

15
frontend/src/components/widgets/inputs/ColorInput.vue
View file

@ -1,6 +1,6 @@
<template>
<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>
</button>
<ColorPicker v-model:open="isOpen" :color="value" @update:color="(color: Color) => colorPickerUpdated(color)" :allowNone="true" />
@ -11,14 +11,13 @@
.color-input {
box-sizing: border-box;
position: relative;
border: 1px solid var(--color-7-middlegray);
border: 1px solid var(--color-5-dullgray);
border-radius: 2px;
padding: 1px;
> button {
position: relative;
overflow: hidden;
outline: none;
border: none;
padding: 0;
margin: 0;
@ -34,9 +33,9 @@
padding: 2px;
top: -2px;
left: -2px;
background: linear-gradient(var(--color), var(--color)), var(--transparent-checkered-background);
background-size: var(--transparent-checkered-background-size);
background-position: var(--transparent-checkered-background-position);
background: linear-gradient(var(--chosen-color), var(--chosen-color)), var(--color-transparent-checkered-background);
background-size: var(--color-transparent-checkered-background-size);
background-position: var(--color-transparent-checkered-background-position);
}
&.none {
@ -62,6 +61,10 @@
}
}
&.color-input.color-input > button {
outline-offset: 0;
}
> .floating-menu {
left: 50%;
bottom: 0;

2
frontend/src/components/widgets/inputs/DropdownInput.vue
View file

@ -8,7 +8,7 @@
@click="() => !disabled && (open = true)"
@blur="(e: FocusEvent) => unFocusDropdownBox(e)"
@keydown="(e: KeyboardEvent) => keydown(e)"
tabindex="0"
:tabindex="disabled ? -1 : 0"
data-floating-menu-spawner
>
<IconLabel class="dropdown-icon" :icon="activeEntry.icon" v-if="activeEntry.icon" />

7
frontend/src/components/widgets/inputs/FieldInput.vue
View file

@ -71,10 +71,15 @@
line-height: 18px;
margin: 0 8px;
padding: 3px 0;
outline: none;
outline: none; // Ok for input/textarea element
border: none;
background: none;
color: var(--color-e-nearwhite);
caret-color: var(--color-e-nearwhite);
&::selection {
background: var(--color-5-dullgray);
}
}
input {

11
frontend/src/components/widgets/inputs/FontInput.vue
View file

@ -1,6 +1,15 @@
<template>
<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>
<IconLabel class="dropdown-arrow" :icon="'DropdownArrow'" />
</LayoutRow>

2
frontend/src/components/widgets/inputs/MenuBarInput.vue
View file

@ -8,7 +8,7 @@
class="entry"
:class="{ open: entry.ref?.isOpen }"
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" />
<span v-if="entry.label">{{ entry.label }}</span>

5
frontend/src/components/widgets/inputs/NumberInput.vue
View file

@ -12,8 +12,8 @@
@cancelTextChange="() => onCancelTextChange()"
ref="fieldInput"
>
<button v-if="value !== undefined" class="arrow left" @click="() => onIncrement('Decrease')"></button>
<button v-if="value !== undefined" class="arrow right" @click="() => onIncrement('Increase')"></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')" tabindex="-1"></button>
</FieldInput>
</template>
@ -31,7 +31,6 @@
position: absolute;
top: 0;
padding: 9px 0;
outline: none;
border: none;
background: rgba(var(--color-1-nearblack-rgb), 0.75);

18
frontend/src/components/widgets/inputs/OptionalInput.vue
View file

@ -1,6 +1,6 @@
<template>
<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>
</template>
@ -14,22 +14,9 @@
white-space: nowrap;
width: 24px;
height: 24px;
border: 1px solid var(--color-7-middlegray);
border: 1px solid var(--color-5-dullgray);
border-radius: 2px 0 0 2px;
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>
@ -46,6 +33,7 @@ export default defineComponent({
emits: ["update:checked"],
props: {
checked: { type: Boolean as PropType<boolean>, required: true },
disabled: { type: Boolean as PropType<boolean>, default: false },
icon: { type: String as PropType<IconName>, default: "Checkmark" },
tooltip: { type: String as PropType<string | undefined>, required: false },
},

16
frontend/src/components/widgets/inputs/RadioInput.vue
View file

@ -1,6 +1,13 @@
<template>
<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" />
<TextLabel v-if="entry.label">{{ entry.label }}</TextLabel>
</button>
@ -14,7 +21,6 @@
fill: var(--color-e-nearwhite);
height: 24px;
padding: 0 4px;
outline: none;
border: none;
display: flex;
align-items: center;
@ -29,11 +35,11 @@
}
&.active {
background: var(--color-accent);
color: var(--color-f-white);
background: var(--color-e-nearwhite);
color: var(--color-2-mildblack);
svg {
fill: var(--color-f-white);
fill: var(--color-2-mildblack);
}
}

22
frontend/src/components/widgets/inputs/SwatchPairInput.vue
View file

@ -1,20 +1,18 @@
<template>
<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">
<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'" />
</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>
</template>
<style lang="scss">
.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;
.swatch {
@ -28,15 +26,14 @@
width: 100%;
height: 100%;
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);
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
background: linear-gradient(var(--swatch-color), var(--swatch-color)), var(--transparent-checkered-background);
background-size: var(--transparent-checkered-background-size);
background-position: var(--transparent-checkered-background-position);
background: linear-gradient(var(--swatch-color), var(--swatch-color)), var(--color-transparent-checkered-background);
background-size: var(--color-transparent-checkered-background-size);
background-position: var(--color-transparent-checkered-background-position);
overflow: hidden;
}
@ -47,6 +44,7 @@
&.primary {
margin-bottom: -8px;
z-index: 1;
}
}
}

17
frontend/src/components/widgets/labels/UserInputLabel.vue
View file

@ -51,7 +51,7 @@
box-sizing: border-box;
border: 1px solid;
border-radius: 4px;
border-color: var(--color-7-middlegray);
border-color: var(--color-5-dullgray);
color: var(--color-e-nearwhite);
&.width-1 {
@ -85,7 +85,7 @@
}
.dim {
fill: var(--color-7-middlegray);
fill: var(--color-8-uppergray);
}
}
@ -93,9 +93,9 @@
margin-left: 4px;
}
.floating-menu-content & {
.floating-menu-content .row > & {
.input-key {
border-color: var(--color-4-dimgray);
border-color: var(--color-3-darkgray);
color: var(--color-8-uppergray);
}
@ -106,20 +106,13 @@
}
.input-mouse .dim {
fill: var(--color-4-dimgray);
fill: var(--color-3-darkgray);
}
}
.floating-menu-content .row:hover > & {
.input-key {
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 {

5
frontend/src/components/widgets/metrics/PersistentScrollbar.vue
View file

@ -1,10 +1,10 @@
<template>
<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-thumb" @pointerdown="(e) => grabHandle(e)" :class="{ dragging }" :style="[thumbStart, thumbEnd, sides]"></div>
</div>
<button class="arrow increase" @click="() => changePosition(50)"></button>
<button class="arrow increase" @click="() => changePosition(50)" tabindex="-1"></button>
</div>
</template>
@ -16,7 +16,6 @@
.arrow {
flex: 0 0 auto;
background: none;
outline: none;
border: none;
border-style: solid;
width: 0;

6
frontend/src/io-managers/input.ts
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: "modifyinputfield", action: (e: CustomEvent): void => onModifyInputField(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

2
frontend/src/utility-functions/icons.ts
View file

@ -11,6 +11,7 @@ const GRAPHICS = {
import Checkmark from "@/../assets/icon-12px-solid/checkmark.svg";
import CloseX from "@/../assets/icon-12px-solid/close-x.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 FullscreenExit from "@/../assets/icon-12px-solid/fullscreen-exit.svg";
import Grid from "@/../assets/icon-12px-solid/grid.svg";
@ -43,6 +44,7 @@ const SOLID_12PX = {
Checkmark: { component: Checkmark, size: 12 },
CloseX: { component: CloseX, size: 12 },
DropdownArrow: { component: DropdownArrow, size: 12 },
Empty12px: { component: Empty12px, size: 12 },
FullscreenEnter: { component: FullscreenEnter, size: 12 },
FullscreenExit: { component: FullscreenExit, size: 12 },
Grid: { component: Grid, size: 12 },

4
frontend/src/wasm-communication/messages.ts
View file

@ -708,6 +708,8 @@ export abstract class WidgetProps {
export class CheckboxInput extends WidgetProps {
checked!: boolean;
disabled!: boolean;
icon!: IconName;
@Transform(({ value }: { value: string }) => (value.length > 0 ? value : undefined))
@ -833,6 +835,8 @@ export class NumberInput extends WidgetProps {
export class OptionalInput extends WidgetProps {
checked!: boolean;
disabled!: boolean;
icon!: IconName;
@Transform(({ value }: { value: string }) => (value.length > 0 ? value : undefined))