From b3b0e7df87ae27095e1b8132c4eab524c95e7b0e Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Tue, 21 Dec 2021 04:33:38 +0300
Subject: [PATCH] Update StatusesBar

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/ui/src/components/StatusesBar.svelte | 42 +++++++++++++++++--
 1 file changed, 38 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/StatusesBar.svelte b/packages/ui/src/components/StatusesBar.svelte
index d9b5921559..659c763c6e 100644
--- a/packages/ui/src/components/StatusesBar.svelte
+++ b/packages/ui/src/components/StatusesBar.svelte
@@ -15,22 +15,50 @@
 
 <script lang="ts">
   import { IntlString } from '@anticrm/platform'
+  import { onMount, onDestroy } from 'svelte/internal'
   import Label from './Label.svelte'
   import StatusesBarElement from './StatusesBarElement.svelte'
 
   export let items: IntlString[]
                     = ['New' as IntlString, 'In progress' as IntlString, 'Interview' as IntlString, 'Interview' as IntlString, 'Final' as IntlString]
   export let selected: IntlString | undefined = undefined
+
+  let div: HTMLElement
+  let maskLeft: boolean = false
+  let maskRight: boolean = false
+  let mask: 'left' | 'right' | 'both' | 'none' = 'none'
+
+  const checkMask = (): void => {
+    maskLeft = (div && div.scrollLeft > 1) ? true : false
+    maskRight = (div && div.scrollWidth - div.scrollLeft - div.clientWidth > 1) ? true : false
+    if (maskLeft || maskRight) {
+      if (maskLeft && maskRight) mask = 'both'
+      else if (maskLeft) mask = 'left'
+      else if (maskRight) mask = 'right'
+    } else mask = 'none'
+  }
+
+  const selectItem = (ev: Event, item: IntlString): void => {
+    const el: HTMLElement = ev.currentTarget as HTMLElement
+    el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
+    selected = item
+  }
+
+  onMount(() => {
+    if (div) {
+      checkMask()
+      div.addEventListener('scroll', checkMask)
+    }
+  })
+  onDestroy(() => { if (div) div.removeEventListener('scroll', checkMask) })
 </script>
 
-<div class="flex-row-center statusesbar-container">
+<div bind:this={div} class="flex-row-center statusesbar-container {mask}">
   {#each items as item, i}
     <div
       class="flex-row-center cursor-pointer step-lr25"
       class:selected={item === selected}
-      on:click={() => {
-        if (item !== selected) selected = item
-      }}
+      on:click={(ev) => { if (item !== selected) selectItem(ev, item) }}
     >
       <StatusesBarElement side={'left'} kind={i ? 'arrow' : 'round'} selected={item === selected} />
       <div class="flex-row-center overflow-label label">
@@ -45,10 +73,12 @@
   .statusesbar-container {
     overflow-x: auto;
     padding: .125rem 0;
+
     &::-webkit-scrollbar:horizontal { height: .125rem; }
     &::-webkit-scrollbar-track { margin: .25rem; }
     &::-webkit-scrollbar-thumb { background-color: var(--theme-bg-accent-color); }
   }
+
   .label {
     padding: .5rem 2rem;
     height: 2.25rem;
@@ -67,4 +97,8 @@
       border-color: transparent;
     }
   }
+  .left { mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1rem); }
+  .right { mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1rem); }
+  .both { mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1rem, rgba(0, 0, 0, 1) calc(100% - 1rem), rgba(0, 0, 0, 0) 100%); }
+  .none { mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 1); }
 </style>