fix(list-view): fix alignment of work item cells (fabric8-ui#2633)

* fix(list-view): fix alignment of work item cells * fix(labels): fix label alignment in quick preview * fix(tests): fix tests spacing * fix(test): fix tests * fix(labels): fix labels in comments and assignee cell width * fix(datatable): update cookie version for datatable * fix(datatable): fix width of overflown work item cells * fix(comment): add button type * fix(labels): fix scpacing between labels * fix(wi-cell): fix width for iteration/labels and tooltip for iteration * fix(tests): fix test for iteration title length
Raunak1203 · Aug 21, 2018 · 6a3abdd · 6a3abdd
1 parent 510b9e0
commit 6a3abdd
Show file tree

Hide file tree

Showing 12 changed files with 118 additions and 117 deletions.
diff --git a/.csscomb.json b/.csscomb.json
@@ -7,7 +7,6 @@
   "eof-newline": true,
   "exclude": ["src/assets/stylesheets/shared/_formulas.less"],
   "leading-zero": false,
-  "lines-between-rulesets": 1,
   "quotes": "single",
   "remove-empty-rulesets": true,
   "space-before-colon": 0,
@@ -24,7 +23,7 @@
   "tab-size": 2,
   "unitless-zero": true,
   "verbose": true,
-  "sort-order": 
+  "csscomb-preset": 
   [
     [
       "content",

diff --git a/src/app/components_ngrx/planner-list/datatable-config.ts b/src/app/components_ngrx/planner-list/datatable-config.ts
@@ -40,8 +40,8 @@ export const datatableColumn = [{
   display: true,
   showInDisplay: true,
   maxWidth: undefined,
-  minWidth: 300,
-  width: 300
+  minWidth: 200,
+  width: 220
 }, {
   name: 'State',
   prop: 'state',
@@ -52,7 +52,7 @@ export const datatableColumn = [{
   showInDiplay: false,
   maxWidth: undefined,
   minWidth: undefined,
-  width: 120
+  width: 130
 }, {
   name: 'Iteration',
   prop: 'iteration',
@@ -63,7 +63,7 @@ export const datatableColumn = [{
   showInDisplay: true,
   minWidth: undefined,
   maxWidth: undefined,
-  width: 150
+  width: 120
 }, {
   name: 'Creator',
   prop: 'creator',
@@ -85,6 +85,6 @@ export const datatableColumn = [{
   showInDisplay: true,
   maxWidth: undefined,
   minWidth: undefined,
-  width: 145
+  width: 150
 }];
 
diff --git a/src/app/components_ngrx/planner-list/planner-list.component.html b/src/app/components_ngrx/planner-list/planner-list.component.html
@@ -217,7 +217,7 @@ <h4>Please wait, we are loading your data.</h4>
             </ng-template>
 
             <ng-template ngx-datatable-cell-tree-loader *ngIf="c.name==='Title'">
-              <div class="spinner spinner-xs icon-loader margin-top-15"></div>
+              <div class="spinner spinner-xs icon-loader margin-top-5"></div>
             </ng-template>
               <ng-template let-row="row"
                 ngx-datatable-cell-template>
@@ -242,9 +242,10 @@ <h4>Please wait, we are loading your data.</h4>
           [sortable]="false"
           [cellClass]="'cell-class'"
           [frozenLeft]="false">
-            <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
+            <ng-template let-row="row" let-expanded="expanded"
+              ngx-datatable-cell-template>
               <span class="table-dnd-container">
-                 <span class="table-dnd-header"></span>
+                <span class="table-dnd-header"></span>
               </span>
               <a class="quick-add-icon pficon-add-circle-o disabled"
                 placement="right"

diff --git a/src/app/components_ngrx/planner-list/planner-list.component.less b/src/app/components_ngrx/planner-list/planner-list.component.less
@@ -215,24 +215,31 @@ a.disabled {
 /// ng x-datatables css
 
 .cell-class {
-  overflow: visible !important;
+  display: table !important;
   padding-top: 3px !important;
-  padding-bottom: 4px !important;
-  line-height: 44px !important;
+  padding-bottom: 3px !important;
+}
+.datatable-body-cell-label {
+  display: table-cell;
+  vertical-align: middle;
+  height: 100%;
+  align-items: center;
+  label {
+    margin: 0;
+  }
 }
-
 .header-cell {
-  font-weight: bold !important;
-  overflow: visible !important;
-  color: @color-pf-black !important;
+  font-weight: bold;
+  overflow: visible;
+  color: @color-pf-black-800;
 }
 
 .datatable-row-detail {
   overflow-y: visible;
 }
 
 .datatable-header {
-  overflow: visible !important;
+  overflow: visible;
 }
 
 .fullscreen {

diff --git a/src/app/components_ngrx/work-item-cell/work-item-cell.component.html b/src/app/components_ngrx/work-item-cell/work-item-cell.component.html
@@ -19,10 +19,10 @@
 <div class="width-100"
   *ngIf="col === 'title'">
   <div class="wi-detail-title">
-    <p class="truncate pointer"
-        [class.bold]="row.bold"
-        [innerHTML]="row.title"
-        (click)="onPreview($event, row['id'])"></p>
+    <p class="truncate pointer margin-0"
+      [class.bold]="row.bold"
+      [innerHTML]="row.title"
+      (click)="onPreview($event, row['id'])"></p>
   </div>
   <div class="dib text-right wi-detail-icon">
     <a class="fa fa-list-alt padding-v-5 pointer"
@@ -45,15 +45,19 @@
 
 <div *ngIf="col === 'label'">
   <f8-label
-      [labels]="row?.labelsObs | async"
-      [truncateAfter]='4'
-      [allowDelete]="false"
-      (onLabelClick)="labelClick($event)"></f8-label>
+    [labels]="row?.labelsObs | async"
+    [truncateAfter]='4'
+    [allowDelete]="false"
+    (onLabelClick)="labelClick($event)">
+  </f8-label>
 </div>
 
 <!-- Iteration -->
-<span id="table-iteration" *ngIf="col === 'iteration'">
-  {{ (row.iterationObs | async)?.parentPath === '/' ? 'NA' : (row.iterationObs | async)?.name | truncate : 18 }}
+<span id="table-iteration" 
+  *ngIf="col === 'iteration'"
+  tooltip="{{ (row.iterationObs | async)?.parentPath === '/' ? 'NA' : (row.iterationObs | async)?.name }}"
+  placement="left">
+  {{ (row.iterationObs | async)?.parentPath === '/' ? 'NA' : (row.iterationObs | async)?.name | truncate : 12 }}
 </span>
 
 <!-- Creator -->
@@ -64,10 +68,11 @@
   [imgPlacement]="'left'">
 </user-avatar>
 <!-- Assignee -->
-<div *ngIf="col === 'assignees'" >
+<div class="assignees-cell"
+  *ngIf="col === 'assignees'">
   <f8-assignee
     [showFullName]="false"
     [truncateAfter]="3"
-    [assignees]="row.assigneesObs | async"
-  ></f8-assignee>
+    [assignees]="row.assigneesObs | async">
+  </f8-assignee>
 </div>
diff --git a/src/app/components_ngrx/work-item-cell/work-item-cell.component.less b/src/app/components_ngrx/work-item-cell/work-item-cell.component.less
@@ -16,3 +16,9 @@
 .bold {
   font-weight: bold;
 }
+.assignees-cell {
+  .f8-assignees {
+    display: initial;
+    margin: 0 !important;
+  }
+}
diff --git a/src/app/components_ngrx/work-item-detail/work-item-detail.component.less b/src/app/components_ngrx/work-item-detail/work-item-detail.component.less
@@ -40,6 +40,7 @@
   &__detail {
     // height: ~"calc(e('100vh - 200px'))";
     label {
+      padding-top: 0;
       text-align: left;
     }
     &-wrap {
@@ -53,8 +54,9 @@
     }
   }
   &__labels {
-    &--selector {
+    .label-wrapper {
       margin-top: 5px;
+      margin-bottom: 5px;
     }
   }
 

diff --git a/src/app/components_ngrx/work-item-event/work-item-event.component.html b/src/app/components_ngrx/work-item-event/work-item-event.component.html
@@ -6,72 +6,65 @@
     container="body">
   </user-avatar>
   <div class="f8-event-body margin-v-3">
-    <div>
-      <h5 class="f8-event-author pull-left">
-        <strong class="truncate">
-          {{ (event.modifier | async).name.split(' ')[0] }}
-        </strong>
-        <!-- Decription -->
-        <span class="dib" style="vertical-align: text-top"
-          *ngIf="textType === 'description'">
-            edited the description
-        </span>
+      <strong class="f8-event-author pull-left">
+        {{ (event.modifier | async).name.split(' ')[0] }}
+      </strong>
+      <!-- Decription -->
+      <span *ngIf="textType === 'description'">
+        edited the description
+      </span>
 
-        <!-- Single Value Change -->
-        <span
-          class="dib"
-          style="vertical-align: top"
-          *ngIf="textType === 'attribute'" >
-          <span [innerHTML]=intermediateText></span>
-          <i> '{{ event.oldValue }}' </i>
-          {{ toText }}
-          <i> '{{ event.newValue }}'</i>
-        </span>
+      <!-- Single Value Change -->
+      <span class="margin-h-5"
+        *ngIf="textType === 'attribute'">
+        <span [innerHTML]=intermediateText></span>
+        <i> '{{ event.oldValue }}' </i>
+        {{ toText }}
+        <i> '{{ event.newValue }}'</i>
+      </span>
 
-        <!--Area, Iteration, Assignee-->
-        <span class="dib" style="vertical-align: text-top"
-          *ngIf="textType === 'relationship' || textType === 'assignee'" >
-          <span [innerHTML]=intermediateText></span>
-          <i *ngFor="let item of event.newValueRelationshipsObs"> '{{ (item | async).name }}' </i>
-          <ng-container *ngIf="toText && textType === 'assignee'">{{ toText }}
-            <i *ngFor="let item of event.oldValueRelationshipsObs"> '{{ (item | async).name }}'</i>
-          </ng-container>
-          <ng-container *ngIf="event.oldValueRelationshipsObs[0] | async as it">
-            <ng-container *ngIf="toText && textType === 'relationship' && it.parentPath !== '/'">
-              {{ toText }}
-              <i> '{{ it.name }}'</i>
-            </ng-container>
-          </ng-container>
+      <!--Area, Iteration, Assignee-->
+      <span class="margin-h-5" style="display: contents;"
+        *ngIf="textType === 'relationship' || textType === 'assignee'" >
+        <span class="margin-h-5"
+          [innerHTML]=intermediateText>
         </span>
+        <i class="margin-h-3"
+          *ngFor="let item of event.newValueRelationshipsObs"> '{{ (item | async).name }}' </i>
+        <ng-container *ngIf="toText && textType === 'assignee'">{{ toText }}
+          <i  class="margin-h-3"
+            *ngFor="let item of event.oldValueRelationshipsObs"> '{{ (item | async).name }}'</i>
+        </ng-container>
+        <ng-container *ngIf="event.oldValueRelationshipsObs[0] | async as it">
+          <ng-container *ngIf="toText && textType === 'relationship' && it.parentPath !== '/'">
+            {{ toText }}
+            <i class="margin-h-3"> '{{ it.name }}'</i>
+          </ng-container>
+        </ng-container>
+      </span>
 
-        <!--Labels-->
-        <div class="audit-trail__label"
-          *ngIf="textType === 'label'" >
-          <span style="vertical-align: text-top;"
-            [innerHTML]=intermediateText></span>
-          <f8-label
-            [labels]='event.newValueRelationshipsObs | async'
+      <!--Labels-->
+      <div class="audit-trail__label"
+        *ngIf="textType === 'label'" >
+        <span class="padding-left-5" [innerHTML]=intermediateText></span>
+        <f8-label class="margin-h-5"
+          *ngIf='(event.newValueRelationshipsObs | async).length > 0'
+          [labels]='event.newValueRelationshipsObs | async'
+          [allowDelete]="false"
+          [context]="'detail'">
+        </f8-label>
+        <ng-container *ngIf="toText">
+          <span> {{ toText }} </span>
+          <f8-label class="margin-left-5"
+            [labels]='event.oldValueRelationshipsObs | async'
             [allowDelete]="false"
             [context]="'detail'">
           </f8-label>
-          <ng-container *ngIf="toText">
-            <span class="dib"
-              style="vertical-align: text-top;">
-              {{ toText }}
-            </span>
-            <f8-label
-              [labels]='event.oldValueRelationshipsObs | async'
-              [allowDelete]="false"
-              [context]="'detail'">
-            </f8-label>
-          </ng-container>
-        </div>
-      </h5>
+        </ng-container>
+      </div>
       <small class="f8-event--create-time"
-        style="vertical-align: text-top"
         [tooltip]="event.timestamp | date:'medium'">
         | {{ event.timestamp | f8Time }}
       </small>
     </div>
-  </div>
 </div>
diff --git a/src/app/components_ngrx/work-item-event/work-item-event.component.less b/src/app/components_ngrx/work-item-event/work-item-event.component.less
@@ -12,8 +12,9 @@
     }
   }
   &-body {
-    min-width: 0; //fix for having full wrapper width and overflowen content
-    padding-left: 35px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
   }
 
   &-author {
@@ -23,25 +24,13 @@
     display: contents;
     margin-top: 5px;
     margin-bottom: 0;
-    strong {
-      display: inline-block;
-      width: auto;
-    }
   }
   &--create-time {
-    max-width: 100%;
-    margin-top: 5px;
-    margin-right: 5px;
-    line-height: 1.3;
+    margin-left: 5px;
     color: @color-pf-black-400;
+    cursor: pointer;
   }
 }
 .audit-trail__label {
-  display: inherit;
-  f8-label {
-    display: inline-block;
-    .label-wrapper {
-      display: inline-block !important;
-    }
-  }
+  display: contents;
 }
diff --git a/src/app/services/cookie.service.ts b/src/app/services/cookie.service.ts
@@ -4,7 +4,7 @@ import { Injectable } from '@angular/core';
 export class CookieService {
   // Increase this by one everytime
   // a change is made in the table columns
-  datatableColumnVersion = 2;
+  datatableColumnVersion = 4;
 
   constructor() { }