Tracker: Rewrite AssigneePresenter (#1568)

hcengineering · Apr 28, 2022 · d64c009 · d64c009
1 parent 155fca2
commit d64c009
Show file tree

Hide file tree

Showing 38 changed files with 528 additions and 392 deletions.
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/packages/kanban/package.json b/packages/kanban/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@anticrm/ui": "~0.6.0",
-    "svelte": "^3.46",
+    "svelte": "^3.47",
     "lexorank": "^1.0.4",
     "@anticrm/platform": "~0.6.5",
     "@anticrm/core": "~0.6.16",

diff --git a/packages/panel/package.json b/packages/panel/package.json
@@ -33,7 +33,7 @@
   "dependencies": {
     "@anticrm/ui": "~0.6.0",
     "@anticrm/text-editor": "~0.6.0",
-    "svelte": "^3.46",
+    "svelte": "^3.47",
     "@anticrm/platform": "~0.6.5",
     "@anticrm/core": "~0.6.16",
     "@anticrm/chunter": "~0.6.1",

diff --git a/packages/presentation/package.json b/packages/presentation/package.json
@@ -36,7 +36,7 @@
     "@anticrm/query": "~0.6.1",
     "@anticrm/ui": "~0.6.0",
     "@anticrm/view": "~0.6.0",
-    "svelte": "^3.46",
+    "svelte": "^3.47",
     "@anticrm/contact": "~0.6.5",
     "@anticrm/login": "~0.6.1",
     "@anticrm/image-cropper": "~0.6.0",

diff --git a/packages/text-editor/package.json b/packages/text-editor/package.json
@@ -31,7 +31,7 @@
     "@types/prosemirror-model": "~1.16.0"
   },
   "dependencies": {
-    "svelte": "^3.46",
+    "svelte": "^3.47",
     "@anticrm/presentation": "~0.6.2",
     "@anticrm/contact": "~0.6.5",
     "@anticrm/platform": "~0.6.5",

diff --git a/packages/theme/package.json b/packages/theme/package.json
@@ -30,7 +30,7 @@
     "typescript": "^4.3.5"
   },
   "dependencies": {
-    "svelte": "^3.46",
+    "svelte": "^3.47",
     "@anticrm/platform": "~0.6.5"
   }
 }
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -33,6 +33,6 @@
   "dependencies": {
     "@anticrm/platform": "~0.6.5",
     "@anticrm/theme": "~0.6.0",
-    "svelte": "^3.46"
+    "svelte": "^3.47"
   }
 }
diff --git a/plugins/activity-resources/package.json b/plugins/activity-resources/package.json
@@ -35,7 +35,7 @@
     "@anticrm/ui": "~0.6.0",
     "@anticrm/presentation": "~0.6.2",
     "@anticrm/activity": "~0.6.0",
-    "svelte": "^3.46",
+    "svelte": "^3.47",
     "@anticrm/chunter": "~0.6.1",
     "@anticrm/text-editor": "~0.6.0",
     "@anticrm/contact": "~0.6.5",

diff --git a/plugins/attachment-resources/package.json b/plugins/attachment-resources/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@anticrm/platform": "~0.6.5",
-    "svelte": "^3.46",
+    "svelte": "^3.47",
     "@anticrm/ui": "~0.6.0",
     "@anticrm/presentation": "~0.6.2",
     "@anticrm/attachment": "~0.6.1",

diff --git a/plugins/board-resources/package.json b/plugins/board-resources/package.json
@@ -52,7 +52,7 @@
     "@anticrm/view": "~0.6.0",
     "@anticrm/view-resources": "~0.6.0",
     "@anticrm/workbench": "~0.6.1",
-    "svelte": "^3.46",
+    "svelte": "^3.47",
     "@anticrm/kanban": "~0.6.0"
   }
 }
diff --git a/plugins/calendar-resources/package.json b/plugins/calendar-resources/package.json
@@ -36,7 +36,7 @@
     "@anticrm/ui": "~0.6.0",
     "@anticrm/presentation": "~0.6.2",
     "@anticrm/calendar": "~0.6.0",
-    "svelte": "^3.46",
+    "svelte": "^3.47",
     "@anticrm/text-editor": "~0.6.0",
     "@anticrm/contact": "~0.6.2",
     "@anticrm/contact-resources": "~0.6.0",

diff --git a/plugins/chunter-resources/package.json b/plugins/chunter-resources/package.json
@@ -37,7 +37,7 @@
     "@anticrm/presentation": "~0.6.2",
     "@anticrm/chunter": "~0.6.1",
     "@anticrm/login": "~0.6.1",
-    "svelte": "^3.46",
+    "svelte": "^3.47",
     "@anticrm/text-editor": "~0.6.0",
     "@anticrm/contact": "~0.6.5",
     "@anticrm/contact-resources": "~0.6.0",

diff --git a/plugins/contact-resources/package.json b/plugins/contact-resources/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@anticrm/platform": "~0.6.5",
-    "svelte": "^3.46",
+    "svelte": "^3.47",
     "@anticrm/contact": "~0.6.5",
     "@anticrm/ui": "~0.6.0",
     "@anticrm/setting": "~0.6.0",

diff --git a/plugins/contact-resources/src/components/PersonContent.svelte b/plugins/contact-resources/src/components/PersonContent.svelte
@@ -15,35 +15,114 @@
 <script lang="ts">
   import { formatName, Person } from '@anticrm/contact'
   import { Hierarchy } from '@anticrm/core'
+  import { IntlString } from '@anticrm/platform'
   import { Avatar } from '@anticrm/presentation'
-  import { getPanelURI } from '@anticrm/ui'
+  import { getPanelURI, Label } from '@anticrm/ui'
   import view from '@anticrm/view'
 
   export let value: Person | undefined
   export let inline: boolean = false
+  export let isInteractive = true
   export let shouldShowName = true
   export let shouldShowPlaceholder = false
+  export let defaultName: IntlString | undefined = undefined
+  export let avatarSize: 'inline' | 'tiny' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' = 'x-small'
+  export let onEdit: ((event: MouseEvent) => void) | undefined = undefined
 
-  const avatarSize = 'x-small'
+  $: element = getElement(value, onEdit, shouldShowPlaceholder, isInteractive)
+
+  const getElement = (
+    person: Person | undefined,
+    onEdit: Function | undefined,
+    shouldShowEmpty: boolean,
+    isInteractive: boolean
+  ) => {
+    if (!person && !shouldShowEmpty) {
+      return undefined
+    }
+
+    if (!isInteractive) {
+      return 'div'
+    }
+
+    if (person && !onEdit) {
+      return 'a'
+    }
+
+    return 'div'
+  }
 </script>
 
-{#if value || shouldShowPlaceholder}
-  {#if value}
-    <a
-      class="flex-presenter"
-      class:inline-presenter={inline}
-      href="#{getPanelURI(view.component.EditDoc, value._id, Hierarchy.mixinOrClass(value), 'content')}"
-    >
-      <div class="icon">
-        <Avatar size={avatarSize} avatar={value?.avatar} />
-      </div>
-      {#if shouldShowName}
-        <span class="label">{formatName(value.name)}</span>
-      {/if}
-    </a>
-  {:else}
-    <div class="icon">
-      <Avatar size={avatarSize} avatar={undefined} />
+<svelte:element
+  this={element}
+  class="contentPresenter"
+  class:inline-presenter={inline}
+  class:mContentPresenterNotInteractive={!isInteractive}
+  on:click={onEdit}
+  href={!isInteractive || onEdit || !value
+    ? undefined
+    : `#${getPanelURI(view.component.EditDoc, value._id, Hierarchy.mixinOrClass(value), 'content')}`}
+>
+  <div class="eContentPresenterIcon">
+    <Avatar size={avatarSize} avatar={value?.avatar} />
+  </div>
+  {#if value && shouldShowName}
+    <span class="eContentPresenterLabel">{formatName(value.name)}</span>
+  {/if}
+  {#if !value && shouldShowName && defaultName}
+    <div class="eContentPresenterLabel">
+      <Label label={defaultName} />
     </div>
   {/if}
-{/if}
+</svelte:element>
+
+<style lang="scss">
+  .contentPresenter {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    cursor: pointer;
+
+    &.mContentPresenterNotInteractive {
+      cursor: default;
+
+      &:hover {
+        .eContentPresenterIcon {
+          color: var(--theme-content-dark-color);
+        }
+        .eContentPresenterLabel {
+          text-decoration: none;
+          color: var(--theme-content-accent-color);
+        }
+      }
+    }
+    .eContentPresenterIcon {
+      margin-right: 0.5rem;
+      color: var(--theme-content-dark-color);
+    }
+    .eContentPresenterLabel {
+      min-width: 0;
+      font-weight: 500;
+      text-align: left;
+      color: var(--theme-content-accent-color);
+
+      overflow: hidden;
+      visibility: visible;
+      display: -webkit-box;
+      /* autoprefixer: ignore next */
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      user-select: none;
+    }
+    &:hover {
+      .eContentPresenterIcon {
+        color: var(--theme-caption-color);
+      }
+      .eContentPresenterLabel {
+        text-decoration: underline;
+        color: var(--theme-caption-color);
+      }
+    }
+  }
+</style>
diff --git a/plugins/contact-resources/src/components/PersonPresenter.svelte b/plugins/contact-resources/src/components/PersonPresenter.svelte
@@ -1,6 +1,5 @@
 <!--
-// Copyright © 2020, 2021 Anticrm Platform Contributors.
-// Copyright © 2021 Hardcore Engineering Inc.
+// Copyright © 2022 Hardcore Engineering Inc.
 // 
 // Licensed under the Eclipse Public License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License. You may
@@ -20,10 +19,14 @@
   import PersonContent from './PersonContent.svelte'
 
   export let value: Person
-  export let inline: boolean = false
+  export let inline = false
+  export let isInteractive = true
   export let shouldShowName = true
   export let shouldShowPlaceholder = false
+  export let defaultName: IntlString | undefined = undefined
   export let tooltipLabels: { personLabel: IntlString; placeholderLabel?: IntlString } | undefined = undefined
+  export let avatarSize: 'inline' | 'tiny' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' = 'x-small'
+  export let onEdit: ((event: MouseEvent) => void) | undefined = undefined
 </script>
 
 {#if value || shouldShowPlaceholder}
@@ -32,9 +35,27 @@
       label={value ? tooltipLabels.personLabel : tooltipLabels.placeholderLabel}
       props={{ value: formatName(value?.name) }}
     >
-      <PersonContent {inline} {value} {shouldShowName} {shouldShowPlaceholder} />
+      <PersonContent
+        {value}
+        {inline}
+        {onEdit}
+        {avatarSize}
+        {defaultName}
+        {isInteractive}
+        {shouldShowName}
+        {shouldShowPlaceholder}
+      />
     </Tooltip>
   {:else}
-    <PersonContent {inline} {value} {shouldShowName} {shouldShowPlaceholder} />
+    <PersonContent
+      {value}
+      {inline}
+      {onEdit}
+      {avatarSize}
+      {defaultName}
+      {isInteractive}
+      {shouldShowName}
+      {shouldShowPlaceholder}
+    />
   {/if}
 {/if}
diff --git a/plugins/devmodel-resources/package.json b/plugins/devmodel-resources/package.json
@@ -34,7 +34,7 @@
     "@anticrm/ui": "~0.6.0",
     "@anticrm/presentation": "~0.6.2",
     "@anticrm/activity": "~0.6.0",
-    "svelte": "^3.46",
+    "svelte": "^3.47",
     "@anticrm/chunter": "~0.6.1",
     "@anticrm/text-editor": "~0.6.0",
     "@anticrm/contact": "~0.6.5",

diff --git a/plugins/gmail-resources/package.json b/plugins/gmail-resources/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@anticrm/platform": "~0.6.5",
-    "svelte": "^3.46",
+    "svelte": "^3.47",
     "@anticrm/gmail": "~0.6.0",
     "@anticrm/ui": "~0.6.0",
     "@anticrm/presentation": "~0.6.2",

diff --git a/plugins/image-cropper-resources/package.json b/plugins/image-cropper-resources/package.json
@@ -31,7 +31,7 @@
     "typescript": "^4.3.5"
   },
   "dependencies": {
-    "svelte": "^3.46",
+    "svelte": "^3.47",
     "@anticrm/platform": "~0.6.5",
     "cropperjs": "~1.5.12",
     "smartcrop": "~2.0.5"

diff --git a/plugins/inventory-resources/package.json b/plugins/inventory-resources/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@anticrm/platform": "~0.6.5",
-    "svelte": "^3.46",
+    "svelte": "^3.47",
     "@anticrm/inventory": "~0.6.0",
     "@anticrm/ui": "~0.6.0",
     "@anticrm/panel": "~0.6.0",

diff --git a/plugins/lead-resources/package.json b/plugins/lead-resources/package.json
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@anticrm/platform": "~0.6.5",
-    "svelte": "^3.46",
+    "svelte": "^3.47",
     "@anticrm/lead": "~0.6.0",
     "@anticrm/ui": "~0.6.0",
     "@anticrm/presentation": "~0.6.2",

diff --git a/plugins/login-resources/package.json b/plugins/login-resources/package.json
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@anticrm/platform": "~0.6.5",
-    "svelte": "^3.46",
+    "svelte": "^3.47",
     "@anticrm/login": "~0.6.1",
     "@anticrm/ui": "~0.6.0",
     "@anticrm/workbench": "~0.6.1"

diff --git a/plugins/notification-resources/package.json b/plugins/notification-resources/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@anticrm/platform": "~0.6.5",
-    "svelte": "^3.46",
+    "svelte": "^3.47",
     "@anticrm/notification": "~0.6.0",
     "@anticrm/ui": "~0.6.0",
     "@anticrm/presentation": "~0.6.2",

diff --git a/plugins/recruit-resources/package.json b/plugins/recruit-resources/package.json
@@ -33,7 +33,7 @@
   "dependencies": {
     "@anticrm/platform": "~0.6.5",
     "@anticrm/core": "~0.6.16",
-    "svelte": "^3.46",
+    "svelte": "^3.47",
     "@anticrm/recruit": "~0.6.3",
     "@anticrm/ui": "~0.6.0",
     "@anticrm/presentation": "~0.6.2",

diff --git a/plugins/setting-resources/package.json b/plugins/setting-resources/package.json
@@ -33,7 +33,7 @@
   "dependencies": {
     "@anticrm/platform": "~0.6.5",
     "@anticrm/core": "~0.6.16",
-    "svelte": "^3.46",
+    "svelte": "^3.47",
     "@anticrm/setting": "~0.6.0",
     "@anticrm/contact": "~0.6.5",
     "@anticrm/attachment": "~0.6.1",

diff --git a/plugins/tags-resources/package.json b/plugins/tags-resources/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@anticrm/platform": "~0.6.5",
-    "svelte": "^3.46",
+    "svelte": "^3.47",
     "@anticrm/tags": "~0.6.0",
     "@anticrm/ui": "~0.6.0",
     "@anticrm/presentation": "~0.6.2",

diff --git a/plugins/task-resources/package.json b/plugins/task-resources/package.json
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@anticrm/platform": "~0.6.5",
-    "svelte": "^3.46",
+    "svelte": "^3.47",
     "@anticrm/task": "~0.6.0",
     "@anticrm/ui": "~0.6.0",
     "@anticrm/presentation": "~0.6.2",