fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-27 09:38: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/buttons/IconButton.vue
+6 -3
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) {
frontend/src/components/widgets/buttons/PopoverButton.vue
+3 -3
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);
}
frontend/src/components/widgets/buttons/TextButton.vue
+14 -14
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;
}