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

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
@@ -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>