fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-21 11:38:11 +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/inputs/CurveInput.svelte
+2 -2
View File
@@ -218,7 +218,7 @@
max-width: calc(8 * var(--widget-height));
.grid {
stroke: var(--color-7-middlegray);
stroke: var(--color-5-dullgray);
stroke-width: 0.005;
pointer-events: none;
}
@@ -251,7 +251,7 @@
}
.handle-line {
stroke: var(--color-7-middlegray);
stroke: var(--color-5-dullgray);
stroke-width: 0.005;
pointer-events: none;
}
frontend/src/components/widgets/inputs/DropdownInput.svelte
+2 -3
View File
@@ -21,7 +21,6 @@
export let interactive = true;
export let disabled = false;
export let tooltip: string | undefined = undefined;
export let sharpRightCorners = false;
let activeEntry = makeActiveEntry();
let activeEntrySkipWatcher = false;
@@ -64,7 +63,7 @@
<LayoutRow class="dropdown-input" bind:this={self} data-dropdown-input>
<LayoutRow
class="dropdown-box"
classes={{ disabled, open, "sharp-right-corners": sharpRightCorners }}
classes={{ disabled, open }}
styles={{ "min-width": `${minWidth}px` }}
{tooltip}
on:click={() => !disabled && (open = true)}
@@ -128,7 +127,7 @@
&:hover,
&.open {
background: var(--color-5-dullgray);
background: var(--color-4-dimgray);
}
&.disabled {
frontend/src/components/widgets/inputs/FieldInput.svelte
+3 -4
View File
@@ -24,7 +24,6 @@
export let disabled = false;
export let textarea = false;
export let tooltip: string | undefined = undefined;
export let sharpRightCorners = false;
export let placeholder: string | undefined = undefined;
export let hideContextMenu = false;
@@ -69,7 +68,7 @@
</script>
<!-- This is a base component, extended by others like NumberInput and TextInput. It should not be used directly. -->
<LayoutRow class={`field-input ${className}`} classes={{ disabled, "sharp-right-corners": sharpRightCorners, ...classes }} style={styleName} {styles} {tooltip}>
<LayoutRow class={`field-input ${className}`} classes={{ disabled, ...classes }} style={styleName} {styles} {tooltip}>
{#if !textarea}
<input
type="text"
@@ -154,14 +153,14 @@
caret-color: var(--color-e-nearwhite);
&::selection {
background-color: var(--color-5-dullgray);
background-color: var(--color-4-dimgray);
// Target only Safari
@supports (background: -webkit-named-image(i)) {
& {
// Setting an alpha value opts out of Safari's "fancy" (but not visible on dark backgrounds) selection highlight rendering
// https://stackoverflow.com/a/71753552/775283
background-color: rgba(var(--color-5-dullgray-rgb), calc(254 / 255));
background-color: rgba(var(--color-4-dimgray-rgb), calc(254 / 255));
}
}
}
frontend/src/components/widgets/inputs/FontInput.svelte
+1 -2
View File
@@ -24,7 +24,6 @@
export let isStyle = false;
export let disabled = false;
export let tooltip: string | undefined = undefined;
export let sharpRightCorners = false;
let open = false;
let entries: MenuListEntry[] = [];
@@ -107,7 +106,7 @@
<LayoutRow class="font-input">
<LayoutRow
class="dropdown-box"
classes={{ disabled, "sharp-right-corners": sharpRightCorners }}
classes={{ disabled }}
styles={{ "min-width": `${minWidth}px` }}
{tooltip}
tabindex={disabled ? -1 : 0}
frontend/src/components/widgets/inputs/NumberInput.svelte
+1 -3
View File
@@ -51,7 +51,6 @@
// Styling
export let minWidth = 0;
export let sharpRightCorners = false;
// Callbacks
export let incrementCallbackIncrease: (() => void) | undefined = undefined;
@@ -581,7 +580,6 @@
{label}
{disabled}
{tooltip}
{sharpRightCorners}
{styles}
hideContextMenu={true}
spellcheck={false}
@@ -658,7 +656,7 @@
background: none;
&:hover {
background: var(--color-5-dullgray);
background: var(--color-4-dimgray);
}
&.right {
frontend/src/components/widgets/inputs/OptionalInput.svelte
-36
View File
@@ -1,36 +0,0 @@
<script lang="ts">
import type { IconName } from "@graphite/utility-functions/icons";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import CheckboxInput from "@graphite/components/widgets/inputs/CheckboxInput.svelte";
export let checked: boolean;
export let disabled = false;
export let icon: IconName = "Checkmark";
export let tooltip: string | undefined = undefined;
</script>
<LayoutRow class="optional-input" classes={{ disabled }}>
<CheckboxInput {checked} on:checked {disabled} {icon} {tooltip} />
</LayoutRow>
<style lang="scss" global>
.optional-input {
flex-grow: 0;
.checkbox-input label {
align-items: center;
justify-content: center;
white-space: nowrap;
width: 24px;
height: 24px;
border: 1px solid var(--color-5-dullgray);
border-radius: 2px 0 0 2px;
box-sizing: border-box;
}
&.disabled .checkbox-input label {
border: 1px solid var(--color-4-dimgray);
}
}
</style>
frontend/src/components/widgets/inputs/RadioInput.svelte
+1 -3
View File
@@ -12,7 +12,6 @@
export let entries: RadioEntries;
export let selectedIndex: number | undefined = undefined;
export let disabled = false;
export let sharpRightCorners = false;
function handleEntryClick(radioEntryData: RadioEntryData) {
const index = entries.indexOf(radioEntryData);
@@ -28,7 +27,6 @@
class:active={index === selectedIndex}
class:mixed={selectedIndex === undefined}
class:disabled
class:sharp-right-corners={index === entries.length - 1 && sharpRightCorners}
on:click={() => handleEntryClick(entry)}
title={entry.tooltip}
tabindex={index === selectedIndex ? -1 : 0}
@@ -38,7 +36,7 @@
<IconLabel icon={entry.icon} />
{/if}
{#if entry.label}
<TextLabel>{entry.label}</TextLabel>
<TextLabel italic={selectedIndex === undefined}>{entry.label}</TextLabel>
{/if}
</button>
{/each}
frontend/src/components/widgets/inputs/RulerInput.svelte
+1 -1
View File
@@ -135,7 +135,7 @@
path {
stroke-width: 1px;
stroke: var(--color-7-middlegray);
stroke: var(--color-6-lowergray);
}
text {
frontend/src/components/widgets/inputs/TextInput.svelte
-2
View File
@@ -16,7 +16,6 @@
// Styling
export let centered = false;
export let minWidth = 0;
export let sharpRightCorners = false;
let self: FieldInput | undefined;
let editing = false;
@@ -67,7 +66,6 @@
{disabled}
{tooltip}
{placeholder}
{sharpRightCorners}
bind:this={self}
/>
frontend/src/components/widgets/inputs/WorkingColorsInput.svelte
+91
View File
@@ -0,0 +1,91 @@
<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>