Simplify Svelte component structure in the window subfolder
This commit is contained in:
Keavon Chambers
parent
aadc989134
commit
39849c9c02
|
|
@ -10,9 +10,9 @@
|
|||
import Tooltip from "@graphite/components/floating-menus/Tooltip.svelte";
|
||||
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
|
||||
import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
|
||||
import StatusBar from "@graphite/components/window/status-bar/StatusBar.svelte";
|
||||
import TitleBar from "@graphite/components/window/title-bar/TitleBar.svelte";
|
||||
import Workspace from "@graphite/components/window/workspace/Workspace.svelte";
|
||||
import StatusBar from "@graphite/components/window/StatusBar.svelte";
|
||||
import TitleBar from "@graphite/components/window/TitleBar.svelte";
|
||||
import Workspace from "@graphite/components/window/Workspace.svelte";
|
||||
|
||||
const dialog = getContext<DialogState>("dialog");
|
||||
const tooltip = getContext<TooltipState>("tooltip");
|
||||
|
|
|
|||
|
|
@ -0,0 +1,139 @@
|
|||
<script lang="ts">
|
||||
import { getContext, onMount } from "svelte";
|
||||
|
||||
import type { Editor } from "@graphite/editor";
|
||||
import type { Layout } from "@graphite/messages";
|
||||
import { patchLayout, UpdateMenuBarLayout } from "@graphite/messages";
|
||||
import type { AppWindowState } from "@graphite/state-providers/app-window";
|
||||
import type { FullscreenState } from "@graphite/state-providers/fullscreen";
|
||||
import type { TooltipState } from "@graphite/state-providers/tooltip";
|
||||
|
||||
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
|
||||
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
|
||||
import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
|
||||
|
||||
const appWindow = getContext<AppWindowState>("appWindow");
|
||||
const editor = getContext<Editor>("editor");
|
||||
const fullscreen = getContext<FullscreenState>("fullscreen");
|
||||
const tooltip = getContext<TooltipState>("tooltip");
|
||||
|
||||
let menuBarLayout: Layout = [];
|
||||
|
||||
$: showFullscreenButton = $appWindow.platform === "Web" || $fullscreen.windowFullscreen;
|
||||
// On Mac, the menu bar height needs to be scaled by the inverse of the UI scale to fit its native window buttons
|
||||
$: height = $appWindow.platform === "Mac" ? 28 * (1 / $appWindow.uiScale) : 28;
|
||||
|
||||
onMount(() => {
|
||||
editor.subscriptions.subscribeJsMessage(UpdateMenuBarLayout, (data) => {
|
||||
patchLayout(menuBarLayout, data);
|
||||
menuBarLayout = menuBarLayout;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<LayoutRow class="title-bar" styles={{ height: height + "px" }}>
|
||||
<!-- Menu bar -->
|
||||
<LayoutRow class="menu-bar">
|
||||
{#if $appWindow.platform !== "Mac"}
|
||||
<WidgetLayout layout={menuBarLayout} layoutTarget="MenuBar" />
|
||||
{/if}
|
||||
</LayoutRow>
|
||||
<!-- Window frame -->
|
||||
<LayoutRow class="window-frame" on:mousedown={() => editor.handle.appWindowDrag()} on:dblclick={() => editor.handle.appWindowMaximize()} />
|
||||
<!-- Window buttons -->
|
||||
<LayoutRow class="window-buttons" classes={{ fullscreen: showFullscreenButton, windows: $appWindow.platform === "Windows", linux: $appWindow.platform === "Linux" }}>
|
||||
{#if $appWindow.platform !== "Mac"}
|
||||
{#if showFullscreenButton}
|
||||
<LayoutRow
|
||||
tooltipLabel={$fullscreen.windowFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
|
||||
tooltipDescription={$appWindow.platform === "Web" && $fullscreen.keyboardLockApiSupported
|
||||
? "While fullscreen, keyboard shortcuts normally reserved by the browser become available."
|
||||
: undefined}
|
||||
tooltipShortcut={$tooltip.f11Shortcut}
|
||||
on:click={() => ($fullscreen.windowFullscreen ? fullscreen.exitFullscreen : fullscreen.enterFullscreen)()}
|
||||
>
|
||||
<IconLabel icon={$fullscreen.windowFullscreen ? "FullscreenExit" : "FullscreenEnter"} />
|
||||
</LayoutRow>
|
||||
{:else}
|
||||
<LayoutRow tooltipLabel="Minimize" on:click={() => editor.handle.appWindowMinimize()}>
|
||||
<IconLabel icon="WindowButtonWinMinimize" />
|
||||
</LayoutRow>
|
||||
<LayoutRow tooltipLabel={$appWindow.maximized ? ($appWindow.platform === "Windows" ? "Restore Down" : "Unmaximize") : "Maximize"} on:click={() => editor.handle.appWindowMaximize()}>
|
||||
<IconLabel icon={$appWindow.maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
|
||||
</LayoutRow>
|
||||
<LayoutRow tooltipLabel="Close" on:click={() => editor.handle.appWindowClose()}>
|
||||
<IconLabel icon="WindowButtonWinClose" />
|
||||
</LayoutRow>
|
||||
{/if}
|
||||
{/if}
|
||||
</LayoutRow>
|
||||
</LayoutRow>
|
||||
|
||||
<style lang="scss" global>
|
||||
.title-bar {
|
||||
flex: 0 0 auto;
|
||||
|
||||
> .layout-row {
|
||||
flex: 0 0 auto;
|
||||
|
||||
> .widget-span {
|
||||
--row-height: 28px;
|
||||
|
||||
> * {
|
||||
--widget-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
&.window-frame {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.text-button {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.window-buttons {
|
||||
> .layout-row {
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
fill: var(--color-e-nearwhite);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-6-lowergray);
|
||||
|
||||
svg {
|
||||
fill: var(--color-f-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.fullscreen > .layout-row {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
&.windows > .layout-row {
|
||||
padding: 0 17px;
|
||||
|
||||
&:hover {
|
||||
background: #2d2d2d;
|
||||
}
|
||||
|
||||
&:last-of-type:hover {
|
||||
background: #c42b1c;
|
||||
}
|
||||
}
|
||||
|
||||
&.linux > .layout-row {
|
||||
padding: 0 12px;
|
||||
|
||||
&:hover {
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
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";
|
||||
import Panel from "@graphite/components/window/Panel.svelte";
|
||||
|
||||
const MIN_PANEL_SIZE = 100;
|
||||
const PANEL_SIZES = {
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { getContext, onMount } from "svelte";
|
||||
|
||||
import type { Editor } from "@graphite/editor";
|
||||
import type { Layout } from "@graphite/messages";
|
||||
import { patchLayout, UpdateMenuBarLayout } from "@graphite/messages";
|
||||
import type { AppWindowState } from "@graphite/state-providers/app-window";
|
||||
|
||||
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
|
||||
import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
|
||||
import WindowButtonsLinux from "@graphite/components/window/title-bar/WindowButtonsLinux.svelte";
|
||||
import WindowButtonsWeb from "@graphite/components/window/title-bar/WindowButtonsWeb.svelte";
|
||||
import WindowButtonsWindows from "@graphite/components/window/title-bar/WindowButtonsWindows.svelte";
|
||||
|
||||
const appWindow = getContext<AppWindowState>("appWindow");
|
||||
const editor = getContext<Editor>("editor");
|
||||
|
||||
let menuBarLayout: Layout = [];
|
||||
|
||||
// On mac menu bar needs to be scaled with inverse of UI scale to match native menu buttons.
|
||||
$: height = $appWindow.platform === "Mac" ? 28 * (1 / $appWindow.uiScale) : 28;
|
||||
|
||||
onMount(() => {
|
||||
editor.subscriptions.subscribeJsMessage(UpdateMenuBarLayout, (data) => {
|
||||
patchLayout(menuBarLayout, data);
|
||||
menuBarLayout = menuBarLayout;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<LayoutRow class="title-bar" styles={{ height: height + "px" }}>
|
||||
<!-- Menu bar -->
|
||||
<LayoutRow>
|
||||
{#if $appWindow.platform !== "Mac"}
|
||||
<WidgetLayout layout={menuBarLayout} layoutTarget="MenuBar" />
|
||||
{/if}
|
||||
</LayoutRow>
|
||||
<!-- Spacer -->
|
||||
<LayoutRow class="spacer" on:mousedown={() => editor.handle.appWindowDrag()} on:dblclick={() => editor.handle.appWindowMaximize()} />
|
||||
<!-- Window buttons -->
|
||||
<LayoutRow>
|
||||
{#if $appWindow.platform === "Web"}
|
||||
<WindowButtonsWeb />
|
||||
{:else if $appWindow.platform === "Windows"}
|
||||
<WindowButtonsWindows />
|
||||
{:else if $appWindow.platform === "Linux"}
|
||||
<WindowButtonsLinux />
|
||||
{/if}
|
||||
</LayoutRow>
|
||||
</LayoutRow>
|
||||
|
||||
<style lang="scss" global>
|
||||
.title-bar {
|
||||
flex: 0 0 auto;
|
||||
|
||||
> .layout-row {
|
||||
flex: 0 0 auto;
|
||||
|
||||
> .widget-span {
|
||||
--row-height: 28px;
|
||||
|
||||
> * {
|
||||
--widget-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
&.spacer {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.text-button {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { getContext } from "svelte";
|
||||
|
||||
import type { Editor } from "@graphite/editor";
|
||||
import type { AppWindowState } from "@graphite/state-providers/app-window";
|
||||
|
||||
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
|
||||
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
|
||||
|
||||
const appWindow = getContext<AppWindowState>("appWindow");
|
||||
const editor = getContext<Editor>("editor");
|
||||
</script>
|
||||
|
||||
<LayoutRow class="window-button linux" tooltipLabel="Minimize" on:click={() => editor.handle.appWindowMinimize()}>
|
||||
<IconLabel icon="WindowButtonWinMinimize" />
|
||||
</LayoutRow>
|
||||
<LayoutRow class="window-button linux" tooltipLabel={$appWindow.maximized ? "Unmaximize" : "Maximize"} on:click={() => editor.handle.appWindowMaximize()}>
|
||||
<IconLabel icon={$appWindow.maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
|
||||
</LayoutRow>
|
||||
<LayoutRow class="window-button linux" tooltipLabel="Close" on:click={() => editor.handle.appWindowClose()}>
|
||||
<IconLabel icon="WindowButtonWinClose" />
|
||||
</LayoutRow>
|
||||
|
||||
<style lang="scss" global>
|
||||
.window-button.linux {
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
|
||||
svg {
|
||||
fill: var(--color-e-nearwhite);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-6-lowergray);
|
||||
border-radius: 2px;
|
||||
|
||||
svg {
|
||||
fill: var(--color-f-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { getContext } from "svelte";
|
||||
|
||||
import type { FullscreenState } from "@graphite/state-providers/fullscreen";
|
||||
|
||||
import type { TooltipState } from "@graphite/state-providers/tooltip";
|
||||
|
||||
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
|
||||
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
|
||||
|
||||
const fullscreen = getContext<FullscreenState>("fullscreen");
|
||||
const tooltip = getContext<TooltipState>("tooltip");
|
||||
|
||||
async function handleClick() {
|
||||
if ($fullscreen.windowFullscreen) fullscreen.exitFullscreen();
|
||||
else fullscreen.enterFullscreen();
|
||||
}
|
||||
</script>
|
||||
|
||||
<LayoutRow
|
||||
class="window-buttons-web"
|
||||
on:click={handleClick}
|
||||
tooltipLabel={$fullscreen.windowFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
|
||||
tooltipDescription={$fullscreen.keyboardLockApiSupported ? "While fullscreen, keyboard shortcuts normally reserved by the browser become available." : ""}
|
||||
tooltipShortcut={$tooltip.f11Shortcut}
|
||||
>
|
||||
<IconLabel icon={$fullscreen.windowFullscreen ? "FullscreenExit" : "FullscreenEnter"} />
|
||||
</LayoutRow>
|
||||
|
||||
<style lang="scss" global>
|
||||
.window-buttons-web {
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
|
||||
svg {
|
||||
fill: var(--color-e-nearwhite);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-6-lowergray);
|
||||
|
||||
svg {
|
||||
fill: var(--color-f-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { getContext } from "svelte";
|
||||
|
||||
import type { Editor } from "@graphite/editor";
|
||||
import type { AppWindowState } from "@graphite/state-providers/app-window";
|
||||
|
||||
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
|
||||
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
|
||||
|
||||
const appWindow = getContext<AppWindowState>("appWindow");
|
||||
const editor = getContext<Editor>("editor");
|
||||
</script>
|
||||
|
||||
<LayoutRow class="window-button windows" tooltipLabel="Minimize" on:click={() => editor.handle.appWindowMinimize()}>
|
||||
<IconLabel icon="WindowButtonWinMinimize" />
|
||||
</LayoutRow>
|
||||
<LayoutRow class="window-button windows" tooltipLabel={$appWindow.maximized ? "Restore Down" : "Maximize"} on:click={() => editor.handle.appWindowMaximize()}>
|
||||
<IconLabel icon={$appWindow.maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} />
|
||||
</LayoutRow>
|
||||
<LayoutRow class="window-button windows" tooltipLabel="Close" on:click={() => editor.handle.appWindowClose()}>
|
||||
<IconLabel icon="WindowButtonWinClose" />
|
||||
</LayoutRow>
|
||||
|
||||
<style lang="scss" global>
|
||||
.window-button.windows {
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
padding: 0 17px;
|
||||
|
||||
svg {
|
||||
fill: var(--color-e-nearwhite);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #2d2d2d;
|
||||
|
||||
svg {
|
||||
fill: var(--color-f-white);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type:hover {
|
||||
background: #c42b1c;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue