From 7f05d74355b71fe91ab53051c6637c18c4777150 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Thu, 15 Apr 2021 14:42:39 +0200
Subject: [PATCH] working sliding animation between tabs

---
 packages/bbui/src/Tabs/Tab.svelte             | 21 +++++--
 packages/bbui/src/Tabs/Tabs.svelte            | 58 +++++++++++++++++--
 .../builder/src/pages/builder/index.svelte    |  3 +-
 3 files changed, 70 insertions(+), 12 deletions(-)

diff --git a/packages/bbui/src/Tabs/Tab.svelte b/packages/bbui/src/Tabs/Tab.svelte
index 46d8f175c5..e5c9344433 100644
--- a/packages/bbui/src/Tabs/Tab.svelte
+++ b/packages/bbui/src/Tabs/Tab.svelte
@@ -1,13 +1,26 @@
 <script>
-    import { getContext } from 'svelte'
+    import { getContext, onMount } from 'svelte'
     import Portal from "svelte-portal"
     export let title
     export let icon = '';
     
     const selected = getContext('tab')
+    let tab;
+    let tabInfo
+    const setTabInfo = () => {
+        tabInfo = tab.getBoundingClientRect()
+        if ($selected.title === title) {
+            $selected.info = tabInfo
+        }
+    }
+
+    onMount(() => {
+        setTabInfo()
+    })
+
 </script>
 
-<div on:click={() => $selected = title } class:is-selected={$selected === title} class="spectrum-Tabs-item" tabindex="0">
+<div bind:this={tab} on:click={() => $selected = {...$selected, title, info: tab.getBoundingClientRect()} } class:is-selected={$selected.title === title} class="spectrum-Tabs-item" tabindex="0">
     {#if icon}
         <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
             <use xlink:href="#spectrum-icon-18-{icon}" />
@@ -15,8 +28,8 @@
     {/if}
     <span class="spectrum-Tabs-itemLabel">{title}</span>
 </div>
-{#if $selected === title}
-    <Portal target=".spectrum-Tabs-content">
+{#if $selected.title === title}
+    <Portal target=".spectrum-Tabs-content-{$selected.id}">
         <slot />
     </Portal>
 {/if}
\ No newline at end of file
diff --git a/packages/bbui/src/Tabs/Tabs.svelte b/packages/bbui/src/Tabs/Tabs.svelte
index 56f3601a98..74a5e5d1a5 100644
--- a/packages/bbui/src/Tabs/Tabs.svelte
+++ b/packages/bbui/src/Tabs/Tabs.svelte
@@ -1,23 +1,69 @@
 <script>
     import "@spectrum-css/tabs/dist/index-vars.css"
     import { writable } from 'svelte/store'
-    import { setContext } from 'svelte'
+    import { onMount, setContext } from 'svelte'
     
     export let selected;
     export let vertical = false
-
-    const tab = writable(selected)
+    let _id = id()
+    const tab = writable({title: selected, id: _id})
     setContext('tab', tab)
-    $: selected = $tab
+    
+    let container;
+
+    $: selected = $tab.title
+
+    let top, left, width, height;
+    $: calculateIndicatorLength($tab)
+    $: calculateIndicatorOffset($tab)
+
+    function calculateIndicatorLength() {
+        if (!vertical) {
+            width = $tab.info?.width + 24 + 'px'
+            height = $tab.info?.height
+        } else {
+            height = $tab.info?.height + 4 +  'px'
+            width = $tab.info?.width
+        }
+    }
+
+    function calculateIndicatorOffset() {
+        console.log(container?.getBoundingClientRect())
+        if (!vertical) {
+            left = $tab.info?.left - container?.getBoundingClientRect().left - 12 + 'px'
+            top = $tab.info?.top
+        } else {
+            top = $tab.info?.top - container?.getBoundingClientRect().top + 'px'
+            left = $tab.info?.left
+        }
+    }
+    
+    onMount(() => {
+            calculateIndicatorLength()
+            calculateIndicatorOffset()
+    })
+
+    function id() {
+        return (
+            "_" +
+            Math.random()
+            .toString(36)
+            .substr(2, 9)
+        )
+    }
 </script>
-<div class="spectrum-Tabs spectrum-Tabs--{vertical ? 'vertical' : 'horizontal'}">
+<div bind:this={container} class="selected-border spectrum-Tabs spectrum-Tabs--{vertical ? 'vertical' : 'horizontal'}">
     <slot />
+    <div class="spectrum-Tabs-selectionIndicator indicator-transition" style="width: {width}; height: {height}; left: {left}; top: {top};"></div>
 </div>
 
-<div class="spectrum-Tabs-content" />
+<div class="spectrum-Tabs-content spectrum-Tabs-content-{_id}" />
 
 <style>
     .spectrum-Tabs-content {
         margin-top: var(--spectrum-global-dimension-static-size-150);
     }
+    .indicator-transition {
+        transition: all 200ms
+    }
 </style>
\ No newline at end of file
diff --git a/packages/builder/src/pages/builder/index.svelte b/packages/builder/src/pages/builder/index.svelte
index b477359f87..51d20bb6d3 100644
--- a/packages/builder/src/pages/builder/index.svelte
+++ b/packages/builder/src/pages/builder/index.svelte
@@ -3,7 +3,7 @@
   import AppList from "components/start/AppList.svelte"
   import { get } from "builderStore/api"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
-  import { Button, Heading, Modal, Spacer, Tabs, Tab } from "@budibase/bbui"
+  import { Button, Heading, Modal, Spacer, Tabs, Tab, Divider } from "@budibase/bbui"
   import TemplateList from "components/start/TemplateList.svelte"
   import analytics from "analytics"
   import Banner from "/assets/orange-landscape.png"
@@ -75,7 +75,6 @@
   <!-- <TemplateList onSelect={selectTemplate} /> -->
 
   <AppList />
-</div>
 
 <Modal bind:this={modal} padding={false} width="600px" on:hide={closeModal}>
   <CreateAppModal {hasKey} {template} />