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

Refactor panel layouts to generalize recursive panel group subdivision splits (#4014)

Browse Source 
* Generalize recursive panel group splits

* Code review
This commit is contained in:
Keavon Chambers
2026-04-08 00:44:58 -07:00
committed by GitHub
parent 0eb440db14
commit 39656d4c73
10 changed files with 663 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
frontend/src/components/window/MainWindow.svelte
View File

@@ -3,24 +3,29 @@
import Dialog from "/src/components/floating-menus/Dialog.svelte";
import Tooltip from "/src/components/floating-menus/Tooltip.svelte";
import LayoutCol from "/src/components/layout/LayoutCol.svelte";
import LayoutRow from "/src/components/layout/LayoutRow.svelte";
import TextLabel from "/src/components/widgets/labels/TextLabel.svelte";
import PanelSubdivision from "/src/components/window/PanelSubdivision.svelte";
import StatusBar from "/src/components/window/StatusBar.svelte";
import TitleBar from "/src/components/window/TitleBar.svelte";
import Workspace from "/src/components/window/Workspace.svelte";
import type { AppWindowStore } from "/src/stores/app-window";
import type { DialogStore } from "/src/stores/dialog";
import type { PortfolioStore } from "/src/stores/portfolio";
import type { TooltipStore } from "/src/stores/tooltip";
const dialog = getContext<DialogStore>("dialog");
const tooltip = getContext<TooltipStore>("tooltip");
const appWindow = getContext<AppWindowStore>("appWindow");
const portfolio = getContext<PortfolioStore>("portfolio");
</script>
<LayoutCol class="main-window" classes={{ "viewport-hole-punch": $appWindow.viewportHolePunch }}>
{#if !($appWindow.platform == "Mac" && $appWindow.fullscreen)}
<TitleBar />
{/if}
<Workspace />
<LayoutRow class="workspace" data-workspace>
<PanelSubdivision subdivision={$portfolio.panelLayout.root} depth={0} />
</LayoutRow>
<StatusBar />
{#if $dialog.visible}
<Dialog />
@@ -46,25 +51,63 @@
height: 100%;
overflow: auto;
touch-action: none;
}
.release-candidate-expiry {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--color-e-nearwhite);
color: var(--color-2-mildblack);
opacity: 0.9;
pointer-events: none;
padding: 12px 40px;
border-radius: 4px;
text-align-last: justify;
font-size: 18px;
z-index: 1000;
.workspace {
position: relative;
flex: 1 1 100%;
.text-label {
line-height: 1.5;
.workspace-grid-subdivision {
position: relative;
flex: 1 1 0;
min-height: 28px;
&.folded {
flex-grow: 0;
height: 0;
}
}
.workspace-grid-resize-gutter {
flex: 0 0 4px;
&.layout-row {
cursor: ns-resize;
}
&.layout-col {
cursor: ew-resize;
}
}
}
// Needed for the viewport hole punch on desktop
.viewport-hole-punch .workspace .workspace-grid-subdivision:has(.panel.document-panel)::after {
content: "";
position: absolute;
inset: 6px;
border-radius: 6px;
box-shadow: 0 0 0 calc(100vw + 100vh) var(--color-2-mildblack);
z-index: -1;
}
.release-candidate-expiry {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--color-e-nearwhite);
color: var(--color-2-mildblack);
opacity: 0.9;
pointer-events: none;
padding: 12px 40px;
border-radius: 4px;
text-align-last: justify;
font-size: 18px;
z-index: 1000;
.text-label {
line-height: 1.5;
}
}
}
</style>