wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-13 03:40:48 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

UBER-54: Attempt to Expand/collapse issue fix (#3183)

Browse Source 
Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
This commit is contained in:
Andrey Sobolev 2023-05-15 22:17:55 +07:00 committed by GitHub
parent c41cc022c5
commit f136bdff42
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/ui/src/components/ExpandCollapse.svelte
View File

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

16
plugins/view-resources/src/components/list/ListCategory.svelte
View File

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