UBER-538: fixed ListView and KanbanView.

models/lead/src/index.ts

@@ -302,47 +302,53 @@ export function createModel (builder: Builder): void {
       },
       config: [
         { key: '', displayProps: { fixed: 'left', key: 'lead' } },
+        {
+          key: 'state',
+          props: { kind: 'list', size: 'small', shouldShowName: false }
+        },
         {
           key: '',
           presenter: lead.component.TitlePresenter,
           label: lead.string.Title,
-          displayProps: { fixed: 'left', key: 'title' },
           props: { maxWidth: '10rem' }
         },
         {
           key: '$lookup.attachedTo',
           presenter: contact.component.PersonPresenter,
           label: lead.string.Customer,
           sortingKey: '$lookup.attachedTo.name',
-          displayProps: { fixed: 'left', key: 'talent' },
           props: {
             _class: lead.mixin.Customer,
             inline: true,
             maxWidth: '10rem'
           }
         },
-        { key: 'state', displayProps: { fixed: 'left', key: 'state' } },
         {
           key: '',
           presenter: tracker.component.RelatedIssueSelector,
           label: tracker.string.Relations,
-          displayProps: { fixed: 'left', key: 'issues', optional: true }
+          props: { size: 'small' }
         },
-        { key: 'attachments', displayProps: { key: 'attachments', optional: true } },
-        { key: 'comments', displayProps: { key: 'comments', optional: true } },
+        { key: 'attachments', displayProps: { key: 'attachments', suffix: true } },
+        { key: 'comments', displayProps: { key: 'comments', suffix: true } },
         { key: '', displayProps: { grow: true } },
         {
           key: '$lookup.attachedTo.$lookup.channels',
           label: contact.string.ContactInfo,
           sortingKey: ['$lookup.attachedTo.$lookup.channels.lastMessage', '$lookup.attachedTo.channels'],
-          displayProps: {
-            fixed: 'left',
-            key: 'channels',
-            dividerBefore: true
-          }
+          props: {
+            length: 'full',
+            size: 'small',
+            kind: 'list'
+          },
+          displayProps: { optional: true }
         },
-        { key: 'modifiedOn', displayProps: { key: 'modified', fixed: 'left', dividerBefore: true } },
-        { key: 'assignee', displayProps: { key: 'assignee', fixed: 'right' }, props: { shouldShowLabel: false } }
+        { key: 'modifiedOn', displayProps: { key: 'modified', fixed: 'right', dividerBefore: true } },
+        {
+          key: 'assignee',
+          props: { kind: 'list', shouldShowName: false, avatarSize: 'x-small' },
+          displayProps: { key: 'assignee', fixed: 'right' }
+        }
       ],
       viewOptions: leadViewOptions
     },

models/recruit/src/index.ts

@@ -685,8 +685,7 @@ export function createModel (builder: Builder): void {
         { key: '', displayProps: { fixed: 'left', key: 'app' } },
         {
           key: 'state',
-          props: { kind: 'list', size: 'small', shouldShowName: false },
-          displayProps: { excludeByKey: 'state' }
+          props: { kind: 'list', size: 'small', shouldShowName: false }
         },
         {
           key: '$lookup.attachedTo',
@@ -721,14 +720,16 @@ export function createModel (builder: Builder): void {
           sortingKey: ['$lookup.attachedTo.$lookup.channels.lastMessage', '$lookup.attachedTo.channels'],
           props: {
             length: 'full',
-            size: 'inline'
-          }
+            size: 'small',
+            kind: 'list'
+          },
+          displayProps: { optional: true }
         },
         { key: 'modifiedOn', displayProps: { key: 'modified', fixed: 'right', dividerBefore: true } },
         {
           key: 'assignee',
           props: { kind: 'list', shouldShowName: false, avatarSize: 'x-small' },
-          displayProps: { key: 'assignee', fixed: 'right', excludeByKey: 'assignee' }
+          displayProps: { key: 'assignee', fixed: 'right' }
         }
       ],
       options: {

packages/kanban/src/components/Kanban.svelte

@@ -366,7 +366,7 @@
   }
   .kanban-content {
     display: flex;
-    padding: 1.5rem;
+    padding: 1.5rem 1.5rem 0.5rem;
     min-width: 0;
   }
 

packages/theme/styles/components.scss

@@ -901,11 +901,6 @@
       flex-shrink: .5;
       min-width: initial;
     }
-    .label-wrapper {
-      display: flex;
-      align-items: center;
-      min-width: 0;
-    }
     & > *:last-child {
       flex-shrink: 0;
       width: max-content;
@@ -936,8 +931,26 @@
 }
 
 /* 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;
+.kanban-container .card-container .card-labels > *:not(.labels-container),
+.kanban-container .card-container .card-labels.labels .labels-container > * {
+  margin: .25rem .25rem 0 0;
+
+  &:last-child {
+    flex-shrink: 0;
+    margin-right: 0;
+  }
+}
+.kanban-container .card-container .card-labels .datetime-button {
+  padding: 0 0.25rem !important;
+  height: 1.75rem !important;
+  font-size: .8125rem !important;
+}
+.kanban-container .card-container .card-labels .label { font-size: .8125rem !important; }
+
+/* ListView & Kanban */
+.list-container .optional-bar .label-wrapper,
+.kanban-container .card-container .card-labels .label-wrapper {
+  display: flex;
+  align-items: center;
+  min-width: 0;
 }

packages/ui/src/components/ScrollBox.svelte

@@ -14,6 +14,7 @@
 -->
 <script lang="ts">
   import { afterUpdate } from 'svelte'
+  import { closeTooltip } from '..'
 
   export let vertical: boolean = false
   export let stretch: boolean = false
@@ -29,6 +30,7 @@
   })
 
   function setAutoscroll () {
+    closeTooltip()
     autoscroll = div.scrollTop > div.scrollHeight - div.clientHeight - 50
   }
 </script>

packages/ui/src/components/Scroller.svelte

@@ -474,7 +474,7 @@
       class="scroll relative flex-shrink"
       style:overflow-x={horizontal ? 'auto' : 'hidden'}
       on:scroll={() => {
-        if ($tooltipstore.label !== undefined) closeTooltip()
+        if ($tooltipstore.label !== undefined || $tooltipstore.component !== undefined) closeTooltip()
       }}
     >
       <div

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

@@ -27,7 +27,7 @@
   export let editable: boolean = true
   export let shouldIgnoreOverdue: boolean = false
   export let size: ButtonSize = 'medium'
-  export let width: string | undefined = undefined
+  export let width: string | undefined = 'auto'
 
   const today = new Date(new Date(Date.now()).setHours(0, 0, 0, 0))
   $: isOverdue = value !== null && value < today.getTime()

plugins/contact-resources/src/components/ChannelsDropdown.svelte

@@ -261,7 +261,7 @@
         id={item.label}
         bind:input={btns[i]}
         icon={item.icon}
-        kind={highlighted.includes(item.provider) ? 'dangerous' : kind}
+        kind={'link-bordered'}
         {size}
         {shape}
         highlight={item.integration || item.notification}

plugins/contact-resources/src/components/ContactPresenter.svelte

@@ -21,12 +21,14 @@
 
   import OrganizationPresenter from './OrganizationPresenter.svelte'
   import PersonPresenter from './PersonPresenter.svelte'
+  import { IconSize } from '@hcengineering/ui'
 
   export let value: Contact
   export let inline: boolean = false
   export let disabled: boolean = false
   export let accent: boolean = false
   export let maxWidth = ''
+  export let avatarSize: IconSize = 'x-small'
 
   function isPerson (value: Contact): boolean {
     const client = getClient()
@@ -43,9 +45,9 @@
 </script>
 
 {#if isEmployee(value)}
-  <EmployeePresenter {disabled} value={toEmployee(value)} {inline} {accent} />
+  <EmployeePresenter {disabled} value={toEmployee(value)} {inline} {accent} {avatarSize} />
 {:else if isPerson(value)}
-  <PersonPresenter {disabled} {value} {inline} {accent} />
+  <PersonPresenter {disabled} {value} {inline} {accent} {avatarSize} />
 {:else}
   <OrganizationPresenter value={toOrg(value)} {inline} {accent} {maxWidth} />
 {/if}

plugins/lead-resources/src/components/KanbanCard.svelte

@@ -44,11 +44,10 @@
   }
 </script>
 
-<div class="flex-col pt-2 pb-2 pr-4 pl-4">
-  <div class="flex-between mb-4">
-    <div class="flex-col">
-      <div class="fs-title cursor-pointer" on:click={showLead}>{object.title}</div>
-    </div>
+<div class="flex-col pt-3 pb-3 pr-4 pl-4">
+  <div class="flex-between mb-3">
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <div class="fs-title cursor-pointer" on:click={showLead}>{object.title}</div>
     <div class="flex-row-center">
       <div class="mr-2">
         <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
@@ -63,42 +62,44 @@
       />
     </div>
   </div>
-  <div class="flex-col">
-    <div class="flex-between">
-      {#if enabledConfig(config, 'attachedTo') && object.$lookup?.attachedTo}
-        <ContactPresenter value={object.$lookup.attachedTo} />
-      {/if}
-      <div class="flex-row-center gap-3">
-        {#if enabledConfig(config, 'attachments') && (object.attachments ?? 0) > 0}
-          <AttachmentsPresenter value={object.attachments} {object} />
-        {/if}
-        {#if enabledConfig(config, 'comments') && (object.comments ?? 0) > 0}
-          <CommentsPresenter value={object.comments} {object} />
-        {/if}
-      </div>
+  <div class="flex-between mb-2">
+    {#if enabledConfig(config, 'attachedTo') && object.$lookup?.attachedTo}
+      <ContactPresenter value={object.$lookup.attachedTo} avatarSize={'small'} />
+    {/if}
+  </div>
+  {#if enabledConfig(config, 'dueDate')}
+    <div class="card-labels labels mb-2">
+      <DueDatePresenter
+        size={'small'}
+        kind={'link-bordered'}
+        width={'fit-content'}
+        value={object.dueDate}
+        shouldRender={object.dueDate !== null && object.dueDate !== undefined}
+        shouldIgnoreOverdue={object.doneState !== null}
+        onChange={async (e) => {
+          await client.update(object, { dueDate: e })
+        }}
+      />
     </div>
-    <div class="flex-row-center flex-between mt-2">
+  {/if}
+  <div class="flex-between">
+    <div class="flex-row-center gap-3 reverse mr-4">
       <LeadPresenter value={object} />
-      {#if enabledConfig(config, 'dueDate')}
-        <DueDatePresenter
-          size={'small'}
-          value={object.dueDate}
-          shouldRender={object.dueDate !== null && object.dueDate !== undefined}
-          shouldIgnoreOverdue={object.doneState !== null}
-          onChange={async (e) => {
-            await client.update(object, { dueDate: e })
-          }}
-        />
+      {#if enabledConfig(config, 'attachments') && (object.attachments ?? 0) > 0}
+        <AttachmentsPresenter value={object.attachments} {object} />
       {/if}
-      {#if enabledConfig(config, 'assignee')}
-        <AssigneePresenter
-          value={object.assignee}
-          issueId={object._id}
-          defaultClass={contact.class.Employee}
-          currentSpace={object.space}
-          placeholderLabel={assigneeAttribute.label}
-        />
+      {#if enabledConfig(config, 'comments') && (object.comments ?? 0) > 0}
+        <CommentsPresenter value={object.comments} {object} />
       {/if}
     </div>
+    {#if enabledConfig(config, 'assignee')}
+      <AssigneePresenter
+        value={object.assignee}
+        issueId={object._id}
+        defaultClass={contact.class.Employee}
+        currentSpace={object.space}
+        placeholderLabel={assigneeAttribute.label}
+      />
+    {/if}
   </div>
 </div>