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

This reverts commit c67395fcce.

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

models/lead/src/plugin.ts

@@ -29,6 +29,7 @@ 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,

packages/presentation/src/components/NavLink.svelte

@@ -97,18 +97,15 @@
     &.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, .inline) {
+    &:not(.noUnderline) {
       &:hover {
         text-decoration: underline;
         &:not(.colorInherit) {

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 class="proseCode"><svelte:self nodes={node.childNodes} /></code>
+      <code><svelte:self nodes={node.childNodes} /></code>
     {:else if node.nodeName === 'PRE'}
-      <pre class="proseCodeBlock"><svelte:self nodes={node.childNodes} /></pre>
+      <pre><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 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> -->
+      <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>
     {:else if node.nodeName === 'TABLE'}
       <table class={node.className}><svelte:self nodes={node.childNodes} /></table>
     {:else if node.nodeName === 'TBODY'}
@@ -183,4 +183,12 @@
   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>

packages/text-editor/src/components/ReferenceInput.svelte

@@ -275,7 +275,7 @@
     .textInput {
       display: flex;
       justify-content: space-between;
-      align-items: flex-end;
+      align-items: flex-start;
       min-height: 2.75rem;
       padding: 0.75rem 1rem;
       background-color: var(--theme-refinput-color);

packages/text-editor/src/components/extensions.ts

@@ -60,10 +60,7 @@ export const defaultExtensions: AnyExtension[] = [
       }
     },
     heading: {
-      levels: supportedHeadingLevels,
-      HTMLAttributes: {
-        class: 'proseHeading'
-      }
+      levels: supportedHeadingLevels
     }
   }),
   Highlight.configure({

packages/theme/styles/_layouts.scss

@@ -98,8 +98,8 @@ table {
 }
 
 li {
-  color: var(--theme-content-color);
-  p { color: var(--theme-content-color); }
+  color: var(--dark-color);
+  p { color: var(--accent-color); }
 }
 
 /* Common */

packages/theme/styles/_text-editor.scss

@@ -2,26 +2,3 @@
   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;
-}

packages/theme/styles/prose.scss

@@ -61,17 +61,5 @@ table.proseTable {
   background-color: var(--theme-button-default);
   border: 1px solid var(--theme-button-border);
   border-radius: .25rem;
-  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%; }
+  padding: 0.5rem;  
+}

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} />
+        <EmployeePresenter value={employee} shouldShowAvatar={false} inline />
       {/if}
       <span>{getTime(message.createdOn ?? 0)}</span>
       {#if message.editedOn}

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

@@ -29,17 +29,16 @@
 
 {#if value}
   <DocNavLink {disabled} {inline} object={value} {accent} noUnderline={disabled}>
-    {#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}
+    <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>
   </DocNavLink>
 {/if}

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

@@ -69,33 +69,28 @@
 
 {#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}
-        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}
+    <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>
   </DocNavLink>
   {#if statusLabel}
     <span class="status">
@@ -133,6 +128,10 @@
     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,8 +17,7 @@
 <script lang="ts">
   import { WithLookup } from '@hcengineering/core'
   import { Document } from '@hcengineering/document'
-  import { tooltip, Icon } from '@hcengineering/ui'
-  import { DocNavLink } from '@hcengineering/view-resources'
+  import { getPanelURI, Icon } from '@hcengineering/ui'
   import document from '../plugin'
 
   export let value: WithLookup<Document>
@@ -28,17 +27,16 @@
 </script>
 
 {#if value}
-  <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}
+  <a
+    class="flex-presenter"
+    href="#{getPanelURI(document.component.EditDoc, value._id, value._class, 'content')}"
+    class:inline-presenter={inline}
+  >
+    {#if !inline}
       <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}
-  </DocNavLink>
+    <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>{value.name}-{value.version}</span>
+  </a>
 {/if}

plugins/inventory-resources/src/components/CategoryPresenter.svelte

@@ -15,9 +15,7 @@
 -->
 <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
@@ -25,12 +23,8 @@
 
 {#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}
+    <div class="flex-presenter overflow-label sm-tool-icon">
+      {value.name}
+    </div>
   </DocNavLink>
 {/if}

plugins/inventory-resources/src/components/ProductPresenter.svelte

@@ -15,7 +15,7 @@
 -->
 <script lang="ts">
   import { Product } from '@hcengineering/inventory'
-  import { Icon, tooltip } from '@hcengineering/ui'
+  import { Icon } from '@hcengineering/ui'
   import { DocNavLink } from '@hcengineering/view-resources'
   import inventory from '../plugin'
 
@@ -25,13 +25,11 @@
 
 {#if value}
   <DocNavLink {inline} object={value}>
-    {#if inline}
-      <span class="antiMention" use:tooltip={{ label: inventory.string.Product }}>@{value.name}</span>
-    {:else}
-      <div class="flex-presenter">
+    <div class="flex-presenter" class:inline-presenter={inline}>
+      {#if !inline}
         <div class="icon"><Icon icon={inventory.icon.Products} size={'small'} /></div>
-        <span class="label">{value.name}</span>
-      </div>
-    {/if}
+      {/if}
+      <span class="label">{value.name}</span>
+    </div>
   </DocNavLink>
 {/if}

plugins/lead-resources/src/components/LeadPresenter.svelte

@@ -15,9 +15,9 @@
 -->
 <script lang="ts">
   import type { Lead } from '@hcengineering/lead'
-  import lead from '@hcengineering/lead'
-  import { Icon, tooltip } from '@hcengineering/ui'
+  import { Icon } 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}>
-    {#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}
+    <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>
   </DocNavLink>
 {/if}

plugins/lead/src/index.ts

@@ -69,7 +69,6 @@ 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,8 +17,7 @@
   import { getClient } from '@hcengineering/presentation'
   import type { Applicant } from '@hcengineering/recruit'
   import recruit from '@hcengineering/recruit'
-  import recruitPlg from '../plugin'
-  import { Icon, tooltip } from '@hcengineering/ui'
+  import { Icon } from '@hcengineering/ui'
   import { DocNavLink } from '@hcengineering/view-resources'
 
   export let value: Applicant
@@ -32,19 +31,15 @@
 
 {#if value && shortLabel}
   <DocNavLink object={value} {inline} {disabled} noUnderline={disabled} {accent}>
-    {#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="flex-presenter" class:inline-presenter={inline}>
+      {#if !inline}
         <div class="icon">
           <Icon icon={recruit.icon.Application} size={'small'} />
         </div>
-        <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>
-          {#if shortLabel}{shortLabel}-{/if}{value.number}
-        </span>
-      </div>
-    {/if}
+      {/if}
+      <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>
+        {#if shortLabel}{shortLabel}-{/if}{value.number}
+      </span>
+    </div>
   </DocNavLink>
 {/if}

plugins/recruit-resources/src/components/VacancyPresenter.svelte

@@ -45,15 +45,11 @@
     noUnderline={disabled}
     component={recruit.component.EditVacancy}
   >
-    {#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="flex-presenter" class:inline-presenter={inline} use:tooltip={{ label: getEmbeddedLabel(value.name) }}>
+      {#if !inline}
         <div class="icon"><Icon icon={recruit.icon.Vacancy} size={'small'} /></div>
-        <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>{value.name}</span>
-      </div>
-    {/if}
+      {/if}
+      <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>{value.name}</span>
+    </div>
   </DocNavLink>
 {/if}

plugins/tracker-resources/src/components/components/ComponentPresenter.svelte

@@ -47,18 +47,14 @@
 </script>
 
 <DocNavLink object={value} {onClick} {disabled} {noUnderline} {inline} {accent} component={view.component.EditDoc}>
-  {#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 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}
     </span>
-  {/if}
+  </span>
 </DocNavLink>

plugins/tracker-resources/src/components/issues/IssuePresenter.svelte

@@ -58,21 +58,17 @@
     component={tracker.component.EditIssue}
     shrink={0}
   >
-    {#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 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" />
       </span>
-    {/if}
+    </span>
   </DocNavLink>
 {/if}
 
@@ -96,5 +92,18 @@
       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,13 +15,7 @@
 <script lang="ts">
   import { WithLookup } from '@hcengineering/core'
   import { Milestone } from '@hcengineering/tracker'
-  import {
-    Icon,
-    getPlatformAvatarColorDef,
-    getPlatformAvatarColorForTextDef,
-    themeStore,
-    tooltip
-  } from '@hcengineering/ui'
+  import { Icon, getPlatformAvatarColorDef, getPlatformAvatarColorForTextDef, themeStore } from '@hcengineering/ui'
   import { DocNavLink } from '@hcengineering/view-resources'
   import { createEventDispatcher, onMount } from 'svelte'
   import tracker from '../../plugin'
@@ -47,19 +41,15 @@
 
 {#if value}
   <DocNavLink object={value} {disabled} {inline} {accent} noUnderline={disabled} {onClick}>
-    {#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}
+    <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>
   </DocNavLink>
 {/if}

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

@@ -58,7 +58,7 @@
       if (attributeModel) {
         const breadcrumbsModel: BreadcrumbsModel = {
           component: attributeModel.presenter,
-          props: { shouldShowAvatar: false, ...(attributeModel.props ?? {}), value: parent }
+          props: { inline: true, ...(attributeModel.props ?? {}), value: parent }
         }
 
         models.push(breadcrumbsModel)