UBERF-60: update styles and presenters. (#3651)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
2025-04-20 15:20:18 +00:00 · 2023-09-01 14:34:32 +03:00 · 2023-09-01 14:34:32 +03:00 · c67395fcce
commit c67395fcce
parent 48f92d1fd1
22 changed files with 217 additions and 158 deletions
--- 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/packages/presentation/src/components/NavLink.svelte
+++ b/packages/presentation/src/components/NavLink.svelte
@ -97,15 +97,18 @@
    &.inline {
      display: inline-flex;
      align-items: center;
+      text-decoration: none;
+      color: inherit;
    }

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

-    &:not(.noUnderline) {
+    &:not(.noUnderline, .inline) {
      &:hover {
        text-decoration: underline;
        &:not(.colorInherit) {
--- a/packages/presentation/src/components/message/Nodes.svelte
+++ b/packages/presentation/src/components/message/Nodes.svelte
@ -73,9 +73,9 @@
    {:else if node.nodeName === 'BLOCKQUOTE'}
      <blockquote><svelte:self nodes={node.childNodes} /></blockquote>
    {:else if node.nodeName === 'CODE'}
-      <code><svelte:self nodes={node.childNodes} /></code>
+      <code class="proseCode"><svelte:self nodes={node.childNodes} /></code>
    {:else if node.nodeName === 'PRE'}
-      <pre><svelte:self nodes={node.childNodes} /></pre>
+      <pre class="proseCodeBlock"><svelte:self nodes={node.childNodes} /></pre>
    {:else if node.nodeName === 'BR'}
      {@const pName = prevName(ni, nodes)}
      {#if pName !== 'P' && pName !== 'BR' && pName !== undefined}
@ -118,23 +118,23 @@
        </div>
      {/if}
    {:else if node.nodeName === 'SPAN'}
-      <span style:margin={'0 .25rem'} style={node.getAttribute('style')}>
-        <!-- <svelte:self nodes={node.childNodes} /> -->
-        {#if node.getAttribute('data-objectclass') !== undefined && node.getAttribute('data-id') !== undefined}
-          <Component
-            is={view.component.ObjectPresenter}
-            inline
-            props={{
-              objectId: node.getAttribute('data-id'),
-              title: node.getAttribute('data-label'),
-              _class: correctClass(node.getAttribute('data-objectclass')),
-              inline: true
-            }}
-          />
-        {:else}
-          <svelte:self nodes={node.childNodes} />
-        {/if}
-      </span>
+      <!-- <span class="antiMention" style={node.getAttribute('style')}> -->
+      <!-- <svelte:self nodes={node.childNodes} /> -->
+      {#if node.getAttribute('data-objectclass') !== undefined && node.getAttribute('data-id') !== undefined}
+        <Component
+          is={view.component.ObjectPresenter}
+          inline
+          props={{
+            objectId: node.getAttribute('data-id'),
+            title: node.getAttribute('data-label'),
+            _class: correctClass(node.getAttribute('data-objectclass')),
+            inline: true
+          }}
+        />
+      {:else}
+        <svelte:self nodes={node.childNodes} />
+      {/if}
+      <!-- </span> -->
    {:else if node.nodeName === 'TABLE'}
      <table class={node.className}><svelte:self nodes={node.childNodes} /></table>
    {:else if node.nodeName === 'TBODY'}
@ -183,12 +183,4 @@
  s {
    color: var(--theme-accent-color);
  }
-  code {
-    padding: 0 0.25rem;
-    font-family: var(--mono-font);
-    color: var(--theme-content-color);
-    background-color: var(--theme-button-default);
-    border: 1px solid var(--theme-button-border);
-    border-radius: 0.25rem;
-  }
 </style>
--- a/packages/text-editor/src/components/ReferenceInput.svelte
+++ b/packages/text-editor/src/components/ReferenceInput.svelte
@ -275,7 +275,7 @@
    .textInput {
      display: flex;
      justify-content: space-between;
-      align-items: flex-start;
+      align-items: flex-end;
      min-height: 2.75rem;
      padding: 0.75rem 1rem;
      background-color: var(--theme-refinput-color);
--- a/packages/text-editor/src/components/extensions.ts
+++ b/packages/text-editor/src/components/extensions.ts
@ -60,7 +60,10 @@ export const defaultExtensions: AnyExtension[] = [
      }
    },
    heading: {
-      levels: supportedHeadingLevels
+      levels: supportedHeadingLevels,
+      HTMLAttributes: {
+        class: 'proseHeading'
+      }
    }
  }),
  Highlight.configure({
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@ -98,8 +98,8 @@ table {
 }

 li {
-  color: var(--dark-color);
-  p { color: var(--accent-color); }
+  color: var(--theme-content-color);
+  p { color: var(--theme-content-color); }
 }

 /* Common */
--- a/packages/theme/styles/_text-editor.scss
+++ b/packages/theme/styles/_text-editor.scss
@ -2,3 +2,26 @@
  cursor: pointer;
  object-fit: contain;
 }
+
+.proseH1 {
+  margin-block-start: 1.25rem;
+  margin-block-end: 1.25rem;
+  font-weight: 700;
+  font-size: 1.75rem;
+  // line-height: 1.75rem;
+  color: red;
+}
+.proseH2 {
+  margin-block-start: 1rem;
+  margin-block-end: 1.125rem;
+  font-weight: 700;
+  font-size: 1.25rem;
+  // line-height: 1.75rem;
+  color: green;
+}
+
+// need to override editor's bubble max-width
+// due to https://github.com/atomiks/tippyjs/issues/451
+.tippy-box {
+  max-width: 30rem !important;
+}
--- a/packages/theme/styles/prose.scss
+++ b/packages/theme/styles/prose.scss
@ -61,5 +61,17 @@ table.proseTable {
  background-color: var(--theme-button-default);
  border: 1px solid var(--theme-button-border);
  border-radius: .25rem;
-  padding: 0.5rem;  
-}
+  padding: 0.5rem;
+
+  code { white-space: normal; }
+}
+
+// Fixes for MessageViewer
+pre.proseCodeBlock > code.proseCode {
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+}
+
+.proseHeading { line-height: 110%; }
--- 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}
-        <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 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,28 +69,33 @@

 {#if value}
  <DocNavLink object={value} onClick={onEdit} {disabled} noUnderline={disabled} {inline} {colorInherit} {accent}>
-    <span
-      use:tooltip={disabled ? undefined : showTooltip}
-      class="contentPresenter"
-      class:text-base={enlargedText}
-      class:inline-presenter={inline}
-      style:max-width={maxWidth}
-    >
-      {#if !inline && shouldShowAvatar}
-        <span
-          class="eContentPresenterIcon"
-          class:mr-2={shouldShowName && !enlargedText}
-          class:mr-3={shouldShowName && enlargedText}
-        >
-          <Avatar size={avatarSize} avatar={value.avatar} />
-        </span>
-      {/if}
-      {#if shouldShowName}
-        <span class="eContentPresenterLabel" class:colorInherit class:fs-bold={accent}
-          >{getName(client.getHierarchy(), value)}</span
-        >
-      {/if}
-    </span>
+    {#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}
+        style:max-width={maxWidth}
+      >
+        {#if shouldShowAvatar}
+          <span
+            class="eContentPresenterIcon"
+            class:mr-2={shouldShowName && !enlargedText}
+            class:mr-3={shouldShowName && enlargedText}
+          >
+            <Avatar size={avatarSize} avatar={value.avatar} />
+          </span>
+        {/if}
+        {#if shouldShowName}
+          <span class="eContentPresenterLabel" class:colorInherit class:fs-bold={accent}
+            >{getName(client.getHierarchy(), value)}</span
+          >
+        {/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
@ -15,7 +15,9 @@
 -->
 <script lang="ts">
  import { Category } from '@hcengineering/inventory'
+  import { tooltip } from '@hcengineering/ui'
  import { DocNavLink } from '@hcengineering/view-resources'
+  import inventory from '../plugin'

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

 {#if value}
  <DocNavLink object={value} {inline}>
-    <div class="flex-presenter overflow-label sm-tool-icon">
-      {value.name}
-    </div>
+    {#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>
+        <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 lead from '@hcengineering/lead'
+  import { Icon, tooltip } from '@hcengineering/ui'
  import { DocNavLink } from '@hcengineering/view-resources'
-  import lead from '../plugin'

  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}
-      <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>LEAD-{value.number}</span>
-    </div>
+    {#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
@ -69,6 +69,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>
+        <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/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>
+        <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,14 +47,18 @@
 </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}
-      <div class="icon" use:tooltip={{ label: tracker.string.Component }}>
-        <Icon icon={tracker.icon.Component} size={'small'} />
-      </div>
-    {/if}
-    <span title={label} class="label nowrap" class:no-underline={disabled || noUnderline} class:fs-bold={accent}>
-      {label}
+  {#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>
+      {/if}
+      <span title={label} class="label nowrap" class:no-underline={disabled || noUnderline} class:fs-bold={accent}>
+        {label}
+      </span>
    </span>
-  </span>
+  {/if}
 </DocNavLink>
--- a/plugins/tracker-resources/src/components/issues/IssuePresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuePresenter.svelte
@ -58,17 +58,21 @@
    component={tracker.component.EditIssue}
    shrink={0}
  >
-    <span class="issuePresenterRoot" class:inline class:list={kind === 'list'} class:cursor-pointer={!disabled}>
-      {#if !inline && shouldShowAvatar}
-        <div class="icon" use:tooltip={{ label: tracker.string.Issue }}>
-          <Icon icon={icon ?? tracker.icon.Issues} size={'small'} />
-        </div>
-      {/if}
-      <span class="select-text" title={value?.title}>
-        {title}
-        <slot name="details" />
+    {#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>
+        {/if}
+        <span class="select-text" title={value?.title}>
+          {title}
+          <slot name="details" />
+        </span>
      </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,15 +47,19 @@

 {#if value}
  <DocNavLink object={value} {disabled} {inline} {accent} noUnderline={disabled} {onClick}>
-    <div class="flex-presenter" class:inline-presenter={inline}>
-      {#if !inline && shouldShowAvatar}
-        <div class="icon">
-          <Icon icon={tracker.icon.Milestone} size="small" />
-        </div>
-      {/if}
-      <span title={value.label} class="overflow-label label" class:no-underline={disabled} class:fs-bold={accent}>
-        {value.label}
-      </span>
-    </div>
+    {#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>
+        {/if}
+        <span title={value.label} class="overflow-label label" class:no-underline={disabled} class:fs-bold={accent}>
+          {value.label}
+        </span>
+      </div>
+    {/if}
  </DocNavLink>
 {/if}
--- 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)