Update StatesBar (Safari fix)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/theme/styles/components.scss

@@ -200,3 +200,66 @@
   }
 }
 .ac-column__list-item + .ac-column__list-item { margin-top: .75rem; }
+
+/* StatesBar */
+.antiStatesBar {
+  overflow-x: auto;
+  display: flex;
+  align-items: center;
+  flex: 1 0;
+  padding: 0.125rem 0;
+  min-width: 0;
+  // width: auto;
+
+  &::-webkit-scrollbar:horizontal { height: 0.125rem; }
+  &::-webkit-scrollbar-track { margin: 0.25rem; }
+  &::-webkit-scrollbar-thumb { background-color: var(--theme-bg-accent-color); }
+
+  &.mask-none { mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 1); }  
+  &.mask-left { mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1rem); }
+  &.mask-right { mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1rem); }
+  &.mask-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%
+    );
+  }
+
+  .asb-bar {
+    flex: 1 0 auto;
+    position: relative;
+    display: flex;
+    min-width: 0;
+    // max-width: 100%;
+    width: auto;
+    // height: auto;
+
+    &__back {
+      width: auto;
+      height: 2.25rem;
+    }
+    &__element {
+      fill: var(--theme-button-bg-enabled);
+      stroke: var(--theme-bg-accent-color);
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+    &__selected { fill: red; }
+
+    .asb-label__container {
+      position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      top: 0;
+      left: 1rem;
+      right: 1rem;
+      min-width: 0;
+      width: calc(100% - 2rem);
+      height: 100%;
+    }
+  }
+}

plugins/task-resources/src/components/state/StatesBar.svelte

@@ -33,7 +33,7 @@
   let maskLeft: boolean = false
   let maskRight: boolean = false
   let mask: 'left' | 'right' | 'both' | 'none' = 'none'
-  let stepStyle = (gap === 'small') ? 'step-lr25' : 'step-lr75'
+  let stepStyle = (gap === 'small') ? 'safari-gap-1' : 'safari-gap-2'
 
   const dispatch = createEventDispatcher()
 
@@ -87,9 +87,12 @@
     }
   })
   onDestroy(() => { if (div) div.removeEventListener('scroll', checkMask) })
+  afterUpdate(() => {
+    console.log('!!!!!!!!!!!!!!!!!!!!!!! UPDATED')
+  })
 </script>
 
-<div bind:this={div} class="flex-row-center statusesbar-container mask-{mask} {stepStyle}">
+<div bind:this={div} class="antiStatesBar mask-{mask} {stepStyle}">
   {#each states as item, i (item._id)}
     <StatesBarElement
       label={item.title}
@@ -102,40 +105,3 @@
     />
   {/each}
 </div>
-
-<style lang="scss">
-  .statusesbar-container {
-    overflow-x: auto;
-    padding: 0.125rem 0;
-    width: auto;
-
-    &::-webkit-scrollbar:horizontal {
-      height: 0.125rem;
-    }
-    &::-webkit-scrollbar-track {
-      margin: 0.25rem;
-    }
-    &::-webkit-scrollbar-thumb {
-      background-color: var(--theme-bg-accent-color);
-    }
-  }
-
-  .mask-left {
-    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1rem);
-  }
-  .mask-right {
-    mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1rem);
-  }
-  .mask-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%
-    );
-  }
-  .mask-none {
-    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 1);
-  }
-</style>

plugins/task-resources/src/components/state/StatesBarElement.svelte

@@ -25,79 +25,66 @@
 
   let lenght: number = 0
   let text: HTMLElement
+  let divBar: HTMLElement
+  let svgBack: SVGElement
+
+  // $: if (text) lenght = (text.clientWidth + 20 > 300) ? 300 : text.clientWidth + 20
+  // $: if (lenght) {
+  //   if (position === 'start') d = `M0,8c0-4.4,3.6-8,8-8h2h${lenght}h1.8c0.8,0,1.6,0.5,1.9,1.3l6.1,16c0.2,0.5,0.2,1,0,1.4l-6.1,16c-0.3,0.8-1,1.3-1.9,1.3L${lenght + 10},36H10 l-2,0c-4.4,0-8-3.6-8-8V8z`
+  //   else if (position === 'middle') d = `M6.1,17.3l-6-15.9C-0.2,0.7,0.3,0,1,0h9h${lenght}h1.8c0.8,0,1.6,0.5,1.9,1.3l6.1,16c0.2,0.5,0.2,1,0,1.4l-6.1,16 c-0.3,0.8-1,1.3-1.9,1.3H${lenght + 10}H10H1c-0.7,0-1.2-0.7-0.9-1.4l6-15.9C6.3,18.3,6.3,17.7,6.1,17.3z`
+  //   else if (position === 'end') d = `M6.1,17.3l-6-15.9C-0.2,0.7,0.3,0,1,0h9h${lenght}h2c4.4,0,8,3.6,8,8v20c0,4.4-3.6,8-8,8h-2H10H1 c-0.7,0-1.2-0.7-0.9-1.4l6-15.9C6.3,18.3,6.3,17.7,6.1,17.3z`
+  //   else d = `M0,8c0-4.4,3.6-8,8-8l2,0h${lenght}l2,0c4.4,0,8,3.6,8,8v20c0,4.4-3.6,8-8,8h-2H10H8c-4.4,0-8-3.6-8-8V8z`
+  // }
 
   afterUpdate(() => {
     if (text) lenght = (text.clientWidth + 20 > 300) ? 300 : text.clientWidth + 20
+    if (divBar) divBar.style.width = lenght + 20 + 'px'
+    if (svgBack) svgBack.style.width = lenght + 20 + 'px'
   })
 </script>
 
 <div class="hidden-text" bind:this={text}>{label}</div>
 {#if lenght > 0}
   <div
-    class="statuses-bar"
+    bind:this={divBar}
+    class="asb-bar"
     class:cursor-pointer={!selected}
     class:cursor-default={selected}
     on:click|stopPropagation
   >
-    <div class="label-container"><div class="overflow-label">{label}</div></div>
+    <svg
-    <svg class="statuses-bar__back" viewBox="0 0 {lenght + 20} 36" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      bind:this={svgBack}
-      {#if position === 'start'}
+      class="asb-bar__back"
+      viewBox="0 0 {lenght + 20} 36"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      {#if (position === 'start') }
         <path
-          class="statuses-bar__{selected ? 'selected' : 'element'}"
+          class="asb-bar__{selected ? 'selected' : 'element'}"
           style={selected ? `fill: ${color};` : ''}
           d="M0,8c0-4.4,3.6-8,8-8h2h{lenght}h1.8c0.8,0,1.6,0.5,1.9,1.3l6.1,16c0.2,0.5,0.2,1,0,1.4l-6.1,16c-0.3,0.8-1,1.3-1.9,1.3L{lenght + 10},36H10 l-2,0c-4.4,0-8-3.6-8-8V8z"
         />
-      {:else if position === 'middle'}
+      {:else if (position === 'middle') }
         <path
-          class="statuses-bar__{selected ? 'selected' : 'element'}"
+          class="asb-bar__{selected ? 'selected' : 'element'}"
           style={selected ? `fill: ${color};` : ''}
           d="M6.1,17.3l-6-15.9C-0.2,0.7,0.3,0,1,0h9h{lenght}h1.8c0.8,0,1.6,0.5,1.9,1.3l6.1,16c0.2,0.5,0.2,1,0,1.4l-6.1,16 c-0.3,0.8-1,1.3-1.9,1.3H{lenght + 10}H10H1c-0.7,0-1.2-0.7-0.9-1.4l6-15.9C6.3,18.3,6.3,17.7,6.1,17.3z"
         />
-      {:else if position === 'end'}
+      {:else if (position === 'end') }
         <path
-          class="statuses-bar__{selected ? 'selected' : 'element'}"
+          class="asb-bar__{selected ? 'selected' : 'element'}"
           style={selected ? `fill: ${color};` : ''}
           d="M6.1,17.3l-6-15.9C-0.2,0.7,0.3,0,1,0h9h{lenght}h2c4.4,0,8,3.6,8,8v20c0,4.4-3.6,8-8,8h-2H10H1 c-0.7,0-1.2-0.7-0.9-1.4l6-15.9C6.3,18.3,6.3,17.7,6.1,17.3z"
         />
       {:else}
         <path
-          class="statuses-bar__{selected ? 'selected' : 'element'}"
+          class="asb-bar__{selected ? 'selected' : 'element'}"
           style={selected ? `fill: ${color};` : ''}
           d="M0,8c0-4.4,3.6-8,8-8l2,0h{lenght}l2,0c4.4,0,8,3.6,8,8v20c0,4.4-3.6,8-8,8h-2H10H8c-4.4,0-8-3.6-8-8V8z"
         />
       {/if}
     </svg>
+    <div class="asb-label__container"><div class="overflow-label">{label}</div></div>
   </div>
 {/if}
-
-<style lang="scss">
-  .statuses-bar {
-    position: relative;
-    max-width: 100%;
-    height: min-content;
-
-    &__back {
-      height: 2.25rem;
-    }
-    &__element {
-      fill: var(--theme-button-bg-enabled);
-      stroke: var(--theme-bg-accent-color);
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    }
-    &__selected { fill: red; }
-
-    .label-container {
-      position: absolute;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      top: 0;
-      left: 1rem;
-      right: 1rem;
-      min-width: 0;
-      width: calc(100% - 2rem);
-      height: 100%;
-    }
-  }
-</style>