Corrected No date. Fix Status and Priority editors. Little fixes. (#1697)

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

plugins/tracker-resources/src/components/PrioritySelector.svelte

@@ -14,16 +14,21 @@
 -->
 <script lang="ts">
   import { IssuePriority } from '@anticrm/tracker'
-  import { Button, showPopup, SelectPopup, Icon, Label, eventToHTMLElement } from '@anticrm/ui'
+  import { Button, showPopup, SelectPopup, eventToHTMLElement } from '@anticrm/ui'
+  import type { ButtonKind, ButtonSize } from '@anticrm/ui'
   import { issuePriorities } from '../utils'
   import tracker from '../plugin'
 
   export let priority: IssuePriority
-  export let kind: 'button' | 'icon' = 'button'
   export let shouldShowLabel: boolean = true
   export let onPriorityChange: ((newPriority: IssuePriority | undefined) => void) | undefined = undefined
   export let isEditable: boolean = true
 
+  export let kind: ButtonKind = 'no-border'
+  export let size: ButtonSize = 'small'
+  export let justify: 'left' | 'center' = 'center'
+  export let width: string | undefined = 'min-content'
+
   const prioritiesInfo = [
     IssuePriority.NoPriority,
     IssuePriority.Urgent,
@@ -45,44 +50,13 @@
   }
 </script>
 
-{#if kind === 'button'}
-  <Button
-    label={shouldShowLabel ? issuePriorities[priority].label : undefined}
-    icon={issuePriorities[priority].icon}
-    width="min-content"
-    size="small"
-    kind="no-border"
-    on:click={handlePriorityEditorOpened}
-  />
-{:else if kind === 'icon'}
-  <div class={isEditable ? 'flex-presenter' : 'presenter'} on:click={handlePriorityEditorOpened}>
-    <div class="priorityIcon" class:mPriorityIconEditable={isEditable}>
-      <Icon icon={issuePriorities[priority].icon} size={'small'} />
-    </div>
-    {#if shouldShowLabel}
-      <div class="label nowrap ml-2">
-        <Label label={issuePriorities[priority].label} />
-      </div>
-    {/if}
-  </div>
-{/if}
-
-<style lang="scss">
-  .presenter {
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-  }
-
-  .priorityIcon {
-    width: 1rem;
-    height: 1rem;
-    color: var(--theme-content-dark-color);
-
-    &.mPriorityIconEditable {
-      &:hover {
-        color: var(--theme-caption-color);
-      }
-    }
-  }
-</style>
+<Button
+  label={shouldShowLabel ? issuePriorities[priority].label : undefined}
+  icon={issuePriorities[priority].icon}
+  {justify}
+  {width}
+  {size}
+  {kind}
+  disabled={!isEditable}
+  on:click={handlePriorityEditorOpened}
+/>

plugins/tracker-resources/src/components/StatusSelector.svelte

@@ -16,16 +16,21 @@
   import { Ref, WithLookup } from '@anticrm/core'
 
   import { IssueStatus } from '@anticrm/tracker'
-  import { Button, Icon, showPopup, SelectPopup, eventToHTMLElement } from '@anticrm/ui'
+  import { Button, showPopup, SelectPopup, eventToHTMLElement } from '@anticrm/ui'
+  import type { ButtonKind, ButtonSize } from '@anticrm/ui'
   import tracker from '../plugin'
 
   export let selectedStatusId: Ref<IssueStatus>
   export let statuses: WithLookup<IssueStatus>[]
-  export let kind: 'button' | 'icon' = 'button'
   export let shouldShowLabel: boolean = true
   export let onStatusChange: ((newStatus: Ref<IssueStatus> | undefined) => void) | undefined = undefined
   export let isEditable: boolean = true
 
+  export let kind: ButtonKind = 'no-border'
+  export let size: ButtonSize = 'small'
+  export let justify: 'left' | 'center' = 'center'
+  export let width: string | undefined = 'min-content'
+
   $: selectedStatus = statuses.find((status) => status._id === selectedStatusId) ?? statuses[0]
   $: selectedStatusIcon = selectedStatus?.$lookup?.category?.icon
   $: selectedStatusLabel = shouldShowLabel ? selectedStatus?.name : undefined
@@ -44,42 +49,18 @@
   }
 </script>
 
-{#if kind === 'button'}
-  <Button
-    icon={selectedStatusIcon}
-    width="min-content"
-    size="small"
-    kind="no-border"
-    on:click={handleStatusEditorOpened}
-  >
-    <svelte:fragment slot="content">
-      {#if selectedStatusLabel}
-        <span class="nowrap">{selectedStatusLabel}</span>
-      {/if}
-    </svelte:fragment>
-  </Button>
-{:else if kind === 'icon'}
-  <div class={isEditable ? 'flex-presenter' : 'presenter'} on:click={handleStatusEditorOpened}>
-    {#if selectedStatusIcon}
-      <div class="statusIcon">
-        <Icon icon={selectedStatusIcon} size={'small'} />
-      </div>
-    {/if}
+<Button
+  icon={selectedStatusIcon}
+  {justify}
+  {width}
+  {size}
+  {kind}
+  disabled={!isEditable}
+  on:click={handleStatusEditorOpened}
+>
+  <svelte:fragment slot="content">
     {#if selectedStatusLabel}
-      <div class="label nowrap ml-2">{selectedStatusLabel}</div>
+      <span class="nowrap">{selectedStatusLabel}</span>
     {/if}
-  </div>
-{/if}
-
-<style lang="scss">
-  .presenter {
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-  }
-
-  .statusIcon {
-    width: 1rem;
-    height: 1rem;
-  }
-</style>
+  </svelte:fragment>
+</Button>

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

@@ -169,79 +169,67 @@
 
     <svelte:fragment slot="custom-attributes" let:direction>
       {#if issue && currentTeam && issueStatuses && direction === 'column'}
-        <div class="content mt-4">
-          <div class="flex-row-center mb-4">
-            <span class="label w-24">
-              <Label label={tracker.string.Status} />
-            </span>
-            <StatusEditor value={issue} statuses={issueStatuses} currentSpace={currentTeam._id} shouldShowLabel />
-          </div>
+        <div class="content">
+          <span class="label">
+            <Label label={tracker.string.Status} />
+          </span>
+          <StatusEditor value={issue} statuses={issueStatuses} currentSpace={currentTeam._id} shouldShowLabel />
 
-          <div class="flex-row-center mb-4">
-            <span class="label w-24">
-              <Label label={tracker.string.Priority} />
-            </span>
-            <PriorityEditor value={issue} currentSpace={currentTeam._id} shouldShowLabel />
-          </div>
+          <span class="label">
+            <Label label={tracker.string.Priority} />
+          </span>
+          <PriorityEditor value={issue} currentSpace={currentTeam._id} shouldShowLabel />
 
-          <div class="flex-row-center mb-4">
-            <span class="label w-24">
-              <Label label={tracker.string.Assignee} />
-            </span>
-            <UserBox
-              _class={contact.class.Employee}
-              label={tracker.string.Assignee}
-              placeholder={tracker.string.Assignee}
-              bind:value={issue.assignee}
-              allowDeselect
-              titleDeselect={tracker.string.Unassigned}
-              size="large"
-              kind="link"
-              on:change={() => change('assignee', issue?.assignee)}
-            />
-          </div>
+          <span class="label">
+            <Label label={tracker.string.Assignee} />
+          </span>
+          <UserBox
+            _class={contact.class.Employee}
+            label={tracker.string.Assignee}
+            placeholder={tracker.string.Assignee}
+            bind:value={issue.assignee}
+            allowDeselect
+            titleDeselect={tracker.string.Unassigned}
+            size={'large'}
+            kind={'link'}
+            width={'100%'}
+            justify={'left'}
+            on:change={() => change('assignee', issue?.assignee)}
+          />
 
-          <div class="flex-row-center mb-4">
-            <span class="label w-24">
-              <Label label={tracker.string.Labels} />
-            </span>
-            <Button
-              label={tracker.string.Labels}
-              icon={tracker.icon.Labels}
-              width="max-content"
-              size="large"
-              kind="link"
-            />
-          </div>
+          <span class="label">
+            <Label label={tracker.string.Labels} />
+          </span>
+          <Button
+            label={tracker.string.Labels}
+            icon={tracker.icon.Labels}
+            size={'large'}
+            kind={'link'}
+            width={'100%'}
+            justify={'left'}
+          />
 
-          <div class="devider" />
+          <div class="divider" />
 
-          <div class="flex-row-center mb-4">
-            <span class="label w-24">
-              <Label label={tracker.string.Project} />
-            </span>
-            <Button
-              label={tracker.string.Project}
-              icon={tracker.icon.Projects}
-              width="fit-content"
-              size="large"
-              kind="link"
-            />
-          </div>
+          <span class="label">
+            <Label label={tracker.string.Project} />
+          </span>
+          <Button
+            label={tracker.string.Project}
+            icon={tracker.icon.Projects}
+            size={'large'}
+            kind={'link'}
+            width={'100%'}
+            justify={'left'}
+          />
 
           {#if issue.dueDate !== null}
-            <div class="devider" />
+            <div class="divider" />
 
-            <div class="flex-row-center mb-4">
-              <span class="label w-24">
-                <Label label={tracker.string.DueDate} />
-              </span>
-              <DatePresenter
-                bind:value={issue.dueDate}
-                editable
-                on:change={({ detail }) => change('dueDate', detail)}
-              />
-            </div>
+            <span class="label">
+              <Label label={tracker.string.DueDate} />
+            </span>
+            <DatePresenter bind:value={issue.dueDate} editable on:change={({ detail }) => change('dueDate', detail)} />
           {/if}
         </div>
       {:else}
@@ -268,22 +256,20 @@
 
 <style lang="scss">
   .content {
+    display: grid;
+    grid-template-columns: 1fr 1.5fr;
+    grid-auto-flow: row;
+    justify-content: start;
+    align-items: center;
+    gap: 1rem;
+    margin-top: 1rem;
     width: 100%;
+    height: min-content;
   }
 
-  .content {
-    position: absolute;
-    inset: 2.5rem 0 0;
-    padding: 1.5rem 0.5rem 1.5rem 1.5rem;
-
-    .label {
-      margin: 0.625rem 0;
-    }
-  }
-
-  .devider {
+  .divider {
+    grid-column: 1 / 3;
     height: 1px;
-    border-bottom: 1px solid var(--divider-color);
-    margin: 0.75rem 1.5rem 1.25rem 0;
+    background-color: var(--divider-color);
   }
 </style>

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

@@ -17,6 +17,7 @@
   import { Issue, IssuePriority, Team } from '@anticrm/tracker'
   import { getClient } from '@anticrm/presentation'
   import { Tooltip } from '@anticrm/ui'
+  import type { ButtonKind, ButtonSize } from '@anticrm/ui'
   import tracker from '../../plugin'
   import PrioritySelector from '../PrioritySelector.svelte'
 
@@ -25,6 +26,11 @@
   export let isEditable: boolean = true
   export let shouldShowLabel: boolean = false
 
+  export let kind: ButtonKind = 'link'
+  export let size: ButtonSize = 'large'
+  export let justify: 'left' | 'center' = 'left'
+  export let width: string | undefined = '100%'
+
   const client = getClient()
 
   const handlePriorityChanged = async (newPriority: IssuePriority | undefined) => {
@@ -44,9 +50,12 @@
 
 {#if value}
   {#if isEditable}
-    <Tooltip direction={'bottom'} label={tracker.string.SetPriority}>
+    <Tooltip label={tracker.string.SetPriority} fill>
       <PrioritySelector
-        kind={'icon'}
+        {kind}
+        {size}
+        {width}
+        {justify}
         {isEditable}
         {shouldShowLabel}
         priority={value.priority}
@@ -54,6 +63,6 @@
       />
     </Tooltip>
   {:else}
-    <PrioritySelector kind={'icon'} {isEditable} {shouldShowLabel} priority={value.priority} />
+    <PrioritySelector {kind} {size} {width} {justify} {isEditable} {shouldShowLabel} priority={value.priority} />
   {/if}
 {/if}

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

@@ -17,6 +17,7 @@
   import { Issue, IssueStatus, Team } from '@anticrm/tracker'
   import { getClient } from '@anticrm/presentation'
   import { Tooltip } from '@anticrm/ui'
+  import type { ButtonKind, ButtonSize } from '@anticrm/ui'
   import tracker from '../../plugin'
   import StatusSelector from '../StatusSelector.svelte'
 
@@ -26,6 +27,11 @@
   export let isEditable: boolean = true
   export let shouldShowLabel: boolean = false
 
+  export let kind: ButtonKind = 'link'
+  export let size: ButtonSize = 'large'
+  export let justify: 'left' | 'center' = 'left'
+  export let width: string | undefined = '100%'
+
   const client = getClient()
 
   const handleStatusChanged = async (newStatus: Ref<IssueStatus> | undefined) => {
@@ -45,9 +51,12 @@
 
 {#if value}
   {#if isEditable}
-    <Tooltip direction={'bottom'} label={tracker.string.SetStatus}>
+    <Tooltip label={tracker.string.SetStatus} fill>
       <StatusSelector
-        kind={'icon'}
+        {kind}
+        {size}
+        {width}
+        {justify}
         {isEditable}
         {shouldShowLabel}
         {statuses}
@@ -57,7 +66,10 @@
     </Tooltip>
   {:else}
     <StatusSelector
-      kind={'icon'}
+      {kind}
+      {size}
+      {width}
+      {justify}
       {isEditable}
       {shouldShowLabel}
       {statuses}