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

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

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'
           }
         },

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,

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,
+            _class: recruit.mixin.Candidate
-            inline: true
           }
         },
         { 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'
           }
         },

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) {

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;

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}

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

@@ -29,16 +29,17 @@
 
 {#if value}
   <DocNavLink {disabled} {inline} object={value} {accent} noUnderline={disabled}>
-    <div
+    {#if inline}
-      class="flex-presenter"
+      <span class="antiMention" use:tooltip={{ label: getEmbeddedLabel(value.name) }}>
-      style:max-width={maxWidth}
+        @{value.name}
-      class:inline-presenter={inline}
+      </span>
-      use:tooltip={{ label: getEmbeddedLabel(value.name) }}
+    {: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}

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);
     }

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
+  <DocNavLink {disabled} object={value} {inline} {accent} noUnderline={disabled} component={document.component.EditDoc}>
-    class="flex-presenter"
+    {#if inline}
-    href="#{getPanelURI(document.component.EditDoc, value._id, value._class, 'content')}"
+      <span class="antiMention" use:tooltip={{ label: document.string.Document }}>
-    class:inline-presenter={inline}
+        @{value.name}-{value.version}
-  >
+      </span>
-    {#if !inline}
+    {: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>
+  </DocNavLink>
-  </a>
 {/if}

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}

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}

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}
-      {#if !inline}
+      <span class="antiMention" use:tooltip={{ label: lead.string.Lead }}>@LEAD-{value.number}</span>
-        <div class="icon">
+    {:else}
-          <Icon icon={lead.icon.Lead} size={'small'} />
+      <div class="flex-presenter">
-        </div>
+        <div class="icon"><Icon icon={lead.icon.Lead} size={'small'} /></div>
-      {/if}
         <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>LEAD-{value.number}</span>
       </div>
+    {/if}
   </DocNavLink>
 {/if}

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: {

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}

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} />

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}

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}
-    {#if !inline && shouldShowAvatar}
+    <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>

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}
-      {#if !inline && shouldShowAvatar}
+      <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>

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}
-      {#if !inline && shouldShowAvatar}
+      <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}

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

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)