Custom ref attributes (#1695)

Signed-off-by: Denis Bykhov <80476319+BykhovDenis@users.noreply.github.com>

plugins/task-resources/src/components/TaskHeader.svelte

@@ -17,7 +17,6 @@
   import contact from '@anticrm/contact'
   import core, { Class, Doc, Mixin, Ref, RefTo } from '@anticrm/core'
   import { AttributesBar, getClient, KeyedAttribute, UserBox } from '@anticrm/presentation'
-  import { Label } from '@anticrm/ui'
   import { Task } from '@anticrm/task'
   import task from '../plugin'
   import { DocAttributeBar } from '@anticrm/view-resources'
@@ -78,38 +77,10 @@
     <AttributesBar {object} keys={['doneState', 'state']} showHeader={false} />
   </div>
 {:else}
-  <div class="task-attr-prop mb-4">
-    <span class="fs-bold"><Label label={task.string.TaskAssignee} /></span>
-    <UserBox
-      _class={getAssigneeClass(object)}
-      label={assigneeTitle}
-      placeholder={assigneeTitle}
-      kind={'link'}
-      size={'large'}
-      bind:value={object.assignee}
-      on:change={change}
-      allowDeselect
-      titleDeselect={task.string.TaskUnAssign}
-    />
-    <div style:grid-column={'1/3'}>
-      <AttributesBar {object} keys={['doneState', 'state']} vertical />
-    </div>
-  </div>
-  <DocAttributeBar {object} ignoreKeys={[...ignoreKeys, ...taskKeys]} {mixins} on:update />
+  <DocAttributeBar {object} {ignoreKeys} {mixins} on:update />
 {/if}
 
 <style lang="scss">
-  .task-attr-prop {
-    display: grid;
-    grid-template-columns: 1fr 1.5fr;
-    grid-template-rows: minmax(2rem, auto);
-    grid-auto-flow: row;
-    justify-content: start;
-    align-items: center;
-    gap: 1rem;
-    width: 100%;
-    height: min-content;
-  }
   .task-attr-header {
     display: flex;
     justify-content: space-between;

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

@@ -14,7 +14,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Ref } from '@anticrm/core'
+  import { Ref, Space } from '@anticrm/core'
   import task, { State } from '@anticrm/task'
   import { createQuery } from '@anticrm/presentation'
   import type { ButtonKind, ButtonSize } from '@anticrm/ui'
@@ -23,6 +23,7 @@
   import StatesPopup from './StatesPopup.svelte'
 
   export let value: Ref<State>
+  export let space: Ref<Space>
   export let onChange: (value: any) => void
   export let kind: ButtonKind = 'no-border'
   export let size: ButtonSize = 'small'
@@ -41,26 +42,26 @@
   )
 </script>
 
-{#if state}
-  <Button
-    width="min-content"
-    {kind}
-    {size}
-    on:click={(ev) => {
-      if (!opened) {
-        opened = true
-        showPopup(StatesPopup, { space: state.space }, eventToHTMLElement(ev), (result) => {
-          if (result && result._id !== value) {
-            value = result._id
-            onChange(value)
-          }
-          opened = false
-        })
-      }
-    }}
-  >
-    <svelte:fragment slot="content">
+<Button
+  width="min-content"
+  {kind}
+  {size}
+  on:click={(ev) => {
+    if (!opened) {
+      opened = true
+      showPopup(StatesPopup, { space }, eventToHTMLElement(ev), (result) => {
+        if (result && result._id !== value) {
+          value = result._id
+          onChange(value)
+        }
+        opened = false
+      })
+    }
+  }}
+>
+  <svelte:fragment slot="content">
+    {#if state}
       <StatePresenter value={state} />
-    </svelte:fragment>
-  </Button>
-{/if}
+    {/if}
+  </svelte:fragment>
+</Button>

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

@@ -23,7 +23,7 @@
 {#if value}
   <div class="flex-row-center">
     <div class="state-container" style="background-color: {getPlatformColor(value.color)}" />
-    <span class="overflow-label">{value.title ?? ''}</span>
+    <span class="overflow-label">{value.title}</span>
   </div>
 {/if}