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

Consolidate MenuListButton into TextButton (#1470)

Browse Source
This commit is contained in:
Keavon Chambers
2023-11-25 01:56:05 -08:00
committed by GitHub
parent 34c6c0431b
commit ab3410cffe
14 changed files with 141 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/layout/ConditionalWrapper.svelte
+14
View File
@@ -0,0 +1,14 @@
<script lang="ts">
export let condition: boolean;
export let wrapperClass = "";
</script>
{#if condition}
<div class={wrapperClass}>
<slot />
</div>
{:else}
<slot />
{/if}
<style lang="scss" global></style>
frontend/src/components/widgets/buttons/MenuListButton.svelte
-83
View File
@@ -1,83 +0,0 @@
<script lang="ts">
import type { MenuListEntry } from "@graphite/wasm-communication/messages";
import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
export let entry: MenuListEntry;
let entryRef: MenuList;
$: (entry.ref = entryRef), entry.ref;
function clickEntry(e: MouseEvent) {
// If there's no menu to open, trigger the action but don't try to open its non-existant children
if ((entry.children?.length ?? 0) === 0) {
if (entry.action && !entry.disabled) entry.action();
return;
}
// Focus the target so that keyboard inputs are sent to the dropdown
(e.target as HTMLElement | undefined)?.focus();
if (entry.ref) {
entry.ref.open = true;
} else {
throw new Error("The menu bar floating menu has no associated ref");
}
}
</script>
<div class="menu-list-button">
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div
on:click={(e) => clickEntry(e)}
on:keydown={(e) => entry.ref?.keydown(e, false)}
class="entry"
class:open={entry.ref?.open}
tabindex="0"
data-floating-menu-spawner={(entry.children?.length ?? 0) > 0 ? "" : "no-hover-transfer"}
>
{#if entry.icon}
<IconLabel icon={entry.icon} />
{/if}
{#if entry.label}
<TextLabel>{entry.label}</TextLabel>
{/if}
</div>
{#if (entry.children?.length ?? 0) > 0}
<MenuList
on:open={({ detail }) => entry.ref && (entry.ref.open = detail)}
open={entry.ref?.open || false}
entries={entry.children || []}
direction="Bottom"
minWidth={240}
drawIcon={true}
bind:this={entryRef}
/>
{/if}
</div>
<style lang="scss" global>
.menu-list-button {
display: flex;
position: relative;
.entry {
display: flex;
align-items: center;
white-space: nowrap;
background: none;
padding: 0 8px;
margin: 0;
border: 0;
border-radius: 2px;
&:hover,
&.open {
background: var(--color-5-dullgray);
}
}
}
</style>
frontend/src/components/widgets/buttons/TextButton.svelte
+88 -28
View File
@@ -1,9 +1,17 @@
<script lang="ts">
import type { IconName } from "@graphite/utility-functions/icons";
import type { MenuListEntry } from "@graphite/wasm-communication/messages";
import MenuList from "@graphite/components/floating-menus/MenuList.svelte";
import ConditionalWrapper from "@graphite/components/layout/ConditionalWrapper.svelte";
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
import Separator from "@graphite/components/widgets/labels/Separator.svelte";
import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
let self: MenuList;
// Note: IconButton should be used if only an icon, but no label, is desired.
// 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 emphasized = false;
@@ -12,38 +20,90 @@
export let disabled = false;
export let tooltip: string | undefined = undefined;
export let sharpRightCorners = false;
export let menuListChildren: MenuListEntry[][] | undefined = undefined;
// Callbacks
// TODO: Replace this with an event binding (and on other components that do this)
export let action: (e: MouseEvent) => void;
export let action: (() => void) | undefined;
$: menuListChildrenExists = (menuListChildren?.length ?? 0) > 0;
// Handles either a button click or, if applicable, the opening of the menu list floating menu
function onClick(e: MouseEvent) {
// If there's no menu to open, trigger the action
if ((menuListChildren?.length ?? 0) === 0) {
// Call the action
if (action && !disabled) action();
// Exit early so we don't continue on and try to open the menu
return;
}
// Focus the target so that keyboard inputs are sent to the dropdown
(e.target as HTMLElement | undefined)?.focus();
// Open the menu list floating menu
if (self) {
self.open = true;
} else {
throw new Error("The menu bar floating menu has no associated ref");
}
}
</script>
<button
class="text-button"
class:emphasized
class:disabled
class:no-background={noBackground}
class:sharp-right-corners={sharpRightCorners}
style:min-width={minWidth > 0 ? `${minWidth}px` : ""}
title={tooltip}
data-emphasized={emphasized || undefined}
data-disabled={disabled || undefined}
data-text-button
tabindex={disabled ? -1 : 0}
on:click={action}
>
{#if icon}
<IconLabel {icon} />
<ConditionalWrapper condition={menuListChildrenExists} wrapperClass="text-button-container">
<button
class="text-button"
class:open={self?.open}
class:emphasized
class:disabled
class:no-background={noBackground}
class:sharp-right-corners={sharpRightCorners}
style:min-width={minWidth > 0 ? `${minWidth}px` : ""}
title={tooltip}
data-emphasized={emphasized || undefined}
data-disabled={disabled || undefined}
data-text-button
tabindex={disabled ? -1 : 0}
data-floating-menu-spawner={menuListChildrenExists ? "" : "no-hover-transfer"}
on:click={onClick}
on:keydown={(e) => self?.keydown(e, false)}
>
{#if icon}
<IconLabel {icon} />
{/if}
{#if icon && label}
<Separator type={noBackground ? "Unrelated" : "Related"} />
{/if}
{#if label}
<TextLabel>{label}</TextLabel>
{/if}
</button>
{#if menuListChildrenExists}
<MenuList
on:open={({ detail }) => self && (self.open = detail)}
open={self?.open || false}
entries={menuListChildren || []}
direction="Bottom"
minWidth={240}
drawIcon={true}
bind:this={self}
/>
{/if}
<TextLabel>{label}</TextLabel>
</button>
</ConditionalWrapper>
<style lang="scss" global>
.text-button-container {
display: flex;
position: relative;
}
.text-button {
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 auto;
white-space: nowrap;
height: 24px;
margin: 0;
padding: 0 8px;
@@ -55,7 +115,8 @@
--button-background-color: var(--color-5-dullgray);
--button-text-color: var(--color-e-nearwhite);
&:hover {
&:hover,
&.open {
--button-background-color: var(--color-6-lowergray);
--button-text-color: var(--color-f-white);
}
@@ -69,7 +130,8 @@
--button-background-color: var(--color-e-nearwhite);
--button-text-color: var(--color-2-mildblack);
&:hover {
&:hover,
&.open {
--button-background-color: var(--color-f-white);
}
@@ -79,12 +141,11 @@
}
&.no-background {
&:not(:hover) {
background: none;
}
background: none;
.icon-label {
margin-right: 4px;
&:hover,
&.open {
background: var(--color-5-dullgray);
}
}
@@ -99,8 +160,7 @@
}
.icon-label {
position: relative;
left: -4px;
fill: var(--button-text-color);
}
.text-label {
frontend/src/components/widgets/inputs/FieldInput.svelte
+5 -2
View File
@@ -169,8 +169,6 @@
}
input {
// text-align: center;
&:not(:focus).has-label {
text-align: right;
margin-left: 0;
@@ -202,6 +200,11 @@
textarea {
color: var(--color-8-uppergray);
}
input {
// Disables drag-selecting the text, since `user-select: none` doesn't work for input elements
pointer-events: none;
}
}
}
</style>
frontend/src/components/widgets/inputs/NumberInput.svelte
+3 -3
View File
@@ -248,7 +248,7 @@
function onDragPointerDown(e: PointerEvent) {
// Only drag the number with left click (and when it's valid to do so)
if (e.button !== BUTTON_LEFT || mode !== "Increment" || value === undefined) return;
if (e.button !== BUTTON_LEFT || mode !== "Increment" || value === undefined || disabled) return;
// Don't drag the text value from is input element
e.preventDefault();
@@ -633,8 +633,8 @@
}
// Show the left-right arrow cursor when hovered over the draggable area
input[type="text"]:not(:focus),
label {
&:not(.disabled) input[type="text"]:not(:focus),
&:not(.disabled) label {
cursor: ew-resize;
}
frontend/src/components/window/title-bar/TitleBar.svelte
+6 -2
View File
@@ -11,7 +11,7 @@
import { type KeyRaw, type LayoutKeysGroup, type MenuBarEntry, type MenuListEntry, UpdateMenuBarLayout } from "@graphite/wasm-communication/messages";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import MenuListButton from "@graphite/components/widgets/buttons/MenuListButton.svelte";
import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
import WindowButtonsMac from "@graphite/components/window/title-bar/WindowButtonsMac.svelte";
import WindowButtonsWeb from "@graphite/components/window/title-bar/WindowButtonsWeb.svelte";
import WindowButtonsWindows from "@graphite/components/window/title-bar/WindowButtonsWindows.svelte";
@@ -77,7 +77,7 @@
<WindowButtonsMac {maximized} />
{:else}
{#each entries as entry}
<MenuListButton {entry} />
<TextButton label={entry.label} icon={entry.icon} menuListChildren={entry.children} action={entry.action} noBackground={true} />
{/each}
{/if}
</LayoutRow>
@@ -115,5 +115,9 @@
justify-content: flex-end;
}
}
.text-button {
height: 28px;
}
}
</style>