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

Tidy up the Layers panel with a new bottom bar

Browse Source
This commit is contained in:
Keavon Chambers
2025-05-21 04:14:01 -07:00
parent 66a297df2c
commit 899ed5ad85
23 changed files with 286 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/widgets/buttons/PopoverButton.svelte
+12 -2
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import type { MenuDirection } from "@graphite/messages";
import { type IconName, type PopoverButtonStyle } from "@graphite/utility-functions/icons";
import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
@@ -7,6 +8,7 @@
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
export let style: PopoverButtonStyle = "DropdownArrow";
export let menuDirection: MenuDirection = "Bottom";
export let icon: IconName | undefined = undefined;
export let tooltip: string | undefined = undefined;
export let disabled = false;
@@ -23,13 +25,13 @@
}
</script>
<LayoutRow class="popover-button" classes={{ "has-icon": icon !== undefined }}>
<LayoutRow class="popover-button" classes={{ "has-icon": icon !== undefined, "direction-top": menuDirection === "Top" }}>
<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)} minWidth={popoverMinWidth} type="Popover" direction="Bottom">
<FloatingMenu {open} on:open={({ detail }) => (open = detail)} minWidth={popoverMinWidth} type="Popover" direction={menuDirection || "Bottom"}>
<slot />
</FloatingMenu>
</LayoutRow>
@@ -48,6 +50,10 @@
padding-left: calc(36px - 16px);
box-sizing: content-box;
}
&.direction-top .dropdown-icon .icon-label {
transform: rotate(180deg);
}
}
.dropdown-icon {
@@ -86,5 +92,9 @@
margin-bottom: -8px;
}
}
&.direction-top .floating-menu {
bottom: 100%;
}
}
</style>
frontend/src/components/widgets/buttons/TextButton.svelte
+1 -1
View File
@@ -55,7 +55,7 @@
class:emphasized
class:disabled
class:flush
style:min-width={minWidth > 0 ? `${minWidth}px` : ""}
style:min-width={minWidth > 0 ? `${minWidth}px` : undefined}
title={tooltip}
data-emphasized={emphasized || undefined}
data-disabled={disabled || undefined}