TSK-856. Fixed layout in Issues (#2781)

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

models/tracker/src/index.ts

@@ -570,7 +570,7 @@ export function createModel (builder: Builder): void {
         {
           key: '$lookup.labels',
           presenter: tags.component.LabelsPresenter,
-          props: { kind: 'list', full: false, lookupField: 'labels' }
+          props: { kind: 'list', full: false, lookupField: 'labels', listProps: { optional: true, compression: true } }
         },
         { key: '', presenter: tracker.component.DueDatePresenter, props: { kind: 'list' } },
         {
@@ -583,6 +583,7 @@ export function createModel (builder: Builder): void {
             shouldShowPlaceholder: false,
             listProps: {
               excludeByKey: 'component',
+              compression: true,
               optional: true
             }
           }
@@ -597,6 +598,7 @@ export function createModel (builder: Builder): void {
             shouldShowPlaceholder: false,
             listProps: {
               excludeByKey: 'sprint',
+              compression: true,
               optional: true
             }
           }

packages/presentation/src/components/NavLink.svelte

@@ -20,6 +20,7 @@
   export let onClick: ((event: MouseEvent) => void) | undefined = undefined
   export let noUnderline = false
   export let inline = false
+  export let shrink: number = 0
 
   function clickHandler (e: MouseEvent) {
     if (disableClick) return
@@ -40,11 +41,17 @@
 
 {#if disableClick || href === undefined}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <span class:cursor-pointer={!disableClick} class:noUnderline class:inline on:click={clickHandler}>
+  <span
+    class:cursor-pointer={!disableClick}
+    class:noUnderline
+    class:inline
+    style:flex-shrink={shrink}
+    on:click={clickHandler}
+  >
     <slot />
   </span>
 {:else}
-  <a {href} class:noUnderline class:inline on:click={clickHandler}>
+  <a {href} class:noUnderline class:inline style:flex-shrink={shrink} on:click={clickHandler}>
     <slot />
   </a>
 {/if}
@@ -54,7 +61,7 @@
   a {
     display: flex;
     align-items: center;
-    flex-shrink: 0;
+    min-width: 0;
     color: var(--accent-color);
     // overflow: hidden;
     white-space: nowrap;

plugins/tags-resources/src/components/LabelsPresenter.svelte

@@ -14,6 +14,7 @@
   export let kind: 'short' | 'full' = 'short'
   export let isEditable: boolean = false
   export let action: (evt: MouseEvent) => Promise<void> | void = async () => {}
+  export let compression: boolean = false
 
   export let lookupField: string | undefined
 
@@ -50,7 +51,8 @@
   class="labels-container"
   style:justify-content={kind === 'short' ? 'space-between' : 'flex-start'}
   class:w-full={kind === 'full'}
-  style:flex-wrap={kind === 'short' ? 'nowrap' : 'wrap'}
+  style:flex-wrap={kind === 'short' || compression ? 'nowrap' : 'wrap'}
+  style:flex-shrink={compression ? 1 : 0}
   use:resizeObserver={(element) => {
     allWidth = element.clientWidth
   }}
@@ -60,7 +62,7 @@
   }}
 >
   {#each items as value, i}
-    <div class="label-box wrap-{kind}">
+    <div class="label-box wrap-{kind}" title={value.title}>
       <TagReferencePresenter attr={undefined} {value} kind={'kanban-labels'} bind:realWidth={widths[i]} />
     </div>
   {/each}
@@ -71,7 +73,7 @@
     overflow: hidden;
     display: flex;
     align-items: center;
-    flex-shrink: 0;
+    // flex-shrink: 0;
     min-width: 0;
     border-radius: 0.25rem;
   }

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

@@ -35,6 +35,7 @@
   export let onlyIcon: boolean = false
   export let groupBy: string | undefined = undefined
   export let enlargedText = false
+  export let compression: boolean = false
 
   const client = getClient()
 
@@ -50,13 +51,14 @@
 {#if (value.component && value.component !== $activeComponent && groupBy !== 'component') || shouldShowPlaceholder}
   <div
     class:minus-margin={kind === 'list-header'}
+    class:compression
     use:tooltip={{ label: value.component ? tracker.string.MoveToComponent : tracker.string.AddToComponent }}
   >
     <ComponentSelector
       {kind}
       {size}
       {shape}
-      {width}
+      width={compression ? 'min-content' : width}
       {justify}
       {isEditable}
       {shouldShowLabel}
@@ -73,4 +75,8 @@
   .minus-margin {
     margin-left: -0.5rem;
   }
+  .compression {
+    flex-shrink: 5;
+    min-width: 1rem;
+  }
 </style>

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

@@ -32,7 +32,11 @@
     <span class="names">
       {#each value.parents as parentInfo}
         <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <span class="name cursor-pointer" on:click={() => handleIssueEditorOpened(parentInfo)}>
+        <span
+          class="name overflow-label cursor-pointer"
+          title={parentInfo.parentTitle}
+          on:click={() => handleIssueEditorOpened(parentInfo)}
+        >
           {parentInfo.parentTitle}
         </span>
       {/each}
@@ -43,13 +47,12 @@
 <style lang="scss">
   .root {
     display: flex;
+    margin-left: 0;
     min-width: 0;
 
     .names {
       display: inline-flex;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+      min-width: 0;
       color: var(--content-color);
     }
 

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

@@ -26,23 +26,25 @@
 </script>
 
 {#if value}
-  <DocNavLink object={value} {onClick} component={tracker.component.EditIssue} inline>
+  <DocNavLink object={value} {onClick} component={tracker.component.EditIssue} inline shrink={1}>
     <span
       class="name overflow-label select-text"
       class:with-margin={shouldUseMargin}
       style:max-width={showParent ? `${value.parents.length !== 0 ? 95 : 100}%` : '100%'}
+      title={value.title}
     >
       {value.title}
     </span>
-    {#if showParent}
-      <ParentNamesPresenter {value} />
-    {/if}
   </DocNavLink>
+  {#if showParent}
+    <ParentNamesPresenter {value} />
+  {/if}
 {/if}
 
 <style lang="scss">
   .name {
-    flex-shrink: 0;
+    flex-shrink: 1;
+    min-width: 1rem;
     &:hover {
       text-decoration: underline;
     }

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

@@ -44,6 +44,7 @@
 
   export let groupBy: string | undefined = undefined
   export let enlargedText: boolean = false
+  export let compression: boolean = false
 
   const client = getClient()
   const spaceQuery = createQuery()
@@ -75,15 +76,16 @@
 <div
   class="flex flex-wrap"
   class:minus-margin={kind === 'list-header'}
+  class:compression
   style:flex-direction={twoRows ? 'column' : 'row'}
 >
   {#if (value.sprint && value.sprint !== $activeSprint && groupBy !== 'sprint') || shouldShowPlaceholder}
-    <div class="flex-row-center" class:minus-margin-vSpace={kind === 'list-header'} style:width>
+    <div class="flex-row-center" class:minus-margin-vSpace={kind === 'list-header'} class:compression style:width>
       <SprintSelector
         {kind}
         {size}
         {shape}
-        {width}
+        width={compression ? 'min-content' : width}
         {justify}
         {isEditable}
         {shouldShowLabel}
@@ -131,4 +133,8 @@
       margin: -0.25rem 0 -0.25rem 0.5rem;
     }
   }
+  .compression {
+    flex-shrink: 5;
+    min-width: 1rem;
+  }
 </style>

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

@@ -26,6 +26,7 @@
   export let inline = false
   export let component: AnyComponent = view.component.EditDoc
   export let props: Record<string, any> = {}
+  export let shrink: number = 0
 
   const client = getClient()
   const hierarchy = client.getHierarchy()
@@ -44,4 +45,4 @@
   $: getHref(object)
 </script>
 
-<NavLink {disableClick} {onClick} {noUnderline} {inline} {href}><slot /></NavLink>
+<NavLink {disableClick} {onClick} {noUnderline} {inline} {shrink} {href}><slot /></NavLink>

plugins/view-resources/src/components/list/ListItem.svelte

@@ -77,6 +77,14 @@
     }
     return { object, ...clearAttributeProps, ...props }
   }
+
+  let noCompressed: number
+  $: if (model) {
+    noCompressed = -1
+    model.forEach((m, i) => {
+      if (m.props?.listProps?.compression) noCompressed = i
+    })
+  }
 </script>
 
 <div
@@ -114,7 +122,7 @@
       />
     </div>
   </div>
-  {#each model as attributeModel}
+  {#each model as attributeModel, i}
     {@const listProps = attributeModel.props?.listProps}
     {#if attributeModel.props?.type === 'grow'}
       <svelte:component this={attributeModel.presenter} />
@@ -135,6 +143,7 @@
           value={getObjectValue(attributeModel.key, docObject) ?? ''}
           onChange={getOnChange(docObject, attributeModel)}
           kind={'list'}
+          compression={listProps?.compression && i !== noCompressed}
           {...joinProps(attributeModel, docObject, props)}
         />
       {/if}