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

…3124) Signed-off-by: Alexander Platov <sas_lord@mail.ru>
hcengineering · May 3, 2023 · d435dbf · d435dbf
1 parent 96e77f4
commit d435dbf
Show file tree

Hide file tree

Showing 18 changed files with 146 additions and 123 deletions.
diff --git a/models/all/src/version.json b/models/all/src/version.json
@@ -1 +1 @@
-{"major":0,"minor":6,"patch":92}
+{ "major": 0, "minor": 6, "patch": 92 }
diff --git a/packages/kanban/src/components/KanbanRow.svelte b/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)}
   >

diff --git a/packages/theme/styles/_colors.scss b/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,10 +98,13 @@
   --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;
@@ -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,10 +259,13 @@
   --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;
@@ -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;

diff --git a/packages/theme/styles/components.scss b/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 {
@@ -494,8 +496,9 @@
   bottom: 0;
   height: 2.5rem;
   background-color: var(--theme-table-header-color);
-
+  
   tr {
+    height: 2.5rem;
     box-shadow: inset 0 1px 0 0 var(--theme-divider-color);
   }
 }

diff --git a/packages/ui/src/components/Button.svelte b/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);

diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte
@@ -73,8 +73,8 @@
   let firstScroll: boolean = autoscroll
   let orientir: 'vertical' | 'horizontal' = 'vertical'
 
-  let timer: number
-  let timerH: number
+  let timer: any | undefined = undefined
+  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.right - divBarH.clientWidth - (mask !== 'none' ? 12 : 2)) {
-          X = rectScroll.right - divBarH.clientWidth - (mask !== 'none' ? 12 : 2)
+        if (X < rectScroll.left + 2 + shiftLeft) X = rectScroll.left + 2 + shiftLeft
+        if (X > rectScroll.right - divBarH.clientWidth - (mask !== 'none' ? 12 : 2) - shiftRight) {
+          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 widthScroll = rectScroll.width - 2 - divBarH.clientWidth - (mask !== 'none' ? 12 : 2)
-        const procBar = topBar / widthScroll
+        const leftBar = X - rectScroll.x - shiftLeft - 2
+        const 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) => {
-    clearTimeout(checkBarTimeout)
-    checkBarTimeout = setTimeout(op, 50)
+  const delayCall = (op: () => void, h?: boolean) => {
+    if (h) {
+      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-footer-height={`${fade.multipler?.bottom ?? 0.125}rem`}
+  style:--scroller-header-height={`${(fade.multipler?.top ?? 0) * fz + 2}px`}
+  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:overflowXhidden={!horizontal}
+      class:overflow-x={horizontal ? 'auto' : 'hidden'}
       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
-    class="track"
-    class:hovered={isScrolling === 'vertical'}
-    class:fadeTopOffset={fade.multipler?.top}
-    class:fadeBottomOffset={fade.multipler?.bottom}
-  />
+  <div class="track" class:hovered={isScrolling === 'vertical'} />
   {#if horizontal}
     <div
       class="bar-horizontal"
@@ -543,11 +548,7 @@
       on:mousedown={(ev) => onScrollStart(ev, 'horizontal')}
       on:mouseleave={checkFade}
     />
-    <div
-      class="track-horizontal"
-      class:hovered={isScrolling === 'horizontal'}
-      style:right={mask !== 'none' ? '12px' : '2px'}
-    />
+    <div class="track-horizontal" class:hovered={isScrolling === 'horizontal'} />
   {/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;
-    bottom: 2px;
+    top: var(--scroller-header-height, 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);
-    left: 2px;
-    right: 2px;
+    bottom: var(--scroller-footer-height, 2px);
+    left: var(--scroller-left-offset, 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);

diff --git a/packages/ui/src/components/calendar/DatePresenter.svelte b/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;

diff --git a/packages/ui/src/components/calendar/DateRangePresenter.svelte b/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}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"major":0,"minor":6,"patch":92}
		{ "major": 0, "minor": 6, "patch": 92 }