TSK-1324: update kanban layout (#3118)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
hcengineering · May 2, 2023 · 439f4bb · 439f4bb
1 parent d937a80
commit 439f4bb
Show file tree

Hide file tree

Showing 25 changed files with 365 additions and 188 deletions.
diff --git a/packages/kanban/src/components/Kanban.svelte b/packages/kanban/src/components/Kanban.svelte
@@ -309,7 +309,7 @@
         {@const stateObjects = getGroupByValues(groupByDocs, state)}
 
         <div
-          class="panel-container step-lr75"
+          class="panel-container"
           bind:this={stateRefs[si]}
           on:dragover={(event) => panelDragOver(event, state)}
           on:drop={() => {
@@ -318,9 +318,9 @@
           }}
         >
           {#if $$slots.header !== undefined}
-            <slot name="header" state={toAny(state)} count={stateObjects.length} />
+            <slot name="header" state={toAny(state)} count={stateObjects.length} index={si} />
           {/if}
-          <Scroller padding={'.5rem 0'} on:dragover on:drop>
+          <Scroller padding={'.25rem .5rem'} on:dragover on:drop>
             <slot name="beforeCard" {state} />
             <KanbanRow
               bind:this={stateRows[si]}
@@ -361,10 +361,13 @@
     position: relative;
     width: 100%;
     height: 100%;
+    min-width: 0;
+    min-height: 0;
   }
   .kanban-content {
     display: flex;
-    padding: 1.5rem 2rem 0;
+    padding: 1.5rem;
+    min-width: 0;
   }
 
   @keyframes anim-border {
@@ -384,23 +387,5 @@
     background-color: transparent;
     border: 1px solid transparent;
     border-radius: 0.25rem;
-
-    .header {
-      display: flex;
-      flex-direction: column;
-      height: 4rem;
-      min-height: 4rem;
-
-      .bar {
-        height: 0.375rem;
-        border-radius: 0.25rem;
-      }
-      .label {
-        padding: 0 0.5rem 0 1rem;
-        height: 100%;
-        font-weight: 500;
-        color: var(--caption-color);
-      }
-    }
   }
 </style>
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="step-tb75"
+    class="p-1 flex-no-shrink clear-mins"
     on:dragover|preventDefault={(evt) => cardDragOver(evt, object)}
     on:drop|preventDefault={(evt) => cardDrop(evt, object)}
   >
@@ -107,14 +107,12 @@
   </div>
 {/each}
 {#if stateObjects.length > limitedObjects.length}
-  <div class="step-tb75">
+  <div class="p-1 flex-no-shrink clear-mins">
     {#if loading}
       <Spinner />
     {:else}
-      <div class="card-container h-18 flex-row-center flex-between p-4">
-        <span class="p-1">
-          {limitedObjects.length}/{stateObjects.length}
-        </span>
+      <div class="card-container flex-between p-4">
+        <span class="caption-color">{limitedObjects.length}</span> / {stateObjects.length}
         <Button
           size={'small'}
           icon={IconMoreH}
@@ -140,15 +138,15 @@
     // }
     &.checked {
       background-color: var(--highlight-select);
-      box-shadow: inset 0 0 1px 1px var(--highlight-select-border);
+      box-shadow: 0 0 1px 1px var(--highlight-select-border);
 
       &:hover {
         background-color: var(--highlight-select-hover);
       }
     }
     &.selection,
     &.checked.selection {
-      box-shadow: inset 0 0 1px 1px var(--primary-button-enabled);
+      box-shadow: 0 0 1px 1px var(--primary-button-enabled);
       animation: anim-border 1s ease-in-out;
 
       &:hover {
@@ -168,10 +166,10 @@
   }
   @keyframes anim-border {
     from {
-      box-shadow: inset 0 0 1px 1px var(--primary-edit-border-color);
+      box-shadow: 0 0 1px 1px var(--primary-edit-border-color);
     }
     to {
-      box-shadow: inset 0 0 1px 1px var(--primary-bg-color);
+      box-shadow: 0 0 1px 1px var(--primary-bg-color);
     }
   }
 </style>
diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
@@ -98,6 +98,7 @@
   --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;
 
@@ -107,8 +108,10 @@
 
   --theme-kanban-card-bg-color: rgba(222, 222, 240, .04);
   --theme-kanban-card-border: transparent;
-  --theme-kanban-card-footer: #D9D9D9;
-
+  --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;
   --theme-checkbox-bg-color: #FFF;
@@ -254,6 +257,7 @@
   --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);
 
@@ -264,7 +268,9 @@
   --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;
   --theme-checkbox-bg-color: #FFF;

diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
@@ -407,6 +407,10 @@ input.search {
   &:not(.reverse) > *:not(:first-child) { margin-left: .5rem; }
   &.reverse > *:not(:last-child) { margin-right: .5rem; }
 }
+.gap-3 {
+  &:not(.reverse) > *:not(:first-child) { margin-left: .75rem; }
+  &.reverse > *:not(:last-child) { margin-right: .75rem; }
+}
 .gap-around-2 > * { margin: .25rem; }
 .gap-around-4 > * { margin: .5rem; }
 
@@ -417,17 +421,19 @@ input.search {
   flex-wrap: nowrap;
   white-space: nowrap;
   width: fit-content;
-  color: var(--caption-color);
+  font-size: .75rem;
+  color: var(--theme-darker-color);
   cursor: pointer;
+
   .icon {
     margin-right: .25rem;
-    color: var(--dark-color);
+    color: var(--theme-content-color);
     &.small-size {
       width: 1.5rem;
       height: 1.5rem;
     }
   }
-  &:hover .icon { color: var(--caption-color); }
+  &:hover .icon { color: var(--theme-caption-color); }
 }
 
 /* Margins & Paddings */

diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
@@ -733,3 +733,10 @@
     & > * { margin-left: .375rem; }
   }
 }
+
+/* Kanban - global style */
+.kanban-container .card-container .card-labels > * { margin: .25rem .25rem 0 0; }
+.kanban-container .card-container .card-labels.labels > *:last-child {
+  flex-shrink: 0;
+  margin-right: 0;
+}
diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte
@@ -366,15 +366,19 @@
     &.link-bordered {
       padding: 0 0.5rem;
       color: var(--theme-content-color);
-      border-color: var(--theme-divider-color);
+      background-color: var(--theme-kanban-button-color);
+      border-color: var(--theme-button-border);
       &:hover {
         color: var(--theme-caption-color);
-        background-color: var(--theme-button-hovered);
+        background-color: var(--theme-kanban-button-hover);
         border-color: var(--theme-list-divider-color);
         .btn-icon {
           color: var(--theme-caption-color);
         }
       }
+      &.small {
+        padding: 0 0.25rem;
+      }
     }
     &.list {
       padding: 0 0.625em;

diff --git a/packages/ui/src/components/ProgressCircle.svelte b/packages/ui/src/components/ProgressCircle.svelte
@@ -37,7 +37,7 @@
     cy={8}
     r={7}
     class="progress-circle"
-    style:stroke={'var(--divider-color)'}
+    style:stroke={'var(--theme-divider-color)'}
     style:opacity={'.5'}
     style:transform={`rotate(${-78 + ((dashOffset + 1) * 360) / (lenghtC + 1)}deg)`}
     style:stroke-dasharray={lenghtC}

diff --git a/packages/ui/src/components/calendar/DatePresenter.svelte b/packages/ui/src/components/calendar/DatePresenter.svelte
@@ -266,10 +266,13 @@
     &.link-bordered {
       padding: 0 0.375rem;
       color: var(--theme-content-color);
+      background-color: var(--theme-kanban-button-color);
       border-color: var(--theme-button-border);
+      border-radius: 0.25rem;
       &:hover {
         color: var(--theme-caption-color);
-        background-color: var(--theme-button-hovered);
+        background-color: var(--theme-kanban-button-hover);
+        border-color: var(--theme-list-divider-color);
         .btn-icon {
           color: var(--theme-caption-color);
         }

diff --git a/packages/ui/src/components/calendar/DueDatePresenter.svelte b/packages/ui/src/components/calendar/DueDatePresenter.svelte
@@ -18,14 +18,15 @@
   import { tooltip } from '../../tooltips'
   import DatePresenter from './DatePresenter.svelte'
   import { getDaysDifference } from './internal/DateUtils'
-  import { ButtonKind } from '../../types'
+  import { ButtonKind, ButtonSize } from '../../types'
 
   export let value: number | null = null
   export let shouldRender: boolean = true
   export let onChange: (newDate: number | null) => void
   export let kind: ButtonKind = 'link'
   export let editable: boolean = true
   export let shouldIgnoreOverdue: boolean = false
+  export let size: ButtonSize = 'medium'
 
   const today = new Date(new Date(Date.now()).setHours(0, 0, 0, 0))
   $: isOverdue = value !== null && value < today.getTime()
@@ -90,6 +91,6 @@
         }
       : undefined}
   >
-    <DatePresenter {value} {editable} icon={iconModifier} {kind} on:change={handleDueDateChanged} />
+    <DatePresenter {value} {editable} icon={iconModifier} {kind} {size} on:change={handleDueDateChanged} />
   </div>
 {/if}
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
@@ -170,7 +170,17 @@ export type TooltipAlignment = 'top' | 'bottom' | 'left' | 'right'
 export type VerticalAlignment = 'top' | 'bottom'
 export type HorizontalAlignment = 'left' | 'right'
 
-export type IconSize = 'inline' | 'tiny' | 'x-small' | 'smaller' | 'small' | 'medium' | 'large' | 'x-large' | 'full'
+export type IconSize =
+  | 'inline'
+  | 'tiny'
+  | 'card'
+  | 'x-small'
+  | 'smaller'
+  | 'small'
+  | 'medium'
+  | 'large'
+  | 'x-large'
+  | 'full'
 
 export interface DateOrShift {
   date?: number
@@ -311,3 +321,8 @@ export interface DialogStep {
   readonly component: AnyComponent | AnySvelteComponent
   props?: Record<string, any>
 }
+
+export interface AccentColor {
+  textColor: string
+  backgroundColor: string
+}
diff --git a/plugins/attachment-resources/src/components/AttachmentsPresenter.svelte b/plugins/attachment-resources/src/components/AttachmentsPresenter.svelte
@@ -33,11 +33,11 @@
         component: AttachmentPopup,
         props: { objectId: object._id, attachments: value, object }
       }}
-      class="sm-tool-icon ml-1 mr-1"
+      class="sm-tool-icon"
     >
       <span class="icon"><IconAttachment {size} /></span>
       {#if showCounter}
-        &nbsp;{value}
+        {value}
       {/if}
     </div>
   </DocNavLink>

diff --git a/plugins/chunter-resources/src/components/CommentsPresenter.svelte b/plugins/chunter-resources/src/components/CommentsPresenter.svelte
@@ -33,7 +33,7 @@
         component: CommentPopup,
         props: { objectId: object._id, object }
       }}
-      class="sm-tool-icon ml-1 mr-1"
+      class="sm-tool-icon"
     >
       <span class="icon"><IconThread {size} /></span>
       {#if showCounter}

diff --git a/plugins/contact-resources/src/components/Avatar.svelte b/plugins/contact-resources/src/components/Avatar.svelte
@@ -128,7 +128,7 @@
       }}
     />
   {:else}
-    <Icon icon={icon ?? AvatarIcon} {size} />
+    <Icon icon={icon ?? AvatarIcon} size={size === 'card' ? 'x-small' : size} />
   {/if}
 </div>
 
@@ -160,6 +160,10 @@
     height: 1.13rem;
   }
 
+  .ava-card {
+    width: 1.25rem; // 20
+    height: 1.25rem;
+  }
   .ava-x-small {
     width: 1.5rem; // 24
     height: 1.5rem;
@@ -197,6 +201,8 @@
 
   .ava-inline .ava-mask,
   .ava-inline.no-img,
+  .ava-card .ava-mask,
+  .ava-card.no-img,
   .ava-x-small .ava-mask,
   .ava-x-small.no-img,
   .ava-smaller .ava-mask,

diff --git a/plugins/tags-resources/src/components/LabelsPresenter.svelte b/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' = 'short'
+  export let kind: 'short' | 'full' | 'list' | 'kanban' = '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'}
+{#if kind === 'list' || kind === 'kanban'}
   {#each items as value}
     <div class="label-box no-shrink" title={value.title}>
-      <TagReferencePresenter attr={undefined} {value} kind={'labels'} />
+      <TagReferencePresenter attr={undefined} {value} kind={kind === 'kanban' ? 'kanban-labels' : 'labels'} />
     </div>
   {/each}
 {:else}

diff --git a/plugins/tags-resources/src/components/TagItem.svelte b/plugins/tags-resources/src/components/TagItem.svelte
@@ -38,7 +38,7 @@
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <span
     style={`--tag-color:${getPlatformColor(tag?.color ?? element?.color ?? 0)}`}
-    class="tag-item-inline"
+    class="tag-item-inline overflow-label max-w-40"
     on:click
     use:tooltip={{
       label: element?.description ? tags.string.TagTooltip : undefined,
@@ -60,7 +60,7 @@
       direction: 'right'
     }}
   >
-    {name}
+    <span class="overflow-label max-w-40">{name}</span>
     <span class="ml-1">
       {#if tag && tagIcon && schema !== '0'}
         <Icon icon={tagIcon} size={'small'} />