From eea6561b09749924d1a7fda73b198da924c359dd Mon Sep 17 00:00:00 2001
From: Timothee Guerin <tiguerin@microsoft.com>
Date: Fri, 26 May 2017 16:18:59 -0700
Subject: [PATCH 1/9] Vertical buttons wip

---
 .../base/buttons/buttons.component.ts         | 34 ++++++++++-------
 app/components/pool/details/pool-details.html | 38 +++++++++----------
 app/styles/job/details.scss                   | 19 +++++++---
 app/styles/vendor/material-theme.scss         | 15 --------
 4 files changed, 54 insertions(+), 52 deletions(-)

diff --git a/app/components/base/buttons/buttons.component.ts b/app/components/base/buttons/buttons.component.ts
index 4f7e089d01..e0140fc895 100644
--- a/app/components/base/buttons/buttons.component.ts
+++ b/app/components/base/buttons/buttons.component.ts
@@ -16,9 +16,11 @@ export class LoadingButtonComponent {
 
 @Component({
     selector: "bl-clear-list-selection",
-    template: `<button md-mini-fab color="accent" (click)="onClick()" md-tooltip="Clear selection">
-        <i class="fa fa-check-square-o"></i>
-    </button>`,
+    template: `
+        <button md-mini-fab color="accent" (click)="onClick()" md-tooltip="Clear selection">
+            <i class="fa fa-check-square-o"></i>
+        </button>
+    `,
 })
 export class ClearListSelectionButtonComponent {
     @Input()
@@ -35,7 +37,7 @@ export class ClearListSelectionButtonComponent {
  */
 @Component({
     selector: "bl-add-button",
-    template: `<button md-button><i class="fa fa-plus"></i> {{title}}</button>`,
+    template: `<button md-mini-fab [mdTooltip]="title"><i class="fa fa-plus"></i></button>`,
 })
 export class AddButtonComponent {
     @Input()
@@ -51,7 +53,7 @@ export class AddButtonComponent {
 
 @Component({
     selector: "bl-add-task-button",
-    template: `<button md-button [disabled]="!enabled"><i class="fa fa-plus"></i> {{title}}</button>`,
+    template: `<button md-mini-fab [disabled]="!enabled"><i class="fa fa-plus"></i> {{title}}</button>`,
 })
 export class AddTaskButtonComponent {
     @Input()
@@ -79,7 +81,7 @@ export class AddTaskButtonComponent {
 
 @Component({
     selector: "bl-terminate-button",
-    template: `<button md-button [disabled]="!enabled"><i class="fa fa-times"></i> Terminate</button>`,
+    template: `<button md-mini-fab [disabled]="!enabled"><i class="fa fa-times"></i> Terminate</button>`,
 })
 export class TerminateButtonComponent {
     @Input()
@@ -95,7 +97,7 @@ export class TerminateButtonComponent {
 
 @Component({
     selector: "bl-delete-button",
-    template: `<button md-button [disabled]="!enabled"><i class="fa fa-trash-o"></i> Delete</button>`,
+    template: `<button md-mini-fab [disabled]="!enabled" mdTooltip="Delete"><i class="fa fa-trash-o"></i></button>`,
 })
 export class DeleteButtonComponent {
     @Input()
@@ -114,7 +116,11 @@ export class DeleteButtonComponent {
 
 @Component({
     selector: "bl-disable-button",
-    template: `<button md-button *ngIf="visible" [disabled]="!enabled"><i class="fa fa-pause"></i> Disable</button>`,
+    template: `
+        <button md-mini-fab *ngIf="visible" [disabled]="!enabled" mdTooltip="Disable">
+            <i class="fa fa-pause"></i>
+        </button>
+    `,
 })
 export class DisableButtonComponent {
     @Input()
@@ -134,7 +140,9 @@ export class DisableButtonComponent {
 
 @Component({
     selector: "bl-enable-button",
-    template: `<button md-button *ngIf="visible" [disabled]="!enabled"><i class="fa fa-play"></i> Enable</button>`,
+    template: `
+        <button md-mini-fab *ngIf="visible" [disabled]="!enabled" mdTooltip="Enable"><i class="fa fa-play"></i></button>
+    `,
 })
 export class EnableButtonComponent {
     @Input()
@@ -151,7 +159,7 @@ export class EnableButtonComponent {
 
 @Component({
     selector: "bl-clone-button",
-    template: `<button md-button><i class="fa fa-clone"></i> {{title}}</button>`,
+    template: `<button md-mini-fab [mdTooltip]="title"><i class="fa fa-clone"></i></button>`,
 })
 export class CloneButtonComponent {
     @Input()
@@ -167,7 +175,7 @@ export class CloneButtonComponent {
 
 @Component({
     selector: "bl-download-button",
-    template: `<button md-button [disabled]="!enabled"><i class="fa fa-download"></i> Download</button>`,
+    template: `<button md-mini-fab [disabled]="!enabled" mdTooltip="Download"><i class="fa fa-download"></i> </button>`,
 })
 export class DownloadButtonComponent {
     @Input()
@@ -183,14 +191,14 @@ export class DownloadButtonComponent {
 
 @Component({
     selector: "bl-resize-button",
-    template: `<button md-button><i class="fa fa-arrows-v"></i> Resize</button>`,
+    template: `<button md-mini-fab mdTooltip="Resize"><i class="fa fa-arrows-v"></i></button>`,
 })
 export class ResizeButtonComponent {
 }
 
 @Component({
     selector: "bl-edit-button",
-    template: `<button md-button><i class="fa fa-pencil-square-o"></i> Edit</button>`,
+    template: `<button md-mini-fab mdTooltip="Edit"><i class="fa fa-pencil-square-o"></i></button>`,
 })
 export class EditButtonComponent {
 }
diff --git a/app/components/pool/details/pool-details.html b/app/components/pool/details/pool-details.html
index f801a98d83..d9fbcf828a 100644
--- a/app/components/pool/details/pool-details.html
+++ b/app/components/pool/details/pool-details.html
@@ -1,29 +1,29 @@
 <bl-loading [status]="data.newDataStatus | async">
     <div *ngIf="pool && poolDecorator">
         <md-card class="overview">
-            <md-card-title-group style="margin: 0px;">
-                <div style="align-items:center;">
-                    <bl-refresh-btn [refresh]="refreshPool"></bl-refresh-btn>
-                </div>
-                <div style="margin-left:12px; margin-right:auto;">
-                    <md-card-title>{{pool.id}}</md-card-title>
-                    <md-card-subtitle>{{pool.vmSize}}, {{pool.allocationState}}</md-card-subtitle>
-                </div>
-                <div>
-                    <bl-pool-nodes-preview [pool]="pool" size="large"></bl-pool-nodes-preview>
-                </div>
-            </md-card-title-group>
-            <md-card-content>
-                <p>Last resized {{poolDecorator.lastResized}}</p>
-                <p><i class="fa fa-{{poolDecorator.poolOsIcon}}" aria-hidden="true"></i> {{poolDecorator.poolOs}}</p>
-                <bl-tags [tags]="pool.tags" [editable]="true" [save]="updateTags" noTagsMessage="No tags."></bl-tags>
-            </md-card-content>
-            <md-card-actions layout="row" layout-align="end center">
+            <div class="actions">
+                <bl-refresh-btn [refresh]="refreshPool"></bl-refresh-btn>
                 <bl-add-button title="Add job" (click)="addJob()"></bl-add-button>
                 <bl-resize-button (click)="resizePool()"></bl-resize-button>
                 <bl-clone-button (click)="clonePool()"></bl-clone-button>
                 <bl-delete-button [entity]="pool" (click)="deletePool()"></bl-delete-button>
-            </md-card-actions>
+            </div>
+            <div class="content">
+                <md-card-title-group style="margin: 0px;">
+                    <div style="margin-left:12px; margin-right:auto;">
+                        <md-card-title>{{pool.id}}</md-card-title>
+                        <md-card-subtitle>{{pool.vmSize}}, {{pool.allocationState}}</md-card-subtitle>
+                    </div>
+                    <div>
+                        <bl-pool-nodes-preview [pool]="pool" size="large"></bl-pool-nodes-preview>
+                    </div>
+                </md-card-title-group>
+                <md-card-content>
+                    <p>Last resized {{poolDecorator.lastResized}}</p>
+                    <p><i class="fa fa-{{poolDecorator.poolOsIcon}}" aria-hidden="true"></i> {{poolDecorator.poolOs}}</p>
+                    <bl-tags [tags]="pool.tags" [editable]="true" [save]="updateTags" noTagsMessage="No tags."></bl-tags>
+                </md-card-content>
+            </div>
         </md-card>
         <bl-pool-error-display [pool]="pool"></bl-pool-error-display>
         <md-card class="details">
diff --git a/app/styles/job/details.scss b/app/styles/job/details.scss
index 3ebd6cc37e..7545facf04 100644
--- a/app/styles/job/details.scss
+++ b/app/styles/job/details.scss
@@ -1,12 +1,21 @@
-bl-job-details {
-    .overview > .main-content {
-        display: flex;
+md-card.overview {
+    padding: 0 !important;
+    display: flex;
+
+    > .actions {
+        text-align: center;
+        width: 40px;
+        border-right: 1px solid #d5d5d5;
+        padding: 10px 0;
 
-        > .info {
-            flex: 1;
+        > * {
+            display: block;
         }
     }
 
+    > .content {
+        padding: 18px;
+    }
 }
 
 bl-job-progress-status {
diff --git a/app/styles/vendor/material-theme.scss b/app/styles/vendor/material-theme.scss
index 5d92612c93..8441e06c68 100644
--- a/app/styles/vendor/material-theme.scss
+++ b/app/styles/vendor/material-theme.scss
@@ -99,21 +99,6 @@ md-card {
         }
     }
 
-    &.overview {
-        padding: 18px !important;
-
-        md-card-actions {
-            margin-left: -10px !important;
-            margin-right: -10px !important;
-            padding-top: 4px !important;
-        }
-
-        md-card-actions:last-child {
-            margin-bottom: -10px !important;
-            padding-bottom: 0 !important;
-        }
-    }
-
     &.details {
         margin-top:8px !important;
         padding:0 !important;

From 2aa948978ba306b3c01cfdaaaab2be357bb62ddb Mon Sep 17 00:00:00 2001
From: Timothee Guerin <timothee.guerin@outlook.com>
Date: Mon, 29 May 2017 11:06:29 -0700
Subject: [PATCH 2/9] Action buttons

---
 .../base/buttons/action-buttons.component.ts  | 42 ++++++++++++++
 .../base/buttons/action-buttons.scss          | 58 +++++++++++++++++++
 .../base/buttons/buttons.component.ts         | 37 ++++++------
 app/components/base/buttons/buttons.module.ts |  3 +
 .../list-and-show-layout.html                 |  7 +--
 .../base/refresh-btn/refresh-btn.component.ts |  3 +
 .../base/refresh-btn/refresh-btn.html         |  4 +-
 app/components/pool/details/pool-details.html | 12 ++--
 app/components/pool/home/pool-home.html       |  5 +-
 app/styles/job/details.scss                   |  9 +--
 app/styles/variables.scss                     |  4 ++
 11 files changed, 144 insertions(+), 40 deletions(-)
 create mode 100644 app/components/base/buttons/action-buttons.component.ts
 create mode 100644 app/components/base/buttons/action-buttons.scss

diff --git a/app/components/base/buttons/action-buttons.component.ts b/app/components/base/buttons/action-buttons.component.ts
new file mode 100644
index 0000000000..74fc515363
--- /dev/null
+++ b/app/components/base/buttons/action-buttons.component.ts
@@ -0,0 +1,42 @@
+import { Component, Input } from "@angular/core";
+
+import "./action-buttons.scss";
+
+type ButtonType = "normal" | "round";
+type ButtonColor = "primary" | "danger" | "warn";
+
+@Component({
+    selector: "bl-action-btn",
+    template: `
+        <button class="action-btn" [attr.type]="type" [attr.color]="color" [mdTooltip]="title"
+            [disabled]="disabled" mdTooltipPosition="right">
+            <i [class]="icon"></i>
+            <ng-content></ng-content>
+        </button>
+    `,
+})
+export class ActionButtonComponent {
+    @Input()
+    public icon: string;
+
+    @Input()
+    public title: string;
+
+    @Input()
+    public disabled = false;
+
+    @Input()
+    public type: ButtonType;
+
+    @Input()
+    public color: ButtonColor = "primary";
+}
+
+@Component({
+    selector: "bl-action-btn-group",
+    template: `
+        <ng-content></ng-content>
+    `,
+})
+export class ActionButtonGroupComponent {
+}
diff --git a/app/components/base/buttons/action-buttons.scss b/app/components/base/buttons/action-buttons.scss
new file mode 100644
index 0000000000..6aa3f5ffd6
--- /dev/null
+++ b/app/components/base/buttons/action-buttons.scss
@@ -0,0 +1,58 @@
+@import "app/styles/variables";
+
+bl-action-btn-group {
+    text-align: center;
+    border-right: 1px solid #d5d5d5;
+    display: block;
+
+    button.action-btn {
+        border-bottom: 1px solid #d5d5d5;
+    }
+}
+
+bl-action-btn > button.action-btn {
+    width: $action-btn-size;
+    height: $action-btn-size;
+    font-size: 20px;
+    cursor: pointer;
+
+    &[type="normal"] {
+        // Nothing
+    }
+
+    &[type="round"] {
+        border-radius: 99%;
+    }
+
+    &[color="primary"] {
+        background: white;
+        color: map-get($md-prussian-blue, 500);
+
+        &:hover {
+            background: $alto;
+            color: map-get($md-prussian-blue, 200);
+        }
+
+        &[type="round"] {
+            border: 1px solid #d5d5d5;
+        }
+    }
+
+    &[color="danger"] {
+        background: $red;
+        color: $whitesmoke;
+
+        &:hover {
+            background: $red-dark;
+        }
+    }
+
+    &[color="warn"] {
+        background: $yellow;
+        color: $whitesmoke;
+
+        &:hover {
+            background: $yellow-dark;
+        }
+    }
+}
diff --git a/app/components/base/buttons/buttons.component.ts b/app/components/base/buttons/buttons.component.ts
index e0140fc895..4cb46c908b 100644
--- a/app/components/base/buttons/buttons.component.ts
+++ b/app/components/base/buttons/buttons.component.ts
@@ -4,10 +4,12 @@ import { Job, JobState } from "app/models";
 
 @Component({
     selector: "bl-loading-button",
-    template: `<button md-raised-button color="primary">
-        <ng-content *ngIf="!loading"></ng-content>
-        <i class="fa fa-spinner fa-spin" *ngIf="loading"></i>
-    </button>`,
+    template: `
+        <bl-action-btn color="primary">
+            <ng-content *ngIf="!loading"></ng-content>
+            <i class="fa fa-spinner fa-spin" *ngIf="loading"></i>
+        </bl-action-btn>
+    `,
 })
 export class LoadingButtonComponent {
     @Input()
@@ -17,9 +19,9 @@ export class LoadingButtonComponent {
 @Component({
     selector: "bl-clear-list-selection",
     template: `
-        <button md-mini-fab color="accent" (click)="onClick()" md-tooltip="Clear selection">
+        <bl-action-btn color="accent" (click)="onClick()" md-tooltip="Clear selection">
             <i class="fa fa-check-square-o"></i>
-        </button>
+        </bl-action-btn>
     `,
 })
 export class ClearListSelectionButtonComponent {
@@ -37,7 +39,7 @@ export class ClearListSelectionButtonComponent {
  */
 @Component({
     selector: "bl-add-button",
-    template: `<button md-mini-fab [mdTooltip]="title"><i class="fa fa-plus"></i></button>`,
+    template: `<bl-action-btn icon="fa fa-plus" [title]="title"></bl-action-btn>`,
 })
 export class AddButtonComponent {
     @Input()
@@ -53,7 +55,7 @@ export class AddButtonComponent {
 
 @Component({
     selector: "bl-add-task-button",
-    template: `<button md-mini-fab [disabled]="!enabled"><i class="fa fa-plus"></i> {{title}}</button>`,
+    template: `<bl-action-btn [disabled]="!enabled"><i class="fa fa-plus"></i> {{title}}</bl-action-btn>`,
 })
 export class AddTaskButtonComponent {
     @Input()
@@ -81,7 +83,7 @@ export class AddTaskButtonComponent {
 
 @Component({
     selector: "bl-terminate-button",
-    template: `<button md-mini-fab [disabled]="!enabled"><i class="fa fa-times"></i> Terminate</button>`,
+    template: `<bl-action-btn [disabled]="!enabled"><i class="fa fa-times"></i> Terminate</bl-action-btn>`,
 })
 export class TerminateButtonComponent {
     @Input()
@@ -97,7 +99,7 @@ export class TerminateButtonComponent {
 
 @Component({
     selector: "bl-delete-button",
-    template: `<button md-mini-fab [disabled]="!enabled" mdTooltip="Delete"><i class="fa fa-trash-o"></i></button>`,
+    template: `<bl-action-btn [disabled]="!enabled" title="Delete" icon="fa fa-trash-o"></bl-action-btn>`,
 })
 export class DeleteButtonComponent {
     @Input()
@@ -117,9 +119,8 @@ export class DeleteButtonComponent {
 @Component({
     selector: "bl-disable-button",
     template: `
-        <button md-mini-fab *ngIf="visible" [disabled]="!enabled" mdTooltip="Disable">
-            <i class="fa fa-pause"></i>
-        </button>
+        <bl-action-btn *ngIf="visible" icon="fa fa-pause" [disabled]="!enabled" title="Disable">
+        </bl-action-btn>
     `,
 })
 export class DisableButtonComponent {
@@ -141,7 +142,7 @@ export class DisableButtonComponent {
 @Component({
     selector: "bl-enable-button",
     template: `
-        <button md-mini-fab *ngIf="visible" [disabled]="!enabled" mdTooltip="Enable"><i class="fa fa-play"></i></button>
+        <bl-action-btn *ngIf="visible" [disabled]="!enabled" title="Enable" icon="fa fa-play"></bl-action-btn>
     `,
 })
 export class EnableButtonComponent {
@@ -159,7 +160,7 @@ export class EnableButtonComponent {
 
 @Component({
     selector: "bl-clone-button",
-    template: `<button md-mini-fab [mdTooltip]="title"><i class="fa fa-clone"></i></button>`,
+    template: `<bl-action-btn [title]="title" icon="fa fa-clone"></bl-action-btn>`,
 })
 export class CloneButtonComponent {
     @Input()
@@ -175,7 +176,7 @@ export class CloneButtonComponent {
 
 @Component({
     selector: "bl-download-button",
-    template: `<button md-mini-fab [disabled]="!enabled" mdTooltip="Download"><i class="fa fa-download"></i> </button>`,
+    template: `<bl-action-btn [disabled]="!enabled" title="Download" icon="fa fa-download"></bl-action-btn>`,
 })
 export class DownloadButtonComponent {
     @Input()
@@ -191,14 +192,14 @@ export class DownloadButtonComponent {
 
 @Component({
     selector: "bl-resize-button",
-    template: `<button md-mini-fab mdTooltip="Resize"><i class="fa fa-arrows-v"></i></button>`,
+    template: `<bl-action-btn title="Resize" icon="fa fa-arrows-v"></bl-action-btn>`,
 })
 export class ResizeButtonComponent {
 }
 
 @Component({
     selector: "bl-edit-button",
-    template: `<button md-mini-fab mdTooltip="Edit"><i class="fa fa-pencil-square-o"></i></button>`,
+    template: `<bl-action-btn title="Edit" icon="fa fa-pencil-square-o"></bl-action-btn>`,
 })
 export class EditButtonComponent {
 }
diff --git a/app/components/base/buttons/buttons.module.ts b/app/components/base/buttons/buttons.module.ts
index 7fe1516e6f..7ac507c00e 100644
--- a/app/components/base/buttons/buttons.module.ts
+++ b/app/components/base/buttons/buttons.module.ts
@@ -5,6 +5,7 @@ import { RouterModule } from "@angular/router";
 
 import { SubmitButtonComponent } from "./submit-btn.component";
 
+import { ActionButtonComponent, ActionButtonGroupComponent } from "./action-buttons.component";
 import {
     AddButtonComponent,
     AddTaskButtonComponent,
@@ -21,6 +22,8 @@ import {
 } from "./buttons.component";
 
 const components = [
+    ActionButtonComponent,
+    ActionButtonGroupComponent,
     AddButtonComponent,
     AddTaskButtonComponent,
     ClearListSelectionButtonComponent,
diff --git a/app/components/base/list-and-show-layout/list-and-show-layout.html b/app/components/base/list-and-show-layout/list-and-show-layout.html
index 2027817682..c898a30078 100644
--- a/app/components/base/list-and-show-layout/list-and-show-layout.html
+++ b/app/components/base/list-and-show-layout/list-and-show-layout.html
@@ -16,12 +16,11 @@
                 </div>
                 <hr />
                 <div class="context-button-bar left">
-                    <button md-mini-fab color="warn" *ngIf="deleteSelectedIsEnabled && selectedItems.length > 0" (click)="deleteSelectedItems()">
-                        <i class="fa fa-trash"></i>
-                    </button>
+                    <bl-action-btn type="round" icon="fa fa-trash" color="danger" *ngIf="deleteSelectedIsEnabled && selectedItems.length > 0" (click)="deleteSelectedItems()">
+                    </bl-action-btn>
                 </div>
                 <div class="context-button-bar right">
-                    <bl-refresh-btn [refresh]="refresh" *ngIf="refresh"></bl-refresh-btn>
+                    <bl-refresh-btn [refresh]="refresh" *ngIf="refresh" type="round"></bl-refresh-btn>
                     <ng-content select="[bl-list-buttons]"></ng-content>
                 </div>
             </div>
diff --git a/app/components/base/refresh-btn/refresh-btn.component.ts b/app/components/base/refresh-btn/refresh-btn.component.ts
index 5ac18a689a..f1ea3ea8c0 100644
--- a/app/components/base/refresh-btn/refresh-btn.component.ts
+++ b/app/components/base/refresh-btn/refresh-btn.component.ts
@@ -26,6 +26,9 @@ export class RefreshButtonComponent {
     @Input()
     public refresh: () => Observable<any>;
 
+    @Input()
+    public type: string = "normal";
+
     public status = RefreshStatus.Idle;
 
     public onClick() {
diff --git a/app/components/base/refresh-btn/refresh-btn.html b/app/components/base/refresh-btn/refresh-btn.html
index d9d8aefe32..2c9974167b 100644
--- a/app/components/base/refresh-btn/refresh-btn.html
+++ b/app/components/base/refresh-btn/refresh-btn.html
@@ -1,4 +1,4 @@
-<button md-mini-fab color="secondary" title="Refresh" (click)="onClick()" [disabled]="status !== statuses.Idle">
+<bl-action-btn type="round" [type]="type" title="Refresh" (click)="onClick()" [disabled]="status !== statuses.Idle">
     <span class="icon-container" [ngSwitch]="status">
         <i class="fa fa-refresh shake-hover"    *ngSwitchCase="statuses.Idle"></i>
         <i class="fa fa-refresh fa-spin"        *ngSwitchCase="statuses.Refreshing"></i>
@@ -7,4 +7,4 @@
         </span>
         <i class="fa fa-warning"                *ngSwitchCase="statuses.Failed"></i>
     </span>
-</button>
+</bl-action-btn>
diff --git a/app/components/pool/details/pool-details.html b/app/components/pool/details/pool-details.html
index d9fbcf828a..da507a095c 100644
--- a/app/components/pool/details/pool-details.html
+++ b/app/components/pool/details/pool-details.html
@@ -2,11 +2,13 @@
     <div *ngIf="pool && poolDecorator">
         <md-card class="overview">
             <div class="actions">
-                <bl-refresh-btn [refresh]="refreshPool"></bl-refresh-btn>
-                <bl-add-button title="Add job" (click)="addJob()"></bl-add-button>
-                <bl-resize-button (click)="resizePool()"></bl-resize-button>
-                <bl-clone-button (click)="clonePool()"></bl-clone-button>
-                <bl-delete-button [entity]="pool" (click)="deletePool()"></bl-delete-button>
+                <bl-action-btn-group>
+                    <bl-refresh-btn [refresh]="refreshPool"></bl-refresh-btn>
+                    <bl-add-button title="Add job" (click)="addJob()"></bl-add-button>
+                    <bl-resize-button (click)="resizePool()"></bl-resize-button>
+                    <bl-clone-button (click)="clonePool()"></bl-clone-button>
+                    <bl-delete-button [entity]="pool" (click)="deletePool()"></bl-delete-button>
+                </bl-action-btn-group>
             </div>
             <div class="content">
                 <md-card-title-group style="margin: 0px;">
diff --git a/app/components/pool/home/pool-home.html b/app/components/pool/home/pool-home.html
index 98dee76a51..9b1f4265ff 100644
--- a/app/components/pool/home/pool-home.html
+++ b/app/components/pool/home/pool-home.html
@@ -1,8 +1,7 @@
 <bl-list-and-show-layout #layout (listScrolledToBottom)="poolList.onScrollToBottom()" [list]="poolList">
     <div bl-list-buttons>
-        <button md-mini-fab color="primary" title="Add a pool" (click)="addPool()">
-            <i class="fa fa-plus spin-hover"></i>
-        </button>
+        <bl-action-btn color="primary" type="round" icon="fa fa-plus spin-hover" title="Add a pool" (click)="addPool()">
+        </bl-action-btn>
     </div>
     <div bl-list-content>
         <bl-focus-section>
diff --git a/app/styles/job/details.scss b/app/styles/job/details.scss
index 7545facf04..f63be8c20c 100644
--- a/app/styles/job/details.scss
+++ b/app/styles/job/details.scss
@@ -3,14 +3,7 @@ md-card.overview {
     display: flex;
 
     > .actions {
-        text-align: center;
-        width: 40px;
-        border-right: 1px solid #d5d5d5;
-        padding: 10px 0;
-
-        > * {
-            display: block;
-        }
+        width: $action-btn-size + 1;
     }
 
     > .content {
diff --git a/app/styles/variables.scss b/app/styles/variables.scss
index cf391857e8..bc55c3d24c 100644
--- a/app/styles/variables.scss
+++ b/app/styles/variables.scss
@@ -133,3 +133,7 @@ $listview-header-height              : 90px;
 $footer-height                       : 0;
 $content-top-position                : $header-height;
 $contentview-height                  : calc(100vh - #{$header-height});
+
+
+// Base component dimensions
+$action-btn-size: 32px;

From a3d432d7ba9b8dbe07585a6335b53e525670c8d4 Mon Sep 17 00:00:00 2001
From: Timothee Guerin <timothee.guerin@outlook.com>
Date: Mon, 29 May 2017 12:43:23 -0700
Subject: [PATCH 3/9] Buttons works

---
 .../base/buttons/action-buttons.component.ts  | 35 ++++++++--
 .../base/buttons/action-buttons.scss          | 17 +++--
 .../base/buttons/buttons.component.ts         | 67 ++++++++++++-------
 .../entity-details-list.html                  | 11 ++-
 .../list-and-show-layout.html                 |  2 +-
 .../base/refresh-btn/refresh-btn.html         |  2 +-
 app/components/job/details/job-details.html   | 44 ++++++------
 app/components/job/home/job-home.html         |  5 +-
 app/components/pool/details/pool-details.html | 30 ++++-----
 app/components/pool/home/pool-home.html       |  2 +-
 app/components/task/home/task-home.html       |  5 +-
 app/styles/job/details.scss                   |  5 ++
 12 files changed, 131 insertions(+), 94 deletions(-)

diff --git a/app/components/base/buttons/action-buttons.component.ts b/app/components/base/buttons/action-buttons.component.ts
index 74fc515363..fbcbf121df 100644
--- a/app/components/base/buttons/action-buttons.component.ts
+++ b/app/components/base/buttons/action-buttons.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from "@angular/core";
+import { Component, EventEmitter, HostBinding, HostListener, Input, Output } from "@angular/core";
 
 import "./action-buttons.scss";
 
@@ -8,14 +8,19 @@ type ButtonColor = "primary" | "danger" | "warn";
 @Component({
     selector: "bl-action-btn",
     template: `
-        <button class="action-btn" [attr.type]="type" [attr.color]="color" [mdTooltip]="title"
-            [disabled]="disabled" mdTooltipPosition="right">
+        <span class="action-btn" [mdTooltip]="title" mdTooltipPosition="right">
             <i [class]="icon"></i>
             <ng-content></ng-content>
-        </button>
+        </span>
     `,
 })
 export class ActionButtonComponent {
+    @Output()
+    public action = new EventEmitter();
+
+    @HostBinding("tabindex")
+    public tabindex = "0";
+
     @Input()
     public icon: string;
 
@@ -26,10 +31,32 @@ export class ActionButtonComponent {
     public disabled = false;
 
     @Input()
+    @HostBinding("attr.type")
     public type: ButtonType;
 
     @Input()
+    @HostBinding("attr.color")
     public color: ButtonColor = "primary";
+
+    @Input()
+    public routerLink: string;
+
+    @HostListener("click")
+    public handleAction() {
+        if (this.disabled) {
+            return;
+        }
+        this.action.emit();
+    }
+
+    @HostListener("keydown", ["$event"])
+    public onkeydown(event: KeyboardEvent) {
+        if (event.code === "Space" || event.code === "Enter") {
+            console.log("Event", event);
+            this.handleAction();
+            event.preventDefault();
+        }
+    }
 }
 
 @Component({
diff --git a/app/components/base/buttons/action-buttons.scss b/app/components/base/buttons/action-buttons.scss
index 6aa3f5ffd6..9843859358 100644
--- a/app/components/base/buttons/action-buttons.scss
+++ b/app/components/base/buttons/action-buttons.scss
@@ -5,16 +5,21 @@ bl-action-btn-group {
     border-right: 1px solid #d5d5d5;
     display: block;
 
-    button.action-btn {
+    bl-action-btn {
         border-bottom: 1px solid #d5d5d5;
     }
 }
 
-bl-action-btn > button.action-btn {
+bl-action-btn {
+    display: inline-block;
     width: $action-btn-size;
     height: $action-btn-size;
-    font-size: 20px;
+    outline: none;
     cursor: pointer;
+    font-size: 20px;
+    text-align: center;
+    vertical-align: middle;
+    line-height: $action-btn-size;
 
     &[type="normal"] {
         // Nothing
@@ -28,7 +33,7 @@ bl-action-btn > button.action-btn {
         background: white;
         color: map-get($md-prussian-blue, 500);
 
-        &:hover {
+        &:hover, &:focus {
             background: $alto;
             color: map-get($md-prussian-blue, 200);
         }
@@ -42,7 +47,7 @@ bl-action-btn > button.action-btn {
         background: $red;
         color: $whitesmoke;
 
-        &:hover {
+        &:hover, &:focus {
             background: $red-dark;
         }
     }
@@ -51,7 +56,7 @@ bl-action-btn > button.action-btn {
         background: $yellow;
         color: $whitesmoke;
 
-        &:hover {
+        &:hover, &:focus {
             background: $yellow-dark;
         }
     }
diff --git a/app/components/base/buttons/buttons.component.ts b/app/components/base/buttons/buttons.component.ts
index 4cb46c908b..22ccf56551 100644
--- a/app/components/base/buttons/buttons.component.ts
+++ b/app/components/base/buttons/buttons.component.ts
@@ -1,17 +1,22 @@
-import { Component, Input } from "@angular/core";
+import { Component, EventEmitter, Input, Output } from "@angular/core";
 
 import { Job, JobState } from "app/models";
 
+export class BaseButton {
+    @Output()
+    public action = new EventEmitter();
+}
+
 @Component({
     selector: "bl-loading-button",
     template: `
-        <bl-action-btn color="primary">
+        <bl-action-btn color="primary" (action)="action.emit()">
             <ng-content *ngIf="!loading"></ng-content>
             <i class="fa fa-spinner fa-spin" *ngIf="loading"></i>
         </bl-action-btn>
     `,
 })
-export class LoadingButtonComponent {
+export class LoadingButtonComponent extends BaseButton {
     @Input()
     public loading: boolean = false;
 }
@@ -19,16 +24,17 @@ export class LoadingButtonComponent {
 @Component({
     selector: "bl-clear-list-selection",
     template: `
-        <bl-action-btn color="accent" (click)="onClick()" md-tooltip="Clear selection">
+        <bl-action-btn color="accent" (action)="onClick()" md-tooltip="Clear selection">
             <i class="fa fa-check-square-o"></i>
         </bl-action-btn>
     `,
 })
-export class ClearListSelectionButtonComponent {
+export class ClearListSelectionButtonComponent extends BaseButton {
     @Input()
     public list: any;
 
     public onClick() {
+        this.action.emit();
         this.list.clearSelection();
     }
 }
@@ -39,9 +45,9 @@ export class ClearListSelectionButtonComponent {
  */
 @Component({
     selector: "bl-add-button",
-    template: `<bl-action-btn icon="fa fa-plus" [title]="title"></bl-action-btn>`,
+    template: `<bl-action-btn icon="fa fa-plus" [title]="title" (action)="action.emit()"></bl-action-btn>`,
 })
-export class AddButtonComponent {
+export class AddButtonComponent extends BaseButton {
     @Input()
     public set title(value: string) {
         this._title = value;
@@ -55,9 +61,12 @@ export class AddButtonComponent {
 
 @Component({
     selector: "bl-add-task-button",
-    template: `<bl-action-btn [disabled]="!enabled"><i class="fa fa-plus"></i> {{title}}</bl-action-btn>`,
+    template: `
+        <bl-action-btn (action)="action.emit()" [disabled]="!enabled" [title]="title" icon="fa fa-plus">
+        </bl-action-btn>
+    `,
 })
-export class AddTaskButtonComponent {
+export class AddTaskButtonComponent extends BaseButton {
     @Input()
     public job: Job;
 
@@ -83,9 +92,9 @@ export class AddTaskButtonComponent {
 
 @Component({
     selector: "bl-terminate-button",
-    template: `<bl-action-btn [disabled]="!enabled"><i class="fa fa-times"></i> Terminate</bl-action-btn>`,
+    template: `<bl-action-btn (action)="action.emit()" [disabled]="!enabled" icon="fa fa-stop"></bl-action-btn>`,
 })
-export class TerminateButtonComponent {
+export class TerminateButtonComponent extends BaseButton {
     @Input()
     public entity: any;
 
@@ -99,9 +108,12 @@ export class TerminateButtonComponent {
 
 @Component({
     selector: "bl-delete-button",
-    template: `<bl-action-btn [disabled]="!enabled" title="Delete" icon="fa fa-trash-o"></bl-action-btn>`,
+    template: `
+        <bl-action-btn (action)="action.emit()" [disabled]="!enabled" title="Delete" icon="fa fa-trash-o">
+        </bl-action-btn>
+    `,
 })
-export class DeleteButtonComponent {
+export class DeleteButtonComponent extends BaseButton {
     @Input()
     public entity: any;
 
@@ -119,11 +131,12 @@ export class DeleteButtonComponent {
 @Component({
     selector: "bl-disable-button",
     template: `
-        <bl-action-btn *ngIf="visible" icon="fa fa-pause" [disabled]="!enabled" title="Disable">
+        <bl-action-btn (action)="action.emit()" *ngIf="visible" icon="fa fa-pause"
+            [disabled]="!enabled" title="Disable">
         </bl-action-btn>
     `,
 })
-export class DisableButtonComponent {
+export class DisableButtonComponent extends BaseButton {
     @Input()
     public job: Job;
 
@@ -142,10 +155,11 @@ export class DisableButtonComponent {
 @Component({
     selector: "bl-enable-button",
     template: `
-        <bl-action-btn *ngIf="visible" [disabled]="!enabled" title="Enable" icon="fa fa-play"></bl-action-btn>
+        <bl-action-btn *ngIf="visible" (action)="action.emit()" [disabled]="!enabled" title="Enable" icon="fa fa-play">
+        </bl-action-btn>
     `,
 })
-export class EnableButtonComponent {
+export class EnableButtonComponent extends BaseButton {
     @Input()
     public job: Job;
 
@@ -160,9 +174,9 @@ export class EnableButtonComponent {
 
 @Component({
     selector: "bl-clone-button",
-    template: `<bl-action-btn [title]="title" icon="fa fa-clone"></bl-action-btn>`,
+    template: `<bl-action-btn (action)="action.emit()" [title]="title" icon="fa fa-clone"></bl-action-btn>`,
 })
-export class CloneButtonComponent {
+export class CloneButtonComponent extends BaseButton {
     @Input()
     public set title(value: string) {
         this._title = value;
@@ -176,9 +190,12 @@ export class CloneButtonComponent {
 
 @Component({
     selector: "bl-download-button",
-    template: `<bl-action-btn [disabled]="!enabled" title="Download" icon="fa fa-download"></bl-action-btn>`,
+    template: `
+        <bl-action-btn (action)="action.emit()" [disabled]="!enabled" title="Download" icon="fa fa-download">
+        </bl-action-btn>
+    `,
 })
-export class DownloadButtonComponent {
+export class DownloadButtonComponent extends BaseButton {
     @Input()
     public set enabled(value: boolean) {
         this._enabled = value;
@@ -192,14 +209,14 @@ export class DownloadButtonComponent {
 
 @Component({
     selector: "bl-resize-button",
-    template: `<bl-action-btn title="Resize" icon="fa fa-arrows-v"></bl-action-btn>`,
+    template: `<bl-action-btn (action)="action.emit()" title="Resize" icon="fa fa-arrows-v"></bl-action-btn>`,
 })
-export class ResizeButtonComponent {
+export class ResizeButtonComponent extends BaseButton {
 }
 
 @Component({
     selector: "bl-edit-button",
-    template: `<bl-action-btn title="Edit" icon="fa fa-pencil-square-o"></bl-action-btn>`,
+    template: `<bl-action-btn (action)="action.emit()" title="Edit" icon="fa fa-pencil-square-o"></bl-action-btn>`,
 })
-export class EditButtonComponent {
+export class EditButtonComponent extends BaseButton {
 }
diff --git a/app/components/base/list-and-show-layout/entity-details-list.html b/app/components/base/list-and-show-layout/entity-details-list.html
index c8dfac724f..d07a257848 100644
--- a/app/components/base/list-and-show-layout/entity-details-list.html
+++ b/app/components/base/list-and-show-layout/entity-details-list.html
@@ -7,13 +7,10 @@
 </div>
 <hr />
 <div class="context-button-bar">
-    <button *ngIf="showExpandButton" md-mini-fab color="primary" [routerLink]="baseLink" title="{{expandButtonHoverText}}">
-        <i class="fa fa-expand spin-hover"></i>
-    </button>
-    <bl-refresh-btn *ngIf="showRefreshButton" [refresh]="refresh" title="{{refreshButtonHoverText}}"></bl-refresh-btn>
-    <button *ngIf="showAddButton" (click)="onAdd($event)" md-mini-fab color="primary" title="{{addButtonHoverText}}">
-        <i class="fa fa-plus spin-hover"></i>
-    </button>
+    <bl-action-btn type="round" icon="fa fa-expand spin-hover" *ngIf="showExpandButton" color="primary" [routerLink]="baseLink"
+        title="{{expandButtonHoverText}}">
+    </bl-action-btn>
+    <bl-refresh-btn *ngIf="showRefreshButton" type="round" [refresh]="refresh" title="{{refreshButtonHoverText}}"></bl-refresh-btn>
     <ng-content select="[bl-list-buttons]"></ng-content>
 </div>
 <ng-content></ng-content>
diff --git a/app/components/base/list-and-show-layout/list-and-show-layout.html b/app/components/base/list-and-show-layout/list-and-show-layout.html
index c898a30078..c2b2d0bbda 100644
--- a/app/components/base/list-and-show-layout/list-and-show-layout.html
+++ b/app/components/base/list-and-show-layout/list-and-show-layout.html
@@ -16,7 +16,7 @@
                 </div>
                 <hr />
                 <div class="context-button-bar left">
-                    <bl-action-btn type="round" icon="fa fa-trash" color="danger" *ngIf="deleteSelectedIsEnabled && selectedItems.length > 0" (click)="deleteSelectedItems()">
+                    <bl-action-btn type="round" icon="fa fa-trash" color="danger" *ngIf="deleteSelectedIsEnabled && selectedItems.length > 0" (action)="deleteSelectedItems()">
                     </bl-action-btn>
                 </div>
                 <div class="context-button-bar right">
diff --git a/app/components/base/refresh-btn/refresh-btn.html b/app/components/base/refresh-btn/refresh-btn.html
index 2c9974167b..a9d3ca7e34 100644
--- a/app/components/base/refresh-btn/refresh-btn.html
+++ b/app/components/base/refresh-btn/refresh-btn.html
@@ -1,4 +1,4 @@
-<bl-action-btn type="round" [type]="type" title="Refresh" (click)="onClick()" [disabled]="status !== statuses.Idle">
+<bl-action-btn type="round" [type]="type" title="Refresh" (action)="onClick()" [disabled]="status !== statuses.Idle">
     <span class="icon-container" [ngSwitch]="status">
         <i class="fa fa-refresh shake-hover"    *ngSwitchCase="statuses.Idle"></i>
         <i class="fa fa-refresh fa-spin"        *ngSwitchCase="statuses.Refreshing"></i>
diff --git a/app/components/job/details/job-details.html b/app/components/job/details/job-details.html
index ff4d685f58..a1c2d63cd8 100644
--- a/app/components/job/details/job-details.html
+++ b/app/components/job/details/job-details.html
@@ -1,34 +1,28 @@
 <bl-loading [status]="data.newDataStatus | async">
     <div *ngIf="job">
         <md-card class="overview">
-            <div class="main-content">
+            <div class="actions">
+                <bl-action-btn-group>
+                    <bl-refresh-btn [refresh]="refresh"></bl-refresh-btn>
+                    <bl-add-task-button title="Add task" [job]="job" (action)="addTask()"></bl-add-task-button>
+                    <bl-terminate-button [entity]="job" (action)="terminateJob()"></bl-terminate-button>
+                    <bl-delete-button [entity]="job" (action)="deleteJob()"></bl-delete-button>
+                    <bl-disable-button [job]="job" (action)="disableJob()"></bl-disable-button>
+                    <bl-enable-button [job]="job" (action)="enableJob()"></bl-enable-button>
+                    <bl-clone-button (action)="cloneJob()"></bl-clone-button>
+                </bl-action-btn-group>
+            </div>
+            <div class="content">
                 <div class="info">
-                    <md-card-title-group style="margin: 0px;">
-                        <div style="align-items:center;">
-                            <bl-refresh-btn [refresh]="refresh"></bl-refresh-btn>
-                        </div>
-                        <div style="margin-left:12px; margin-right:auto;">
-                            <md-card-title>{{decorator.id}}</md-card-title>
-                            <md-card-subtitle><i class="fa" [ngClass]="decorator.stateIcon"></i> {{decorator.state}}</md-card-subtitle>
-                        </div>
-                    </md-card-title-group>
-                    <div class="additional-info">
-                        Pool: <a [routerLink]="['/pools', job.poolId]">{{job.poolId}}</a>
-                        <bl-tags [tags]="job.tags" [editable]="true" [save]="updateTags" noTagsMessage="No tags."></bl-tags>
-                    </div>
+                    <md-card-title>{{decorator.id}}</md-card-title>
+                    <md-card-subtitle><i class="fa" [ngClass]="decorator.stateIcon"></i> {{decorator.state}}</md-card-subtitle>
+                    Pool: <a [routerLink]="['/pools', job.poolId]">{{job.poolId}}</a>
+                    <bl-tags [tags]="job.tags" [editable]="true" [save]="updateTags" noTagsMessage="No tags."></bl-tags>
                 </div>
-                <md-card-content>
-                    <bl-job-progress-status [job]="job" [poolId]="job.poolId"></bl-job-progress-status>
-                </md-card-content>
             </div>
-            <md-card-actions layout="row" layout-align="end center">
-                <bl-add-task-button title="Add task" [job]="job" (click)="addTask()"></bl-add-task-button>
-                <bl-terminate-button [entity]="job" (click)="terminateJob()"></bl-terminate-button>
-                <bl-delete-button [entity]="job" (click)="deleteJob()"></bl-delete-button>
-                <bl-disable-button [job]="job" (click)="disableJob()"></bl-disable-button>
-                <bl-enable-button [job]="job" (click)="enableJob()"></bl-enable-button>
-                <bl-clone-button (click)="cloneJob()"></bl-clone-button>
-            </md-card-actions>
+            <div class="tile">
+                <bl-job-progress-status [job]="job" [poolId]="job.poolId"></bl-job-progress-status>
+            </div>
         </md-card>
         <bl-job-error-display [job]="job"></bl-job-error-display>
         <md-card class="details">
diff --git a/app/components/job/home/job-home.html b/app/components/job/home/job-home.html
index 57b6aeaef3..13dda39be1 100644
--- a/app/components/job/home/job-home.html
+++ b/app/components/job/home/job-home.html
@@ -1,8 +1,7 @@
 <bl-list-and-show-layout #layout (listScrolledToBottom)="jobList.onScrollToBottom()" [list]="jobList">
     <div bl-list-buttons>
-        <button md-mini-fab color="primary" title="Add a job" (click)="addJob()">
-            <i class="fa fa-plus spin-hover"></i>
-        </button>
+        <bl-action-btn color="primary" type="round" icon="fa fa-plus spin-hover" title="Add a job" (action)="addJob()">
+        </bl-action-btn>
     </div>
     <div bl-list-content>
         <bl-focus-section>
diff --git a/app/components/pool/details/pool-details.html b/app/components/pool/details/pool-details.html
index da507a095c..4ae8e67a41 100644
--- a/app/components/pool/details/pool-details.html
+++ b/app/components/pool/details/pool-details.html
@@ -4,27 +4,21 @@
             <div class="actions">
                 <bl-action-btn-group>
                     <bl-refresh-btn [refresh]="refreshPool"></bl-refresh-btn>
-                    <bl-add-button title="Add job" (click)="addJob()"></bl-add-button>
-                    <bl-resize-button (click)="resizePool()"></bl-resize-button>
-                    <bl-clone-button (click)="clonePool()"></bl-clone-button>
-                    <bl-delete-button [entity]="pool" (click)="deletePool()"></bl-delete-button>
+                    <bl-add-button title="Add job" (action)="addJob()"></bl-add-button>
+                    <bl-resize-button (action)="resizePool()"></bl-resize-button>
+                    <bl-clone-button (action)="clonePool()"></bl-clone-button>
+                    <bl-delete-button [entity]="pool" (action)="deletePool()"></bl-delete-button>
                 </bl-action-btn-group>
             </div>
             <div class="content">
-                <md-card-title-group style="margin: 0px;">
-                    <div style="margin-left:12px; margin-right:auto;">
-                        <md-card-title>{{pool.id}}</md-card-title>
-                        <md-card-subtitle>{{pool.vmSize}}, {{pool.allocationState}}</md-card-subtitle>
-                    </div>
-                    <div>
-                        <bl-pool-nodes-preview [pool]="pool" size="large"></bl-pool-nodes-preview>
-                    </div>
-                </md-card-title-group>
-                <md-card-content>
-                    <p>Last resized {{poolDecorator.lastResized}}</p>
-                    <p><i class="fa fa-{{poolDecorator.poolOsIcon}}" aria-hidden="true"></i> {{poolDecorator.poolOs}}</p>
-                    <bl-tags [tags]="pool.tags" [editable]="true" [save]="updateTags" noTagsMessage="No tags."></bl-tags>
-                </md-card-content>
+                <md-card-title>{{pool.id}}</md-card-title>
+                <md-card-subtitle>{{pool.vmSize}}, {{pool.allocationState}}</md-card-subtitle>
+                <p>Last resized {{poolDecorator.lastResized}}</p>
+                <p><i class="fa fa-{{poolDecorator.poolOsIcon}}" aria-hidden="true"></i> {{poolDecorator.poolOs}}</p>
+                <bl-tags [tags]="pool.tags" [editable]="true" [save]="updateTags" noTagsMessage="No tags."></bl-tags>
+            </div>
+            <div style="padding: 10px">
+                <bl-pool-nodes-preview [pool]="pool" size="large"></bl-pool-nodes-preview>
             </div>
         </md-card>
         <bl-pool-error-display [pool]="pool"></bl-pool-error-display>
diff --git a/app/components/pool/home/pool-home.html b/app/components/pool/home/pool-home.html
index 9b1f4265ff..bd0fea300c 100644
--- a/app/components/pool/home/pool-home.html
+++ b/app/components/pool/home/pool-home.html
@@ -1,6 +1,6 @@
 <bl-list-and-show-layout #layout (listScrolledToBottom)="poolList.onScrollToBottom()" [list]="poolList">
     <div bl-list-buttons>
-        <bl-action-btn color="primary" type="round" icon="fa fa-plus spin-hover" title="Add a pool" (click)="addPool()">
+        <bl-action-btn color="primary" type="round" icon="fa fa-plus spin-hover" title="Add a pool" (action)="addPool()">
         </bl-action-btn>
     </div>
     <div bl-list-content>
diff --git a/app/components/task/home/task-home.html b/app/components/task/home/task-home.html
index 1cea5f363c..d1ef08bc89 100644
--- a/app/components/task/home/task-home.html
+++ b/app/components/task/home/task-home.html
@@ -1,8 +1,7 @@
 <bl-list-and-show-layout #layout (listScrolledToBottom)="taskList.loadMore()" [list]="taskList">
     <div bl-list-buttons>
-        <button md-mini-fab color="primary" title="Add a task" (click)="addTask()">
-            <i class="fa fa-plus spin-hover"></i>
-        </button>
+        <bl-action-btn color="primary" type="round" icon="fa fa-plus spin-hover" title="Add a task" (action)="addTask()">
+        </bl-action-btn>
     </div>
     <div bl-list-content>
         <bl-focus-section>
diff --git a/app/styles/job/details.scss b/app/styles/job/details.scss
index f63be8c20c..913e51f8b2 100644
--- a/app/styles/job/details.scss
+++ b/app/styles/job/details.scss
@@ -8,6 +8,11 @@ md-card.overview {
 
     > .content {
         padding: 18px;
+        flex: 1;
+    }
+
+    > .tile {
+        border-left: 1px solid #d5d5d5;
     }
 }
 

From 68a983f2b8292952be8fe9d2b062f59805108c3b Mon Sep 17 00:00:00 2001
From: Timothee Guerin <timothee.guerin@outlook.com>
Date: Mon, 29 May 2017 13:03:08 -0700
Subject: [PATCH 4/9] Update node and task details

---
 .../base/buttons/action-buttons.component.ts  |  9 ++++-
 .../base/buttons/action-buttons.scss          | 11 ++++++
 app/components/node/details/node-details.html | 24 +++++--------
 app/components/task/details/task-details.html | 36 ++++++++-----------
 4 files changed, 43 insertions(+), 37 deletions(-)

diff --git a/app/components/base/buttons/action-buttons.component.ts b/app/components/base/buttons/action-buttons.component.ts
index fbcbf121df..14a6534969 100644
--- a/app/components/base/buttons/action-buttons.component.ts
+++ b/app/components/base/buttons/action-buttons.component.ts
@@ -28,11 +28,12 @@ export class ActionButtonComponent {
     public title: string;
 
     @Input()
+    @HostBinding("class.disabled")
     public disabled = false;
 
     @Input()
     @HostBinding("attr.type")
-    public type: ButtonType;
+    public type: ButtonType = "normal";
 
     @Input()
     @HostBinding("attr.color")
@@ -57,6 +58,12 @@ export class ActionButtonComponent {
             event.preventDefault();
         }
     }
+
+    public ngOnChanges(changes) {
+        if ("disabled" in changes) {
+            this.tabindex = this.disabled ? "-1" : "0";
+        }
+    }
 }
 
 @Component({
diff --git a/app/components/base/buttons/action-buttons.scss b/app/components/base/buttons/action-buttons.scss
index 9843859358..87bfba5a5c 100644
--- a/app/components/base/buttons/action-buttons.scss
+++ b/app/components/base/buttons/action-buttons.scss
@@ -21,6 +21,17 @@ bl-action-btn {
     vertical-align: middle;
     line-height: $action-btn-size;
 
+    &.disabled[color] {
+        cursor: not-allowed;
+        color: #d5d5d5;
+        background: #f5f5f5;
+
+        &:hover {
+            color: #d5d5d5;
+            background: #f5f5f5;
+        }
+    }
+
     &[type="normal"] {
         // Nothing
     }
diff --git a/app/components/node/details/node-details.html b/app/components/node/details/node-details.html
index db3add65d4..44dc876c77 100644
--- a/app/components/node/details/node-details.html
+++ b/app/components/node/details/node-details.html
@@ -1,23 +1,17 @@
 <bl-loading [status]="data.newDataStatus | async">
     <div *ngIf="pool && node">
         <md-card class="overview">
-            <md-card-title-group style="margin: 0px;">
-                <div style="align-items:center;">
+            <div class="actions">
+                <bl-action-btn-group>
                     <bl-refresh-btn [refresh]="refresh"></bl-refresh-btn>
-                </div>
-                <div style="margin-left:12px; margin-right:auto;">
-                    <md-card-title>{{node.id}}</md-card-title>
-                    <md-card-subtitle> {{node.state}}</md-card-subtitle>
-                </div>
-            </md-card-title-group>
-            <md-card-content>
+                    <bl-action-btn (action)="connect()" icon="fa fa-plug"></bl-action-btn>
+                </bl-action-btn-group>
+            </div>
+            <div class="content">
+                <md-card-title>{{node.id}}</md-card-title>
+                <md-card-subtitle> {{node.state}}</md-card-subtitle>
                 <p>Pool: {{poolId}}</p>
-            </md-card-content>
-            <md-card-actions layout="row" layout-align="end center">
-                <button md-button (click)="connect()">
-                    <i class="fa fa-plug"></i> Connect
-                </button>
-            </md-card-actions>
+            </div>
         </md-card>
         <md-card class="details">
             <bl-tab-group>
diff --git a/app/components/task/details/task-details.html b/app/components/task/details/task-details.html
index bdb2a971f1..21e8f45c62 100644
--- a/app/components/task/details/task-details.html
+++ b/app/components/task/details/task-details.html
@@ -4,29 +4,23 @@
     </md-card>
     <div *ngIf="task && job">
         <md-card class="overview">
-            <div class="summary">
-                <div class="main-info">
-                    <md-card-title-group style="margin: 0px;">
-                        <div style="align-items:center;">
-                            <bl-refresh-btn [refresh]="refresh"></bl-refresh-btn>
-                        </div>
-                        <div style="margin-left:12px; margin-right:auto;">
-                            <md-card-title>{{task.id}} <span *ngIf="!!task.displayName"> - {{task.displayName}}</span> </md-card-title>
-                            <md-card-subtitle><i class="fa" [ngClass]="decorator.stateIcon"></i> {{task.state}}</md-card-subtitle>
-                        </div>
-                    </md-card-title-group>
-                    <md-card-content>
-                        <p>Job: {{jobId}}</p>
-                    </md-card-content>
-                </div>
+            <div class="actions">
+                <bl-action-btn-group>
+                    <bl-refresh-btn [refresh]="refresh"></bl-refresh-btn>
+                    <bl-add-button (action)="addTask()"></bl-add-button>
+                    <bl-terminate-button [entity]="task" (action)="terminateTask()"></bl-terminate-button>
+                    <bl-delete-button [entity]="task" (action)="deleteTask()"></bl-delete-button>
+                    <bl-clone-button (action)="cloneTask()"></bl-clone-button>
+                </bl-action-btn-group>
+            </div>
+            <div class="content">
+                <md-card-title>{{task.id}} <span *ngIf="!!task.displayName"> - {{task.displayName}}</span> </md-card-title>
+                <md-card-subtitle><i class="fa" [ngClass]="decorator.stateIcon"></i> {{task.state}}</md-card-subtitle>
+                <p>Job: {{jobId}}</p>
+            </div>
+            <div style="padding: 10px">
                 <bl-task-timeline [job]="job" [task]="task"></bl-task-timeline>
             </div>
-            <md-card-actions layout="row" layout-align="end center">
-                <bl-add-button (click)="addTask()"></bl-add-button>
-                <bl-terminate-button [entity]="task" (click)="terminateTask()"></bl-terminate-button>
-                <bl-delete-button [entity]="task" (click)="deleteTask()"></bl-delete-button>
-                <bl-clone-button (click)="cloneTask()"></bl-clone-button>
-            </md-card-actions>
         </md-card>
         <bl-task-error-display [jobId]="jobId" [task]="task"></bl-task-error-display>
         <md-card class="details">

From 7e1d159891218b30e58968b04a16fa2c3350fc86 Mon Sep 17 00:00:00 2001
From: Timothee Guerin <timothee.guerin@outlook.com>
Date: Mon, 29 May 2017 15:39:59 -0700
Subject: [PATCH 5/9] update for account

---
 .../account/details/account-details.html       | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/app/components/account/details/account-details.html b/app/components/account/details/account-details.html
index 922c2fb640..d096d018be 100644
--- a/app/components/account/details/account-details.html
+++ b/app/components/account/details/account-details.html
@@ -1,16 +1,14 @@
 <bl-loading [status]="data.status">
     <div *ngIf="account">
         <md-card class="overview">
-            <div class="main">
-                <md-card-title-group style="margin: 0px;">
-                    <div style="align-items:center;">
-                        <bl-refresh-btn [refresh]="refresh"></bl-refresh-btn>
-                    </div>
-                    <div style="margin-left:12px; margin-right:auto;">
-                        <md-card-title>{{account.name}}</md-card-title>
-                        <md-card-subtitle>{{account.properties.accountEndpoint}}</md-card-subtitle>
-                    </div>
-                </md-card-title-group>
+            <div class="actions">
+                <bl-action-btn-group>
+                    <bl-refresh-btn [refresh]="refresh"></bl-refresh-btn>
+                </bl-action-btn-group>
+            </div>
+            <div class="content">
+                <md-card-title>{{account.name}}</md-card-title>
+                <md-card-subtitle>{{account.properties.accountEndpoint}}</md-card-subtitle>
             </div>
             <div class="storage-account">
                 <bl-storage-account-card [account]="account">

From 5c1a01586943be93c3028a94d84432c3d5899679 Mon Sep 17 00:00:00 2001
From: Timothee Guerin <timothee.guerin@outlook.com>
Date: Mon, 29 May 2017 16:43:00 -0700
Subject: [PATCH 6/9] Start specs

---
 ...omponent.ts => action-button.component.ts} |  0
 .../base/buttons/buttons.component.ts         |  5 +-
 app/components/base/buttons/buttons.module.ts |  2 +-
 app/styles/base/layout.scss                   |  3 +-
 .../storage-account-picker.component.spec.ts  |  2 +-
 .../buttons/action-button.component.spec.ts   | 51 +++++++++++++++++++
 tslint.json                                   |  3 +-
 7 files changed, 60 insertions(+), 6 deletions(-)
 rename app/components/base/buttons/{action-buttons.component.ts => action-button.component.ts} (100%)
 create mode 100644 test/app/components/base/buttons/action-button.component.spec.ts

diff --git a/app/components/base/buttons/action-buttons.component.ts b/app/components/base/buttons/action-button.component.ts
similarity index 100%
rename from app/components/base/buttons/action-buttons.component.ts
rename to app/components/base/buttons/action-button.component.ts
diff --git a/app/components/base/buttons/buttons.component.ts b/app/components/base/buttons/buttons.component.ts
index 22ccf56551..495ba1a8b4 100644
--- a/app/components/base/buttons/buttons.component.ts
+++ b/app/components/base/buttons/buttons.component.ts
@@ -92,7 +92,10 @@ export class AddTaskButtonComponent extends BaseButton {
 
 @Component({
     selector: "bl-terminate-button",
-    template: `<bl-action-btn (action)="action.emit()" [disabled]="!enabled" icon="fa fa-stop"></bl-action-btn>`,
+    template: `
+        <bl-action-btn (action)="action.emit()" [disabled]="!enabled" icon="fa fa-stop" title="Terminate">
+        </bl-action-btn>
+    `,
 })
 export class TerminateButtonComponent extends BaseButton {
     @Input()
diff --git a/app/components/base/buttons/buttons.module.ts b/app/components/base/buttons/buttons.module.ts
index 7ac507c00e..5f99180764 100644
--- a/app/components/base/buttons/buttons.module.ts
+++ b/app/components/base/buttons/buttons.module.ts
@@ -5,7 +5,7 @@ import { RouterModule } from "@angular/router";
 
 import { SubmitButtonComponent } from "./submit-btn.component";
 
-import { ActionButtonComponent, ActionButtonGroupComponent } from "./action-buttons.component";
+import { ActionButtonComponent, ActionButtonGroupComponent } from "./action-button.component";
 import {
     AddButtonComponent,
     AddTaskButtonComponent,
diff --git a/app/styles/base/layout.scss b/app/styles/base/layout.scss
index de6acf1da2..c7fa123774 100644
--- a/app/styles/base/layout.scss
+++ b/app/styles/base/layout.scss
@@ -219,8 +219,7 @@ footer {
 
 .context-button-bar {
     position: relative !important;
-    margin-top: -34px !important;
-    margin-right: 10px !important;
+    margin: -34px 10px 0 !important;
     float: right;
 
     button {
diff --git a/test/app/components/account/base/storage-account-picker/storage-account-picker.component.spec.ts b/test/app/components/account/base/storage-account-picker/storage-account-picker.component.spec.ts
index dcf3e0c262..b9d3c1d396 100644
--- a/test/app/components/account/base/storage-account-picker/storage-account-picker.component.spec.ts
+++ b/test/app/components/account/base/storage-account-picker/storage-account-picker.component.spec.ts
@@ -24,7 +24,7 @@ class TestComponent {
     public account = account;
 }
 
-fdescribe("StorageAccountPickerComponent", () => {
+describe("StorageAccountPickerComponent", () => {
     let fixture: ComponentFixture<TestComponent>;
     let testComponent: TestComponent;
     let component: StorageAccountPickerComponent;
diff --git a/test/app/components/base/buttons/action-button.component.spec.ts b/test/app/components/base/buttons/action-button.component.spec.ts
new file mode 100644
index 0000000000..f8d6f6d4af
--- /dev/null
+++ b/test/app/components/base/buttons/action-button.component.spec.ts
@@ -0,0 +1,51 @@
+import { Component, DebugElement, NO_ERRORS_SCHEMA } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+
+import { ActionButtonComponent } from "app/components/base/buttons/action-button.component";
+
+@Component({
+    template: `
+        <bl-action-btn [disabled]="disabled" icon="fa fa-stop" (action)="onAction()"></bl-action-btn>
+    `,
+})
+class TestComponent {
+    public disabled: boolean = false;
+
+    public onAction: jasmine.Spy;
+
+    constructor() {
+        this.onAction = jasmine.createSpy("onAction");
+    }
+}
+
+fdescribe("ActionButton", () => {
+    let fixture: ComponentFixture<TestComponent>;
+    let testComponent: TestComponent;
+    let component: ActionButtonComponent;
+    let de: DebugElement;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [],
+            declarations: [ActionButtonComponent, TestComponent],
+            schemas: [NO_ERRORS_SCHEMA],
+        });
+        fixture = TestBed.createComponent(TestComponent);
+        testComponent = fixture.componentInstance;
+        de = fixture.debugElement.query(By.css("bl-action-btn"));
+        component = de.componentInstance;
+        fixture.detectChanges();
+    });
+
+    describe("when disabled", () => {
+        beforeEach(() => {
+            testComponent.disabled = true;
+            fixture.detectChanges();
+        });
+
+        it("should have the disabled class", () => {
+            expect(de.classes["disabled"]).toBe(true);
+        });
+    });
+});
diff --git a/tslint.json b/tslint.json
index 0defe019f0..1dbc86b4eb 100644
--- a/tslint.json
+++ b/tslint.json
@@ -30,7 +30,8 @@
     "arrow-return-shorthand": [true],
     "ban": [
         true,
-        ["main", "debugCrash"] // Show a warning if the main window is being shown on start for debug purposes
+        ["main", "debugCrash"], // Show a warning if the main window is being shown on start for debug purposes
+        ["fdescribe"] // Show a warning if the main window is being shown on start for debug purposes
     ],
     "no-empty-interface":  false,
     "space-before-function-paren": [false],

From e35856dc806f894c5a618317de01a63fc0a66d72 Mon Sep 17 00:00:00 2001
From: Timothee Guerin <timothee.guerin@outlook.com>
Date: Mon, 29 May 2017 17:42:58 -0700
Subject: [PATCH 7/9] Action button Specs

---
 .../buttons/action-button.component.spec.ts   | 51 ++++++++++++++++++-
 1 file changed, 49 insertions(+), 2 deletions(-)

diff --git a/test/app/components/base/buttons/action-button.component.spec.ts b/test/app/components/base/buttons/action-button.component.spec.ts
index f8d6f6d4af..49ab20f626 100644
--- a/test/app/components/base/buttons/action-button.component.spec.ts
+++ b/test/app/components/base/buttons/action-button.component.spec.ts
@@ -2,11 +2,14 @@ import { Component, DebugElement, NO_ERRORS_SCHEMA } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
 
+import { MaterialModule, MdTooltip } from "@angular/material";
 import { ActionButtonComponent } from "app/components/base/buttons/action-button.component";
+import { click } from "test/utils/helpers";
 
 @Component({
     template: `
-        <bl-action-btn [disabled]="disabled" icon="fa fa-stop" (action)="onAction()"></bl-action-btn>
+        <bl-action-btn [disabled]="disabled" icon="fa fa-stop" (action)="onAction()" title="Stop" [color]="color">
+        </bl-action-btn>
     `,
 })
 class TestComponent {
@@ -14,6 +17,7 @@ class TestComponent {
 
     public onAction: jasmine.Spy;
 
+    public color = "primary";
     constructor() {
         this.onAction = jasmine.createSpy("onAction");
     }
@@ -27,7 +31,7 @@ fdescribe("ActionButton", () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [],
+            imports: [MaterialModule],
             declarations: [ActionButtonComponent, TestComponent],
             schemas: [NO_ERRORS_SCHEMA],
         });
@@ -38,6 +42,26 @@ fdescribe("ActionButton", () => {
         fixture.detectChanges();
     });
 
+    it("should have the icon specified", () => {
+        const icon = de.query(By.css("i.fa.fa-stop"));
+        expect(icon).not.toBeFalsy();
+    });
+
+    it("Should have the tooltip specified with title", () => {
+        const el = de.query(By.css(".action-btn"));
+        const tooltip = el.injector.get(MdTooltip);
+        expect(tooltip.message).toBe("Stop");
+    });
+
+    it("should change color", () => {
+        expect(de.attributes["color"]).toBe("primary");
+
+        testComponent.color = "warn";
+        fixture.detectChanges();
+        expect(de.attributes["color"]).toBe("warn");
+
+    });
+
     describe("when disabled", () => {
         beforeEach(() => {
             testComponent.disabled = true;
@@ -47,5 +71,28 @@ fdescribe("ActionButton", () => {
         it("should have the disabled class", () => {
             expect(de.classes["disabled"]).toBe(true);
         });
+
+        it("should not trigger the event on click", () => {
+            click(de);
+            fixture.detectChanges();
+            expect(testComponent.onAction).not.toHaveBeenCalled();
+        });
+    });
+
+    describe("when enabled", () => {
+        beforeEach(() => {
+            testComponent.disabled = false;
+            fixture.detectChanges();
+        });
+
+        it("should have NOT the disabled class", () => {
+            expect(de.classes["disabled"]).toBe(false);
+        });
+
+        it("should trigger the event on click", () => {
+            click(de);
+            fixture.detectChanges();
+            expect(testComponent.onAction).toHaveBeenCalledOnce();
+        });
     });
 });

From 112a0c4888bc08d0f49f5ea72e5bfc18552dd42b Mon Sep 17 00:00:00 2001
From: Timothee Guerin <timothee.guerin@outlook.com>
Date: Mon, 29 May 2017 17:44:47 -0700
Subject: [PATCH 8/9] fix tslint

---
 app/components/base/buttons/action-button.component.ts       | 5 ++---
 .../errors/application-error-display.component.spec.ts       | 2 +-
 .../components/base/buttons/action-button.component.spec.ts  | 2 +-
 test/app/memory-leak/mem-leak.spec.ts                        | 1 +
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/components/base/buttons/action-button.component.ts b/app/components/base/buttons/action-button.component.ts
index 14a6534969..95f37d5c9d 100644
--- a/app/components/base/buttons/action-button.component.ts
+++ b/app/components/base/buttons/action-button.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, HostBinding, HostListener, Input, Output } from "@angular/core";
+import { Component, EventEmitter, HostBinding, HostListener, Input, OnChanges, Output } from "@angular/core";
 
 import "./action-buttons.scss";
 
@@ -14,7 +14,7 @@ type ButtonColor = "primary" | "danger" | "warn";
         </span>
     `,
 })
-export class ActionButtonComponent {
+export class ActionButtonComponent implements OnChanges {
     @Output()
     public action = new EventEmitter();
 
@@ -53,7 +53,6 @@ export class ActionButtonComponent {
     @HostListener("keydown", ["$event"])
     public onkeydown(event: KeyboardEvent) {
         if (event.code === "Space" || event.code === "Enter") {
-            console.log("Event", event);
             this.handleAction();
             event.preventDefault();
         }
diff --git a/test/app/components/application/errors/application-error-display.component.spec.ts b/test/app/components/application/errors/application-error-display.component.spec.ts
index 6f55549a5d..d3bb300b45 100644
--- a/test/app/components/application/errors/application-error-display.component.spec.ts
+++ b/test/app/components/application/errors/application-error-display.component.spec.ts
@@ -4,11 +4,11 @@ import { By } from "@angular/platform-browser";
 import { BehaviorSubject } from "rxjs";
 
 import { ApplicationErrorDisplayComponent } from "app/components/application/errors";
+import { SidebarManager } from "app/components/base/sidebar";
 import { AccountResource, Application } from "app/models";
 import { AccountService } from "app/services";
 import * as Fixtures from "test/fixture";
 import { BannerMockComponent } from "test/utils/mocks/components";
-import { SidebarManager } from "app/components/base/sidebar";
 
 @Component({
     template: `<bl-application-error-display [application]="application"></bl-application-error-display>`,
diff --git a/test/app/components/base/buttons/action-button.component.spec.ts b/test/app/components/base/buttons/action-button.component.spec.ts
index 49ab20f626..e8715fe7f8 100644
--- a/test/app/components/base/buttons/action-button.component.spec.ts
+++ b/test/app/components/base/buttons/action-button.component.spec.ts
@@ -23,7 +23,7 @@ class TestComponent {
     }
 }
 
-fdescribe("ActionButton", () => {
+describe("ActionButton", () => {
     let fixture: ComponentFixture<TestComponent>;
     let testComponent: TestComponent;
     let component: ActionButtonComponent;
diff --git a/test/app/memory-leak/mem-leak.spec.ts b/test/app/memory-leak/mem-leak.spec.ts
index 684a0b335a..fad8c731c4 100644
--- a/test/app/memory-leak/mem-leak.spec.ts
+++ b/test/app/memory-leak/mem-leak.spec.ts
@@ -5,6 +5,7 @@ import { TestBed, async } from "@angular/core/testing";
 import { TaskDetailsModule } from "app/components/task/details";
 
 export function main() {
+    // tslint:disable-next-line:ban
     fdescribe("Memory leak Testing", () => {
         for (let i = 0; i < 100000; i++) {
             describe(`${i}`, () => {

From a872c275c257eb5dab740bb0d7d3981a4f5f9336 Mon Sep 17 00:00:00 2001
From: Timothee Guerin <tiguerin@microsoft.com>
Date: Tue, 30 May 2017 08:33:27 -0700
Subject: [PATCH 9/9] Fix task form not closing & remove add button on task
 details

---
 .../task/action/add/task-create-basic-dialog.component.ts       | 2 +-
 app/components/task/details/task-details.html                   | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/components/task/action/add/task-create-basic-dialog.component.ts b/app/components/task/action/add/task-create-basic-dialog.component.ts
index c719e5a4ef..518cfabb1f 100644
--- a/app/components/task/action/add/task-create-basic-dialog.component.ts
+++ b/app/components/task/action/add/task-create-basic-dialog.component.ts
@@ -29,7 +29,7 @@ export class TaskCreateBasicDialogComponent extends DynamicForm<Task, TaskCreate
 
     constructor(
         private formBuilder: FormBuilder,
-        sidebarRef: SidebarRef<TaskCreateBasicDialogComponent>,
+        public sidebarRef: SidebarRef<TaskCreateBasicDialogComponent>,
         protected taskService: TaskService,
         private notificationService: NotificationService) {
         super(TaskCreateDto);
diff --git a/app/components/task/details/task-details.html b/app/components/task/details/task-details.html
index 21e8f45c62..28b9f922d3 100644
--- a/app/components/task/details/task-details.html
+++ b/app/components/task/details/task-details.html
@@ -7,7 +7,6 @@
             <div class="actions">
                 <bl-action-btn-group>
                     <bl-refresh-btn [refresh]="refresh"></bl-refresh-btn>
-                    <bl-add-button (action)="addTask()"></bl-add-button>
                     <bl-terminate-button [entity]="task" (action)="terminateTask()"></bl-terminate-button>
                     <bl-delete-button [entity]="task" (action)="deleteTask()"></bl-delete-button>
                     <bl-clone-button (action)="cloneTask()"></bl-clone-button>