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

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

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;
-      min-height: 2.5rem;
-      max-height: 2.5rem;
+      height: 3rem;
+      min-height: 3rem;
+      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,
-    tfoot {
-      tr {
-        border-bottom: 1px solid var(--theme-divider-color);
-      }
+    tbody tr:not(:last-child),
+    thead th:first-child .fullfill {
+      border-bottom: 1px solid var(--theme-bg-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">
-            <EstimationEditor kind={'list'} size={'small'} value={issue} />
-            <div class="flex-row-center gap-3 reverse">
-              {#if (object.attachments ?? 0) > 0}
-                <AttachmentsPresenter value={object.attachments} {object} />
-              {/if}
-              {#if (object.comments ?? 0) > 0 || (object.$lookup?.attachedTo !== undefined && (object.$lookup.attachedTo.comments ?? 0) > 0)}
+          {#if reports > 0 || estimations > 0 || (object.comments ?? 0) > 0 || (object.$lookup?.attachedTo !== undefined && (object.$lookup.attachedTo.comments ?? 0) > 0)}
+            <div class="card-footer flex-between">
+              <EstimationEditor kind={'list'} size={'small'} value={issue} />
+              <!-- {@debug issue} -->
+              <div class="flex-row-center gap-3 reverse">
+                {#if (object.attachments ?? 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}