UBERF-60: updated inline presenters. (#3663)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
2024-11-25 09:13:07 +03:00 · 2023-09-06 09:48:52 +03:00 · 2023-09-06 09:48:52 +03:00 · a52b806e5c
commit a52b806e5c
parent b185e43881
21 changed files with 168 additions and 133 deletions
--- a/models/lead/src/index.ts
+++ b/models/lead/src/index.ts
@ -324,7 +324,6 @@ export function createModel (builder: Builder): void {
          sortingKey: '$lookup.attachedTo.name',
          props: {
            _class: lead.mixin.Customer,
-            inline: true,
            maxWidth: '10rem'
          }
        },
--- a/models/lead/src/plugin.ts
+++ b/models/lead/src/plugin.ts
@ -29,7 +29,6 @@ export default mergeIds(leadId, lead, {
    Funnel: '' as IntlString,
    Funnels: '' as IntlString,
    LeadApplication: '' as IntlString,
-    Lead: '' as IntlString,
    Title: '' as IntlString,
    ManageFunnelStatuses: '' as IntlString,
    GotoLeadApplication: '' as IntlString,
--- a/models/recruit/src/index.ts
+++ b/models/recruit/src/index.ts
@ -695,8 +695,7 @@ export function createModel (builder: Builder): void {
          label: recruit.string.Talent,
          sortingKey: '$lookup.attachedTo.name',
          props: {
-            _class: recruit.mixin.Candidate,
-            inline: true
+            _class: recruit.mixin.Candidate
          }
        },
        { key: 'attachments', displayProps: { key: 'attachments', suffix: true } },
@ -712,7 +711,6 @@ export function createModel (builder: Builder): void {
          key: '$lookup.space.company',
          displayProps: { fixed: 'left', key: 'company' },
          props: {
-            inline: true,
            maxWidth: '10rem'
          }
        },
--- a/packages/presentation/src/components/NavLink.svelte
+++ b/packages/presentation/src/components/NavLink.svelte
@ -91,21 +91,24 @@
    &:not(.colorInherit) {
      color: var(--theme-content-color);
    }
-    &.colorInherit {
+    &.colorInherit,
+    &.inline {
      color: inherit;
    }
    &.inline {
      display: inline-flex;
      align-items: center;
+      text-decoration: none;
    }

    &.noUnderline {
+      text-decoration: none;
      &:not(.colorInherit) {
        color: var(--theme-caption-color);
      }
    }

-    &:not(.noUnderline) {
+    &:not(.noUnderline, .inline) {
      &:hover {
        text-decoration: underline;
        &:not(.colorInherit) {
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@ -278,6 +278,12 @@ input.search {
 .flex-gap-1-5 { gap: .375rem; }
 .flex-gap-1 { gap: .25rem; }

+.flex-between-half-content > * {
+  flex-basis: 50%;
+
+  &:last-child { justify-content: flex-end; }
+}
+
 .flex-break {  
  flex-basis: 100%;
  height: 0;
--- a/plugins/chunter-resources/src/components/Message.svelte
+++ b/plugins/chunter-resources/src/components/Message.svelte
@ -208,7 +208,7 @@
  <div class="message clear-mins">
    <div class="header clear-mins">
      {#if employee}
-        <EmployeePresenter value={employee} shouldShowAvatar={false} inline />
+        <EmployeePresenter value={employee} shouldShowAvatar={false} />
      {/if}
      <span>{getTime(message.createdOn ?? 0)}</span>
      {#if message.editedOn}
--- a/plugins/contact-resources/src/components/OrganizationPresenter.svelte
+++ b/plugins/contact-resources/src/components/OrganizationPresenter.svelte
@ -29,16 +29,17 @@

 {#if value}
  <DocNavLink {disabled} {inline} object={value} {accent} noUnderline={disabled}>
-    <div
-      class="flex-presenter"
-      style:max-width={maxWidth}
-      class:inline-presenter={inline}
-      use:tooltip={{ label: getEmbeddedLabel(value.name) }}
-    >
+    {#if inline}
+      <span class="antiMention" use:tooltip={{ label: getEmbeddedLabel(value.name) }}>
+        @{value.name}
+      </span>
+    {:else}
+      <div class="flex-presenter" style:max-width={maxWidth} use:tooltip={{ label: getEmbeddedLabel(value.name) }}>
        {#if !inline}
          <div class="icon circle"><Company size={'small'} /></div>
        {/if}
        <span class="overflow-label label" class:no-underline={disabled} class:fs-bold={accent}>{value.name}</span>
      </div>
+    {/if}
  </DocNavLink>
 {/if}
--- a/plugins/contact-resources/src/components/PersonContent.svelte
+++ b/plugins/contact-resources/src/components/PersonContent.svelte
@ -69,14 +69,18 @@

 {#if value}
  <DocNavLink object={value} onClick={onEdit} {disabled} noUnderline={disabled} {inline} {colorInherit} {accent}>
+    {#if inline}
+      <span class="antiMention" use:tooltip={disabled ? undefined : showTooltip}>
+        @{getName(client.getHierarchy(), value)}
+      </span>
+    {:else}
      <span
        use:tooltip={disabled ? undefined : showTooltip}
        class="contentPresenter"
        class:text-base={enlargedText}
-      class:inline-presenter={inline}
        style:max-width={maxWidth}
      >
-      {#if !inline && shouldShowAvatar}
+        {#if shouldShowAvatar}
          <span
            class="eContentPresenterIcon"
            class:mr-2={shouldShowName && !enlargedText}
@ -91,6 +95,7 @@
          >
        {/if}
      </span>
+    {/if}
  </DocNavLink>
  {#if statusLabel}
    <span class="status">
@ -128,10 +133,6 @@
    align-items: center;
    flex-wrap: nowrap;

-    &.inline-presenter {
-      display: inline-flex;
-      align-items: baseline;
-    }
    .eContentPresenterIcon {
      color: var(--theme-dark-color);
    }
--- a/plugins/document-resources/src/components/DocumentPresenter.svelte
+++ b/plugins/document-resources/src/components/DocumentPresenter.svelte
@ -17,7 +17,8 @@
 <script lang="ts">
  import { WithLookup } from '@hcengineering/core'
  import { Document } from '@hcengineering/document'
-  import { getPanelURI, Icon } from '@hcengineering/ui'
+  import { tooltip, Icon } from '@hcengineering/ui'
+  import { DocNavLink } from '@hcengineering/view-resources'
  import document from '../plugin'

  export let value: WithLookup<Document>
@ -27,16 +28,17 @@
 </script>

 {#if value}
-  <a
-    class="flex-presenter"
-    href="#{getPanelURI(document.component.EditDoc, value._id, value._class, 'content')}"
-    class:inline-presenter={inline}
-  >
-    {#if !inline}
+  <DocNavLink {disabled} object={value} {inline} {accent} noUnderline={disabled} component={document.component.EditDoc}>
+    {#if inline}
+      <span class="antiMention" use:tooltip={{ label: document.string.Document }}>
+        @{value.name}-{value.version}
+      </span>
+    {:else}
      <div class="icon">
        <Icon icon={document.icon.Document} size={'small'} />
      </div>
+      <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>{value.name}-{value.version}</span
+      >
    {/if}
-    <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>{value.name}-{value.version}</span>
-  </a>
+  </DocNavLink>
 {/if}
--- a/plugins/inventory-resources/src/components/CategoryPresenter.svelte
+++ b/plugins/inventory-resources/src/components/CategoryPresenter.svelte
@ -16,6 +16,8 @@
 <script lang="ts">
  import { Category } from '@hcengineering/inventory'
  import { DocNavLink } from '@hcengineering/view-resources'
+  import { tooltip } from '@hcengineering/ui'
+  import inventory from '../plugin'

  export let value: Category
  export let inline: boolean = false
@ -23,8 +25,12 @@

 {#if value}
  <DocNavLink object={value} {inline}>
+    {#if inline}
+      <span class="antiMention" use:tooltip={{ label: inventory.string.Category }}>@{value.name}</span>
+    {:else}
      <div class="flex-presenter overflow-label sm-tool-icon">
        {value.name}
      </div>
+    {/if}
  </DocNavLink>
 {/if}
--- a/plugins/inventory-resources/src/components/ProductPresenter.svelte
+++ b/plugins/inventory-resources/src/components/ProductPresenter.svelte
@ -15,7 +15,7 @@
 -->
 <script lang="ts">
  import { Product } from '@hcengineering/inventory'
-  import { Icon } from '@hcengineering/ui'
+  import { Icon, tooltip } from '@hcengineering/ui'
  import { DocNavLink } from '@hcengineering/view-resources'
  import inventory from '../plugin'

@ -25,11 +25,13 @@

 {#if value}
  <DocNavLink {inline} object={value}>
-    <div class="flex-presenter" class:inline-presenter={inline}>
-      {#if !inline}
+    {#if inline}
+      <span class="antiMention" use:tooltip={{ label: inventory.string.Product }}>@{value.name}</span>
+    {:else}
+      <div class="flex-presenter">
        <div class="icon"><Icon icon={inventory.icon.Products} size={'small'} /></div>
-      {/if}
        <span class="label">{value.name}</span>
      </div>
+    {/if}
  </DocNavLink>
 {/if}
--- a/plugins/lead-resources/src/components/LeadPresenter.svelte
+++ b/plugins/lead-resources/src/components/LeadPresenter.svelte
@ -15,9 +15,9 @@
 -->
 <script lang="ts">
  import type { Lead } from '@hcengineering/lead'
-  import { Icon } from '@hcengineering/ui'
+  import { Icon, tooltip } from '@hcengineering/ui'
  import { DocNavLink } from '@hcengineering/view-resources'
-  import lead from '../plugin'
+  import lead from '@hcengineering/lead'

  export let value: Lead
  export let inline: boolean = false
@ -27,13 +27,13 @@

 {#if value}
  <DocNavLink object={value} {inline} {disabled} noUnderline={disabled} {accent}>
-    <div class="flex-presenter" class:inline-presenter={inline}>
-      {#if !inline}
-        <div class="icon">
-          <Icon icon={lead.icon.Lead} size={'small'} />
-        </div>
-      {/if}
+    {#if inline}
+      <span class="antiMention" use:tooltip={{ label: lead.string.Lead }}>@LEAD-{value.number}</span>
+    {:else}
+      <div class="flex-presenter">
+        <div class="icon"><Icon icon={lead.icon.Lead} size={'small'} /></div>
        <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>LEAD-{value.number}</span>
      </div>
+    {/if}
  </DocNavLink>
 {/if}
--- a/plugins/lead/src/index.ts
+++ b/plugins/lead/src/index.ts
@ -70,6 +70,7 @@ const lead = plugin(leadId, {
    Customer: '' as Ref<Mixin<Customer>>
  },
  string: {
+    Lead: '' as IntlString,
    ConfigLabel: '' as IntlString
  },
  icon: {
--- a/plugins/recruit-resources/src/components/ApplicationPresenter.svelte
+++ b/plugins/recruit-resources/src/components/ApplicationPresenter.svelte
@ -17,7 +17,8 @@
  import { getClient } from '@hcengineering/presentation'
  import type { Applicant } from '@hcengineering/recruit'
  import recruit from '@hcengineering/recruit'
-  import { Icon } from '@hcengineering/ui'
+  import recruitPlg from '../plugin'
+  import { Icon, tooltip } from '@hcengineering/ui'
  import { DocNavLink } from '@hcengineering/view-resources'

  export let value: Applicant
@ -31,15 +32,19 @@

 {#if value && shortLabel}
  <DocNavLink object={value} {inline} {disabled} noUnderline={disabled} {accent}>
-    <div class="flex-presenter" class:inline-presenter={inline}>
-      {#if !inline}
+    {#if inline}
+      <span class="antiMention" use:tooltip={{ label: recruitPlg.string.Application }}>
+        @{#if shortLabel}{shortLabel}-{/if}{value.number}
+      </span>
+    {:else}
+      <div class="flex-presenter">
        <div class="icon">
          <Icon icon={recruit.icon.Application} size={'small'} />
        </div>
-      {/if}
        <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>
          {#if shortLabel}{shortLabel}-{/if}{value.number}
        </span>
      </div>
+    {/if}
  </DocNavLink>
 {/if}
--- a/plugins/recruit-resources/src/components/KanbanCard.svelte
+++ b/plugins/recruit-resources/src/components/KanbanCard.svelte
@ -50,7 +50,10 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="flex-col pt-3 pb-3 pr-4 pl-4" on:click={showCandidate}>
  {#if enabledConfig(config, 'space') || enabledConfig(config, 'company')}
-    <div class="flex-between mb-3">
+    <div
+      class="flex-between gap-2 mb-3"
+      class:flex-between-half-content={enabledConfig(config, 'space') && company && enabledConfig(config, 'company')}
+    >
      {#if enabledConfig(config, 'space')}
        <ObjectPresenter _class={recruit.class.Vacancy} objectId={object.space} value={object.$lookup?.space} />
      {/if}
@ -118,7 +121,7 @@
  <div class="flex-between">
    <div class="flex-row-center gap-3 reverse mr-4">
      {#if enabledConfig(config, '')}
-        <ApplicationPresenter value={object} inline />
+        <ApplicationPresenter value={object} />
      {/if}
      {#if (object.attachments ?? 0) > 0 && enabledConfig(config, 'attachments')}
        <AttachmentsPresenter value={object.attachments} {object} />
--- a/plugins/recruit-resources/src/components/VacancyPresenter.svelte
+++ b/plugins/recruit-resources/src/components/VacancyPresenter.svelte
@ -45,11 +45,15 @@
    noUnderline={disabled}
    component={recruit.component.EditVacancy}
  >
-    <div class="flex-presenter" class:inline-presenter={inline} use:tooltip={{ label: getEmbeddedLabel(value.name) }}>
-      {#if !inline}
+    {#if inline}
+      <span class="antiMention" use:tooltip={{ label: recruit.string.Vacancy }}>
+        @{value.name}
+      </span>
+    {:else}
+      <div class="flex-presenter" use:tooltip={{ label: getEmbeddedLabel(value.name) }}>
        <div class="icon"><Icon icon={recruit.icon.Vacancy} size={'small'} /></div>
-      {/if}
        <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>{value.name}</span>
      </div>
+    {/if}
  </DocNavLink>
 {/if}
--- a/plugins/tracker-resources/src/components/components/ComponentPresenter.svelte
+++ b/plugins/tracker-resources/src/components/components/ComponentPresenter.svelte
@ -47,8 +47,11 @@
 </script>

 <DocNavLink object={value} {onClick} {disabled} {noUnderline} {inline} {accent} component={view.component.EditDoc}>
-  <span class="flex-presenter" class:inline-presenter={inline} class:list={kind === 'list'}>
-    {#if !inline && shouldShowAvatar}
+  {#if inline}
+    <span class="antiMention" use:tooltip={{ label: tracker.string.Component }}>@{label}</span>
+  {:else}
+    <span class="flex-presenter" class:list={kind === 'list'}>
+      {#if shouldShowAvatar}
        <div class="icon" use:tooltip={{ label: tracker.string.Component }}>
          <Icon icon={tracker.icon.Component} size={'small'} />
        </div>
@ -57,4 +60,5 @@
        {label}
      </span>
    </span>
+  {/if}
 </DocNavLink>
--- a/plugins/tracker-resources/src/components/issues/IssuePresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuePresenter.svelte
@ -58,8 +58,11 @@
    component={tracker.component.EditIssue}
    shrink={0}
  >
-    <span class="issuePresenterRoot" class:inline class:list={kind === 'list'} class:cursor-pointer={!disabled}>
-      {#if !inline && shouldShowAvatar}
+    {#if inline}
+      <span class="antiMention" use:tooltip={{ label: tracker.string.Issue }}>@{title}</span>
+    {:else}
+      <span class="issuePresenterRoot" class:list={kind === 'list'} class:cursor-pointer={!disabled}>
+        {#if shouldShowAvatar}
          <div class="icon" use:tooltip={{ label: tracker.string.Issue }}>
            <Icon icon={icon ?? tracker.icon.Issues} size={'small'} />
          </div>
@ -69,6 +72,7 @@
          <slot name="details" />
        </span>
      </span>
+    {/if}
  </DocNavLink>
 {/if}

@ -92,18 +96,5 @@
      margin-right: 0.5rem;
      color: var(--theme-dark-color);
    }
-
-    &.inline {
-      display: inline-flex;
-      align-items: baseline;
-
-      .icon {
-        transform: translateY(0.2rem);
-      }
-      .select-text {
-        font-weight: 500;
-        color: var(--theme-caption-color);
-      }
-    }
  }
 </style>
--- a/plugins/tracker-resources/src/components/milestones/MilestonePresenter.svelte
+++ b/plugins/tracker-resources/src/components/milestones/MilestonePresenter.svelte
@ -15,7 +15,13 @@
 <script lang="ts">
  import { WithLookup } from '@hcengineering/core'
  import { Milestone } from '@hcengineering/tracker'
-  import { Icon, getPlatformAvatarColorDef, getPlatformAvatarColorForTextDef, themeStore } from '@hcengineering/ui'
+  import {
+    Icon,
+    getPlatformAvatarColorDef,
+    getPlatformAvatarColorForTextDef,
+    themeStore,
+    tooltip
+  } from '@hcengineering/ui'
  import { DocNavLink } from '@hcengineering/view-resources'
  import { createEventDispatcher, onMount } from 'svelte'
  import tracker from '../../plugin'
@ -41,8 +47,11 @@

 {#if value}
  <DocNavLink object={value} {disabled} {inline} {accent} noUnderline={disabled} {onClick}>
-    <div class="flex-presenter" class:inline-presenter={inline}>
-      {#if !inline && shouldShowAvatar}
+    {#if inline}
+      <span class="antiMention" use:tooltip={{ label: tracker.string.Milestone }}>@{value.label}</span>
+    {:else}
+      <div class="flex-presenter">
+        {#if shouldShowAvatar}
          <div class="icon">
            <Icon icon={tracker.icon.Milestone} size="small" />
          </div>
@ -51,5 +60,6 @@
          {value.label}
        </span>
      </div>
+    {/if}
  </DocNavLink>
 {/if}
--- a/plugins/view-resources/src/components/ObjectPresenter.svelte
+++ b/plugins/view-resources/src/components/ObjectPresenter.svelte
@ -22,7 +22,7 @@
  export let _class: Ref<Class<Doc>> | undefined = undefined
  export let value: Doc | RelatedDocument | undefined = undefined
  export let props: Record<string, any> = {}
-  export let inline: boolean = true
+  export let inline: boolean = false
  export let accent: boolean = false
  export let shouldShowAvatar: boolean = true
  export let noUnderline: boolean = false
--- a/plugins/view-resources/src/components/ParentsNavigator.svelte
+++ b/plugins/view-resources/src/components/ParentsNavigator.svelte
@ -58,7 +58,7 @@
      if (attributeModel) {
        const breadcrumbsModel: BreadcrumbsModel = {
          component: attributeModel.presenter,
-          props: { inline: true, ...(attributeModel.props ?? {}), value: parent }
+          props: { shouldShowAvatar: false, ...(attributeModel.props ?? {}), value: parent }
        }

        models.push(breadcrumbsModel)