[TSK-801] Fixed presenters (#2729)

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

packages/presentation/src/components/message/Nodes.svelte

@@ -86,7 +86,8 @@
         </div>
       {/if}
     {:else if node.nodeName === 'SPAN'}
-      <span style={node.getAttribute('style')}>
+      <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}
@@ -95,7 +96,10 @@
               title: node.getAttribute('data-label'),
               _class: node.getAttribute('data-objectclass'),
               props: {
-                shouldShowAvatar: false
+                inline: true,
+                avatarSize: 'x-small',
+                withIcon: true
+                // shouldShowAvatar: false
               }
             }}
           />

packages/theme/styles/_layouts.scss

@@ -112,7 +112,7 @@ p:last-child { margin-block-end: 0; }
   overflow-wrap: break-word;
   word-wrap: break-word;
   hyphens: auto;
-  line-height: 150%;
+  line-height: 180%;
   color: var(--accent-color);
   
   a {
@@ -304,7 +304,12 @@ input.search {
 .inline-presenter {
   display: inline-flex;
   align-items: baseline;
+  margin: -.25rem 0;
+
   .icon { transform: translateY(.2rem); }
+  .icon.circle { transform: translateY(.375rem); }
+  .avatar-container:not(.no-img) { transform: translateY(.375rem); }
+  .avatar-container.no-img { transform: translateY(.15rem); }
 }
 // Presenters on the card
 .card-container .flex-presenter,

packages/ui/src/components/ShowMore.svelte

@@ -88,7 +88,7 @@
     cursor: pointer;
 
     &.outter {
-      bottom: 0.5rem;
+      bottom: 0.25rem;
       transform: translateX(-50%);
     }
     &:hover {

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

@@ -19,8 +19,7 @@
   export let inline = false
   export let disableClick = false
   export let defaultName: IntlString | undefined = undefined
-
-  let container: HTMLElement
+  export let element: HTMLElement | undefined = undefined
 
   const onEdit = (evt: MouseEvent) => {
     if (disableClick) {
@@ -34,7 +33,7 @@
         {
           employeeId: value._id
         },
-        container
+        element
       )
     }
   }
@@ -42,20 +41,28 @@
   $: handlePersonEdit = onEmployeeEdit ?? onEdit
 </script>
 
-<div bind:this={container} class="flex-presenter inline-presenter">
-  <PersonPresenter
-    {value}
-    {tooltipLabels}
-    onEdit={isInteractive ? handlePersonEdit : () => {}}
-    {shouldShowAvatar}
-    {shouldShowName}
-    {avatarSize}
-    {shouldShowPlaceholder}
-    {isInteractive}
-    {inline}
-    {defaultName}
-  />
-</div>
+<PersonPresenter
+  bind:element
+  {value}
+  {tooltipLabels}
+  onEdit={isInteractive ? handlePersonEdit : () => {}}
+  {shouldShowAvatar}
+  {shouldShowName}
+  {avatarSize}
+  {shouldShowPlaceholder}
+  {isInteractive}
+  {inline}
+  {defaultName}
+/>
 {#if value?.active === false}
-  (<Label label={contact.string.Inactive} />)
+  <div class="status ml-1">
+    (<Label label={contact.string.Inactive} />)
+  </div>
 {/if}
+
+<style lang="scss">
+  .status {
+    font-weight: 400;
+    font-size: 0.875rem;
+  }
+</style>

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

@@ -31,8 +31,9 @@
   export let onEdit: ((event: MouseEvent) => void) | undefined = undefined
   export let showTooltip: LabelAndProps | undefined = undefined
   export let enlargedText = false
+  export let element: HTMLElement | undefined = undefined
 
-  $: element = getElement(value, onEdit, shouldShowPlaceholder, isInteractive)
+  $: el = getElement(value, onEdit, shouldShowPlaceholder, isInteractive)
 
   const getElement = (
     person: Person | undefined | null,
@@ -56,8 +57,10 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <svelte:element
-  this={element}
+  this={el}
+  bind:this={element}
   use:tooltip={showTooltip}
   class="contentPresenter"
   class:inline-presenter={inline}
@@ -94,12 +97,16 @@
     flex-wrap: nowrap;
     cursor: pointer;
 
+    &.inline-presenter {
+      display: inline-flex;
+      align-items: baseline;
+    }
     &.mContentPresenterNotInteractive {
       cursor: default;
 
       &:hover {
         .eContentPresenterIcon {
-          color: var(--dark-color);
+          color: var(--accent-color);
         }
         .eContentPresenterLabel {
           text-decoration: none;

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

@@ -31,6 +31,7 @@
   export let tooltipLabels: PersonLabelTooltip | undefined = undefined
   export let avatarSize: 'inline' | 'tiny' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' = 'x-small'
   export let onEdit: ((event: MouseEvent) => void) | undefined = undefined
+  export let element: HTMLElement | undefined = undefined
 
   function getTooltip (
     tooltipLabels: PersonLabelTooltip | undefined,
@@ -72,5 +73,6 @@
     {shouldShowName}
     {shouldShowPlaceholder}
     {enlargedText}
+    bind:element
   />
 {/if}

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

@@ -25,7 +25,7 @@
   const dispatch = createEventDispatcher()
 </script>
 
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="antiNav-element"
   class:selected

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

@@ -24,6 +24,7 @@
   export let onClick: (() => void) | undefined = undefined
   export let withIcon = false
   export let noUnderline = false
+  export let inline = false
 
   // Extra properties
   export let teams: Map<Ref<Team>, Team> | undefined = undefined
@@ -58,9 +59,15 @@
 
 {#if value}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <span class="issuePresenterRoot" class:noPointer={disableClick} class:noUnderline on:click={handleIssueEditorOpened}>
+  <span
+    class="issuePresenterRoot"
+    class:noPointer={disableClick}
+    class:noUnderline
+    class:inline
+    on:click={handleIssueEditorOpened}
+  >
     {#if withIcon}
-      <div class="mr-2" use:tooltip={{ label: tracker.string.Issue }}>
+      <div class="icon" use:tooltip={{ label: tracker.string.Issue }}>
         <Icon icon={tracker.icon.Issues} size={'small'} />
       </div>
     {/if}
@@ -73,17 +80,32 @@
 <style lang="scss">
   .issuePresenterRoot {
     display: flex;
-
+    align-items: center;
+    flex-shrink: 0;
+    max-width: 5rem;
+    color: var(--content-color);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-
-    flex-shrink: 0;
-    max-width: 5rem;
-    font-size: 0.8125rem;
-    color: var(--content-color);
     cursor: pointer;
 
+    .icon {
+      margin-right: 0.5rem;
+      color: var(--dark-color);
+    }
+
+    &.inline {
+      display: inline-flex;
+      align-items: baseline;
+
+      .icon {
+        transform: translateY(0.2rem);
+      }
+      .select-text {
+        font-weight: 500;
+        color: var(--accent-color);
+      }
+    }
     &.noPointer {
       cursor: default;
     }
@@ -97,6 +119,10 @@
       &:hover {
         color: var(--caption-color);
         text-decoration: underline;
+
+        .icon {
+          color: var(--caption-color);
+        }
       }
     }