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

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
2024-12-22 11:01:54 +03:00 · 2022-05-09 14:37:34 +03:00 · 2022-05-09 14:37:34 +03:00 · b8e942a145
commit b8e942a145
parent 9266a61c98
16 changed files with 239 additions and 289 deletions
--- a/packages/presentation/src/components/AttributeBarEditor.svelte
+++ b/packages/presentation/src/components/AttributeBarEditor.svelte
@ -133,6 +133,8 @@
            placeholder={attribute?.label}
            kind={'link'}
            size={'large'}
+            width={'100%'}
+            justify={'left'}
            type={attribute?.type}
            {maxWidth}
            value={getAttribute(client, object, { key: attributeKey, attr: attribute })}
--- a/packages/presentation/src/components/AttributesBar.svelte
+++ b/packages/presentation/src/components/AttributesBar.svelte
@ -69,7 +69,6 @@
    &.vertical {
      display: grid;
      grid-template-columns: 1fr 1.5fr;
-      grid-template-rows: minmax(2rem, auto);
      grid-auto-flow: row;
      justify-content: start;
      align-items: center;
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@ -427,7 +427,8 @@

 // THead background-color in Tooltip and Popups
 .popup-tooltip .antiTable .scroller-thead,
-.popup .antiTable .scroller-thead { background-color: var(--accent-bg-color); }
+.popup .antiTable .scroller-thead,
+.antiDialogs .antiTable .scroller-thead { background-color: var(--accent-bg-color); }

 // Hide row menu in Tooltip
 .popup-tooltip .antiTable .antiTable-body__row:hover .antiTable-cells__firstCell .antiTable-cells__firstCell-menuRow { visibility: hidden; }
--- a/packages/ui/src/components/calendar/DateRangePresenter.svelte
+++ b/packages/ui/src/components/calendar/DateRangePresenter.svelte
@ -22,7 +22,7 @@
  import DPCalendarOver from './icons/DPCalendarOver.svelte'
  import DateRangePopup from './DateRangePopup.svelte'

-  export let value: number | null | undefined
+  export let value: number | null | undefined = null
  export let withTime: boolean = false
  export let editable: boolean = false
  export let icon: 'normal' | 'warning' | 'overdue' = 'normal'
@ -363,10 +363,10 @@
    <div class="btn-icon {icon}">
      <Icon icon={icon === 'overdue' ? DPCalendarOver : DPCalendar} size={'full'} />
    </div>
-    {#if value !== null && value !== undefined}
+    {#if value !== undefined && value !== null && value.toString() !== ''}
      {#if labelOver !== undefined}
        <Label label={labelOver} />
-      {:else}
+      {:else if value}
        {new Date(value).getDate()}
        {getMonthName(new Date(value), 'short')}
        {#if new Date(value).getFullYear() !== today.getFullYear()}
--- a/plugins/lead-resources/src/components/CreateCustomer.svelte
+++ b/plugins/lead-resources/src/components/CreateCustomer.svelte
@ -240,16 +240,3 @@
    {/if}
  </svelte:fragment>
 </Card>
-
-<style lang="scss">
-  .resume {
-    padding: 0.5rem 0.75rem;
-    background: var(--accent-bg-color);
-    border: 1px dashed var(--divider-color);
-    border-radius: 0.5rem;
-
-    &.solid {
-      border-style: solid;
-    }
-  }
-</style>
--- a/plugins/recruit-resources/src/components/YesNo.svelte
+++ b/plugins/recruit-resources/src/components/YesNo.svelte
@ -14,28 +14,36 @@
 -->
 <script lang="ts">
  import type { IntlString } from '@anticrm/platform'
-  import type { TooltipAlignment } from '@anticrm/ui'
-  import { Label, Tooltip } from '@anticrm/ui'
+  import { Label, Tooltip, Button } from '@anticrm/ui'
+  import type { TooltipAlignment, ButtonKind, ButtonSize } from '@anticrm/ui'

  export let label: IntlString
  export let tooltip: IntlString
  export let value: boolean | undefined
  export let disabled: boolean = false
  export let labelDirection: TooltipAlignment | undefined = undefined
+
+  export let kind: ButtonKind = 'no-border'
+  export let size: ButtonSize = 'small'
+  export let justify: 'left' | 'center' = 'center'
+  export let width: string | undefined = 'fit-content'
 </script>

 <Tooltip direction={labelDirection} label={tooltip}>
-  <button
-    class="yesno-container"
+  <Button
+    {kind}
+    {size}
+    {justify}
+    {width}
    {disabled}
-    class:yes={value === true}
-    class:no={value === false}
    on:click={() => {
      if (value === true) value = false
      else if (value === false) value = undefined
      else value = true
    }}
  >
+    <svelte:fragment slot="content">
+      <div class="flex-row-center flex-no-wrap">
        <span class="overflow-label">
          <Label {label} />
        </span>
@ -57,54 +65,24 @@
            {/if}
          </svg>
        </div>
-  </button>
+      </div>
+    </svelte:fragment>
+  </Button>
 </Tooltip>

 <style lang="scss">
-  .yesno-container {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    padding: 0 0.25rem 0 0.5rem;
-    min-width: 1.5rem;
-    height: 1.5rem;
-    font-weight: 400;
-    line-height: 1.5rem;
-    white-space: nowrap;
-    color: var(--accent-color);
-    background-color: var(--noborder-bg-color);
-    border: 1px solid transparent;
-    border-radius: 0.25rem;
-    box-shadow: var(--button-shadow);
-    transition-property: border, background-color, color, box-shadow;
-    transition-duration: 0.15s;
-
  .btn-icon {
    color: var(--content-color);
    transition: color 0.15s;
    pointer-events: none;
-    }
    &:hover {
      color: var(--caption-color);
-      background-color: var(--noborder-bg-hover);
-      transition-duration: 0;
+    }
+    &:disabled:hover {
+      color: var(--content-color);
+    }
+  }

-      .btn-icon {
-        color: var(--caption-color);
-      }
-    }
-    &:disabled {
-      color: var(--content-color);
-      background-color: #30323655;
-
-      &:hover {
-        color: var(--content-color);
-        .btn-icon {
-          color: var(--content-color);
-        }
-      }
-    }
-  }
  .yesno-svg {
    width: 1rem;
    height: 1rem;
--- a/plugins/recruit-resources/src/components/review/CreateReviewCategory.svelte
+++ b/plugins/recruit-resources/src/components/review/CreateReviewCategory.svelte
@ -15,7 +15,7 @@
 <script lang="ts">
  import core from '@anticrm/core'
  import { getClient, SpaceCreateCard } from '@anticrm/presentation'
-  import { EditBox, Grid } from '@anticrm/ui'
+  import { EditBox } from '@anticrm/ui'
  import { createEventDispatcher } from 'svelte'
  import recruit from '../../plugin'
  import Review from '../icons/Review.svelte'
@ -50,7 +50,6 @@
    dispatch('close')
  }}
 >
-  <Grid column={1} rowGap={1.5}>
  <EditBox
    label={recruit.string.ReviewCategoryName}
    bind:value={name}
@ -59,5 +58,4 @@
    maxWidth={'16rem'}
    focus
  />
-  </Grid>
 </SpaceCreateCard>
--- a/plugins/task-resources/src/components/todos/CreateTodo.svelte
+++ b/plugins/task-resources/src/components/todos/CreateTodo.svelte
@ -27,7 +27,7 @@

  let name: string
  const done = false
-  let dueTo: number
+  let dueTo: number | null = null

  $: _space = space

--- a/plugins/tracker-assets/lang/ru.json
+++ b/plugins/tracker-assets/lang/ru.json
@ -46,7 +46,7 @@

    "Title": "Заголовок",
    "Description": "",
-    "Status": "",
+    "Status": "Статус",
    "Number": "Number",
    "Assignee": "Исполнитель",
    "AssignTo": "Назначить...",
--- a/plugins/tracker-resources/src/components/PrioritySelector.svelte
+++ b/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"
+  {justify}
+  {width}
+  {size}
+  {kind}
+  disabled={!isEditable}
  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>
--- a/plugins/tracker-resources/src/components/StatusSelector.svelte
+++ b/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,12 +49,13 @@
  }
 </script>

-{#if kind === 'button'}
 <Button
  icon={selectedStatusIcon}
-    width="min-content"
-    size="small"
-    kind="no-border"
+  {justify}
+  {width}
+  {size}
+  {kind}
+  disabled={!isEditable}
  on:click={handleStatusEditorOpened}
 >
  <svelte:fragment slot="content">
@ -58,28 +64,3 @@
    {/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}
-    {#if selectedStatusLabel}
-      <div class="label nowrap ml-2">{selectedStatusLabel}</div>
-    {/if}
-  </div>
-{/if}
-
-<style lang="scss">
-  .presenter {
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-  }
-
-  .statusIcon {
-    width: 1rem;
-    height: 1rem;
-  }
-</style>
--- a/plugins/tracker-resources/src/components/issues/EditIssue.svelte
+++ b/plugins/tracker-resources/src/components/issues/EditIssue.svelte
@ -169,23 +169,18 @@

    <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">
+        <div class="content">
+          <span class="label">
            <Label label={tracker.string.Status} />
          </span>
          <StatusEditor value={issue} statuses={issueStatuses} currentSpace={currentTeam._id} shouldShowLabel />
-          </div>

-          <div class="flex-row-center mb-4">
-            <span class="label w-24">
+          <span class="label">
            <Label label={tracker.string.Priority} />
          </span>
          <PriorityEditor value={issue} currentSpace={currentTeam._id} shouldShowLabel />
-          </div>

-          <div class="flex-row-center mb-4">
-            <span class="label w-24">
+          <span class="label">
            <Label label={tracker.string.Assignee} />
          </span>
          <UserBox
@ -195,53 +190,46 @@
            bind:value={issue.assignee}
            allowDeselect
            titleDeselect={tracker.string.Unassigned}
-              size="large"
-              kind="link"
+            size={'large'}
+            kind={'link'}
+            width={'100%'}
+            justify={'left'}
            on:change={() => change('assignee', issue?.assignee)}
          />
-          </div>

-          <div class="flex-row-center mb-4">
-            <span class="label w-24">
+          <span class="label">
            <Label label={tracker.string.Labels} />
          </span>
          <Button
            label={tracker.string.Labels}
            icon={tracker.icon.Labels}
-              width="max-content"
-              size="large"
-              kind="link"
+            size={'large'}
+            kind={'link'}
+            width={'100%'}
+            justify={'left'}
          />
-          </div>

-          <div class="devider" />
+          <div class="divider" />

-          <div class="flex-row-center mb-4">
-            <span class="label w-24">
+          <span class="label">
            <Label label={tracker.string.Project} />
          </span>
          <Button
            label={tracker.string.Project}
            icon={tracker.icon.Projects}
-              width="fit-content"
-              size="large"
-              kind="link"
+            size={'large'}
+            kind={'link'}
+            width={'100%'}
+            justify={'left'}
          />
-          </div>

          {#if issue.dueDate !== null}
-            <div class="devider" />
+            <div class="divider" />

-            <div class="flex-row-center mb-4">
-              <span class="label w-24">
+            <span class="label">
              <Label label={tracker.string.DueDate} />
            </span>
-              <DatePresenter
-                bind:value={issue.dueDate}
-                editable
-                on:change={({ detail }) => change('dueDate', detail)}
-              />
-            </div>
+            <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>
--- a/plugins/tracker-resources/src/components/issues/PriorityEditor.svelte
+++ b/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}
--- a/plugins/tracker-resources/src/components/issues/StatusEditor.svelte
+++ b/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}
--- a/plugins/view-resources/src/components/ActionsPopup.svelte
+++ b/plugins/view-resources/src/components/ActionsPopup.svelte
@ -229,13 +229,13 @@
                  {#if i !== 0}
                    <div class="ml-2 mr-2">or</div>
                  {/if}
-                  <div class="flex-row-center" class:ml-2={i !== 0}>
+                  <div class="flex-row-center">
                    {#each formatKey(key) as k, jj}
                      {#if jj !== 0}
                        <div class="ml-1 mr-1">then</div>
                      {/if}
                      {#each k as kk, j}
-                        <div class="flex-center text-sm key-box" class:ml-2={j !== 0}>
+                        <div class="flex-center text-sm key-box">
                          {kk}
                        </div>
                      {/each}
@ -253,10 +253,15 @@

 <style lang="scss">
  .key-box {
-    background-color: var(--divider-color);
+    background-color: var(--button-bg-color);
    color: var(--caption-color);
    min-width: 1.5rem;
-    padding: 0.25rem;
+    padding: 0 0.5rem;
+    border: 1px solid var(--button-border-color);
+    border-radius: 0.25rem;
+  }
+  .key-box + .key-box {
+    margin-left: 0.5rem;
  }
  .item-box {
    display: inline-block;
--- a/plugins/view-resources/src/components/BooleanEditor.svelte
+++ b/plugins/view-resources/src/components/BooleanEditor.svelte
@ -15,34 +15,50 @@
 -->
 <script lang="ts">
  // import type { IntlString } from '@anticrm/platform'
-  import { Label } from '@anticrm/ui'
+  import { Label, Button } from '@anticrm/ui'
+  import type { ButtonKind, ButtonSize } from '@anticrm/ui'
  import { getBooleanLabel } from '../utils'

  export let value: any
  export let maxWidth: string | undefined = undefined
  export let withoutUndefined: boolean = false
  export let onChange: (value: any) => void
+
+  export let kind: ButtonKind = 'no-border'
+  export let size: ButtonSize = 'small'
+  export let justify: 'left' | 'center' = 'center'
+  export let width: string | undefined = 'fit-content'
 </script>

-<div
-  class="flex-row-center yesno-container"
-  class:yes={value === true}
-  class:no={value === false}
-  class:unknown={value === undefined}
-  style={maxWidth ? `max-width: ${maxWidth};` : ''}
+<Button
+  {kind}
+  {size}
+  {justify}
+  {width}
  on:click={() => {
    if (value === true) value = false
    else if (value === false && !withoutUndefined) value = undefined
    else value = true
    onChange(value)
  }}
+>
+  <svelte:fragment slot="content">
+    <div
+      class="flex-row-center yesno-container"
+      class:yes={value === true}
+      class:no={value === false}
+      class:unknown={value === undefined}
+      style={maxWidth ? `max-width: ${maxWidth};` : ''}
    >
      <svg class="yesno-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
        <circle class:yes={value === true} class:no={value === false} cx="8" cy="8" r="6" />
        {#if value === true}
          <polygon fill="#fff" points="7.4,10.9 4.9,8.4 5.7,7.6 7.3,9.1 10.2,5.6 11.1,6.4 " />
        {:else if value === false}
-      <polygon fill="#fff" points="10.7,6 10,5.3 8,7.3 6,5.3 5.3,6 7.3,8 5.3,10 6,10.7 8,8.7 10,10.7 10.7,10 8.7,8 " />
+          <polygon
+            fill="#fff"
+            points="10.7,6 10,5.3 8,7.3 6,5.3 5.3,6 7.3,8 5.3,10 6,10.7 8,8.7 10,10.7 10.7,10 8.7,8 "
+          />
        {:else}
          <path
            fill="#fff"
@ -52,6 +68,8 @@
      </svg>
      <span><Label label={getBooleanLabel(value)} /></span>
    </div>
+  </svelte:fragment>
+</Button>

 <style lang="scss">
  .yesno-container {