mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-19 10:58:04 +08:00
51 lines
1.2 KiB
Svelte
51 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
|
|
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
|
|
import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
|
|
import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
|
|
|
|
import { getContext } from "svelte";
|
|
|
|
import type { PortfolioState } from "/src/state-providers/portfolio";
|
|
|
|
const portfolio = getContext<PortfolioState>("portfolio");
|
|
</script>
|
|
|
|
<LayoutCol class="spreadsheet">
|
|
<LayoutRow class="control-bar">
|
|
<TextLabel>Spreadsheet Data for Node ID {$portfolio.spreadsheetNode}:</TextLabel>
|
|
</LayoutRow>
|
|
<LayoutCol class="body" scrollableY={true}>
|
|
<WidgetLayout layout={$portfolio.spreadsheetWidgets} />
|
|
</LayoutCol>
|
|
</LayoutCol>
|
|
|
|
<style lang="scss" global>
|
|
.spreadsheet {
|
|
flex-grow: 1;
|
|
padding: 4px;
|
|
|
|
.control-bar {
|
|
height: 32px;
|
|
--widget-height: 24px;
|
|
flex: 0 0 auto;
|
|
|
|
.text-label {
|
|
margin: calc((24px - var(--widget-height)) / 2 + 4px) 0;
|
|
min-height: var(--widget-height);
|
|
line-height: var(--widget-height);
|
|
}
|
|
}
|
|
|
|
table {
|
|
margin: 0 -4px;
|
|
width: calc(100% + 2 * 4px);
|
|
margin-top: 8px;
|
|
|
|
.text-label {
|
|
white-space: wrap;
|
|
}
|
|
}
|
|
}
|
|
</style>
|