Sub issues list fixes (#1997)

Signed-off-by: Sergei Ogorelkov <sergei.ogorelkov@xored.com>

packages/ui/src/components/ExpandCollapse.svelte

@@ -15,25 +15,20 @@
 <script lang="ts">
   import { quintOut } from 'svelte/easing'
   import { tweened } from 'svelte/motion'
-  import { syncHeight } from '../utils'
 
   export let isExpanded = false
   export let duration = 200
   export let easing: (t: number) => number = quintOut
 
-  const tweenedHeight = tweened(0, {
-    duration: duration,
-    easing
-  })
+  const tweenedHeight = tweened(0, { duration: duration, easing })
 
-  let element: HTMLDivElement
+  let height = 0
 
-  $: height = syncHeight(element)
-  $: tweenedHeight.set(isExpanded ? $height : 0, { duration, easing })
+  $: tweenedHeight.set(isExpanded ? height : 0, { duration, easing })
 </script>
 
 <div class="root" style="height: {$tweenedHeight}px">
-  <div bind:this={element}>
+  <div bind:offsetHeight={height}>
     <slot />
   </div>
 </div>

packages/ui/src/utils.ts

@@ -16,7 +16,6 @@
 // import type { Metadata } from '@anticrm/platform'
 import type { Metadata } from '@anticrm/platform'
 import { setMetadata } from '@anticrm/platform'
-import { Writable, writable } from 'svelte/store'
 
 export function setMetadataLocalStorage (id: Metadata<string>, value: string | null): void {
   if (value != null) {
@@ -34,14 +33,3 @@ export function fetchMetadataLocalStorage (id: Metadata<string>): string | null
   }
   return value
 }
-
-export function syncHeight (element: HTMLElement | undefined): Writable<number> {
-  return writable(0, (set) => {
-    if (element != null) {
-      const observer = new ResizeObserver(() => set(element.offsetHeight))
-      observer.observe(element)
-
-      return () => observer.disconnect()
-    }
-  })
-}

plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte

@@ -65,7 +65,8 @@
   <div
     class="flex-between row"
     class:is-dragging={index === draggingIndex}
-    class:is-dragged-over={index === hoveringIndex}
+    class:is-dragged-over-up={draggingIndex !== null && index < draggingIndex && index === hoveringIndex}
+    class:is-dragged-over-down={draggingIndex !== null && index > draggingIndex && index === hoveringIndex}
     animate:flip={{ duration: 400 }}
     draggable={true}
     on:click|self={() => openIssue(issue)}
@@ -125,17 +126,24 @@
       }
     }
 
-    &.is-dragging {
-      &::before {
-        position: absolute;
-        content: '';
-        color: var(--theme-bg-color);
-        opacity: 0.4;
-        inset: 0;
-      }
+    &.is-dragging::before {
+      position: absolute;
+      content: '';
+      background-color: var(--theme-bg-color);
+      opacity: 0.4;
+      inset: 0;
     }
 
-    &.is-dragged-over {
+    &.is-dragged-over-up::before {
+      position: absolute;
+      content: '';
+      inset: 0;
+      border-top: 1px solid var(--theme-bg-check);
+    }
+    &.is-dragged-over-down::before {
+      position: absolute;
+      content: '';
+      inset: 0;
       border-bottom: 1px solid var(--theme-bg-check);
     }
   }

plugins/tracker-resources/src/components/issues/edit/SubIssues.svelte

@@ -35,7 +35,6 @@
   async function handleIssueSwap (ev: CustomEvent<{ fromIndex: number; toIndex: number }>) {
     if (subIssues) {
       const { fromIndex, toIndex } = ev.detail
-      console.log('index', fromIndex, toIndex)
       const [prev, next] = [
         subIssues[fromIndex < toIndex ? toIndex : toIndex - 1],
         subIssues[fromIndex < toIndex ? toIndex + 1 : toIndex]