UI: Make quicklist more compact

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">

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">

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>

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",

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;
+
+            }
+        }
+    }
+}

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: `

app/components/base/quick-list/quick-list.scss

@@ -0,0 +1,6 @@
+@import "app/styles/variables";
+
+bl-quick-list {
+    display: block;
+    width: 100%;
+}

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>

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>

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>

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>

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>

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>

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>

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 {