Update dialogs layout (#1385)

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

plugins/task-resources/src/components/kanban/KanbanTemplateSelector.svelte

@@ -41,4 +41,4 @@
   }
 </script>
 
-<DropdownLabels {items} bind:selected={selectedItem} label={plugin.string.States} />
+<DropdownLabels {items} icon={task.icon.ManageStatuses} bind:selected={selectedItem} label={plugin.string.States} />

plugins/task-resources/src/components/state/StateEditor.svelte

@@ -18,7 +18,7 @@
   import { Ref } from '@anticrm/core'
   import task, { State } from '@anticrm/task'
   import { createQuery } from '@anticrm/presentation'
-  import { showPopup } from '@anticrm/ui'
+  import { showPopup, Button, SelectPopup } from '@anticrm/ui'
   import StatePresenter from './StatePresenter.svelte'
   import StatesPopup from './StatesPopup.svelte'
 
@@ -35,19 +35,30 @@
 </script>
 
 {#if state}
-  <div class="flex-row-center cursor-pointer" bind:this={container}
-    on:click|preventDefault={() => {
+  <Button
+    width="min-content"
+    size="small"
+    kind="no-border"
+    on:click={(ev) => {
       if (!opened) {
         opened = true
-        showPopup(StatesPopup, { space: state.space }, container, (result) => {
-          if (result && result._id !== value) {
-            value = result._id
-            onChange(value)
-           }
-          opened = false
-        })
+        showPopup(
+          StatesPopup,
+          { space: state.space },
+          ev.currentTarget,
+          (result) => {
+            if (result && result._id !== value) {
+              value = result._id
+              onChange(value)
+            }
+            opened = false
+          }
+        )
       }
-    }} >
-    <StatePresenter value={state} />
-  </div>
+    }}
+  >
+    <svelte:fragment slot="content">
+      <StatePresenter value={state} />
+    </svelte:fragment>
+  </Button>
 {/if}

plugins/task-resources/src/components/state/StatePresenter.svelte

@@ -19,22 +19,19 @@
 
   export let value: State
 </script>
+
 {#if value}
-  <div class="overflow-label state-container" style="background-color: {getPlatformColor(value.color)}">
-    {value.title}
+  <div class="flex-row-center">
+    <div class="state-container" style="background-color: {getPlatformColor(value.color)}" />
+    <span class="overflow-label">{value.title ?? ''}</span>
   </div>
 {/if}
 
 <style lang="scss">
   .state-container {
-    padding: 0.25rem 0.5rem;
-    width: 6.25rem;
-    max-width: 6.25rem;
-    text-transform: uppercase;
-    text-align: center;
-    letter-spacing: 0.5px;
-    font-size: 0.625rem;
-    color: #fff;
+    margin-right: .5rem;
+    width: .875rem;
+    height: .875rem;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 0.25rem;
   }