mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-07-07 15:55:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Tweak the design of the RadioInput widget

Browse source
This commit is contained in:
Keavon Chambers 2025-05-24 16:04:06 -07:00
parent 8a8e496058
commit 63cce26755
8 changed files with 55 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/panels/Spreadsheet.svelte
View file

@ -42,7 +42,7 @@
width: calc(100% + 2 * 4px);
margin-top: 8px;
span {
.text-label {
white-space: wrap;
}
}

4
frontend/src/components/views/Graph.svelte
View file

@ -994,7 +994,7 @@
{/if}
<div class="details">
<!-- TODO: Allow the user to edit the name, just like in the Layers panel -->
<span>{node.displayName}</span>
<TextLabel>{node.displayName}</TextLabel>
</div>
<div class="solo-drag-grip" title="Drag only this layer without pushing others outside the stack"></div>
<IconButton
@ -1585,7 +1585,7 @@
.details {
margin: 0 8px;
span {
.text-label {
white-space: nowrap;
line-height: 48px;
}

3
frontend/src/components/widgets/WidgetLayout.svelte
View file

@ -1,6 +1,7 @@
<script lang="ts">
import { isWidgetSpanColumn, isWidgetSpanRow, isWidgetSection, type WidgetLayout, isWidgetTable } from "@graphite/messages";
import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
import WidgetSection from "@graphite/components/widgets/WidgetSection.svelte";
import WidgetSpan from "@graphite/components/widgets/WidgetSpan.svelte";
import WidgetTable from "@graphite/components/widgets/WidgetTable.svelte";
@ -19,7 +20,7 @@
{:else if isWidgetTable(layoutGroup)}
<WidgetTable widgetData={layoutGroup} layoutTarget={layout.layoutTarget} />
{:else}
<span style="color: #d6536e">Error: The widget layout that belongs here has an invalid layout group type</span>
<TextLabel styles={{ color: "#d6536e" }}>Error: The widget layout that belongs here has an invalid layout group type</TextLabel>
{/if}
{/each}

4
frontend/src/components/widgets/WidgetSection.svelte
View file

@ -65,11 +65,11 @@
{#if isWidgetSpanRow(layoutGroup)}
<WidgetSpan widgetData={layoutGroup} {layoutTarget} />
{:else if isWidgetSpanColumn(layoutGroup)}
<span style="color: #d6536e">Error: The WidgetSpan used here should be a row not a column</span>
<TextLabel styles={{ color: "#d6536e" }}>Error: The WidgetSpan used here should be a row not a column</TextLabel>
{:else if isWidgetSection(layoutGroup)}
<svelte:self widgetData={layoutGroup} {layoutTarget} />
{:else}
<span style="color: #d6536e">Error: The widget that belongs here has an invalid layout group type</span>
<TextLabel styles={{ color: "#d6536e" }}>Error: The widget that belongs here has an invalid layout group type</TextLabel>
{/if}
{/each}
</LayoutCol>

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

@ -155,7 +155,7 @@
&.disabled {
background: var(--color-2-mildblack);
span {
.text-label {
color: var(--color-8-uppergray);
}

4
frontend/src/components/widgets/inputs/FontInput.svelte
View file

@ -156,7 +156,7 @@
&.open {
background: var(--color-6-lowergray);
span {
.text-label {
color: var(--color-f-white);
}
}
@ -168,7 +168,7 @@
&.disabled {
background: var(--color-2-mildblack);
span {
.text-label {
color: var(--color-8-uppergray);
}
}

83
frontend/src/components/widgets/inputs/RadioInput.svelte
View file

@ -24,14 +24,14 @@
}
</script>
<LayoutRow class="radio-input" classes={{ disabled }} styles={{ ...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}) }}>
<LayoutRow class="radio-input" classes={{ disabled, mixed }} styles={{ ...(minWidth > 0 ? { "min-width": `${minWidth}px` } : {}) }}>
{#each entries as entry, index}
<button class:active={index === selectedIndex} class:mixed class:disabled on:click={() => handleEntryClick(entry)} title={entry.tooltip} tabindex={index === selectedIndex ? -1 : 0} {disabled}>
<button class:active={!mixed ? index === selectedIndex : undefined} on:click={() => handleEntryClick(entry)} title={entry.tooltip} tabindex={index === selectedIndex ? -1 : 0} {disabled}>
{#if entry.icon}
<IconLabel icon={entry.icon} />
{/if}
{#if entry.label}
<TextLabel italic={mixed}>{entry.label}</TextLabel>
<TextLabel>{entry.label}</TextLabel>
{/if}
</button>
{/each}
@ -39,12 +39,17 @@
<style lang="scss" global>
.radio-input {
background: var(--color-5-dullgray);
border-radius: 2px;
height: 24px;
button {
background: var(--color-5-dullgray);
fill: var(--color-e-nearwhite);
height: 24px;
margin: 0;
border-radius: 2px;
height: 20px;
padding: 0;
margin: 2px 1px;
border: none;
display: flex;
align-items: center;
@ -54,8 +59,12 @@
min-width: fit-content;
flex: 1 1 0;
&.mixed {
background: var(--color-4-dimgray);
&:first-of-type {
margin-left: 2px;
}
&:last-of-type {
margin-right: 2px;
}
&:hover {
@ -76,7 +85,34 @@
}
}
&.disabled {
.icon-label {
margin: 2px;
+ .text-label {
margin-left: 0;
}
}
.text-label {
margin: 0 8px;
overflow: hidden;
flex: 0 0 auto;
}
}
&.mixed {
background: var(--color-4-dimgray);
button:not(:hover),
&.disabled button:hover {
background: var(--color-5-dullgray);
}
}
&.disabled {
background: var(--color-4-dimgray);
button {
background: var(--color-4-dimgray);
color: var(--color-8-uppergray);
@ -93,37 +129,6 @@
}
}
}
& + button {
margin-left: 1px;
}
&:first-of-type {
border-radius: 2px 0 0 2px;
}
&:last-of-type {
border-radius: 0 2px 2px 0;
}
.icon-label {
margin: 0 4px;
+ .text-label {
margin-left: 0;
}
}
.text-label {
margin: 0 8px;
overflow: hidden;
flex: 0 0 auto;
}
}
&.combined-before button:first-of-type,
&.combined-after button:last-of-type {
border-radius: 0;
}
}
</style>

2
frontend/src/components/window/workspace/Panel.svelte
View file

@ -248,7 +248,7 @@
}
}
span {
.text-label {
flex: 1 1 100%;
overflow-x: hidden;
white-space: nowrap;