fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-24 04:18:11 +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 f7fd1d94eb
commit ff75e0eae9
30 changed files with 258 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/widgets/inputs/CheckboxInput.vue
+50 -17
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;
frontend/src/components/widgets/inputs/ColorInput.vue
+9 -6
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;
frontend/src/components/widgets/inputs/DropdownInput.vue
+1 -1
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" />
frontend/src/components/widgets/inputs/FieldInput.vue
+6 -1
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 {
frontend/src/components/widgets/inputs/FontInput.vue
+10 -1
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>
frontend/src/components/widgets/inputs/MenuBarInput.vue
+1 -1
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>
frontend/src/components/widgets/inputs/NumberInput.vue
+2 -3
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);
frontend/src/components/widgets/inputs/OptionalInput.vue
+3 -15
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 },
},
frontend/src/components/widgets/inputs/RadioInput.vue
+11 -5
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);
}
}
frontend/src/components/widgets/inputs/SwatchPairInput.vue
+10 -12
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;
}
}
}