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

Replace the Spreadsheet panel with an improved Data panel (#3037)

Browse Source 
* Improve the table data panel

* Add the "Window" menu bar section and polish everything
This commit is contained in:
Keavon Chambers
2025-08-10 07:46:42 -07:00
committed by GitHub
parent 2f4aef34e5
commit 2bb4509647
54 changed files with 1300 additions and 645 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/window/workspace/Panel.svelte
View File

@@ -1,14 +1,14 @@
<script lang="ts" context="module">
import Data from "@graphite/components/panels/Data.svelte";
import Document from "@graphite/components/panels/Document.svelte";
import Layers from "@graphite/components/panels/Layers.svelte";
import Properties from "@graphite/components/panels/Properties.svelte";
import Spreadsheet from "@graphite/components/panels/Spreadsheet.svelte";
const PANEL_COMPONENTS = {
Document,
Layers,
Properties,
Spreadsheet,
Data,
};
type PanelType = keyof typeof PANEL_COMPONENTS;
</script>

36
frontend/src/components/window/workspace/Workspace.svelte
View File

@@ -16,7 +16,7 @@
/**/ root: 100,
/* ├─ */ content: 80,
/* │ ├─ */ document: 70,
/* │ └─ */ spreadsheet: 30,
/* │ └─ */ data: 30,
/* └─ */ details: 20,
/* ├─ */ properties: 45,
/* └─ */ layers: 55,
@@ -148,23 +148,31 @@
bind:this={documentPanel}
/>
</LayoutRow>
{#if $portfolio.spreadsheetOpen}
{#if $portfolio.dataPanelOpen}
<LayoutRow class="workspace-grid-resize-gutter" data-gutter-vertical on:pointerdown={(e) => resizePanel(e)} />
<LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["spreadsheet"] }} data-subdivision-name="spreadsheet">
<Panel panelType="Spreadsheet" tabLabels={[{ name: "Spreadsheet" }]} tabActiveIndex={0} />
<LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["data"] }} data-subdivision-name="data">
<Panel panelType="Data" tabLabels={[{ name: "Data" }]} tabActiveIndex={0} />
</LayoutRow>
{/if}
</LayoutCol>
<LayoutCol class="workspace-grid-resize-gutter" data-gutter-horizontal on:pointerdown={(e) => resizePanel(e)} />
<LayoutCol class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["details"] }} data-subdivision-name="details">
<LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["properties"] }} data-subdivision-name="properties">
<Panel panelType="Properties" tabLabels={[{ name: "Properties" }]} tabActiveIndex={0} />
</LayoutRow>
<LayoutRow class="workspace-grid-resize-gutter" data-gutter-vertical on:pointerdown={(e) => resizePanel(e)} />
<LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["layers"] }} data-subdivision-name="layers">
<Panel panelType="Layers" tabLabels={[{ name: "Layers" }]} tabActiveIndex={0} />
</LayoutRow>
</LayoutCol>
{#if $portfolio.propertiesPanelOpen || $portfolio.layersPanelOpen}
<LayoutCol class="workspace-grid-resize-gutter" data-gutter-horizontal on:pointerdown={(e) => resizePanel(e)} />
<LayoutCol class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["details"] }} data-subdivision-name="details">
{#if $portfolio.propertiesPanelOpen}
<LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["properties"] }} data-subdivision-name="properties">
<Panel panelType="Properties" tabLabels={[{ name: "Properties" }]} tabActiveIndex={0} />
</LayoutRow>
{/if}
{#if $portfolio.propertiesPanelOpen && $portfolio.layersPanelOpen}
<LayoutRow class="workspace-grid-resize-gutter" data-gutter-vertical on:pointerdown={(e) => resizePanel(e)} />
{/if}
{#if $portfolio.layersPanelOpen}
<LayoutRow class="workspace-grid-subdivision" styles={{ "flex-grow": panelSizes["layers"] }} data-subdivision-name="layers">
<Panel panelType="Layers" tabLabels={[{ name: "Layers" }]} tabActiveIndex={0} />
</LayoutRow>
{/if}
</LayoutCol>
{/if}
</LayoutRow>
{#if $dialog.visible}
<Dialog />