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

Make the tool shelf adapt to multiple columns and improve panel scrollbars

Browse Source 
Closes #176
This commit is contained in:
Keavon Chambers
2023-12-06 02:10:40 -08:00
parent 9c83d054cf
commit 01499de8e7
17 changed files with 163 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/widgets/WidgetLayout.svelte
+10 -23
View File
@@ -8,29 +8,16 @@
let className = "";
export { className as class };
export let classes: Record<string, boolean> = {};
$: extraClasses = Object.entries(classes)
.flatMap((classAndState) => (classAndState[1] ? [classAndState[0]] : []))
.join(" ");
</script>
<div class={`widget-layout ${className} ${extraClasses}`.trim()}>
{#each layout.layout as layoutGroup}
{#if isWidgetSpanRow(layoutGroup) || isWidgetSpanColumn(layoutGroup)}
<WidgetSpan widgetData={layoutGroup} layoutTarget={layout.layoutTarget} />
{:else if isWidgetSection(layoutGroup)}
<WidgetSection widgetData={layoutGroup} layoutTarget={layout.layoutTarget} />
{:else}
<span style="color: #d6536e">Error: The widget layout that belongs here has an invalid layout group type</span>
{/if}
{/each}
</div>
{#each layout.layout as layoutGroup}
{#if isWidgetSpanRow(layoutGroup) || isWidgetSpanColumn(layoutGroup)}
<WidgetSpan widgetData={layoutGroup} layoutTarget={layout.layoutTarget} class={className} {classes} />
{:else if isWidgetSection(layoutGroup)}
<WidgetSection widgetData={layoutGroup} layoutTarget={layout.layoutTarget} class={className} {classes} />
{:else}
<span style="color: #d6536e">Error: The widget layout that belongs here has an invalid layout group type</span>
{/if}
{/each}
<style lang="scss" global>
.widget-layout {
height: 100%;
flex: 0 0 auto;
display: flex;
flex-direction: column;
}
</style>
<style lang="scss" global></style>
frontend/src/components/widgets/WidgetSection.svelte
+6 -1
View File
@@ -9,11 +9,15 @@
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export let layoutTarget: any; // TODO: Give type
let className = "";
export { className as class };
export let classes: Record<string, boolean> = {};
let expanded = true;
</script>
<!-- TODO: Implement collapsable sections with properties system -->
<LayoutCol class="widget-section">
<LayoutCol class={`widget-section ${className}`.trim()} {classes}>
<button class="header" class:expanded on:click|stopPropagation={() => (expanded = !expanded)} tabindex="0">
<div class="expand-arrow" />
<TextLabel bold={true}>{widgetData.name}</TextLabel>
@@ -38,6 +42,7 @@
<style lang="scss" global>
.widget-section {
flex: 0 0 auto;
margin: 0 4px;
.header {
text-align: left;
frontend/src/components/widgets/WidgetSpan.svelte
+9 -1
View File
@@ -38,6 +38,14 @@
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export let layoutTarget: any;
let className = "";
export { className as class };
export let classes: Record<string, boolean> = {};
$: extraClasses = Object.entries(classes)
.flatMap(([className, stateName]) => (stateName ? [className] : []))
.join(" ");
$: direction = watchDirection(widgetData);
$: widgets = watchWidgets(widgetData);
$: widgetsAndNextSiblingIsSuffix = watchWidgetsAndNextSiblingIsSuffix(widgets);
@@ -81,7 +89,7 @@
<!-- TODO: Refactor this component to use `<svelte:component this={attributesObject} />` to avoid all the separate conditional components -->
<!-- TODO: Also rename this component, and probably move the `widget-${direction}` wrapper to be part of `WidgetLayout.svelte` as part of its refactor -->
<div class="widget-span" class:row={direction === "row"} class:column={direction === "column"}>
<div class={`widget-span ${className} ${extraClasses}`.trim()} class:row={direction === "row"} class:column={direction === "column"}>
{#each widgetsAndNextSiblingIsSuffix as [component, nextIsSuffix], index}
{@const checkboxInput = narrowWidgetProps(component.props, "CheckboxInput")}
{#if checkboxInput}
frontend/src/components/widgets/buttons/IconButton.svelte
+1 -1
View File
@@ -17,7 +17,7 @@
export let classes: Record<string, boolean> = {};
$: extraClasses = Object.entries(classes)
.flatMap((classAndState) => (classAndState[1] ? [classAndState[0]] : []))
.flatMap(([className, stateName]) => (stateName ? [className] : []))
.join(" ");
</script>
frontend/src/components/widgets/labels/IconLabel.svelte
+1 -1
View File
@@ -14,7 +14,7 @@
return `size-${ICONS[icon].size}`;
})(icon);
$: extraClasses = Object.entries(classes)
.flatMap((classAndState) => (classAndState[1] ? [classAndState[0]] : []))
.flatMap(([className, stateName]) => (stateName ? [className] : []))
.join(" ");
</script>
frontend/src/components/widgets/labels/ImageLabel.svelte
+1 -1
View File
@@ -11,7 +11,7 @@
export let tooltip: string | undefined = undefined;
$: extraClasses = Object.entries(classes)
.flatMap((classAndState) => (classAndState[1] ? [classAndState[0]] : []))
.flatMap(([className, stateName]) => (stateName ? [className] : []))
.join(" ");
</script>
frontend/src/components/widgets/labels/TextLabel.svelte
+1 -1
View File
@@ -14,7 +14,7 @@
export let tooltip: string | undefined = undefined;
$: extraClasses = Object.entries(classes)
.flatMap((classAndState) => (classAndState[1] ? [classAndState[0]] : []))
.flatMap(([className, stateName]) => (stateName ? [className] : []))
.join(" ");
$: extraStyles = Object.entries(styles)
.flatMap((styleAndValue) => (styleAndValue[1] !== undefined ? [`${styleAndValue[0]}: ${styleAndValue[1]};`] : []))