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

Rename and reorganize several widgets (#1462)

Browse Source 
* Rename SwatchPairInput -> WorkingColorsButton

* Remove unnecessary Svelte each-loop keys

* Rename (and migrate) MenuBarInput -> MenuListButton

* Rename PivotAssist -> PivotInput

* Rename PersistentScrollbar -> ScrollbarInput and CanvasRuler -> RulerInput

* Rename DIalogModal -> Dialog

* Rename WidgetRow -> WidgetSpan
This commit is contained in:
Keavon Chambers
2023-11-18 04:34:30 -08:00
committed by GitHub
parent e3f5e7001f
commit 719c96ecd8
38 changed files with 375 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/window/title-bar/TitleBar.svelte
+61 -10
View File
@@ -3,12 +3,15 @@
</script>
<script lang="ts">
import { getContext } from "svelte";
import { getContext, onMount } from "svelte";
import type { PortfolioState } from "@graphite/state-providers/portfolio";
import { platformIsMac } from "@graphite/utility-functions/platform";
import type { Editor } from "@graphite/wasm-communication/editor";
import { type KeyRaw, type LayoutKeysGroup, type MenuBarEntry, type MenuListEntry, UpdateMenuBarLayout } from "@graphite/wasm-communication/messages";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import MenuBarInput from "@graphite/components/widgets/inputs/MenuBarInput.svelte";
import MenuListButton from "@graphite/components/widgets/buttons/MenuListButton.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";
@@ -17,25 +20,73 @@
export let platform: Platform;
export let maximized: boolean;
const editor = getContext<Editor>("editor");
const portfolio = getContext<PortfolioState>("portfolio");
// TODO: Apparently, Safari does not support the Keyboard.lock() API but does relax its authority over certain keyboard shortcuts in fullscreen mode, which we should take advantage of
const ACCEL_KEY = platformIsMac() ? "Command" : "Control";
const LOCK_REQUIRING_SHORTCUTS: KeyRaw[][] = [
[ACCEL_KEY, "KeyW"],
[ACCEL_KEY, "KeyN"],
[ACCEL_KEY, "Shift", "KeyN"],
[ACCEL_KEY, "KeyT"],
[ACCEL_KEY, "Shift", "KeyT"],
];
let entries: MenuListEntry[] = [];
$: docIndex = $portfolio.activeDocumentIndex;
$: displayName = $portfolio.documents[docIndex]?.displayName || "";
$: windowTitle = `${displayName}${displayName && " - "}Graphite`;
onMount(() => {
const arraysEqual = (a: KeyRaw[], b: KeyRaw[]): boolean => a.length === b.length && a.every((aValue, i) => aValue === b[i]);
const shortcutRequiresLock = (shortcut: LayoutKeysGroup): boolean => {
const shortcutKeys = shortcut.map((keyWithLabel) => keyWithLabel.key);
// If this shortcut matches any of the browser-reserved shortcuts
return LOCK_REQUIRING_SHORTCUTS.some((lockKeyCombo) => arraysEqual(shortcutKeys, lockKeyCombo));
};
editor.subscriptions.subscribeJsMessage(UpdateMenuBarLayout, (updateMenuBarLayout) => {
const menuBarEntryToMenuListEntry = (entry: MenuBarEntry): MenuListEntry => ({
// From `MenuEntryCommon`
...entry,
// Shared names with fields that need to be converted from the type used in `MenuBarEntry` to that of `MenuListEntry`
action: () => editor.instance.updateLayout(updateMenuBarLayout.layoutTarget, entry.action.widgetId, undefined),
children: entry.children ? entry.children.map((entries) => entries.map((entry) => menuBarEntryToMenuListEntry(entry))) : undefined,
// New fields in `MenuListEntry`
shortcutRequiresLock: entry.shortcut ? shortcutRequiresLock(entry.shortcut.keys) : undefined,
value: undefined,
disabled: entry.disabled ?? undefined,
font: undefined,
ref: undefined,
});
entries = updateMenuBarLayout.layout.map(menuBarEntryToMenuListEntry);
});
});
</script>
<LayoutRow class="title-bar">
<LayoutRow class="header-part">
<!-- Menu bar (or on Mac: window buttons) -->
<LayoutRow class="left">
{#if platform === "Mac"}
<WindowButtonsMac {maximized} />
{:else}
<MenuBarInput />
{#each entries as entry}
<MenuListButton {entry} />
{/each}
{/if}
</LayoutRow>
<LayoutRow class="header-part">
<!-- Document title -->
<LayoutRow class="center">
<WindowTitle text={windowTitle} />
</LayoutRow>
<LayoutRow class="header-part">
<!-- Window buttons (except on Mac) -->
<LayoutRow class="right">
{#if platform === "Windows" || platform === "Linux"}
<WindowButtonsWindows {maximized} />
{:else if platform === "Web"}
@@ -49,18 +100,18 @@
height: 28px;
flex: 0 0 auto;
.header-part {
> .layout-row {
flex: 1 1 100%;
&:nth-child(1) {
&.left {
justify-content: flex-start;
}
&:nth-child(2) {
&.center {
justify-content: center;
}
&:nth-child(3) {
&.right {
justify-content: flex-end;
}
}
frontend/src/components/window/workspace/Panel.svelte
+1 -1
View File
@@ -60,7 +60,7 @@
<LayoutCol class="panel">
<LayoutRow class="tab-bar" classes={{ "min-widths": tabMinWidths }}>
<LayoutRow class="tab-group" scrollableX={true}>
{#each tabLabels as tabLabel, tabIndex (tabIndex)}
{#each tabLabels as tabLabel, tabIndex}
<LayoutRow
class="tab"
classes={{ active: tabIndex === tabActiveIndex }}
frontend/src/components/window/workspace/Workspace.svelte
+2 -2
View File
@@ -7,7 +7,7 @@
import type { FrontendDocumentDetails } from "@graphite/wasm-communication/messages";
import DialogModal from "@graphite/components/floating-menus/DialogModal.svelte";
import Dialog from "@graphite/components/floating-menus/Dialog.svelte";
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
import Panel from "@graphite/components/window/workspace/Panel.svelte";
@@ -124,7 +124,7 @@
</LayoutCol>
</LayoutRow>
{#if $dialog.visible}
<DialogModal />
<Dialog />
{/if}
</LayoutRow>