TSK-1394,-1407,-1412,-1417,-1422,-1423: minor fixes. Fixed Scroller. (#3124)

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

models/all/src/version.json

@@ -1 +1 @@
-{"major":0,"minor":6,"patch":92}
+{ "major": 0, "minor": 6, "patch": 92 }

packages/kanban/src/components/KanbanRow.svelte

@@ -80,7 +80,7 @@
   <div
     bind:this={stateRefs[i]}
     transition:slideD|local={{ isDragging }}
-    class="p-1 flex-no-shrink clear-mins"
+    class="p-1 flex-no-shrink border-radius-1 clear-mins"
     on:dragover|preventDefault={(evt) => cardDragOver(evt, object)}
     on:drop|preventDefault={(evt) => cardDrop(evt, object)}
   >

packages/theme/styles/_colors.scss

@@ -85,6 +85,7 @@
   --theme-navpanel-icons-divider: rgba(255, 255, 255, .11);
   --theme-comp-header-color: #1F1F2C;
   --theme-divider-color: rgba(255, 255, 255, .06);
+  --theme-bg-divider-color: #282834;
 
   --theme-trans-color: rgba(255, 255, 255, .3);
   --theme-darker-color: rgba(255, 255, 255, .4);
@@ -97,11 +98,14 @@
   --theme-list-header-color: #C88C65;
   --theme-list-subheader-color: #262634;
   --theme-list-row-color: #21212F;
-  --theme-list-button-color: #262633;
-  --theme-list-button-hover: #2F2F3A;
   --theme-list-divider-color: rgba(255, 255, 255, .09);
   --theme-list-subheader-divider: transparent;
   
+  --theme-list-button-color: #262633;
+  --theme-list-button-hover: #2F2F3A;
+  --theme-link-button-color: #262634;
+  --theme-link-button-hover: #2F2F3B;
+
   --theme-table-border-color: rgba(255, 255, 255, .1);
   --theme-table-header-color: #1C1C29;
   --theme-table-row-color: #21212F;
@@ -109,8 +113,6 @@
   --theme-kanban-card-bg-color: rgba(222, 222, 240, .04);
   --theme-kanban-card-border: transparent;
   --theme-kanban-card-footer: rgba(217, 217, 217, .07);
-  --theme-kanban-button-color: #262634;
-  --theme-kanban-button-hover: #2F2F3B;
 
   --theme-tablist-color: rgba(0, 0, 0, .02);
   --theme-checkbox-color: #000;
@@ -244,6 +246,7 @@
   --theme-navpanel-icons-divider: rgba(0, 0, 0, .1);
   --theme-comp-header-color: #FBFBFC;
   --theme-divider-color: rgba(0, 0, 0, .06);
+  --theme-bg-divider-color: #E3E3E5;
 
   --theme-trans-color: rgba(0, 0, 0, .3);
   --theme-darker-color: rgba(0, 0, 0, .4);
@@ -256,11 +259,14 @@
   --theme-list-header-color: red; //#ECD4CA;
   --theme-list-subheader-color: #EEEEF0;
   --theme-list-row-color: #F7F7F8;
-  --theme-list-button-color: #F2F2F4;
-  --theme-list-button-hover: #E8E8EA;
   --theme-list-divider-color: rgba(0, 0, 0, .07);
   --theme-list-subheader-divider: rgba(0, 0, 0, .06);
   
+  --theme-list-button-color: #F2F2F4;
+  --theme-list-button-hover: #E8E8EA;
+  --theme-link-button-color: #E5E5E7;
+  --theme-link-button-hover: #DCDCDE;
+
   --theme-table-border-color: rgba(0, 0, 0, .1);
   --theme-table-header-color: #EFEFF2;
   --theme-table-row-color: #F4F4F6;
@@ -268,8 +274,6 @@
   --theme-kanban-card-bg-color: rgba(0, 0, 0, .03);
   --theme-kanban-card-border: rgba(0, 0, 0, .04);
   --theme-kanban-card-footer: rgba(0, 0, 0, .04);
-  --theme-kanban-button-color: #E5E5E7;
-  --theme-kanban-button-hover: #DCDCDE;
 
   --theme-tablist-color: rgba(0, 0, 0, .02);
   --theme-checkbox-color: #000;

packages/theme/styles/components.scss

@@ -486,6 +486,8 @@
   top: 0;
   height: 3rem;
   background-color: var(--theme-table-header-color);
+
+  &__tr { height: 3rem; }
 }
 
 .scroller-tfoot {
@@ -496,6 +498,7 @@
   background-color: var(--theme-table-header-color);
   
   tr {
+    height: 2.5rem;
     box-shadow: inset 0 1px 0 0 var(--theme-divider-color);
   }
 }

packages/ui/src/components/Button.svelte

@@ -366,11 +366,11 @@
     &.link-bordered {
       padding: 0 0.5rem;
       color: var(--theme-content-color);
-      background-color: var(--theme-kanban-button-color);
+      background-color: var(--theme-link-button-color);
       border-color: var(--theme-button-border);
       &:hover {
         color: var(--theme-caption-color);
-        background-color: var(--theme-kanban-button-hover);
+        background-color: var(--theme-link-button-hover);
         border-color: var(--theme-list-divider-color);
         .btn-icon {
           color: var(--theme-caption-color);

packages/ui/src/components/Scroller.svelte

@@ -73,8 +73,8 @@
   let firstScroll: boolean = autoscroll
   let orientir: 'vertical' | 'horizontal' = 'vertical'
 
-  let timer: number
+  let timer: any | undefined = undefined
-  let timerH: number
+  let timerH: any | undefined = undefined
 
   const inter = new Set<Element>()
   let hasLastCategories: boolean = false
@@ -92,7 +92,7 @@
       const scrollH = divScroll.scrollHeight
       const proc = scrollH / trackH
 
-      const newHeight = divScroll.clientHeight / proc + 'px'
+      const newHeight = (divScroll.clientHeight - 4) / proc + 'px'
       if (divBar.style.height !== 'newHeight') {
         divBar.style.height = newHeight
       }
@@ -111,6 +111,7 @@
         if (divBar) {
           if (timer) {
             clearTimeout(timer)
+            timer = undefined
             if (divBar.style.opacity !== '1') {
               divBar.style.opacity = '1'
             }
@@ -131,17 +132,18 @@
   }
   const checkBarH = (): void => {
     if (divBarH && divScroll) {
-      const trackW = divScroll.clientWidth - (mask !== 'none' ? 14 : 4)
+      const trackW = divScroll.clientWidth - (mask !== 'none' ? 14 : 4) - shiftLeft - shiftRight
       const scrollW = divScroll.scrollWidth
       const proc = scrollW / trackW
       divBarH.style.width = divScroll.clientWidth / proc + 'px'
-      divBarH.style.left = divScroll.scrollLeft / proc + 2 + 'px'
+      divBarH.style.left = divScroll.scrollLeft / proc + 2 + shiftLeft + 'px'
       if (maskH === 'none') divBarH.style.visibility = 'hidden'
       else {
         divBarH.style.visibility = 'visible'
         if (divBarH) {
           if (timerH) {
             clearTimeout(timerH)
+            timerH = undefined
             divBarH.style.opacity = '1'
           }
           timerH = setTimeout(() => {
@@ -170,14 +172,15 @@
         divScroll.scrollTop = (divScroll.scrollHeight - divScroll.clientHeight) * procBar
       } else {
         let X = event.clientX - dXY
-        if (X < rectScroll.left + 2) X = rectScroll.left + 2
+        if (X < rectScroll.left + 2 + shiftLeft) X = rectScroll.left + 2 + shiftLeft
-        if (X > rectScroll.right - divBarH.clientWidth - (mask !== 'none' ? 12 : 2)) {
+        if (X > rectScroll.right - divBarH.clientWidth - (mask !== 'none' ? 12 : 2) - shiftRight) {
-          X = rectScroll.right - divBarH.clientWidth - (mask !== 'none' ? 12 : 2)
+          X = rectScroll.right - divBarH.clientWidth - (mask !== 'none' ? 12 : 2) - shiftRight
         }
         divBarH.style.left = X - rectScroll.x + 'px'
-        const topBar = X - rectScroll.x - (mask !== 'none' ? 12 : 2)
+        const leftBar = X - rectScroll.x - shiftLeft - 2
-        const widthScroll = rectScroll.width - 2 - divBarH.clientWidth - (mask !== 'none' ? 12 : 2)
+        const widthScroll =
-        const procBar = topBar / widthScroll
+          rectScroll.width - 2 - (mask !== 'none' ? 12 : 2) - divBarH.clientWidth - shiftLeft - shiftRight
+        const procBar = leftBar / widthScroll
         divScroll.scrollLeft = (divScroll.scrollWidth - divScroll.clientWidth) * procBar
       }
     }
@@ -243,10 +246,16 @@
   }
 
   let checkBarTimeout: any | undefined = undefined
+  let checkHBarTimeout: any | undefined = undefined
 
-  const delayCall = (op: () => void) => {
+  const delayCall = (op: () => void, h?: boolean) => {
-    clearTimeout(checkBarTimeout)
+    if (h) {
-    checkBarTimeout = setTimeout(op, 50)
+      clearTimeout(checkHBarTimeout)
+      checkHBarTimeout = setTimeout(op, 50)
+    } else {
+      clearTimeout(checkBarTimeout)
+      checkBarTimeout = setTimeout(op, 50)
+    }
   }
 
   const checkFade = (): void => {
@@ -270,7 +279,7 @@
       renderFade()
     }
     if (!isScrolling) delayCall(checkBar)
-    if (!isScrolling && horizontal) delayCall(checkBarH)
+    if (!isScrolling && horizontal) delayCall(checkBarH, true)
   }
 
   function checkAutoScroll () {
@@ -366,7 +375,7 @@
       divScroll.addEventListener('wheel', wheelEvent)
       divScroll.addEventListener('scroll', checkFade)
       delayCall(checkBar)
-      if (horizontal) delayCall(checkBarH)
+      if (horizontal) delayCall(checkBarH, true)
     }
   })
   onDestroy(() => {
@@ -445,8 +454,10 @@
   class:union={buttons === 'union'}
   class:shrink
   style:user-select={isScrolling ? 'none' : 'inherit'}
-  style:--scroller-header-height={`${fade.multipler?.top ?? 0.125}rem`}
+  style:--scroller-header-height={`${(fade.multipler?.top ?? 0) * fz + 2}px`}
-  style:--scroller-footer-height={`${fade.multipler?.bottom ?? 0.125}rem`}
+  style:--scroller-footer-height={`${(fade.multipler?.bottom ?? 0) * fz + 2}px`}
+  style:--scroller-left-offset={`${(fade.multipler?.left ?? 0) * fz + 2}px`}
+  style:--scroller-right-offset={`${(fade.multipler?.right ?? 0) * fz + (mask !== 'none' ? 12 : 2)}px`}
 >
   <div bind:this={divHScroll} class="horizontalBox flex-col flex-shrink">
     <div
@@ -455,8 +466,7 @@
         divHeight = element.clientHeight
       }}
       class="scroll relative flex-shrink"
-      class:overflowXauto={horizontal}
+      class:overflow-x={horizontal ? 'auto' : 'hidden'}
-      class:overflowXhidden={!horizontal}
       on:scroll={() => {
         if ($tooltipstore.label !== undefined) closeTooltip()
       }}
@@ -472,7 +482,7 @@
           ? 'column-reverse'
           : 'row'}
         style:height={contentDirection === 'vertical-reverse' ? 'max-content' : noStretch ? 'auto' : '100%'}
-        use:resizeObserver={(element) => {
+        use:resizeObserver={() => {
           checkAutoScroll()
           checkFade()
         }}
@@ -529,12 +539,7 @@
     on:mousedown={(ev) => onScrollStart(ev, 'vertical')}
     on:mouseleave={checkFade}
   />
-  <div
+  <div class="track" class:hovered={isScrolling === 'vertical'} />
-    class="track"
-    class:hovered={isScrolling === 'vertical'}
-    class:fadeTopOffset={fade.multipler?.top}
-    class:fadeBottomOffset={fade.multipler?.bottom}
-  />
   {#if horizontal}
     <div
       class="bar-horizontal"
@@ -543,11 +548,7 @@
       on:mousedown={(ev) => onScrollStart(ev, 'horizontal')}
       on:mouseleave={checkFade}
     />
-    <div
+    <div class="track-horizontal" class:hovered={isScrolling === 'horizontal'} />
-      class="track-horizontal"
-      class:hovered={isScrolling === 'horizontal'}
-      style:right={mask !== 'none' ? '12px' : '2px'}
-    />
   {/if}
 </div>
 
@@ -647,12 +648,6 @@
       transform: translateY(50%);
     }
   }
-  .overflowXauto {
-    overflow-x: auto;
-  }
-  .overflowXhidden {
-    overflow-x: hidden;
-  }
   .scroller-container {
     position: relative;
     display: flex;
@@ -746,21 +741,14 @@
     border-radius: 0.5rem;
   }
   .track {
-    top: 2px;
+    top: var(--scroller-header-height, 2px);
-    bottom: 2px;
+    bottom: var(--scroller-footer-height, 2px);
     width: 8px;
-
-    &.fadeTopOffset {
-      top: var(--scroller-header-height);
-    }
-    &.fadeBottomOffset {
-      bottom: var(--scroller-footer-height);
-    }
   }
   .track-horizontal {
-    bottom: var(--scroller-footer-height);
+    bottom: var(--scroller-footer-height, 2px);
-    left: 2px;
+    left: var(--scroller-left-offset, 2px);
-    right: 2px;
+    right: var(--scroller-right-offset, 2px);
     height: 8px;
   }
   .bar,
@@ -807,7 +795,7 @@
   }
   .bar-horizontal {
     left: 2px;
-    bottom: var(--scroller-footer-height);
+    bottom: var(--scroller-footer-height, 2px);
     height: 8px;
     min-width: 2rem;
     max-width: calc(100% - 12px);

packages/ui/src/components/calendar/DatePresenter.svelte

@@ -24,7 +24,6 @@
   import Label from '../Label.svelte'
   import DatePopup from './DatePopup.svelte'
   import DPCalendar from './icons/DPCalendar.svelte'
-  import DPCalendarOver from './icons/DPCalendarOver.svelte'
   import { getMonthName } from './internal/DateUtils'
 
   export let value: number | null | undefined
@@ -90,7 +89,7 @@
 >
   {#if showIcon}
     <div class="btn-icon {icon}" class:buttonIconNoLabel={!shouldShowLabel}>
-      <Icon icon={icon === 'overdue' ? DPCalendarOver : DPCalendar} size="full" />
+      <Icon icon={DPCalendar} size="full" />
     </div>
   {/if}
   {#if value !== null && value !== undefined}
@@ -262,21 +261,27 @@
         background-color: var(--theme-list-button-color);
         border-color: var(--theme-divider-color);
       }
+      &.medium {
+        height: 1.75rem;
+      }
     }
     &.link-bordered {
       padding: 0 0.375rem;
       color: var(--theme-content-color);
-      background-color: var(--theme-kanban-button-color);
+      background-color: var(--theme-link-button-color);
       border-color: var(--theme-button-border);
       border-radius: 0.25rem;
       &:hover {
         color: var(--theme-caption-color);
-        background-color: var(--theme-kanban-button-hover);
+        background-color: var(--theme-link-button-hover);
         border-color: var(--theme-list-divider-color);
         .btn-icon {
           color: var(--theme-caption-color);
         }
       }
+      &.small .btn-icon {
+        margin-right: 0.25rem;
+      }
     }
     &.secondary {
       padding: 0 0.625rem;

packages/ui/src/components/calendar/DateRangePresenter.svelte

@@ -22,7 +22,6 @@
   import Icon from '../Icon.svelte'
   import IconClose from '../icons/Close.svelte'
   import DPCalendar from './icons/DPCalendar.svelte'
-  import DPCalendarOver from './icons/DPCalendarOver.svelte'
   import DateRangePopup from './DateRangePopup.svelte'
   import { DateRangeMode } from '@hcengineering/core'
 
@@ -416,7 +415,7 @@
     {/if}
   {:else}
     <div class="btn-icon {icon}">
-      <Icon icon={icon === 'overdue' ? DPCalendarOver : DPCalendar} size={'full'} />
+      <Icon icon={DPCalendar} size={'full'} />
     </div>
     {#if value !== undefined && value !== null && value.toString() !== ''}
       {#if labelOver !== undefined}

packages/ui/src/components/calendar/icons/DPCalendar.svelte

@@ -3,8 +3,10 @@
   export let fill: string = 'currentColor'
 </script>
 
-<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
   <path
-    d="M11 1C13.2091 1 15 2.79086 15 5V11C15 13.2091 13.2091 15 11 15H5C2.79086 15 1 13.2091 1 11V5C1 2.79086 2.79086 1 5 1H11ZM13.5 6H2.5V11C2.5 12.3807 3.61929 13.5 5 13.5H11C12.3807 13.5 13.5 12.3807 13.5 11V6Z"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M28 24.0044C28 26.2136 26.2091 28 24 28H8C5.79086 28 4 26.2091 4 24V8C4 5.79086 5.79086 4 8 4H10V3C10 2.44772 10.4477 2 11 2C11.5523 2 12 2.44772 12 3V4H19.9995V3C19.9995 2.44772 20.4472 2 20.9995 2C21.5518 2 21.9995 2.44772 21.9995 3V4H24C26.2091 4 28 5.79086 28 8C28 11.5569 28 19.2641 28 24.0044ZM19.9995 6V7C19.9995 7.55228 20.4472 8 20.9995 8C21.5518 8 21.9995 7.55228 21.9995 7V6H24C25.1046 6 26 6.89543 26 8V12H6V8C6 6.89543 6.89543 6 8 6H10V7C10 7.55228 10.4477 8 11 8C11.5523 8 12 7.55228 12 7V6H19.9995ZM6 14V24C6 25.1046 6.89543 26 8 26H24C25.1046 26 26 25.1046 26 24V14H6Z"
   />
 </svg>

plugins/contact-assets/assets/icons.svg

@@ -40,7 +40,7 @@
     <path d="M6,10.5c2.5,0,4.5-2,4.5-4.5S8.5,1.5,6,1.5S1.5,3.5,1.5,6c0,0.8,0.2,1.6,0.6,2.2l-0.6,2.3L3.9,10 C4.5,10.3,5.2,10.5,6,10.5z M6,9.8c2.1,0,3.8-1.7,3.8-3.8S8.1,2.2,6,2.2S2.2,3.9,2.2,6c0,0.8,0.3,1.6,0.7,2.2L2.5,9.5l1.3-0.3 C4.5,9.6,5.2,9.8,6,9.8z"/>
   </symbol>
   <symbol id="skype" viewBox="0 0 24 24">
-    <path d="M13.004 18.423a2 2 0 0 1 1.237.207 3.25 3.25 0 0 0 4.389-4.389 2 2 0 0 1-.207-1.237 6.5 6.5 0 0 0-7.427-7.427 2 2 0 0 1-1.237-.207A3.25 3.25 0 0 0 5.37 9.76a2 2 0 0 1 .207 1.237 6.5 6.5 0 0 0 7.427 7.427zM12 20.5a8.5 8.5 0 0 1-8.4-9.81 5.25 5.25 0 0 1 7.09-7.09 8.5 8.5 0 0 1 9.71 9.71 5.25 5.25 0 0 1-7.09 7.09c-.427.066-.865.1-1.31.1zm.053-3.5C9.25 17 8 15.62 8 14.586c0-.532.39-.902.928-.902 1.2 0 .887 1.725 3.125 1.725 1.143 0 1.776-.624 1.776-1.261 0-.384-.188-.808-.943-.996l-2.49-.623c-2.006-.504-2.37-1.592-2.37-2.612C8.026 7.797 10.018 7 11.89 7c1.72 0 3.756.956 3.756 2.228 0 .545-.48.863-1.012.863-1.023 0-.835-1.418-2.9-1.418-1.023 0-1.596.462-1.596 1.126 0 .663.803.876 1.502 1.035l1.836.409C15.49 11.695 16 12.876 16 13.989 16 15.713 14.675 17 12.015 17h.038z"/>
+    <path d="M20.9,13.4C21,12.9,21,12.5,21,12c0-2.4-1-4.7-2.6-6.4C16.7,3.9,14.4,3,12,3c-0.5,0-0.9,0-1.4,0.1c-1-0.6-2.3-0.9-3.5-0.7C5.9,2.5,4.8,3,3.9,3.9c-0.9,0.9-1.4,2-1.6,3.2c-0.1,1.2,0.1,2.4,0.7,3.5C3,11,3,11.5,3,12c0,2.4,1,4.7,2.6,6.4c1.7,1.7,4,2.6,6.4,2.6c0.5,0,0.9,0,1.4-0.1c1,0.6,2.3,0.9,3.5,0.7c1.2-0.1,2.3-0.7,3.2-1.6c0.9-0.9,1.4-2,1.6-3.2C21.8,15.7,21.5,14.5,20.9,13.4L20.9,13.4z M16.3,16.1c-0.4,0.6-1,1-1.7,1.3c-0.8,0.3-1.7,0.5-2.6,0.5c-1,0-2.1-0.2-3-0.6C8.5,17,8,16.5,7.6,16c-0.3-0.4-0.5-1-0.5-1.5c0-0.1,0-0.3,0.1-0.4c0.1-0.1,0.1-0.2,0.2-0.3c0.2-0.2,0.5-0.3,0.8-0.3c0.2,0,0.5,0.1,0.7,0.2c0.2,0.2,0.4,0.4,0.5,0.7c0.1,0.3,0.3,0.6,0.5,0.9c0.2,0.3,0.5,0.5,0.8,0.6c0.4,0.2,0.8,0.3,1.3,0.2c0.6,0,1.2-0.1,1.8-0.5c0.2-0.1,0.4-0.3,0.5-0.5c0.1-0.2,0.2-0.4,0.2-0.7c0-0.2,0-0.3-0.1-0.5c-0.1-0.2-0.2-0.3-0.3-0.4c-0.3-0.2-0.6-0.4-0.9-0.5c-0.4-0.1-0.9-0.3-1.6-0.4c-0.7-0.2-1.5-0.4-2.2-0.7c-0.6-0.2-1-0.6-1.4-1.1c-0.4-0.5-0.5-1.1-0.5-1.7c0-0.6,0.2-1.2,0.6-1.7c0.4-0.5,1-0.9,1.6-1.1c0.8-0.3,1.6-0.4,2.5-0.4c0.7,0,1.3,0.1,1.9,0.3c0.5,0.1,1,0.4,1.4,0.7c0.3,0.2,0.6,0.6,0.8,0.9c0.2,0.3,0.2,0.6,0.3,0.9c0,0.1,0,0.3-0.1,0.4c-0.1,0.1-0.1,0.2-0.2,0.3c-0.1,0.1-0.2,0.2-0.4,0.3C15.5,10,15.4,10,15.2,10c-0.2,0-0.5-0.1-0.7-0.2c-0.2-0.2-0.4-0.4-0.5-0.7c-0.2-0.4-0.5-0.7-0.8-1c-0.4-0.3-1-0.4-1.5-0.3c-0.5,0-1,0.1-1.5,0.4C10.2,8.3,10,8.4,9.9,8.6C9.8,8.7,9.8,8.9,9.8,9.1c0,0.2,0.1,0.4,0.2,0.6c0.1,0.2,0.3,0.3,0.5,0.4c0.2,0.1,0.5,0.2,0.7,0.3c0.2,0.1,0.6,0.2,1.2,0.3c0.7,0.2,1.3,0.3,1.9,0.5c0.5,0.2,1,0.4,1.4,0.7c0.4,0.2,0.7,0.6,0.9,1c0.2,0.5,0.3,1,0.3,1.5C16.9,14.9,16.7,15.6,16.3,16.1z" />
   </symbol>
   <symbol id="youtube" viewBox="0 0 12 12">
     <path d="M10.4,4.3c0-0.6-0.6-1.1-1.2-1.2C8.3,3.1,7,3,6,3S3.7,3.1,2.8,3.1c-0.6,0-1.1,0.5-1.2,1.2c0,0.6-0.1,1.4-0.1,1.9 s0,1.3,0.1,1.9c0,0.6,0.6,1.1,1.2,1.2C3.7,9.4,5,9.4,6,9.4s2.3-0.1,3.2-0.1c0.6,0,1.1-0.5,1.2-1.2c0-0.6,0.1-1.4,0.1-1.9 S10.5,4.9,10.4,4.3z M5,7.5V4.9l2.6,1.3L5,7.5z"/>

plugins/hr-resources/src/components/schedule/MonthView.svelte

@@ -140,7 +140,7 @@
 </script>
 
 {#if departmentStaff.length}
-  <Scroller fade={{ multipler: { top: 3, bottom: 0, left: colWidthRem } }} horizontal>
+  <Scroller fade={{ multipler: { top: 3, bottom: 3, left: colWidthRem } }} horizontal>
     <table class="scroller-first-column">
       <thead class="scroller-thead">
         <tr class="scroller-thead__tr">
@@ -284,6 +284,10 @@
             <td
               class="p-1 text-center summary"
               class:hovered={i === hoveredIndex}
+              class:holiday={isHoliday(
+                getHolidayDatesForEmployee(staffDepartmentMap, departmentStaff[0]._id, holidays),
+                day
+              )}
               class:weekend={isWeekend(day)}
               class:today={areDatesEqual(todayDate, day)}
               on:mousemove={() => {
@@ -323,9 +327,9 @@
     th {
       flex-shrink: 0;
       padding: 0;
-      height: 2.5rem;
+      height: 3rem;
-      min-height: 2.5rem;
+      min-height: 3rem;
-      max-height: 2.5rem;
+      max-height: 3rem;
       text-transform: uppercase;
       font-weight: 500;
       font-size: 0.75rem;
@@ -371,18 +375,24 @@
       }
     }
     td:not(:last-child) {
-      border-right: 1px solid var(--theme-divider-color);
+      border-right: 1px solid var(--theme-bg-divider-color);
     }
 
-    tbody,
+    tbody tr:not(:last-child),
-    tfoot {
+    thead th:first-child .fullfill {
-      tr {
+      border-bottom: 1px solid var(--theme-bg-divider-color);
-        border-bottom: 1px solid var(--theme-divider-color);
+    }
-      }
+    tfoot tr,
+    tfoot tr td:first-child .fullfill {
+      box-shadow: inset 0 1px 0 0 var(--theme-divider-color);
+    }
+    tfoot tr,
+    tfoot tr td {
+      height: 3rem;
     }
 
     tr.scroller-thead__tr:not(:last-child) {
-      border-right: 1px solid var(--theme-divider-color);
+      border-right: 1px solid var(--theme-bg-divider-color);
     }
 
     .hovered {

plugins/tags-resources/src/components/LabelsPresenter.svelte

@@ -11,7 +11,7 @@
   export let object: WithLookup<Doc>
   export let full: boolean
   export let ckeckFilled: boolean = false
-  export let kind: 'short' | 'full' | 'list' | 'kanban' = 'short'
+  export let kind: 'short' | 'full' | 'list' | 'link' = 'short'
   export let isEditable: boolean = false
   export let action: (evt: MouseEvent) => Promise<void> | void = async () => {}
   export let compression: boolean = false
@@ -46,10 +46,10 @@
   })
 </script>
 
-{#if kind === 'list' || kind === 'kanban'}
+{#if kind === 'list' || kind === 'link'}
   {#each items as value}
     <div class="label-box no-shrink" title={value.title}>
-      <TagReferencePresenter attr={undefined} {value} kind={kind === 'kanban' ? 'kanban-labels' : 'labels'} />
+      <TagReferencePresenter attr={undefined} {value} {kind} />
     </div>
   {/each}
 {:else}
@@ -70,7 +70,7 @@
   >
     {#each items as value, i}
       <div class="label-box wrap-{kind}" title={value.title}>
-        <TagReferencePresenter attr={undefined} {value} kind={'kanban-labels'} bind:realWidth={widths[i]} />
+        <TagReferencePresenter attr={undefined} {value} kind={'link'} bind:realWidth={widths[i]} />
       </div>
     {/each}
   </div>

plugins/tags-resources/src/components/TagReferencePresenter.svelte

@@ -22,7 +22,7 @@
 
   export let value: TagReference
   export let isEditable: boolean = false
-  export let kind: 'labels' | 'kanban-labels' | 'skills' = 'skills'
+  export let kind: 'list' | 'link' | 'skills' = 'skills'
   export let realWidth: number | undefined = undefined
   export let attr: AnyAttribute | undefined
   export let inline: boolean = false
@@ -36,9 +36,9 @@
     <TagItem tag={value} schema={attr?.schema ?? '0'} inline />
   {:else if kind === 'skills'}
     <TagItem tag={value} schema={attr?.schema ?? '0'} />
-  {:else if kind === 'kanban-labels'}
+  {:else if kind === 'link'}
     <button
-      class="label-container"
+      class="link-container"
       use:resizeObserver={(element) => {
         realWidth = element.clientWidth
       }}
@@ -46,9 +46,9 @@
       <div class="color" style:background-color={getPlatformColor(value.color ?? 0)} />
       <span class="overflow-label ml-1 text-sm caption-color max-w-40">{value.title}</span>
     </button>
-  {:else if kind === 'labels'}
+  {:else if kind === 'list'}
     <div
-      class="tag-container"
+      class="list-container"
       style:padding-right={isEditable ? '0' : '0.5rem'}
       use:resizeObserver={(element) => {
         realWidth = element.clientWidth
@@ -68,7 +68,7 @@
 {/if}
 
 <style lang="scss">
-  .tag-container {
+  .list-container {
     overflow: hidden;
     display: flex;
     align-items: center;
@@ -96,7 +96,7 @@
     }
   }
 
-  .label-container {
+  .link-container {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -109,7 +109,7 @@
     line-height: 0.75rem;
     white-space: nowrap;
     color: var(--theme-content-color);
-    background-color: var(--theme-kanban-button-color);
+    background-color: var(--theme-link-button-color);
     border: 1px solid var(--theme-button-border);
     border-radius: 0.25rem;
     transition-property: border, background-color, color, box-shadow;
@@ -117,7 +117,7 @@
 
     &:hover {
       color: var(--theme-caption-color);
-      background-color: var(--theme-kanban-button-hover);
+      background-color: var(--theme-link-button-hover);
       border-color: var(--theme-list-divider-color);
       transition-duration: 0;
     }

plugins/tags-resources/src/components/TagsAttributeEditor.svelte

@@ -37,7 +37,7 @@
           {attr}
           {value}
           isEditable={!readonly}
-          kind={'labels'}
+          kind={'list'}
           on:remove={(res) => removeTag(res.detail)}
         />
       </div>

plugins/task-resources/src/components/kanban/KanbanView.svelte

@@ -82,6 +82,9 @@
 
   $: dontUpdateRank = orderBy[0] !== TaskOrdering.Manual
 
+  $: lth = $deviceInfo.theme === 'theme-light'
+  const accentColors: AccentColor[] = []
+
   const spaceQuery = createQuery()
 
   let currentProject: SpaceWithStates | undefined
@@ -172,7 +175,7 @@
       if (accentColors[i] === undefined) {
         accentColors[i] = {
           textColor: 'var(--theme-caption-color)',
-          backgroundColor: '175, 175, 175'
+          backgroundColor: lth ? '230, 230, 230' : '100, 100, 108'
         }
       }
     })
@@ -243,9 +246,6 @@
 
   const getDoneUpdate = (e: any) => ({ doneState: e.detail._id } as DocumentUpdate<Doc>)
 
-  $: lth = $deviceInfo.theme === 'theme-light'
-  const accentColors: AccentColor[] = []
-
   const setAccentColor = (n: number, ev: CustomEvent) => {
     const accColor = rgbToHsl(ev.detail.r, ev.detail.g, ev.detail.b)
     const textColor = !lth ? { r: 255, g: 255, b: 255 } : hslToRgb(accColor.h, accColor.s, 0.3)
@@ -287,13 +287,13 @@
       <!-- {@const status = $statusStore.get(state._id)} -->
       {#key lth}
         <div
-          style:--kanban-header-rgb-color={accentColors[index]?.backgroundColor ?? '175, 175, 175'}
+          style:--kanban-header-rgb-color={accentColors[index].backgroundColor}
           class="header flex-row-center"
           class:gradient={!lth}
         >
           <span
             class="clear-mins fs-bold overflow-label pointer-events-none"
-            style:color={accentColors[index]?.textColor ?? 'var(--theme-caption-color)'}
+            style:color={accentColors[index].textColor}
           >
             {#if groupByKey === noCategory}
               <Label label={view.string.NoGrouping} />

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

@@ -16,7 +16,7 @@
 <script lang="ts">
   import { createEventDispatcher, onMount } from 'svelte'
   import type { State } from '@hcengineering/task'
-  import { getColorNumberByText, getPlatformColor, hexToRgb } from '@hcengineering/ui'
+  import { getColorNumberByText, getPlatformColor, hexToRgb, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
 
   export let value: State | undefined
   export let shouldShowAvatar = true
@@ -28,8 +28,12 @@
 
   const defaultFill = 'currentColor'
   $: fill = value ? getPlatformColor(value.color ?? getColorNumberByText(value.name)) : defaultFill
+  $: lth = $deviceInfo.theme === 'theme-light'
   const dispatchAccentColor = (fill: string) =>
-    dispatch('accent-color', fill !== defaultFill ? hexToRgb(fill) : { r: 127, g: 127, b: 127 })
+    dispatch(
+      'accent-color',
+      fill !== defaultFill ? hexToRgb(fill) : lth ? { r: 220, g: 220, b: 220 } : { r: 100, g: 100, b: 108 }
+    )
   $: dispatchAccentColor(fill)
 
   onMount(() => {

plugins/tracker-resources/src/components/issues/KanbanView.svelte

@@ -98,6 +98,9 @@
   $: orderBy = viewOptions.orderBy
   $: sort = { [orderBy[0]]: orderBy[1] }
 
+  $: lth = $deviceInfo.theme === 'theme-light'
+  const accentColors: AccentColor[] = []
+
   // issuesGroupBySorting[groupByKey]
 
   $: dontUpdateRank = orderBy[0] !== IssuesOrdering.Manual
@@ -199,7 +202,7 @@
       if (accentColors[i] === undefined) {
         accentColors[i] = {
           textColor: 'var(--theme-caption-color)',
-          backgroundColor: '175, 175, 175'
+          backgroundColor: lth ? '230, 230, 230' : '100, 100, 108'
         }
       }
     })
@@ -258,9 +261,6 @@
     }
   }
 
-  $: lth = $deviceInfo.theme === 'theme-light'
-  const accentColors: AccentColor[] = []
-
   const setAccentColor = (n: number, ev: CustomEvent) => {
     const accColor = rgbToHsl(ev.detail.r, ev.detail.g, ev.detail.b)
     const textColor = !lth ? { r: 255, g: 255, b: 255 } : hslToRgb(accColor.h, accColor.s, 0.3)
@@ -305,14 +305,14 @@
       <!-- {@const status = $statusStore.get(state._id)} -->
       {#key lth}
         <div
-          style:--kanban-header-rgb-color={accentColors[index]?.backgroundColor ?? '175, 175, 175'}
+          style:--kanban-header-rgb-color={accentColors[index].backgroundColor}
           class="header flex-between"
           class:gradient={!lth}
         >
           <div class="flex-row-center gap-1">
             <span
               class="clear-mins fs-bold overflow-label pointer-events-none"
-              style:color={accentColors[index]?.textColor ?? 'var(--theme-caption-color)'}
+              style:color={accentColors[index].textColor}
             >
               {#if groupByKey === noCategory}
                 <Label label={view.string.NoGrouping} />
@@ -349,6 +349,9 @@
     <svelte:fragment slot="card" let:object>
       {@const issue = toIssue(object)}
       {@const issueId = object._id}
+      {@const reports =
+        issue.reportedTime + (issue.childInfo ?? []).map((it) => it.reportedTime).reduce((a, b) => a + b, 0)}
+      {@const estimations = (issue.childInfo ?? []).map((it) => it.estimation).reduce((a, b) => a + b, 0)}
       {#key issueId}
         <div
           class="tracker-card"
@@ -411,22 +414,25 @@
               }}
             />
           </div>
-          <div class="card-footer flex-between">
+          {#if reports > 0 || estimations > 0 || (object.comments ?? 0) > 0 || (object.$lookup?.attachedTo !== undefined && (object.$lookup.attachedTo.comments ?? 0) > 0)}
-            <EstimationEditor kind={'list'} size={'small'} value={issue} />
+            <div class="card-footer flex-between">
-            <div class="flex-row-center gap-3 reverse">
+              <EstimationEditor kind={'list'} size={'small'} value={issue} />
-              {#if (object.attachments ?? 0) > 0}
+              <!-- {@debug issue} -->
-                <AttachmentsPresenter value={object.attachments} {object} />
+              <div class="flex-row-center gap-3 reverse">
-              {/if}
+                {#if (object.attachments ?? 0) > 0}
-              {#if (object.comments ?? 0) > 0 || (object.$lookup?.attachedTo !== undefined && (object.$lookup.attachedTo.comments ?? 0) > 0)}
+                  <AttachmentsPresenter value={object.attachments} {object} />
+                {/if}
                 {#if (object.comments ?? 0) > 0}
                   <CommentsPresenter value={object.comments} {object} />
                 {/if}
                 {#if object.$lookup?.attachedTo !== undefined && (object.$lookup.attachedTo.comments ?? 0) > 0}
                   <CommentsPresenter value={object.$lookup?.attachedTo?.comments} object={object.$lookup?.attachedTo} />
                 {/if}
-              {/if}
+              </div>
             </div>
-          </div>
+          {:else}
+            <div class="min-h-4 max-h-4 h-4" />
+          {/if}
         </div>
       {/key}
     </svelte:fragment>
@@ -468,6 +474,7 @@
     display: flex;
     flex-direction: column;
     min-height: 6.5rem;
+    border-radius: 0.25rem;
 
     .card-header {
       padding: 0.75rem 1rem 0;

plugins/view-resources/src/components/TableBrowser.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import type { Class, Doc, DocumentQuery, FindOptions, Ref } from '@hcengineering/core'
   import { getEmbeddedLabel } from '@hcengineering/platform'
-  import { Scroller, tableSP } from '@hcengineering/ui'
+  import { Scroller, tableSP, FadeOptions } from '@hcengineering/ui'
   import { BuildModelKey } from '@hcengineering/view'
   import { onMount } from 'svelte'
   import { ActionContext } from '..'
@@ -33,6 +33,7 @@
   export let showFilterBar = true
   export let enableChecking = true
   export let tableId: string | undefined = undefined
+  export let fade: FadeOptions = tableSP
 
   // If defined, will show a number of dummy items before real data will appear.
   export let loadingProps: LoadingProps | undefined = undefined
@@ -83,7 +84,7 @@
     mode: 'browser'
   }}
 />
-<Scroller fade={tableSP} horizontal={true}>
+<Scroller {fade} horizontal={true}>
   <Table
     bind:this={table}
     {_class}