Tracker: Status should be positioned at same offset (#1464)

Signed-off-by: Artyom Grigorovich <grigorovichartyom@gmail.com>

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

@@ -61,13 +61,11 @@
   <Scroller>
     <IssuesList
       _class={tracker.class.Issue}
-      leftItemsConfig={[
+      itemsConfig={[
         { key: '', presenter: tracker.component.PriorityPresenter, props: { currentSpace } },
         { key: '', presenter: tracker.component.IssuePresenter, props: { currentTeam } },
         { key: '', presenter: tracker.component.StatusPresenter, props: { currentSpace } },
-        { key: '', presenter: tracker.component.TitlePresenter }
-      ]}
-      rightItemsConfig={[
+        { key: '', presenter: tracker.component.TitlePresenter, props: { shouldUseMargin: true } },
         { key: '', presenter: tracker.component.DueDatePresenter, props: { currentSpace } },
         { key: 'modifiedOn', presenter: tracker.component.ModificationDatePresenter },
         { key: '', presenter: tracker.component.AssigneePresenter, props: { currentSpace } }

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

@@ -25,16 +25,31 @@
   const client = getClient()
   const shortLabel = client.getHierarchy().getClass(value._class).shortLabel
 
+  $: issueName = `${currentTeam.identifier}-${value.number}`
+  
   const handleIssueEditorOpened = () => {
     showPanel(tracker.component.EditIssue, value._id, value._class, 'content')
   }
 </script>
 
 {#if value && shortLabel}
-  <div class="flex-presenter" class:inline-presenter={inline} on:click={handleIssueEditorOpened}>
+  <div class="flex-presenter issuePresenterRoot" class:inline-presenter={inline} on:click={handleIssueEditorOpened}>
     <div class="icon">
       <Icon icon={tracker.icon.Issue} size={'small'} />
     </div>
-    <span class="label nowrap">{currentTeam.identifier}-{value.number}</span>
+    <span title={issueName} class="label nowrap issueLabel">{issueName}</span>
   </div>
 {/if}
+
+<style lang="scss">
+  .issuePresenterRoot {
+    max-width: 5rem;
+  }
+
+  .issueLabel {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+</style>

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

@@ -23,8 +23,7 @@
 
   export let _class: Ref<Class<Doc>>
   export let baseMenuClass: Ref<Class<Doc>> | undefined = undefined
-  export let leftItemsConfig: (BuildModelKey | string)[]
-  export let rightItemsConfig: (BuildModelKey | string)[] | undefined = undefined
+  export let itemsConfig: (BuildModelKey | string)[]
   export let options: FindOptions<Doc> | undefined = undefined
   export let query: DocumentQuery<Doc>
 
@@ -92,16 +91,9 @@
 
     return props.length
   }
-
-  const buildItemModels = async () => {
-    const leftModels = await buildModel({ client, _class, keys: leftItemsConfig, options })
-    const rightModels = rightItemsConfig && (await buildModel({ client, _class, keys: rightItemsConfig, options }))
-
-    return { leftModels, rightModels }
-  }
 </script>
 
-{#await buildItemModels()}
+{#await buildModel({ client, _class, keys: itemsConfig, options })}
   {#if !isLoading}
     <Loading />
   {/if}
@@ -114,78 +106,68 @@
           class:mListGridChecked={selectedIssueIds.has(docObject._id)}
           class:mListGridFixed={rowIndex === selectedRowIndex}
         >
-          <div class="modelsContainer">
-            {#each itemModels.leftModels as attributeModel, attributeModelIndex}
-              {#if attributeModelIndex === 0}
-                <div class="gridElement">
-                  <Tooltip direction={'bottom'} label={tracker.string.SelectIssue}>
-                    <div class="eListGridCheckBox ml-2">
-                      <CheckBox
-                        checked={selectedIssueIds.has(docObject._id)}
-                        on:value={(event) => {
-                          handleIssueSelected(docObject._id, event)
-                        }}
-                      />
-                    </div>
-                  </Tooltip>
-                  <div class="priorityPresenter">
-                    <svelte:component
-                      this={attributeModel.presenter}
-                      value={getObjectValue(attributeModel.key, docObject) ?? ''}
-                      {...attributeModel.props}
+          {#each itemModels as attributeModel, attributeModelIndex}
+            {#if attributeModelIndex === 0}
+              <div class="gridElement">
+                <Tooltip direction={'bottom'} label={tracker.string.SelectIssue}>
+                  <div class="eListGridCheckBox ml-2">
+                    <CheckBox
+                      checked={selectedIssueIds.has(docObject._id)}
+                      on:value={(event) => {
+                        handleIssueSelected(docObject._id, event)
+                      }}
                     />
                   </div>
-                </div>
-              {:else if attributeModelIndex === 1}
-                <div class="issuePresenter">
-                  <svelte:component
-                    this={attributeModel.presenter}
-                    value={getObjectValue(attributeModel.key, docObject) ?? ''}
-                    {...attributeModel.props}
-                  />
-                  <div
-                    id="context-menu"
-                    class="eIssuePresenterContextMenu"
-                    on:click={(event) => showMenu(event, docObject, rowIndex)}
-                  >
-                    <IconMoreV size={'small'} />
-                  </div>
-                </div>
-              {:else}
-                <div class="gridElement">
+                </Tooltip>
+                <div class="priorityPresenter">
                   <svelte:component
                     this={attributeModel.presenter}
                     value={getObjectValue(attributeModel.key, docObject) ?? ''}
                     {...attributeModel.props}
                   />
                 </div>
-              {/if}
-            {/each}
-          </div>
-          {#if itemModels.rightModels}
-            <div class="modelsContainer">
-              {#each itemModels.rightModels as attributeModel}
-                <div class="gridElement">
-                  <svelte:component
-                    this={attributeModel.presenter}
-                    value={getObjectValue(attributeModel.key, docObject) ?? ''}
-                    {...attributeModel.props}
-                  />
+              </div>
+            {:else if attributeModelIndex === 1}
+              <div class="issuePresenter">
+                <svelte:component
+                  this={attributeModel.presenter}
+                  value={getObjectValue(attributeModel.key, docObject) ?? ''}
+                  {...attributeModel.props}
+                />
+                <div
+                  id="context-menu"
+                  class="eIssuePresenterContextMenu"
+                  on:click={(event) => showMenu(event, docObject, rowIndex)}
+                >
+                  <IconMoreV size={'small'} />
                 </div>
-              {/each}
-            </div>
-          {/if}
+              </div>
+            {:else if attributeModelIndex === 3}
+              <svelte:component
+                this={attributeModel.presenter}
+                value={getObjectValue(attributeModel.key, docObject) ?? ''}
+                {...attributeModel.props}
+              />
+              <div class="filler" />
+            {:else}
+              <div class="gridElement">
+                <svelte:component
+                  this={attributeModel.presenter}
+                  value={getObjectValue(attributeModel.key, docObject) ?? ''}
+                  {...attributeModel.props}
+                />
+              </div>
+            {/if}
+          {/each}
         </div>
       {/each}
     {:else if loadingProps !== undefined}
       {#each Array(getLoadingElementsLength(loadingProps, options)) as _, rowIndex}
         <div class="listGrid mListGridIsLoading" class:fixed={rowIndex === selectedRowIndex}>
-          <div class="modelsContainer">
-            <div class="gridElement">
-              <CheckBox checked={false} />
-              <div class="ml-4">
-                <Spinner size="small" />
-              </div>
+          <div class="gridElement">
+            <CheckBox checked={false} />
+            <div class="ml-4">
+              <Spinner size="small" />
             </div>
           </div>
         </div>
@@ -206,7 +188,6 @@
   .listGrid {
     display: flex;
     align-items: center;
-    justify-content: space-between;
     height: 3.25rem;
     color: var(--theme-caption-color);
     border-bottom: 1px solid var(--theme-button-border-hovered);
@@ -245,9 +226,9 @@
     }
   }
 
-  .modelsContainer {
+  .filler {
     display: flex;
-    align-items: center;
+    flex-grow: 1;
   }
 
   .gridElement {
@@ -268,6 +249,8 @@
   .issuePresenter {
     display: flex;
     align-items: center;
+    flex-shrink: 0;
+    width: 5.5rem;
     margin-left: 0.5rem;
 
     .eIssuePresenterContextMenu {

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

@@ -29,5 +29,13 @@
 </script>
 
 <Tooltip label={tracker.string.ModificationDate} props={{ value: fullModificationDate }}>
-  <span class="nowrap">{shortModificationDate}</span>
+  <span class="modificationDateLabel">{shortModificationDate}</span>
 </Tooltip>
+
+<style lang="scss">
+  .modificationDateLabel {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+</style>

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

@@ -16,8 +16,22 @@
   import type { Issue } from '@anticrm/tracker'
 
   export let value: Issue
+  export let shouldUseMargin: boolean = false
 </script>
 
 {#if value}
-  <span class="label nowrap" title={value.title}>{value.title}</span>
+  <span class="titleLabel" class:mTitleLabelWithMargin={shouldUseMargin} title={value.title}>{value.title}</span>
 {/if}
+
+<style lang="scss">
+  .titleLabel {
+    flex-shrink: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    &.mTitleLabelWithMargin {
+      margin-left: 0.5rem;
+    }
+  }
+</style>