TSK-845 Превью на длинные строки

packages/platform/src/ident.ts

@@ -32,12 +32,12 @@ export interface _IdInfo {
  */
 export function _parseId (id: Id): _IdInfo {
   const path = id.split(_ID_SEPARATOR)
-  if (path.length !== 3) {
+  if (path.length < 3) {
     throw new PlatformError(new Status(Severity.ERROR, platform.status.InvalidId, { id }))
   }
   return {
     component: path[0] as Plugin,
     kind: path[1],
-    name: path[2]
+    name: path.slice(2).join(_ID_SEPARATOR)
   }
 }

plugins/contact-resources/src/components/EmployeeAccountPresenter.svelte

@@ -16,8 +16,9 @@
 <script lang="ts">
   import { Employee, EmployeeAccount, getName } from '@hcengineering/contact'
   import { Account } from '@hcengineering/core'
+  import { getEmbeddedLabel } from '@hcengineering/platform'
   import { Avatar, createQuery } from '@hcengineering/presentation'
-  import { showPopup } from '@hcengineering/ui'
+  import { showPopup, tooltip } from '@hcengineering/ui'
   import { EditDoc } from '@hcengineering/view-resources'
   import contact from '../plugin'
 
@@ -39,7 +40,12 @@
 
 {#if value}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class="flex-row-center" class:user-container={employee !== undefined} on:click={onClick}>
+  <div
+    class="flex-row-center"
+    class:user-container={employee !== undefined}
+    on:click={onClick}
+    use:tooltip={{ label: getEmbeddedLabel(employee ? getName(employee) : value.email) }}
+  >
     {#if employee}
       <Avatar size={'x-small'} avatar={employee.avatar} />
       <div class="overflow-label user">{getName(employee)}</div>

plugins/contact-resources/src/components/OrganizationPresenter.svelte

@@ -15,6 +15,8 @@
 -->
 <script lang="ts">
   import { Organization } from '@hcengineering/contact'
+  import { getEmbeddedLabel } from '@hcengineering/platform'
+  import { tooltip } from '@hcengineering/ui'
   import { DocNavLink } from '@hcengineering/view-resources'
   import Company from './icons/Company.svelte'
 
@@ -24,7 +26,7 @@
 
 {#if value}
   <DocNavLink {inline} object={value}>
-    <div class="flex-presenter">
+    <div class="flex-presenter" use:tooltip={{ label: getEmbeddedLabel(value.name) }}>
       <div class="icon circle"><Company size={'small'} /></div>
       <span class="label">{value.name}</span>
     </div>

plugins/view-resources/src/components/EnumPresenter.svelte

@@ -14,8 +14,9 @@
 -->
 <script lang="ts">
   import core, { EnumOf } from '@hcengineering/core'
+  import { getEmbeddedLabel } from '@hcengineering/platform'
   import { createQuery } from '@hcengineering/presentation'
-  import { DropdownLabels, DropdownTextItem } from '@hcengineering/ui'
+  import { DropdownLabels, DropdownTextItem, tooltip } from '@hcengineering/ui'
   import StringPresenter from './StringPresenter.svelte'
 
   export let value: string
@@ -42,19 +43,21 @@
 </script>
 
 {#if onChange !== undefined && type !== undefined}
-  <DropdownLabels
-    bind:selected={value}
-    {items}
-    useFlexGrow={true}
-    justify={'left'}
-    size={'large'}
-    kind={'link'}
-    width={'100%'}
-    autoSelect={false}
-    on:selected={(e) => {
-      onChange?.(e.detail)
-    }}
-  />
+  <span use:tooltip={value ? { label: getEmbeddedLabel(value) } : undefined}>
+    <DropdownLabels
+      bind:selected={value}
+      {items}
+      useFlexGrow={true}
+      justify={'left'}
+      size={'large'}
+      kind={'link'}
+      width={'100%'}
+      autoSelect={false}
+      on:selected={(e) => {
+        onChange?.(e.detail)
+      }}
+    />
+  </span>
 {:else}
   <StringPresenter {value} />
 {/if}

plugins/view-resources/src/components/MarkupPresenter.svelte

@@ -15,11 +15,14 @@
 -->
 <script lang="ts">
   import { MessageViewer } from '@hcengineering/presentation'
-  import { ShowMore } from '@hcengineering/ui'
+  import { ShowMore, tooltip } from '@hcengineering/ui'
+  import MarkupPreviewPopup from './MarkupPreviewPopup.svelte'
 
   export let value: string | undefined
 </script>
 
-<ShowMore>
-  <MessageViewer message={value ?? ''} />
-</ShowMore>
+<div use:tooltip={value ? { component: MarkupPreviewPopup, props: { value } } : undefined}>
+  <ShowMore>
+    <MessageViewer message={value ?? ''} />
+  </ShowMore>
+</div>

plugins/view-resources/src/components/StringPresenter.svelte

@@ -14,10 +14,28 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import { getEmbeddedLabel } from '@hcengineering/platform'
+  import { LabelAndProps, tooltip } from '@hcengineering/ui'
+
   export let value: string | string[] | undefined
+
+  $: tooltipParams = getTooltip(value)
+
+  function getTooltip (value: string | string[] | undefined): LabelAndProps | undefined {
+    if (value === undefined) return
+    let str = ''
+    if (Array.isArray(value)) {
+      str = value.reduce((acc, curr, i) => (acc += i === 0 ? curr : ` ${curr}`))
+    } else {
+      str = value
+    }
+    return {
+      label: getEmbeddedLabel(str)
+    }
+  }
 </script>
 
-<span class="lines-limit-2 select-text">
+<span class="lines-limit-2 select-text" use:tooltip={tooltipParams}>
   {#if Array.isArray(value)}
     {#each value as str, i}
       <span class:ml-1={i !== 0}>{str}</span>