diff --git a/packages/web/src/widgets/WidgetColumnBar.svelte b/packages/web/src/widgets/WidgetColumnBar.svelte index bb1ec97d1..22c8e3cb1 100644 --- a/packages/web/src/widgets/WidgetColumnBar.svelte +++ b/packages/web/src/widgets/WidgetColumnBar.svelte @@ -26,10 +26,11 @@ $: computeDynamicProps(definitions); function computeDynamicProps(defs: any[]) { + const visibleItemsCount = defs.filter(x => !x.collapsed && !x.skip).length; for (let index = 0; index < defs.length; index++) { const definition = defs[index]; const splitterVisible = !!defs.slice(index + 1).find(x => x && !x.collapsed && !x.skip); - dynamicPropsCollection[index].set({ splitterVisible }); + dynamicPropsCollection[index].set({ splitterVisible, visibleItemsCount }); } } diff --git a/packages/web/src/widgets/WidgetColumnBarItem.svelte b/packages/web/src/widgets/WidgetColumnBarItem.svelte index 55861682a..47c6828c8 100644 --- a/packages/web/src/widgets/WidgetColumnBarItem.svelte +++ b/packages/web/src/widgets/WidgetColumnBarItem.svelte @@ -22,6 +22,7 @@ const dynamicProps = writable({ splitterVisible: false, + visibleItemsCount: 0, }); const pushWidgetItemDefinition = getContext('pushWidgetItemDefinition') as any; @@ -62,10 +63,12 @@ storageName && getLocalStorage(storageName) && getLocalStorage(storageName).visible != null ? getLocalStorage(storageName).visible : !collapsed; + + $: collapsible = $dynamicProps.visibleItemsCount != 1 || !visible; {#if !skip && show} - (visible = !visible)}>{title} + (visible = !visible) : null}>{title} {#if visible}
diff --git a/packages/web/src/widgets/WidgetTitle.svelte b/packages/web/src/widgets/WidgetTitle.svelte index dbc127d33..fe57f1e66 100644 --- a/packages/web/src/widgets/WidgetTitle.svelte +++ b/packages/web/src/widgets/WidgetTitle.svelte @@ -1,4 +1,8 @@ -
+ + +
@@ -10,7 +14,7 @@ background-color: var(--theme-bg-1); border: 2px solid var(--theme-border); } - div:hover { + div.clickable:hover { background-color: var(--theme-bg-2); }