diff --git a/packages/ui/src/components/ExpandCollapse.svelte b/packages/ui/src/components/ExpandCollapse.svelte index 540be85b44..132987c44d 100644 --- a/packages/ui/src/components/ExpandCollapse.svelte +++ b/packages/ui/src/components/ExpandCollapse.svelte @@ -13,30 +13,16 @@ // limitations under the License. --> <script lang="ts"> - import { createEventDispatcher, afterUpdate } from 'svelte' - import { quintOut } from 'svelte/easing' - import { tweened } from 'svelte/motion' + import { afterUpdate, createEventDispatcher } from 'svelte' export let isExpanded = false - export let duration = 150 - export let easing: (t: number) => number = quintOut const dispatch = createEventDispatcher() afterUpdate(() => dispatch('changeContent')) - - const tweenedHeight = tweened(0, { duration, easing }) - - let height = 0 - - $: tweenedHeight.set(isExpanded ? height : 0, { duration, easing }) </script> -<div - class="root" - style="height: {$tweenedHeight}px;" - style:overflow={$tweenedHeight < height ? 'auto' : $tweenedHeight === 0 ? 'hidden' : 'visible'} -> - <div bind:offsetHeight={height} class="flex-no-shrink clear-mins"> +<div class="root" hidden={!isExpanded}> + <div class="flex-no-shrink clear-mins"> <slot /> </div> </div> diff --git a/plugins/view-resources/src/components/list/ListCategory.svelte b/plugins/view-resources/src/components/list/ListCategory.svelte index ead6dbb099..e6bc00bdfc 100644 --- a/plugins/view-resources/src/components/list/ListCategory.svelte +++ b/plugins/view-resources/src/components/list/ListCategory.svelte @@ -72,7 +72,12 @@ $: initialLimit = !lastLevel ? undefined : singleCat ? singleCategoryLimit : defaultLimit $: limit = initialLimit - let collapsed = true + $: categoryCollapseKey = `list_collapsing_${location.pathname}_${ + typeof category === 'object' ? category.name : category + }` + $: storedCollapseState = localStorage.getItem(categoryCollapseKey) + + $: collapsed = storedCollapseState === 'true' || storedCollapseState === null let wasLoaded = false const dispatch = createEventDispatcher() @@ -83,7 +88,9 @@ } function initCollapsed (singleCat: boolean, lastLevel: boolean): void { - collapsed = !disableHeader && !singleCat && items.length > (lastLevel ? autoFoldLimit : singleCategoryLimit) + if (localStorage.getItem(categoryCollapseKey) === null) { + collapsed = !disableHeader && !singleCat && items.length > (lastLevel ? autoFoldLimit : singleCategoryLimit) + } } $: initCollapsed(singleCat, lastLevel) @@ -319,12 +326,14 @@ } export function expand (): void { collapsed = false + localStorage.setItem(categoryCollapseKey, 'false') } export function scroll (item: Doc): void { const pos = limited.findIndex((it) => it._id === item._id) if (pos >= 0) { if (collapsed) { collapsed = false + localStorage.setItem(categoryCollapseKey, 'false') setTimeout(() => scroll(item), 50) } else { listItems[pos]?.scroll() @@ -371,10 +380,11 @@ }} on:collapse={() => { collapsed = !collapsed + localStorage.setItem(categoryCollapseKey, collapsed ? 'true' : 'false') }} /> {/if} - <ExpandCollapse isExpanded={!collapsed || dragItemIndex !== undefined} duration={0}> + <ExpandCollapse isExpanded={!collapsed || dragItemIndex !== undefined}> {#if !lastLevel} <slot name="category"