Feature: New design for actions buttons on details & Fix disabled buttons

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

app/components/base/buttons/action-button.component.ts

@@ -0,0 +1,75 @@
+import { Component, EventEmitter, HostBinding, HostListener, Input, OnChanges, Output } from "@angular/core";
+
+import "./action-buttons.scss";
+
+type ButtonType = "normal" | "round";
+type ButtonColor = "primary" | "danger" | "warn";
+
+@Component({
+    selector: "bl-action-btn",
+    template: `
+        <span class="action-btn" [mdTooltip]="title" mdTooltipPosition="right">
+            <i [class]="icon"></i>
+            <ng-content></ng-content>
+        </span>
+    `,
+})
+export class ActionButtonComponent implements OnChanges {
+    @Output()
+    public action = new EventEmitter();
+
+    @HostBinding("tabindex")
+    public tabindex = "0";
+
+    @Input()
+    public icon: string;
+
+    @Input()
+    public title: string;
+
+    @Input()
+    @HostBinding("class.disabled")
+    public disabled = false;
+
+    @Input()
+    @HostBinding("attr.type")
+    public type: ButtonType = "normal";
+
+    @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") {
+            this.handleAction();
+            event.preventDefault();
+        }
+    }
+
+    public ngOnChanges(changes) {
+        if ("disabled" in changes) {
+            this.tabindex = this.disabled ? "-1" : "0";
+        }
+    }
+}
+
+@Component({
+    selector: "bl-action-btn-group",
+    template: `
+        <ng-content></ng-content>
+    `,
+})
+export class ActionButtonGroupComponent {
+}

app/components/base/buttons/action-buttons.scss

@@ -0,0 +1,74 @@
+@import "app/styles/variables";
+
+bl-action-btn-group {
+    text-align: center;
+    border-right: 1px solid #d5d5d5;
+    display: block;
+
+    bl-action-btn {
+        border-bottom: 1px solid #d5d5d5;
+    }
+}
+
+bl-action-btn {
+    display: inline-block;
+    width: $action-btn-size;
+    height: $action-btn-size;
+    outline: none;
+    cursor: pointer;
+    font-size: 20px;
+    text-align: center;
+    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
+    }
+
+    &[type="round"] {
+        border-radius: 99%;
+    }
+
+    &[color="primary"] {
+        background: white;
+        color: map-get($md-prussian-blue, 500);
+
+        &:hover, &:focus {
+            background: $alto;
+            color: map-get($md-prussian-blue, 200);
+        }
+
+        &[type="round"] {
+            border: 1px solid #d5d5d5;
+        }
+    }
+
+    &[color="danger"] {
+        background: $red;
+        color: $whitesmoke;
+
+        &:hover, &:focus {
+            background: $red-dark;
+        }
+    }
+
+    &[color="warn"] {
+        background: $yellow;
+        color: $whitesmoke;
+
+        &:hover, &:focus {
+            background: $yellow-dark;
+        }
+    }
+}

app/components/base/buttons/buttons.component.ts

@@ -1,30 +1,40 @@
-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: `<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" (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;
 }
 
 @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: `
+        <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();
     }
 }
@@ -35,9 +45,9 @@ export class ClearListSelectionButtonComponent {
  */
 @Component({
     selector: "bl-add-button",
-    template: `<button md-button><i class="fa fa-plus"></i> {{title}}</button>`,
+    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;
@@ -51,9 +61,12 @@ export class AddButtonComponent {
 
 @Component({
     selector: "bl-add-task-button",
-    template: `<button md-button [disabled]="!enabled"><i class="fa fa-plus"></i> {{title}}</button>`,
+    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;
 
@@ -79,9 +92,12 @@ export class AddTaskButtonComponent {
 
 @Component({
     selector: "bl-terminate-button",
-    template: `<button md-button [disabled]="!enabled"><i class="fa fa-times"></i> Terminate</button>`,
+    template: `
+        <bl-action-btn (action)="action.emit()" [disabled]="!enabled" icon="fa fa-stop" title="Terminate">
+        </bl-action-btn>
+    `,
 })
-export class TerminateButtonComponent {
+export class TerminateButtonComponent extends BaseButton {
     @Input()
     public entity: any;
 
@@ -95,9 +111,12 @@ export class TerminateButtonComponent {
 
 @Component({
     selector: "bl-delete-button",
-    template: `<button md-button [disabled]="!enabled"><i class="fa fa-trash-o"></i> Delete</button>`,
+    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;
 
@@ -114,9 +133,13 @@ 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: `
+        <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;
 
@@ -134,9 +157,12 @@ 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: `
+        <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;
 
@@ -151,9 +177,9 @@ export class EnableButtonComponent {
 
 @Component({
     selector: "bl-clone-button",
-    template: `<button md-button><i class="fa fa-clone"></i> {{title}}</button>`,
+    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;
@@ -167,9 +193,12 @@ export class CloneButtonComponent {
 
 @Component({
     selector: "bl-download-button",
-    template: `<button md-button [disabled]="!enabled"><i class="fa fa-download"></i> Download</button>`,
+    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;
@@ -183,14 +212,14 @@ export class DownloadButtonComponent {
 
 @Component({
     selector: "bl-resize-button",
-    template: `<button md-button><i class="fa fa-arrows-v"></i> Resize</button>`,
+    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: `<button md-button><i class="fa fa-pencil-square-o"></i> Edit</button>`,
+    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 {
 }

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-button.component";
 import {
     AddButtonComponent,
     AddTaskButtonComponent,
@@ -21,6 +22,8 @@ import {
 } from "./buttons.component";
 
 const components = [
+    ActionButtonComponent,
+    ActionButtonGroupComponent,
     AddButtonComponent,
     AddTaskButtonComponent,
     ClearListSelectionButtonComponent,

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>