From 667593085b4b24e1d438fad3e88414ac07b49847 Mon Sep 17 00:00:00 2001
From: Timothee Guerin <timothee.guerin@outlook.com>
Date: Fri, 6 Oct 2017 12:30:20 -0700
Subject: [PATCH] UI: Make quicklist more compact (#734)

* Reduce font size on quick list

* Missing files

* Fix
---
 .../account/browse/account-fav-list.html      |   2 +-
 .../account/browse/account-list.html          |   2 +-
 .../application/browse/application-list.html  |   2 +-
 .../quick-list/quick-list-item.component.ts   |   2 +
 .../base/quick-list/quick-list-item.scss      | 127 ++++++++++++++++++
 .../base/quick-list/quick-list.component.ts   |   2 +
 .../base/quick-list/quick-list.scss           |   6 +
 .../data/browse/file-group-list.html          |   6 +-
 .../browse/display/file-list-display.html     |   2 +-
 app/components/job/browse/job-list.html       |   2 +-
 .../browse/display/node-list-display.html     |   2 +-
 app/components/pool/browse/pool-list.html     |   2 +-
 .../browse/display/task-list-display.html     |   2 +-
 .../sub-tasks/sub-task-display-list.html      |   2 +-
 app/styles/base/list.scss                     | 127 ------------------
 app/styles/common/type.scss                   |   4 +-
 app/styles/variables.scss                     |  25 ++--
 .../quick-list/quick-list.component.spec.ts   |   2 +-
 18 files changed, 161 insertions(+), 158 deletions(-)
 create mode 100644 app/components/base/quick-list/quick-list-item.scss
 create mode 100644 app/components/base/quick-list/quick-list.scss

diff --git a/app/components/account/browse/account-fav-list.html b/app/components/account/browse/account-fav-list.html
index b164326604..ca23b08bee 100644
--- a/app/components/account/browse/account-fav-list.html
+++ b/app/components/account/browse/account-fav-list.html
@@ -1,7 +1,7 @@
 <bl-loading [status]="status">
     <bl-quick-list>
         <bl-quick-list-item *ngFor="let account of displayedAccounts | async" [link]="['/accounts', account.id]" [key]="account.id">
-            <h4 bl-quick-list-item-title>{{account.name}}</h4>
+            <div bl-quick-list-item-title>{{account.name}}</div>
             <p bl-quick-list-item-field>{{account.location}}</p>
             <div bl-quick-list-item-preview>
                 <div class="flex-center">
diff --git a/app/components/account/browse/account-list.html b/app/components/account/browse/account-list.html
index 3c805dcd31..de15514bf4 100644
--- a/app/components/account/browse/account-list.html
+++ b/app/components/account/browse/account-list.html
@@ -3,7 +3,7 @@
         <bl-quick-list-item-status [status]="accountStatus(account.id)">
         </bl-quick-list-item-status>
 
-        <h4 bl-quick-list-item-title>{{account.name}}</h4>
+        <div bl-quick-list-item-title>{{account.name}}</div>
         <p bl-quick-list-item-field>{{account.location}}</p>
         <div bl-quick-list-item-preview>
             <div class="flex-center">
diff --git a/app/components/application/browse/application-list.html b/app/components/application/browse/application-list.html
index 30c9599680..1952c61d39 100644
--- a/app/components/application/browse/application-list.html
+++ b/app/components/application/browse/application-list.html
@@ -3,7 +3,7 @@
         <bl-quick-list-item-status [status]="appStatus(application)">
         </bl-quick-list-item-status>
 
-        <h4 bl-quick-list-item-title>{{application.id}}</h4>
+        <div bl-quick-list-item-title>{{application.id}}</div>
         <p bl-quick-list-item-field>{{application.packages?.size}} packages</p>
         <div bl-quick-list-item-preview>
             <bl-application-preview [application]="application"></bl-application-preview>
diff --git a/app/components/base/quick-list/quick-list-item.component.ts b/app/components/base/quick-list/quick-list-item.component.ts
index 6203ade228..5d9aa8e63c 100644
--- a/app/components/base/quick-list/quick-list-item.component.ts
+++ b/app/components/base/quick-list/quick-list-item.component.ts
@@ -8,6 +8,8 @@ import { ContextMenuService } from "app/components/base/context-menu";
 import { AbstractListItemBase } from "../abstract-list";
 import { QuickListComponent } from "./quick-list.component";
 
+import "./quick-list-item.scss";
+
 @Component({
     selector: "bl-quick-list-item",
     templateUrl: "quick-list-item.html",
diff --git a/app/components/base/quick-list/quick-list-item.scss b/app/components/base/quick-list/quick-list-item.scss
new file mode 100644
index 0000000000..017a79f147
--- /dev/null
+++ b/app/components/base/quick-list/quick-list-item.scss
@@ -0,0 +1,127 @@
+@import "app/styles/variables";
+
+bl-quick-list-item {
+    cursor: pointer;
+    outline: none;
+
+    .quick-list-item {
+        display: flex;
+        width: 100%;
+        height: 48px;
+        white-space: nowrap;
+
+        &.selected {
+            background-color: map-get($primary, 100);
+
+            p {
+                color: $mineShaftGray;
+            }
+        }
+
+        &.focused {
+            background-color: map-get($primary, 200);
+        }
+
+        &:hover:not(.selected) {
+            background-color: $altoGray;
+        }
+
+        .quick-list-details {
+            flex: 1 1 auto;
+            overflow: hidden;
+            padding: 5px;
+            text-overflow: ellipsis;
+            min-width: 0;
+
+            [bl-quick-list-item-title] {
+                color: $headings-color;
+            }
+
+            [bl-quick-list-item-title], [bl-quick-list-item-field] {
+                display: flex;
+                overflow: hidden;
+                text-overflow: ellipsis;
+
+                > bl-tags {
+                    margin-left: 5px;
+                }
+            }
+        }
+
+        [bl-quick-list-item-preview] {
+            padding: 5px;
+
+            i {
+                padding-left: 4px;
+            }
+
+            .fa-hourglass-half {
+                color: map-get($primary, 400);
+            }
+        }
+
+        bl-quick-list-item-status {
+            position: relative;
+            color: map-get($primary, 500);
+            flex: 0 0 8px;
+            display: flex;
+            align-items: stretch;
+            > .status-badge {
+                width: 100%;
+
+                &.warning {
+                    background-color: map-get($danger, 500);
+                }
+
+                &.lightaccent {
+                    background: map-get($primary, 100);
+
+                }
+
+                &.accent {
+                    background: map-get($primary, 300);
+                }
+
+                &.important {
+                    background: repeating-linear-gradient(
+                        45deg,
+                        transparent,
+                        transparent 5px,
+                        $concreteGray 5px,
+                        $concreteGray 10px
+                    ), map-get($primary, 500);
+                }
+            }
+        }
+
+        .select-item-container {
+            width: 17px;
+            padding: 7px 0 0 3px;
+        }
+
+        .quick-list-details {
+            flex: 1 1 auto;
+            overflow: hidden;
+            padding: 3px;
+            text-overflow: ellipsis;
+            min-width: 0;
+
+            [bl-quick-list-item-title], [bl-quick-list-item-field] {
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+
+        [bl-quick-list-item-preview] {
+            padding: 3px 10px 0 0;
+        }
+
+        .quick-list-other {
+            .select-item-checkbox {
+                position: absolute;
+                right: 0;
+
+            }
+        }
+    }
+}
diff --git a/app/components/base/quick-list/quick-list.component.ts b/app/components/base/quick-list/quick-list.component.ts
index 9da420b08d..9cc5f892e6 100644
--- a/app/components/base/quick-list/quick-list.component.ts
+++ b/app/components/base/quick-list/quick-list.component.ts
@@ -7,6 +7,8 @@ import { AbstractListBase } from "../abstract-list";
 import { FocusSectionComponent } from "../focus-section";
 import { QuickListItemComponent } from "./quick-list-item.component";
 
+import "./quick-list.scss";
+
 @Component({
     selector: "bl-quick-list",
     template: `
diff --git a/app/components/base/quick-list/quick-list.scss b/app/components/base/quick-list/quick-list.scss
new file mode 100644
index 0000000000..1c5d6fda09
--- /dev/null
+++ b/app/components/base/quick-list/quick-list.scss
@@ -0,0 +1,6 @@
+@import "app/styles/variables";
+
+bl-quick-list {
+    display: block;
+    width: 100%;
+}
diff --git a/app/components/data/browse/file-group-list.html b/app/components/data/browse/file-group-list.html
index 357c289250..145c2378ae 100644
--- a/app/components/data/browse/file-group-list.html
+++ b/app/components/data/browse/file-group-list.html
@@ -1,10 +1,10 @@
 <bl-quick-list *ngIf="quickList">
-    <bl-quick-list-item *ngFor="let container of data.items | async" [link]="['/data/', container.id]" 
+    <bl-quick-list-item *ngFor="let container of data.items | async" [link]="['/data/', container.id]"
         [key]="container.id" [contextmenu]="contextmenu(container)">
         <bl-quick-list-item-status [status]="containerStatus(container)">
         </bl-quick-list-item-status>
 
-        <h4 bl-quick-list-item-title>{{container.name}}</h4>
+        <div bl-quick-list-item-title>{{container.name}}</div>
         <div bl-quick-list-item-field>{{container.lease?.state}}</div>
         <div bl-quick-list-item-preview>
             <bl-file-group-preview></bl-file-group-preview>
@@ -19,7 +19,7 @@ <h4 bl-quick-list-item-title>{{container.name}}</h4>
         <bl-column>Lease status</bl-column>
         <bl-column>Last modified</bl-column>
     </bl-thead>
-    <bl-row *ngFor="let container of data.items | async" [link]="['/data/', container.id]" [key]="container.id" 
+    <bl-row *ngFor="let container of data.items | async" [link]="['/data/', container.id]" [key]="container.id"
         [contextmenu]="contextmenu(container)">
         <bl-cell>{{container.name}}</bl-cell>
         <bl-cell>{{container.lease?.state}}</bl-cell>
diff --git a/app/components/file/browse/display/file-list-display.html b/app/components/file/browse/display/file-list-display.html
index c754a194d4..b18b3feba0 100644
--- a/app/components/file/browse/display/file-list-display.html
+++ b/app/components/file/browse/display/file-list-display.html
@@ -4,7 +4,7 @@
             <bl-quick-list-item-status [status]="" [tooltip]="">
             </bl-quick-list-item-status>
 
-            <h4 bl-quick-list-item-title>{{file.name}}</h4>
+            <div bl-quick-list-item-title>{{file.name}}</div>
             <p bl-quick-list-item-field>{{prettyFileSize(file.properties.contentLength)}}</p>
         </bl-quick-list-item>
     </bl-quick-list>
diff --git a/app/components/job/browse/job-list.html b/app/components/job/browse/job-list.html
index 2167c889bc..e971bbed08 100644
--- a/app/components/job/browse/job-list.html
+++ b/app/components/job/browse/job-list.html
@@ -4,7 +4,7 @@
         <bl-quick-list-item-status [status]="jobStatus(job)" [tooltip]="jobStatusText(job)">
         </bl-quick-list-item-status>
 
-        <h4 bl-quick-list-item-title>{{job.id}}</h4>
+        <div bl-quick-list-item-title>{{job.id}}</div>
         <div bl-quick-list-item-field>
             {{job.state}}
             <bl-tags [tags]="job.tags" [maxTags]="3"></bl-tags>
diff --git a/app/components/node/browse/display/node-list-display.html b/app/components/node/browse/display/node-list-display.html
index 394da53139..119ae754ce 100644
--- a/app/components/node/browse/display/node-list-display.html
+++ b/app/components/node/browse/display/node-list-display.html
@@ -4,7 +4,7 @@
             <bl-quick-list-item-status [status]="" [tooltip]="">
             </bl-quick-list-item-status>
 
-            <h4 bl-quick-list-item-title>{{node.id}}</h4>
+            <div bl-quick-list-item-title>{{node.id}}</div>
             <p bl-quick-list-item-field>{{node.state}}</p>
         </bl-quick-list-item>
     </bl-quick-list>
diff --git a/app/components/pool/browse/pool-list.html b/app/components/pool/browse/pool-list.html
index 8022137adb..84db608180 100644
--- a/app/components/pool/browse/pool-list.html
+++ b/app/components/pool/browse/pool-list.html
@@ -3,7 +3,7 @@
     <bl-quick-list-item *ngFor="let pool of pools, trackBy: trackById" [link]="['/pools/', pool.id]" [key]="pool.id" [contextmenu]="contextmenu(pool)">
         <bl-quick-list-item-status [status]="poolStatus(pool.original)" [tooltip]="poolStatusText(pool.original)">
         </bl-quick-list-item-status>
-        <h4 bl-quick-list-item-title>{{pool.id}}</h4>
+        <div bl-quick-list-item-title>{{pool.id}}</div>
         <div bl-quick-list-item-field>
             {{pool.state}}
             <bl-tags [tags]="pool.original.tags" [maxTags]="3"></bl-tags>
diff --git a/app/components/task/browse/display/task-list-display.html b/app/components/task/browse/display/task-list-display.html
index 48b976dd0f..1a416013ed 100644
--- a/app/components/task/browse/display/task-list-display.html
+++ b/app/components/task/browse/display/task-list-display.html
@@ -3,7 +3,7 @@
         <bl-quick-list-item-status [status]="taskStatus(task)" [tooltip]="taskStatusText(task)">
         </bl-quick-list-item-status>
 
-        <h4 bl-quick-list-item-title>{{task.id}} {{task.displayName}}</h4>
+        <div bl-quick-list-item-title>{{task.id}} {{task.displayName}}</div>
         <p bl-quick-list-item-field>{{task.state}}</p>
         <div bl-quick-list-item-preview>
             <bl-task-preview [task]="task"></bl-task-preview>
diff --git a/app/components/task/details/sub-tasks/sub-task-display-list.html b/app/components/task/details/sub-tasks/sub-task-display-list.html
index 286e8ab6f6..f166366b24 100644
--- a/app/components/task/details/sub-tasks/sub-task-display-list.html
+++ b/app/components/task/details/sub-tasks/sub-task-display-list.html
@@ -3,7 +3,7 @@
         <bl-quick-list-item-status [status]="taskStatus(task)" [tooltip]="taskStatusText(task)">
         </bl-quick-list-item-status>
 
-        <h4 bl-quick-list-item-title>{{task.id}}</h4>
+        <div bl-quick-list-item-title>{{task.id}}</div>
         <p bl-quick-list-item-field>{{task.state}}</p>
         <div bl-quick-list-item-preview>
             <bl-task-preview [task]="task"></bl-task-preview>
diff --git a/app/styles/base/list.scss b/app/styles/base/list.scss
index d2295949ff..87ed7c5b87 100644
--- a/app/styles/base/list.scss
+++ b/app/styles/base/list.scss
@@ -34,133 +34,6 @@
     }
 }
 
-bl-quick-list {
-    display: block;
-    width: 100%;
-
-    bl-quick-list-item {
-        cursor: pointer;
-        outline: none;
-    }
-
-    .quick-list-item {
-        display: flex;
-        width: 100%;
-        height: 56px;
-        white-space: nowrap;
-
-        &.selected {
-            background-color: map-get($primary, 100);
-
-            p {
-                color: $mineShaftGray;
-            }
-        }
-
-        &.focused {
-            background-color: map-get($primary, 200);
-        }
-
-        &:hover:not(.selected) {
-            background-color: $altoGray;
-        }
-
-        .quick-list-details {
-            flex: 1 1 auto;
-            overflow: hidden;
-            padding: 5px;
-            text-overflow: ellipsis;
-            min-width: 0;
-
-            [bl-quick-list-item-title], [bl-quick-list-item-field] {
-                display: flex;
-                overflow: hidden;
-                text-overflow: ellipsis;
-
-                > bl-tags {
-                    margin-left: 5px;
-                }
-            }
-        }
-
-        [bl-quick-list-item-preview] {
-            padding: 5px;
-
-            i {
-                padding-left: 4px;
-            }
-
-            .fa-hourglass-half {
-                color: map-get($primary, 400);
-            }
-        }
-
-        bl-quick-list-item-status {
-            position: relative;
-            color: map-get($primary, 500);
-            flex: 0 0 8px;
-            display: flex;
-            align-items: stretch;
-            > .status-badge {
-                width: 100%;
-
-                &.warning {
-                    background-color: map-get($danger, 500);
-                }
-
-                &.lightaccent {
-                    background: map-get($primary, 100);
-
-                }
-
-                &.accent {
-                    background: map-get($primary, 300);
-                }
-
-                &.important {
-                    background: repeating-linear-gradient(
-                        45deg,
-                        transparent,
-                        transparent 5px,
-                        $concreteGray 5px,
-                        $concreteGray 10px
-                    ), map-get($primary, 500);
-                }
-            }
-        }
-
-        .select-item-container {
-            width: 17px;
-            padding: 7px 0 0 3px;
-        }
-
-        .quick-list-details {
-            flex: 1 1 auto;
-            overflow: hidden;
-            padding: 3px;
-            text-overflow: ellipsis;
-            min-width: 0;
-
-            [bl-quick-list-item-title], [bl-quick-list-item-field] {
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-        }
-
-        [bl-quick-list-item-preview] {
-            padding: 3px 10px 0 0;
-        }
-
-        .quick-list-other {
-            .select-item-checkbox {
-                position: absolute;
-                right: 0;
-
-            }
-        }
-    }
-}
-
 
 bl-no-item {
     > .no-item-message {
diff --git a/app/styles/common/type.scss b/app/styles/common/type.scss
index 199fc96215..f6a9b550c9 100644
--- a/app/styles/common/type.scss
+++ b/app/styles/common/type.scss
@@ -7,13 +7,13 @@
 
 body {
     font-family: $main-font;
-    font-size: $baseFontSize;
+    font-size: $font-size-base;
     line-height: $baseLineHeight;
     color: $textColor;
 }
 
 p {
-    font-size: $baseFontSize;
+    font-size: $font-size-base;
     margin: 0 0 $baseLineHeight / 2;
     color: $genericGray;
 }
diff --git a/app/styles/variables.scss b/app/styles/variables.scss
index 71258a5bc4..3ea79c54bf 100644
--- a/app/styles/variables.scss
+++ b/app/styles/variables.scss
@@ -53,11 +53,12 @@ $validation-error-color     : map-get($danger, 500);
 $label-text                 : $dusty-grey;
 
 $folder-color: #f8d979;
+$outline-color: #528bff;
 
-$baseFontSize       : 13px;
+$font-size-base     : 13px;
+$font-size-large    : 15px;
 $baseLineHeight     : 1.4em;
 
-$outline-color: #528bff;
 
 $headingsFontWeight : semilight;
 $headingWeightBold  : semibold;
@@ -65,20 +66,12 @@ $headingsLineHeight : $baseLineHeight;
 $textColor          : $mineShaftGray;
 $main-font          : "Roboto", Helvetica, Arial, sans-serif;
 
-$h1FontSize         : $baseFontSize * 1.8;
-$h2FontSize         : $baseFontSize * 1.6;
-$h3FontSize         : $baseFontSize * 1.4;
-$h4FontSize         : $baseFontSize * 1.2;
-$h5FontSize         : $baseFontSize * 1.1;
-$h6FontSize         : $baseFontSize;
-
-
-// Z-index master list
-//---------------------------------------------
-// Used for a bird"s eye view of components dependent on the z-axis
-$zIndexTooltip          : 1001;
-$zIndexModal            : 1002;
-$zIndexModalMax         : 1003;
+$h1FontSize         : $font-size-base * 1.8;
+$h2FontSize         : $font-size-base * 1.6;
+$h3FontSize         : $font-size-base * 1.4;
+$h4FontSize         : $font-size-base * 1.2;
+$h5FontSize         : $font-size-base * 1.1;
+$h6FontSize         : $font-size-base;
 
 // Theme
 $body-background: $whiteSmoke-darker;
diff --git a/test/app/components/base/quick-list/quick-list.component.spec.ts b/test/app/components/base/quick-list/quick-list.component.spec.ts
index 8012065224..c5b4172ad8 100644
--- a/test/app/components/base/quick-list/quick-list.component.spec.ts
+++ b/test/app/components/base/quick-list/quick-list.component.spec.ts
@@ -18,7 +18,7 @@ interface TestItem {
         <bl-focus-section #focusSection>
             <bl-quick-list>
                 <bl-quick-list-item *ngFor="let item of items" [key]="item.id">
-                    <h4 bl-quick-list-item-title>{{item.name}}</h4>
+                    <div bl-quick-list-item-title>{{item.name}}</div>
                 </bl-quick-list-item>
             </bl-quick-list>
         </bl-focus-section>