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

Many subtle improvements to the UI design system (#1537)

Browse Source
This commit is contained in:
Keavon Chambers
2023-12-28 04:35:20 -08:00
committed by GitHub
parent 34f952bad1
commit 96b5d7b520
62 changed files with 326 additions and 521 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/widgets/buttons/ColorButton.svelte
+1 -7
View File
@@ -16,10 +16,9 @@
export let allowNone = false;
// export let allowTransparency = false; // TODO: Implement
export let tooltip: string | undefined = undefined;
export let sharpRightCorners = false;
</script>
<LayoutCol class="color-button" classes={{ disabled, none: value.none, open, "sharp-right-corners": sharpRightCorners }} {tooltip}>
<LayoutCol class="color-button" classes={{ disabled, none: value.none, open }} {tooltip}>
<button {disabled} style:--chosen-color={value.toHexOptionalAlpha()} on:click={() => (open = true)} tabindex="0" data-floating-menu-spawner></button>
{#if disabled && !value.none}
<TextLabel>sRGB</TextLabel>
@@ -59,11 +58,6 @@
}
}
&.sharp-right-corners {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
> button {
border: none;
padding: 0;
frontend/src/components/widgets/buttons/IconButton.svelte
+1 -12
View File
@@ -8,7 +8,6 @@
export let disabled = false;
export let active = false;
export let tooltip: string | undefined = undefined;
export let sharpRightCorners = false;
// Callbacks
export let action: (e?: MouseEvent) => void;
@@ -21,17 +20,7 @@
.join(" ");
</script>
<button
class={`icon-button size-${size} ${className} ${extraClasses}`.trim()}
class:disabled
class:active
class:sharp-right-corners={sharpRightCorners}
on:click={action}
{disabled}
title={tooltip}
tabindex={active ? -1 : 0}
{...$$restProps}
>
<button class={`icon-button size-${size} ${className} ${extraClasses}`.trim()} class:disabled class:active on:click={action} {disabled} title={tooltip} tabindex={active ? -1 : 0} {...$$restProps}>
<IconLabel {icon} />
</button>
frontend/src/components/widgets/buttons/ParameterExposeButton.svelte
+38 -7
View File
@@ -9,7 +9,22 @@
</script>
<LayoutRow class="parameter-expose-button">
<button class:exposed style:--data-type-color={`var(--color-data-${dataType})`} on:click={action} title={tooltip} tabindex="-1" />
<button class:exposed style:--data-type-color={`var(--color-data-${dataType})`} on:click={action} title={tooltip} tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
<path class="interior" d="M0,7.882c0,1.832,1.325,2.63,2.945,1.772L8.785,6.56c1.62-.858,1.62-2.262,0-3.12L2.945.345C1.325-.512,0,.285,0,2.118Z" />
<path
class="outline"
d="M 1.705180287361145 9.999852180480957 L 1.705180287361145 8.999852180480957 C 1.9275803565979 8.999852180480957 2.194530248641968 8.920772552490234 2.476730346679688
8.771392822265625 L 8.31682014465332 5.67636251449585 C 8.788760185241699 5.426312446594238 9 5.156492233276367 9 5.000002384185791 C 9 4.843512535095215 8.788760185241699
4.573692321777344 8.316730499267578 4.323602199554443 L 2.477190256118774 1.228852391242981 C 2.194520235061646 1.079232335090637 1.927510380744934 1.000152349472046 1.70503032207489
1.000152349472046 C 1.091590285301208 1.000152349472046 1.000000357627869 1.700212359428406 1.000000357627869 2.117512464523315 L 1.000000357627869 7.882492542266846 C
1.000000357627869 8.299762725830078 1.091610312461853 8.999792098999023 1.705130338668823 8.999852180480957 L 1.705180287361145 9.999852180480957 M 1.705027341842651 9.999849319458008
C 0.7003514766693115 9.999751091003418 0 9.214582443237305 0 7.882492542266846 L 0 2.117512464523315 C 0 0.2850223779678345 1.325000405311584 -0.512467622756958 2.945000410079956
0.3450223803520203 L 8.785000801086426 3.440012454986572 C 10.40500068664551 4.298342227935791 10.40500068664551 5.701662540435791 8.785000801086426 6.55999231338501 L
2.945000410079956 9.654982566833496 C 2.502624750137329 9.889138221740723 2.082434415817261 9.999885559082031 1.705027341842651 9.999849319458008 Z"
/>
</svg>
</button>
</LayoutRow>
<style lang="scss" global>
@@ -26,22 +41,38 @@
margin: 0;
padding: 0;
border: none;
border-radius: 50%;
background: none;
fill: none;
stroke: none;
svg {
width: 10px;
height: 10px;
margin-top: -1px;
margin-left: -1px;
}
&:not(.exposed) {
background: none;
border: 1px solid var(--data-type-color);
.outline {
fill: var(--data-type-color);
}
&:hover {
background: var(--color-6-lowergray);
.interior {
fill: var(--color-6-lowergray);
}
}
}
&.exposed {
background: var(--data-type-color);
.interior {
fill: var(--data-type-color);
}
&:hover {
border: 1px solid var(--color-f-white);
.outline {
fill: var(--color-f-white);
}
}
}
}
frontend/src/components/widgets/buttons/PopoverButton.svelte
+30 -23
View File
@@ -1,11 +1,13 @@
<script lang="ts">
import type { IconName } from "@graphite/utility-functions/icons";
import { type IconName, type PopoverButtonStyle } from "@graphite/utility-functions/icons";
import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import IconButton from "@graphite/components/widgets/buttons/IconButton.svelte";
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
export let icon: IconName = "DropdownArrow";
export let style: PopoverButtonStyle = "DropdownArrow";
export let icon: IconName | undefined = undefined;
export let tooltip: string | undefined = undefined;
export let disabled = false;
@@ -20,8 +22,11 @@
}
</script>
<LayoutRow class="popover-button">
<IconButton classes={{ open }} {disabled} action={() => onClick()} icon={icon || "DropdownArrow"} size={16} {tooltip} data-floating-menu-spawner />
<LayoutRow class="popover-button" classes={{ "has-icon": icon !== undefined }}>
<IconButton class="dropdown-icon" classes={{ open }} {disabled} action={() => onClick()} icon={style || "DropdownArrow"} size={16} {tooltip} data-floating-menu-spawner />
{#if icon !== undefined}
<IconLabel class="descriptive-icon" classes={{ open }} {disabled} {icon} {tooltip} />
{/if}
<FloatingMenu {open} on:open={({ detail }) => (open = detail)} type="Popover" direction="Bottom">
<slot />
@@ -35,38 +40,40 @@
height: 24px;
flex: 0 0 auto;
.floating-menu {
left: 50%;
bottom: 0;
&.has-icon {
width: 36px;
.dropdown-icon {
padding-left: calc(36px - 16px);
box-sizing: content-box;
}
}
.icon-button.icon-button {
width: 100%;
.dropdown-icon {
width: 16px;
height: 100%;
padding: 0;
border: none;
border-radius: 2px;
background: var(--color-1-nearblack);
fill: var(--color-e-nearwhite);
&:hover,
&.open {
&:hover:not(.disabled),
&.open:not(.disabled) {
background: var(--color-5-dullgray);
}
&.disabled {
background: var(--color-2-mildblack);
fill: var(--color-8-uppergray);
}
}
// TODO: Refactor this and other complicated cases dealing with joined widget margins and border-radius by adding a single standard set of classes: joined-first, joined-inner, and joined-last
div[class*="-input"] + & {
margin-left: 1px;
.descriptive-icon {
width: 16px;
height: 16px;
margin: auto 0;
margin-left: calc(-16px - 16px);
pointer-events: none;
}
.icon-button {
border-radius: 0 2px 2px 0;
}
.floating-menu {
left: 50%;
bottom: 0;
}
}
</style>
frontend/src/components/widgets/buttons/TextButton.svelte
+4 -6
View File
@@ -15,11 +15,10 @@
export let label: string;
export let icon: IconName | undefined = undefined;
export let emphasized = false;
export let noBackground = false;
export let flush = false;
export let minWidth = 0;
export let disabled = false;
export let tooltip: string | undefined = undefined;
export let sharpRightCorners = false;
export let menuListChildren: MenuListEntry[][] | undefined = undefined;
// Callbacks
@@ -57,8 +56,7 @@
class:open={self?.open}
class:emphasized
class:disabled
class:no-background={noBackground}
class:sharp-right-corners={sharpRightCorners}
class:flush
style:min-width={minWidth > 0 ? `${minWidth}px` : ""}
title={tooltip}
data-emphasized={emphasized || undefined}
@@ -73,7 +71,7 @@
<IconLabel {icon} />
{/if}
{#if icon && label}
<Separator type={noBackground ? "Unrelated" : "Related"} />
<Separator type={flush ? "Unrelated" : "Related"} />
{/if}
{#if label}
<TextLabel>{label}</TextLabel>
@@ -140,7 +138,7 @@
}
}
&.no-background {
&.flush {
background: none;
&:hover,
frontend/src/components/widgets/buttons/WorkingColorsButton.svelte
-91
View File
@@ -1,91 +0,0 @@
<script lang="ts">
import { getContext } from "svelte";
import type { Editor } from "@graphite/wasm-communication/editor";
import type { Color } from "@graphite/wasm-communication/messages";
import ColorPicker from "@graphite/components/floating-menus/ColorPicker.svelte";
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
const editor = getContext<Editor>("editor");
export let primary: Color;
export let secondary: Color;
let primaryOpen = false;
let secondaryOpen = false;
function clickPrimarySwatch() {
primaryOpen = true;
secondaryOpen = false;
}
function clickSecondarySwatch() {
primaryOpen = false;
secondaryOpen = true;
}
function primaryColorChanged(color: Color) {
editor.instance.updatePrimaryColor(color.red, color.green, color.blue, color.alpha);
}
function secondaryColorChanged(color: Color) {
editor.instance.updateSecondaryColor(color.red, color.green, color.blue, color.alpha);
}
</script>
<LayoutCol class="working-colors-button">
<LayoutRow class="primary swatch">
<button on:click={clickPrimarySwatch} class:open={primaryOpen} style:--swatch-color={primary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0" />
<ColorPicker open={primaryOpen} on:open={({ detail }) => (primaryOpen = detail)} color={primary} on:color={({ detail }) => primaryColorChanged(detail)} direction="Right" />
</LayoutRow>
<LayoutRow class="secondary swatch">
<button on:click={clickSecondarySwatch} class:open={secondaryOpen} style:--swatch-color={secondary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0" />
<ColorPicker open={secondaryOpen} on:open={({ detail }) => (secondaryOpen = detail)} color={secondary} on:color={({ detail }) => secondaryColorChanged(detail)} direction="Right" />
</LayoutRow>
</LayoutCol>
<style lang="scss" global>
.working-colors-button {
flex: 0 0 auto;
.swatch {
width: 28px;
height: 28px;
margin: 0 2px;
position: relative;
> button {
--swatch-color: #ffffff;
width: 100%;
height: 100%;
border-radius: 50%;
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;
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;
&:hover,
&.open {
border-color: var(--color-6-lowergray);
}
}
.floating-menu {
top: 50%;
right: -2px;
}
&.primary {
margin-bottom: -8px;
z-index: 1;
}
}
}
</style>