UI fixes: correct display of the label in the Person, Owners scroll (#3740)

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

packages/theme/styles/components.scss

@@ -1028,6 +1028,25 @@
   }
 }
 
+/* Presenters */
+.antiPresenter {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  min-width: 0;
+
+  .ap-icon { color: var(--theme-dark-color); }
+  .ap-label {
+    min-width: 0;
+    text-align: left;
+    color: var(--theme-caption-color);
+
+    &.colorInherit { color: inherit; }
+  }
+  &:hover .ap-icon,
+  &:hover .ap-label { color: var(--theme-caption-color); }
+}
+
 /* ListView - global style */
 .list-container .category-container .categoryHeader.subLevel.closed {
   border-radius: 0 0 0.25rem 0.25rem;

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

@@ -24,10 +24,10 @@
     themeStore,
     tooltip
   } from '@hcengineering/ui'
-  import { DocNavLink } from '@hcengineering/view-resources'
   import { createEventDispatcher, onMount } from 'svelte'
   import Avatar from './Avatar.svelte'
   import { getClient } from '@hcengineering/presentation'
+  import PersonElement from './PersonElement.svelte'
 
   export let value: Person | Employee | undefined | null
   export let inline: boolean = false
@@ -56,6 +56,7 @@
   }
   const dispatch = createEventDispatcher()
 
+  $: name = value ? getName(client.getHierarchy(), value) : ''
   $: accentColor =
     value?.name !== undefined
       ? getPlatformAvatarColorForTextDef(value?.name ?? '', $themeStore.dark)
@@ -69,59 +70,61 @@
 </script>
 
 {#if value}
-  <DocNavLink object={value} onClick={onEdit} {disabled} {noUnderline} {inline} {colorInherit} {accent} noOverflow>
-    {#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} name={value.name} />
-          </span>
-        {/if}
-        {#if shouldShowName}
-          <span class="eContentPresenterLabel overflow-label" class:colorInherit class:fs-bold={accent}
-            >{getName(client.getHierarchy(), value)}</span
-          >
-        {/if}
-      </span>
-    {/if}
-  </DocNavLink>
   {#if statusLabel}
+    <div class="inline-flex items-center clear-mins">
+      <PersonElement
+        {value}
+        {name}
+        {inline}
+        {disabled}
+        {shouldShowAvatar}
+        {shouldShowName}
+        {noUnderline}
+        {avatarSize}
+        {onEdit}
+        {showTooltip}
+        {enlargedText}
+        {colorInherit}
+        {accent}
+        {maxWidth}
+      />
       <span class="status">
         <Label label={statusLabel} />
       </span>
+    </div>
+  {:else}
+    <PersonElement
+      {value}
+      {name}
+      {inline}
+      {disabled}
+      {shouldShowAvatar}
+      {shouldShowName}
+      {noUnderline}
+      {avatarSize}
+      {onEdit}
+      {showTooltip}
+      {enlargedText}
+      {colorInherit}
+      {accent}
+      {maxWidth}
+    />
   {/if}
 {:else if shouldShowPlaceholder}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <span
-    class="contentPresenter"
+    class="antiPresenter"
     class:text-base={enlargedText}
     use:tooltip={disabled ? undefined : showTooltip}
     on:click={onEditClick}
   >
     {#if !inline && shouldShowAvatar}
-      <span
-        class="eContentPresenterIcon"
-        class:mr-2={shouldShowName && !enlargedText}
-        class:mr-3={shouldShowName && enlargedText}
-      >
+      <span class="ap-icon" class:mr-2={shouldShowName && !enlargedText} class:mr-3={shouldShowName && enlargedText}>
         <Avatar size={avatarSize} on:accent-color />
       </span>
     {/if}
     {#if shouldShowName && defaultName}
-      <span class="eContentPresenterLabel" class:colorInherit class:fs-bold={accent}>
+      <span class="ap-label" class:colorInherit class:fs-bold={accent}>
         <Label label={defaultName} />
       </span>
     {/if}
@@ -129,44 +132,10 @@
 {/if}
 
 <style lang="scss">
-  .contentPresenter {
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    min-width: 0;
-
-    .eContentPresenterIcon {
-      color: var(--theme-dark-color);
-    }
-    .eContentPresenterLabel {
-      min-width: 0;
-      text-align: left;
-      color: var(--theme-caption-color);
-
-      // overflow: hidden;
-      // display: -webkit-box;
-      // /* autoprefixer: ignore next */
-      // -webkit-box-orient: vertical;
-      // -webkit-line-clamp: 2;
-      // line-clamp: 2;
-      // user-select: none;
-
-      &.colorInherit {
-        color: inherit;
-      }
-    }
-    &:hover {
-      .eContentPresenterIcon {
-        color: var(--theme-caption-color);
-      }
-      .eContentPresenterLabel {
-        color: var(--theme-caption-color);
-      }
-    }
-  }
   .status {
     margin-left: 0.25rem;
-    padding: 0.125rem 0.25rem;
+    padding: 0 0.25rem;
+    white-space: nowrap;
     font-size: 0.75rem;
     color: var(--theme-content-color);
     background-color: var(--theme-button-default);

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

@@ -0,0 +1,67 @@
+<!--
+// Copyright © 2022 Hardcore Engineering Inc.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import { Employee, Person } from '@hcengineering/contact'
+  import { IconSize, LabelAndProps, tooltip } from '@hcengineering/ui'
+  import { DocNavLink } from '@hcengineering/view-resources'
+  import Avatar from './Avatar.svelte'
+
+  export let value: Person | Employee | undefined | null
+  export let name: string
+  export let inline: boolean = false
+  export let disabled: boolean = false
+  export let shouldShowAvatar: boolean = true
+  export let shouldShowName: boolean = true
+  export let noUnderline: boolean = false
+  export let avatarSize: IconSize = 'x-small'
+  export let onEdit: ((event: MouseEvent) => void) | undefined = undefined
+  export let showTooltip: LabelAndProps | undefined = undefined
+  export let enlargedText: boolean = false
+  export let colorInherit: boolean = false
+  export let accent: boolean = false
+  export let maxWidth: string = ''
+</script>
+
+{#if value}
+  <DocNavLink object={value} onClick={onEdit} {disabled} {noUnderline} {inline} {colorInherit} {accent} noOverflow>
+    {#if inline}
+      <span class="antiMention" use:tooltip={disabled ? undefined : showTooltip}>
+        @{name}
+      </span>
+    {:else}
+      <span
+        use:tooltip={disabled ? undefined : showTooltip}
+        class="antiPresenter"
+        class:text-base={enlargedText}
+        style:max-width={maxWidth}
+      >
+        {#if shouldShowAvatar}
+          <span
+            class="ap-icon"
+            class:mr-2={shouldShowName && !enlargedText}
+            class:mr-3={shouldShowName && enlargedText}
+          >
+            <Avatar size={avatarSize} avatar={value.avatar} name={value.name} />
+          </span>
+        {/if}
+        {#if shouldShowName}
+          <span class="ap-label overflow-label" class:colorInherit class:fs-bold={accent}>
+            {name}
+          </span>
+        {/if}
+      </span>
+    {/if}
+  </DocNavLink>
+{/if}

plugins/setting-resources/src/components/Owners.svelte

@@ -65,7 +65,7 @@
       {#each accounts as account (account._id)}
         {@const employee = $personByIdStore.get(account.person)}
         {#if employee?.name?.includes(search)}
-          <div class="flex-row-center p-2">
+          <div class="flex-row-center p-2 flex-no-shrink">
             <div class="p-1 min-w-80">
               {#if employee}
                 <EmployeePresenter value={employee} disabled={false} />