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

Polish up the Layers panel design

Browse Source
This commit is contained in:
Keavon Chambers
2024-04-01 02:09:01 -07:00
parent 5bab38e173
commit 938a688fa0
17 changed files with 217 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/widgets/buttons/IconButton.svelte
+25 -1
View File
@@ -4,6 +4,7 @@
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
export let icon: IconName;
export let hoverIcon: IconName | undefined = undefined;
export let size: IconSize;
export let disabled = false;
export let active = false;
@@ -20,8 +21,21 @@
.join(" ");
</script>
<button class={`icon-button size-${size} ${className} ${extraClasses}`.trim()} class:disabled class:active on:click={action} {disabled} title={tooltip} tabindex={active ? -1 : 0} {...$$restProps}>
<button
class={`icon-button size-${size} ${className} ${extraClasses}`.trim()}
class:hover-icon={hoverIcon && !disabled}
class:disabled
class:active
on:click={action}
{disabled}
title={tooltip}
tabindex={active ? -1 : 0}
{...$$restProps}
>
<IconLabel {icon} />
{#if hoverIcon && !disabled}
<IconLabel icon={hoverIcon} />
{/if}
</button>
<style lang="scss" global>
@@ -49,6 +63,16 @@
background: var(--color-5-dullgray);
}
&.hover-icon {
&:not(:hover) .icon-label:nth-of-type(2) {
display: none;
}
&:hover .icon-label:nth-of-type(1) {
display: none;
}
}
&.disabled {
background: none;
frontend/src/components/widgets/buttons/TextButton.svelte
+15
View File
@@ -14,6 +14,7 @@
// However, if multiple TextButton widgets are used in a group with only some having no label, this component is able to accommodate that.
export let label: string;
export let icon: IconName | undefined = undefined;
export let hoverIcon: IconName | undefined = undefined;
export let emphasized = false;
export let flush = false;
export let minWidth = 0;
@@ -54,6 +55,7 @@
<button
class="text-button"
class:open={self?.open}
class:hover-icon={hoverIcon && !disabled}
class:emphasized
class:disabled
class:flush
@@ -68,6 +70,9 @@
>
{#if icon}
<IconLabel {icon} />
{#if hoverIcon && !disabled}
<IconLabel icon={hoverIcon} />
{/if}
{/if}
{#if icon && label}
<Separator type={flush ? "Unrelated" : "Related"} />
@@ -118,6 +123,16 @@
--button-text-color: var(--color-f-white);
}
&.hover-icon {
&:not(:hover) .icon-label:nth-of-type(2) {
display: none;
}
&:hover .icon-label:nth-of-type(1) {
display: none;
}
}
&.disabled {
--button-background-color: var(--color-4-dimgray);
--button-text-color: var(--color-8-uppergray);