disable collapse last widget items

This commit is contained in:
Jan Prochazka
2023-03-12 09:06:11 +01:00
parent b2f55522a8
commit 66d1b4ca49
3 changed files with 12 additions and 4 deletions

View File

@@ -26,10 +26,11 @@
$: computeDynamicProps(definitions); $: computeDynamicProps(definitions);
function computeDynamicProps(defs: any[]) { function computeDynamicProps(defs: any[]) {
const visibleItemsCount = defs.filter(x => !x.collapsed && !x.skip).length;
for (let index = 0; index < defs.length; index++) { for (let index = 0; index < defs.length; index++) {
const definition = defs[index]; const definition = defs[index];
const splitterVisible = !!defs.slice(index + 1).find(x => x && !x.collapsed && !x.skip); const splitterVisible = !!defs.slice(index + 1).find(x => x && !x.collapsed && !x.skip);
dynamicPropsCollection[index].set({ splitterVisible }); dynamicPropsCollection[index].set({ splitterVisible, visibleItemsCount });
} }
} }
</script> </script>

View File

@@ -22,6 +22,7 @@
const dynamicProps = writable({ const dynamicProps = writable({
splitterVisible: false, splitterVisible: false,
visibleItemsCount: 0,
}); });
const pushWidgetItemDefinition = getContext('pushWidgetItemDefinition') as any; const pushWidgetItemDefinition = getContext('pushWidgetItemDefinition') as any;
@@ -62,10 +63,12 @@
storageName && getLocalStorage(storageName) && getLocalStorage(storageName).visible != null storageName && getLocalStorage(storageName) && getLocalStorage(storageName).visible != null
? getLocalStorage(storageName).visible ? getLocalStorage(storageName).visible
: !collapsed; : !collapsed;
$: collapsible = $dynamicProps.visibleItemsCount != 1 || !visible;
</script> </script>
{#if !skip && show} {#if !skip && show}
<WidgetTitle on:click={() => (visible = !visible)}>{title}</WidgetTitle> <WidgetTitle clickable={collapsible} on:click={collapsible ? () => (visible = !visible) : null}>{title}</WidgetTitle>
{#if visible} {#if visible}
<div class="wrapper" style={$dynamicProps.splitterVisible ? `height:${size}px` : 'flex: 1 1 0'}> <div class="wrapper" style={$dynamicProps.splitterVisible ? `height:${size}px` : 'flex: 1 1 0'}>

View File

@@ -1,4 +1,8 @@
<div on:click> <script lang="ts">
export let clickable = false;
</script>
<div on:click class:clickable>
<slot /> <slot />
</div> </div>
@@ -10,7 +14,7 @@
background-color: var(--theme-bg-1); background-color: var(--theme-bg-1);
border: 2px solid var(--theme-border); border: 2px solid var(--theme-border);
} }
div:hover { div.clickable:hover {
background-color: var(--theme-bg-2); background-color: var(--theme-bg-2);
} }
</style> </style>