TSK-1060. Fixed presenters and control panels (aside) (#2901)

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

packages/panel/src/components/Panel.svelte

@@ -120,24 +120,23 @@
   </svelte:fragment>
 
   <svelte:fragment slot="aside">
-    <Scroller>
-      <div style="padding: .75rem 1.5rem">
-        {#if $$slots.actions}
-          <div class="flex-row-center pb-3 bottom-divider">
-            {#if $$slots['actions-label']}
-              <span class="fs-bold w-24 mr-6"><slot name="actions-label" /></span>
-            {/if}
-            <div class="buttons-group xsmall-gap flex flex-grow">
-              <slot name="actions" />
-            </div>
+    <Scroller padding={'.75rem 1.5rem'}>
+      {#if $$slots.actions}
+        <div class="flex-row-center pb-3 bottom-divider">
+          {#if $$slots['actions-label']}
+            <span class="fs-bold w-24 mr-6"><slot name="actions-label" /></span>
+          {/if}
+          <div class="buttons-group xsmall-gap flex flex-grow">
+            <slot name="actions" />
           </div>
-        {/if}
-        {#if $$slots['custom-attributes'] && isCustomAttr}
-          <slot name="custom-attributes" direction="column" />
-        {:else if $$slots.attributes}<slot name="attributes" direction="column" />{/if}
-        {#if $$slots.aside}<slot name="aside" />{/if}
-      </div>
+        </div>
+      {/if}
+      {#if $$slots['custom-attributes'] && isCustomAttr}
+        <slot name="custom-attributes" direction="column" />
+      {:else if $$slots.attributes}<slot name="attributes" direction="column" />{/if}
+      {#if $$slots.aside}<slot name="aside" />{/if}
     </Scroller>
+    <div class="h-2 min-h-2 max-h-2" />
   </svelte:fragment>
 
   {#if withoutActivity}

packages/presentation/src/components/AttributeBarEditor.svelte

@@ -103,6 +103,7 @@
         {onChange}
         {focus}
         {object}
+        {size}
       />
     </div>
   {/if}

packages/theme/styles/_layouts.scss

@@ -254,6 +254,7 @@ input.search {
 
 .flex-presenter, .inline-presenter {
   flex-wrap: nowrap;
+  min-width: 0;
   cursor: pointer;
 
   .icon {
@@ -275,16 +276,19 @@ input.search {
 
     overflow: hidden;
     visibility: visible;
-    display: -webkit-box;
-    /* autoprefixer: ignore next */
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;  
     user-select: none;
 
+    &:not(.nowrap) {
+      display: -webkit-box;
+      /* autoprefixer: ignore next */
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+    }
     &.nowrap {
       white-space: nowrap;
       text-overflow: ellipsis;
+      word-break: break-all;
     }
   }
   .action {
@@ -735,6 +739,7 @@ a.no-line {
 }
 .overflow-label {
   white-space: nowrap;
+  word-break: break-all;
   text-overflow: ellipsis;
   overflow: hidden;
   min-width: 0;

packages/theme/styles/panel.scss

@@ -220,8 +220,9 @@
         top: 0;
         left: 100%;
         width: 320px;
-        height: 100%;
         min-width: 0;
+        max-width: 320px;
+        height: 100%;
         background-color: var(--board-card-bg-color);
         border-left: 1px solid var(--divider-color);
         border-bottom-right-radius: .45rem;

packages/ui/src/components/Button.svelte

@@ -148,9 +148,9 @@
     }
   }
   .large {
-    height: 2rem;
+    height: 2.25rem;
     &.only-icon {
-      width: 2rem;
+      width: 2.25rem;
     }
   }
   .x-large {

packages/ui/src/components/calendar/DateRangePresenter.svelte

@@ -553,7 +553,7 @@
     &.link {
       padding: 0 0.875rem;
       width: 100%;
-      height: 2rem;
+      height: 2.25rem;
       color: var(--caption-color);
       &:hover {
         background-color: var(--body-color);

plugins/activity-resources/src/components/TxView.svelte

@@ -245,7 +245,7 @@
                   <span class="lower"><Label label={activity.string.To} /></span>
 
                   {#if !hasMessageType}
-                    <span class="strong">
+                    <span class="strong overflow-label">
                       {#if value.isObjectSet}
                         <ObjectPresenter value={value.set} inline />
                       {:else}
@@ -268,7 +268,7 @@
                   <span class="lower"><Label label={activity.string.To} /></span>
 
                   {#if !hasMessageType}
-                    <div class="strong">
+                    <div class="strong overflow-label">
                       {#if value.isObjectSet}
                         <ObjectPresenter value={value.set} inline />
                       {:else}
@@ -341,6 +341,7 @@
     position: relative;
     display: flex;
     justify-content: space-between;
+    min-width: 0;
 
     .msgactivity-icon,
     .msgactivity-avatar {
@@ -366,6 +367,7 @@
       display: flex;
       flex-grow: 1;
       margin-right: 1rem;
+      min-width: 0;
       color: var(--content-color);
 
       .msgactivity-content__header {
@@ -373,11 +375,13 @@
         justify-content: space-between;
         align-items: center;
         flex-grow: 1;
+        min-width: 0;
       }
       .msgactivity-content__title {
         display: inline-flex;
         align-items: baseline;
         flex-grow: 1;
+        min-width: 0;
       }
 
       &.content {
@@ -465,6 +469,7 @@
   .activity-content {
     overflow: hidden;
     visibility: visible;
+    min-width: 0;
     max-height: max-content;
     opacity: 1;
     transition-property: max-height, opacity;

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

@@ -17,7 +17,7 @@
   import core, { Account, Ref } from '@hcengineering/core'
   import { IntlString } from '@hcengineering/platform'
   import { createQuery, getClient } from '@hcengineering/presentation'
-  import { ButtonKind } from '@hcengineering/ui'
+  import { ButtonKind, ButtonSize } from '@hcengineering/ui'
   import UserBoxList from './UserBoxList.svelte'
 
   export let label: IntlString
@@ -25,6 +25,7 @@
   export let onChange: (refs: Ref<Account>[]) => void
   export let readonly = false
   export let kind: ButtonKind = 'link'
+  export let size: ButtonSize = 'large'
   export let width: string | undefined = undefined
   export let excludeItems: Ref<Account>[] | undefined = undefined
 
@@ -79,7 +80,7 @@
   {readonly}
   {docQuery}
   on:update={onUpdate}
-  size={'medium'}
+  {size}
   justify={'left'}
   width={width ?? 'min-content'}
   {kind}

plugins/task-resources/src/components/state/StateEditor.svelte

@@ -59,7 +59,9 @@
 <Button {kind} {size} {width} {justify} on:click={handleClick}>
   <svelte:fragment slot="content">
     {#if state}
-      <div class="pointer-events-none"><StatePresenter value={state} /></div>
+      <div class="pointer-events-none clear-mins">
+        <StatePresenter value={state} />
+      </div>
     {/if}
   </svelte:fragment>
 </Button>

plugins/task-resources/src/components/state/StatePresenter.svelte

@@ -18,24 +18,34 @@
   import { getColorNumberByText, getPlatformColor } from '@hcengineering/ui'
 
   export let value: State | undefined
+  export let shouldShowAvatar = true
+  export let inline: boolean = false
 </script>
 
 {#if value}
-  <div class="flex-row-center">
-    <div
-      class="state-container"
-      style="background-color: {getPlatformColor(value.color ?? getColorNumberByText(value.name))}"
-    />
-    <span class="overflow-label">{value.name}</span>
+  <div class="flex-presenter" class:inline-presenter={inline}>
+    {#if shouldShowAvatar}
+      <div
+        class="state-container"
+        class:inline
+        style="background-color: {getPlatformColor(value.color ?? getColorNumberByText(value.name))}"
+      />
+    {/if}
+    <span class="label nowrap">{value.name}</span>
   </div>
 {/if}
 
 <style lang="scss">
   .state-container {
+    flex-shrink: 0;
     margin-right: 0.5rem;
     width: 0.875rem;
     height: 0.875rem;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 0.25rem;
+
+    &.inline {
+      transform: translateY(0.125rem);
+    }
   }
 </style>

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

@@ -50,6 +50,7 @@
 
 {#if (value.component && value.component !== $activeComponent && groupBy !== 'component') || shouldShowPlaceholder}
   <div
+    class="clear-mins"
     class:minus-margin={kind === 'list-header'}
     class:compression
     use:tooltip={{ label: value.component ? tracker.string.MoveToComponent : tracker.string.AddToComponent }}

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

@@ -43,13 +43,13 @@
 
 {#if value}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class="flex" on:click={navigateToComponent}>
+  <div class="flex-presenter" class:inline-presenter={inline} on:click={navigateToComponent}>
     {#if !inline && shouldShowAvatar}
-      <div class="mr-2" use:tooltip={{ label: tracker.string.Component }}>
+      <div class="icon" use:tooltip={{ label: tracker.string.Component }}>
         <Icon icon={tracker.icon.Component} size={'small'} />
       </div>
     {/if}
-    <span title={value.label} class="fs-bold cursor-pointer caption-color overflow-label clear-mins">
+    <span title={value.label} class="label nowrap">
       {value.label}
     </span>
   </div>

plugins/tracker-resources/src/components/issues/edit/ControlPanel.svelte

@@ -202,14 +202,20 @@
   {#if keys.length > 0}
     <div class="divider" />
     {#each keys as key (typeof key === 'string' ? key : key.key)}
-      <AttributeBarEditor {key} _class={issue._class} object={issue} showHeader={true} />
+      <AttributeBarEditor {key} _class={issue._class} object={issue} showHeader={true} size={'large'} />
     {/each}
   {/if}
 
   {#each mixins as mixin}
     <div class="divider" />
     {#each getMixinKeys(mixin._id) as key (typeof key === 'string' ? key : key.key)}
-      <AttributeBarEditor {key} _class={mixin._id} object={hierarchy.as(issue, mixin._id)} showHeader={true} />
+      <AttributeBarEditor
+        {key}
+        _class={mixin._id}
+        object={hierarchy.as(issue, mixin._id)}
+        showHeader={true}
+        size={'large'}
+      />
     {/each}
   {/each}
 </div>

plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte

@@ -255,6 +255,7 @@
 
 <style lang="scss">
   .divider {
+    flex-shrink: 0;
     margin-top: 1rem;
     margin-bottom: 1rem;
     grid-column: 1 / 3;

plugins/tracker-resources/src/components/sprints/SprintEditor.svelte

@@ -68,7 +68,7 @@
 </script>
 
 <div
-  class="flex flex-wrap"
+  class="flex flex-wrap clear-mins"
   class:minus-margin={kind === 'list-header'}
   class:compression
   style:flex-direction={twoRows ? 'column' : 'row'}

plugins/tracker-resources/src/components/sprints/SprintPresenter.svelte

@@ -42,13 +42,14 @@
 
 {#if value}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class="flex" on:click={navigateToSprint}>
+  <div class="flex-presenter" class:inline-presenter={inline} on:click={navigateToSprint}>
     {#if !inline && shouldShowAvatar}
-      <div class="mr-2" use:tooltip={{ label: tracker.string.Sprint }}>
+      <div class="icon" use:tooltip={{ label: tracker.string.Sprint }}>
         <Icon icon={tracker.icon.Sprint} size={'small'} />
       </div>
     {/if}
-    <span title={value.label} class="cursor-pointer fs-bold caption-color overflow-label clear-mins">{value.label}</span
-    >
+    <span title={value.label} class="label nowrap">
+      {value.label}
+    </span>
   </div>
 {/if}

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

@@ -160,6 +160,7 @@
     overflow: hidden;
     display: flex;
     flex-direction: column;
+    flex-shrink: 0;
     max-height: 1000px;
     transition: max-height 0.2s var(--timing-main);
 

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

@@ -22,7 +22,7 @@
   export let value: string | number | undefined
   export let format: 'text' | 'password' | 'number'
   export let placeholder: IntlString
-  export let kind: EditStyle = 'search-style'
+  export let kind: EditStyle = 'editbox'
 
   const dispatch = createEventDispatcher()
 
@@ -32,11 +32,11 @@
 </script>
 
 <div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
-  <div class="header no-border flex-row-center">
-    <div class="flex-grow">
-      <EditBox bind:value {placeholder} {format} {kind} focus on:keypress={_onkeypress} />
+  <div class="flex-row-center justify-stretch p-2">
+    <div class="overflow-label flex-grow">
+      <EditBox bind:value {placeholder} {format} {kind} focus on:keypress={_onkeypress} maxWidth={'12rem'} />
     </div>
-    <div class="p-1">
+    <div class="ml-2">
       <Button icon={IconCheck} size={'small'} on:click={() => dispatch('close', value)} />
     </div>
   </div>

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

@@ -301,7 +301,7 @@
     </svelte:fragment>
 
     <svelte:fragment slot="attributes" let:direction={dir}>
-      <div class="flex flex-reverse flex-grow">
+      <div class="flex flex-reverse flex-no-shrink clear-mins">
         <Button
           kind={'transparent'}
           shape={'round'}

tests/sanity/tests/tracker.spec.ts

@@ -235,7 +235,7 @@ test('create-issue-draft', async ({ page }) => {
   await page.locator('[placeholder="Type text\\.\\.\\."]').click()
   // Fill [placeholder="Type text\.\.\."]
   await page.locator('[placeholder="Type text\\.\\.\\."]').fill('1')
-  await page.locator('.p-1 > .button').click()
+  await page.locator('.ml-2 > .button').click()
 
   // Click button:nth-child(8)
   await page.locator('#more-actions').click()
@@ -271,7 +271,7 @@ test('create-issue-draft', async ({ page }) => {
   await page.locator('[placeholder="Type text\\.\\.\\."]').dblclick()
   // Fill [placeholder="Type text\.\.\."]
   await page.locator('[placeholder="Type text\\.\\.\\."]').fill('2')
-  await page.locator('.p-1 > .button').click()
+  await page.locator('.ml-2 > .button').click()
 
   await page.keyboard.press('Escape')
   await page.keyboard.press('Escape')