From f136bdff42f4d3c46c490b6c397aadd85c9b8b2e Mon Sep 17 00:00:00 2001
From: Andrey Sobolev <haiodo@users.noreply.github.com>
Date: Mon, 15 May 2023 22:17:55 +0700
Subject: [PATCH] UBER-54: Attempt to Expand/collapse issue fix (#3183)
Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
---
.../ui/src/components/ExpandCollapse.svelte | 20 +++----------------
.../src/components/list/ListCategory.svelte | 16 ++++++++++++---
2 files changed, 16 insertions(+), 20 deletions(-)
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"