|
| 1 | +<script lang="ts"> |
| 2 | + import { getContext, onMount } from "svelte"; |
| 3 | +
|
| 4 | + import type { Editor } from "@graphite/editor"; |
| 5 | + import type { Layout } from "@graphite/messages"; |
| 6 | + import { patchLayout, UpdateMenuBarLayout } from "@graphite/messages"; |
| 7 | + import type { AppWindowState } from "@graphite/state-providers/app-window"; |
| 8 | + import type { FullscreenState } from "@graphite/state-providers/fullscreen"; |
| 9 | + import type { TooltipState } from "@graphite/state-providers/tooltip"; |
| 10 | +
|
| 11 | + import LayoutRow from "@graphite/components/layout/LayoutRow.svelte"; |
| 12 | + import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte"; |
| 13 | + import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte"; |
| 14 | +
|
| 15 | + const appWindow = getContext<AppWindowState>("appWindow"); |
| 16 | + const editor = getContext<Editor>("editor"); |
| 17 | + const fullscreen = getContext<FullscreenState>("fullscreen"); |
| 18 | + const tooltip = getContext<TooltipState>("tooltip"); |
| 19 | +
|
| 20 | + let menuBarLayout: Layout = []; |
| 21 | +
|
| 22 | + $: showFullscreenButton = $appWindow.platform === "Web" || $fullscreen.windowFullscreen; |
| 23 | + // On Mac, the menu bar height needs to be scaled by the inverse of the UI scale to fit its native window buttons |
| 24 | + $: height = $appWindow.platform === "Mac" ? 28 * (1 / $appWindow.uiScale) : 28; |
| 25 | +
|
| 26 | + onMount(() => { |
| 27 | + editor.subscriptions.subscribeJsMessage(UpdateMenuBarLayout, (data) => { |
| 28 | + patchLayout(menuBarLayout, data); |
| 29 | + menuBarLayout = menuBarLayout; |
| 30 | + }); |
| 31 | + }); |
| 32 | +</script> |
| 33 | + |
| 34 | +<LayoutRow class="title-bar" styles={{ height: height + "px" }}> |
| 35 | + <!-- Menu bar --> |
| 36 | + <LayoutRow class="menu-bar"> |
| 37 | + {#if $appWindow.platform !== "Mac"} |
| 38 | + <WidgetLayout layout={menuBarLayout} layoutTarget="MenuBar" /> |
| 39 | + {/if} |
| 40 | + </LayoutRow> |
| 41 | + <!-- Window frame --> |
| 42 | + <LayoutRow class="window-frame" on:mousedown={() => editor.handle.appWindowDrag()} on:dblclick={() => editor.handle.appWindowMaximize()} /> |
| 43 | + <!-- Window buttons --> |
| 44 | + <LayoutRow class="window-buttons" classes={{ fullscreen: showFullscreenButton, windows: $appWindow.platform === "Windows", linux: $appWindow.platform === "Linux" }}> |
| 45 | + {#if $appWindow.platform !== "Mac"} |
| 46 | + {#if showFullscreenButton} |
| 47 | + <LayoutRow |
| 48 | + tooltipLabel={$fullscreen.windowFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"} |
| 49 | + tooltipDescription={$appWindow.platform === "Web" && $fullscreen.keyboardLockApiSupported |
| 50 | + ? "While fullscreen, keyboard shortcuts normally reserved by the browser become available." |
| 51 | + : undefined} |
| 52 | + tooltipShortcut={$tooltip.f11Shortcut} |
| 53 | + on:click={() => ($fullscreen.windowFullscreen ? fullscreen.exitFullscreen : fullscreen.enterFullscreen)()} |
| 54 | + > |
| 55 | + <IconLabel icon={$fullscreen.windowFullscreen ? "FullscreenExit" : "FullscreenEnter"} /> |
| 56 | + </LayoutRow> |
| 57 | + {:else} |
| 58 | + <LayoutRow tooltipLabel="Minimize" on:click={() => editor.handle.appWindowMinimize()}> |
| 59 | + <IconLabel icon="WindowButtonWinMinimize" /> |
| 60 | + </LayoutRow> |
| 61 | + <LayoutRow tooltipLabel={$appWindow.maximized ? ($appWindow.platform === "Windows" ? "Restore Down" : "Unmaximize") : "Maximize"} on:click={() => editor.handle.appWindowMaximize()}> |
| 62 | + <IconLabel icon={$appWindow.maximized ? "WindowButtonWinRestoreDown" : "WindowButtonWinMaximize"} /> |
| 63 | + </LayoutRow> |
| 64 | + <LayoutRow tooltipLabel="Close" on:click={() => editor.handle.appWindowClose()}> |
| 65 | + <IconLabel icon="WindowButtonWinClose" /> |
| 66 | + </LayoutRow> |
| 67 | + {/if} |
| 68 | + {/if} |
| 69 | + </LayoutRow> |
| 70 | +</LayoutRow> |
| 71 | + |
| 72 | +<style lang="scss" global> |
| 73 | + .title-bar { |
| 74 | + flex: 0 0 auto; |
| 75 | +
|
| 76 | + > .layout-row { |
| 77 | + flex: 0 0 auto; |
| 78 | +
|
| 79 | + > .widget-span { |
| 80 | + --row-height: 28px; |
| 81 | +
|
| 82 | + > * { |
| 83 | + --widget-height: 28px; |
| 84 | + } |
| 85 | + } |
| 86 | +
|
| 87 | + &.window-frame { |
| 88 | + flex: 1 1 100%; |
| 89 | + } |
| 90 | +
|
| 91 | + .text-button { |
| 92 | + height: 100%; |
| 93 | + } |
| 94 | + } |
| 95 | +
|
| 96 | + .window-buttons { |
| 97 | + > .layout-row { |
| 98 | + flex: 0 0 auto; |
| 99 | + align-items: center; |
| 100 | +
|
| 101 | + svg { |
| 102 | + fill: var(--color-e-nearwhite); |
| 103 | + } |
| 104 | +
|
| 105 | + &:hover { |
| 106 | + background: var(--color-6-lowergray); |
| 107 | +
|
| 108 | + svg { |
| 109 | + fill: var(--color-f-white); |
| 110 | + } |
| 111 | + } |
| 112 | + } |
| 113 | +
|
| 114 | + &.fullscreen > .layout-row { |
| 115 | + padding: 0 8px; |
| 116 | + } |
| 117 | +
|
| 118 | + &.windows > .layout-row { |
| 119 | + padding: 0 17px; |
| 120 | +
|
| 121 | + &:hover { |
| 122 | + background: #2d2d2d; |
| 123 | + } |
| 124 | +
|
| 125 | + &:last-of-type:hover { |
| 126 | + background: #c42b1c; |
| 127 | + } |
| 128 | + } |
| 129 | +
|
| 130 | + &.linux > .layout-row { |
| 131 | + padding: 0 12px; |
| 132 | +
|
| 133 | + &:hover { |
| 134 | + border-radius: 2px; |
| 135 | + } |
| 136 | + } |
| 137 | + } |
| 138 | + } |
| 139 | +</style> |
0 commit comments