Fix Add Label (#2163)

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

packages/ui/src/components/Button.svelte

@@ -97,7 +97,8 @@
   class:highlight
   class:selected
   disabled={disabled || loading}
-  style={width ? 'width: ' + width : ''}
+  style:width
+  style:padding={shape === 'circle' && kind === 'link' ? '0 .5rem 0 .25rem' : '0 .5rem'}
   {title}
   type={kind === 'primary' ? 'submit' : 'button'}
   on:click|stopPropagation|preventDefault

plugins/tags-resources/src/components/TagReferencePresenter.svelte

@@ -13,12 +13,65 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { TagReference } from '@anticrm/tags'
+  import type { TagReference } from '@anticrm/tags'
+  import { getPlatformColor, IconClose, Icon } from '@anticrm/ui'
   import TagItem from './TagItem.svelte'
+  import { createEventDispatcher } from 'svelte'
 
   export let value: TagReference
+  export let isEditable: boolean = false
+  export let kind: 'labels' | 'skills' = 'skills'
+
+  const dispatch = createEventDispatcher()
 </script>
 
 {#if value}
-  <TagItem tag={value} />
+  {#if kind === 'skills'}
+    <TagItem tag={value} />
+  {:else if kind === 'labels'}
+    <div class="tag-container" style:padding-right={isEditable ? '0' : '0.5rem'}>
+      <div class="color" style:background-color={getPlatformColor(value.color ?? 0)} />
+      <span class="overflow-label ml-1-5 caption-color">{value.title}</span>
+      {#if isEditable}
+        <button class="btn-close" on:click|stopPropagation={() => dispatch('remove', value.tag)}>
+          <Icon icon={IconClose} size={'x-small'} />
+        </button>
+      {/if}
+    </div>
+  {/if}
 {/if}
+
+<style lang="scss">
+  .tag-container {
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding-left: 0.5rem;
+    height: 1.5rem;
+    min-width: 0;
+    min-height: 0;
+    border: 1px solid var(--divider-color);
+    border-radius: 0.75rem;
+
+    .color {
+      flex-shrink: 0;
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+    }
+    .btn-close {
+      flex-shrink: 0;
+      margin-left: 0.125rem;
+      padding: 0 0.25rem 0 0.125rem;
+      height: 1.75rem;
+      color: var(--content-color);
+      border-left: 1px solid transparent;
+
+      &:hover {
+        color: var(--caption-color);
+        border-left-color: var(--divider-color);
+      }
+    }
+  }
+</style>

plugins/tags-resources/src/components/TagsAttributeEditor.svelte

@@ -1,19 +1,21 @@
 <script lang="ts">
-  import { Doc } from '@anticrm/core'
-  import { createQuery } from '@anticrm/presentation'
-  import tags, { TagReference } from '@anticrm/tags'
-
-  import { getEventPopupPositionElement, Icon, IconAdd, showPopup } from '@anticrm/ui'
-
-  import Button from '@anticrm/ui/src/components/Button.svelte'
+  import { IntlString } from '@anticrm/platform'
+  import { Doc, Ref } from '@anticrm/core'
+  import { createQuery, getClient } from '@anticrm/presentation'
+  import type { TagReference, TagElement } from '@anticrm/tags'
+  import tags from '@anticrm/tags'
+  import { getEventPopupPositionElement, Icon, IconAdd, Label, showPopup } from '@anticrm/ui'
   import TagReferencePresenter from './TagReferencePresenter.svelte'
   import TagsEditorPopup from './TagsEditorPopup.svelte'
 
   export let object: Doc
+  export let label: IntlString
   export let isEditable: boolean = true
 
   let items: TagReference[] = []
   const query = createQuery()
+  const client = getClient()
+
   $: query.query(tags.class.TagReference, { attachedTo: object._id }, (result) => {
     items = result
   })
@@ -21,21 +23,63 @@
     if (!isEditable) return
     showPopup(TagsEditorPopup, { object }, getEventPopupPositionElement(evt))
   }
+  async function removeTag (tag: Ref<TagElement>): Promise<void> {
+    const tagRef = await client.findOne(tags.class.TagReference, { tag: tag })
+    if (tagRef) await client.remove(tagRef)
+  }
 </script>
 
 {#if items.length}
-  <div class="flex-row-center flex-wrap flex-gap-1 ml-4" on:click={tagsHandler}>
+  <div class="flex-row-center flex-wrap" on:click={tagsHandler}>
     {#each items as value}
-      <TagReferencePresenter {value} />
+      <div class="step-container">
+        <TagReferencePresenter {value} {isEditable} kind={'labels'} on:remove={(res) => removeTag(res.detail)} />
+      </div>
     {/each}
     {#if isEditable}
-      <Button kind="link" on:click={tagsHandler}>
-        <Icon icon={IconAdd} slot="content" size="small" />
-      </Button>
+      <div class="step-container">
+        <button class="tag-button" on:click={tagsHandler}>
+          <div class="icon"><Icon icon={IconAdd} size={'full'} /></div>
+          <span class="overflow-label label"><Label {label} /></span>
+        </button>
+      </div>
     {/if}
   </div>
 {:else if isEditable}
-  <Button kind="link" on:click={tagsHandler}>
-    <Icon icon={IconAdd} slot="content" size="small" />
-  </Button>
+  <button class="tag-button" style="width: min-content" on:click={tagsHandler}>
+    <div class="icon"><Icon icon={IconAdd} size={'full'} /></div>
+    <span class="overflow-label label"><Label {label} /></span>
+  </button>
 {/if}
+
+<style lang="scss">
+  .step-container {
+    margin: 0.125rem 0.125rem 0 0;
+  }
+  .tag-button {
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding: 0 0.5rem;
+    height: 1.5rem;
+    min-width: 0;
+    min-height: 0;
+    color: var(--content-color);
+    border: 1px solid transparent;
+    border-radius: 0.75rem;
+
+    .icon {
+      flex-shrink: 0;
+      width: 0.625rem;
+      height: 0.625rem;
+    }
+    .label {
+      margin-left: 0.125rem;
+    }
+    &:hover {
+      color: var(--caption-color);
+      border-color: var(--divider-color);
+    }
+  }
+</style>

plugins/tracker-assets/lang/en.json

@@ -156,7 +156,8 @@
     "DurMonths": "{months, plural, =0 {this month} =1 {1 month} other {# months}}",
     "DurYears": "{years, plural, =0 {this year} =1 {a year} other {# years}}",
     "StatusHistory": "State History",
-    "NewSubIssue": "Add sub-issue..."
+    "NewSubIssue": "Add sub-issue...",
+    "AddLabel": "Add label"
   },
   "status": {}
 }

plugins/tracker-assets/lang/ru.json

@@ -156,7 +156,8 @@
     "DurMonths": "{months, plural, =0 {меньше месяця} =1 {месяц} =2 {2 месяца} =3 {3 месяца} =4 {4 месяца} other {# месяцев}}",
     "DurYears": "{years, plural, =0 {меньше года} =1 {год} =2 {2 года} =3 {3 года} =4 {4 года} other {# лет}}",
     "StatusHistory": "История состояний",
-    "NewSubIssue": "Добавить под-задачу..."
+    "NewSubIssue": "Добавить под-задачу...",
+    "AddLabel": "Добавить метку"
   },
   "status": {}
 }

plugins/tracker-resources/src/components/issues/edit/ControlPanel.svelte

@@ -44,10 +44,10 @@
   </span>
   <AssigneeEditor value={issue} />
 
-  <span class="label">
+  <span class="labelTop">
     <Label label={tracker.string.Labels} />
   </span>
-  <Component is={tags.component.TagsAttributeEditor} props={{ object: issue }} />
+  <Component is={tags.component.TagsAttributeEditor} props={{ object: issue, label: tracker.string.AddLabel }} />
 
   <div class="divider" />
 
@@ -84,4 +84,8 @@
     height: 1px;
     background-color: var(--divider-color);
   }
+  .labelTop {
+    align-self: start;
+    margin-top: 0.385rem;
+  }
 </style>

plugins/tracker-resources/src/plugin.ts

@@ -173,7 +173,8 @@ export default mergeIds(trackerId, tracker, {
     DurDays: '' as IntlString,
     DurMonths: '' as IntlString,
     DurYears: '' as IntlString,
-    StatusHistory: '' as IntlString
+    StatusHistory: '' as IntlString,
+    AddLabel: '' as IntlString
   },
   component: {
     NopeComponent: '' as AnyComponent,