From b0381ed17f8948ae6e8564906f94211e58c679d3 Mon Sep 17 00:00:00 2001
From: Ivaschenko Christina <caloriees@gmail.com>
Date: Tue, 3 Oct 2017 08:11:35 +0700
Subject: [PATCH 1/2] feat(vm-color-picker): Move VM color picker from bar to
 the VM name line

---
 .../color-picker/color-picker.component.html  | 12 +++++++--
 .../color-picker/color-picker.component.scss  |  9 +++++++
 .../color-picker/color-picker.component.ts    |  1 +
 .../vm-sidebar/color/vm-color.component.html  | 26 +++++++------------
 .../vm-detail/vm-detail.component.html        |  1 -
 .../vm/vm-sidebar/vm-sidebar.component.html   |  6 ++++-
 src/app/vm/vm-sidebar/vm-sidebar.component.ts |  3 +++
 src/style/app.scss                            |  4 +++
 8 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/src/app/shared/components/color-picker/color-picker.component.html b/src/app/shared/components/color-picker/color-picker.component.html
index a4812b30ef..27c715413b 100644
--- a/src/app/shared/components/color-picker/color-picker.component.html
+++ b/src/app/shared/components/color-picker/color-picker.component.html
@@ -1,11 +1,18 @@
 <div
   class="color-preview-container"
+  [ngClass]="{'color-preview-no-field': !hasColorField}"
   [class.disabled]="disabled"
   (click)="handlePreviewClick($event)"
 >
-  <div class="color-preview" [style.background-color]="selectedColor?.value"></div>
+  <div *ngIf="hasColorField"
+       class="color-preview"
+       [style.background-color]="selectedColor?.value"></div>
+  <div *ngIf="!hasColorField"
+       class="color-preview mb-1"
+       [csPopoverTrigger]="popover"
+       [style.background-color]="selectedColor?.value"></div>
 </div>
-<md-form-field [csPopoverTrigger]="popover" class="full-width-input">
+<md-form-field *ngIf="hasColorField" [csPopoverTrigger]="popover" class="full-width-input">
   <input
     mdInput
     [value]="selectedColor?.value.toLowerCase()"
@@ -18,6 +25,7 @@
   <cs-popover #popover>
     <div
       class="color-picker-container mat-elevation-z2"
+      [ngClass]="{'color-picker-no-field': !hasColorField}"
       [style.width.px]="containerWidth"
     >
       <div
diff --git a/src/app/shared/components/color-picker/color-picker.component.scss b/src/app/shared/components/color-picker/color-picker.component.scss
index 37fdee44b8..8396528b96 100644
--- a/src/app/shared/components/color-picker/color-picker.component.scss
+++ b/src/app/shared/components/color-picker/color-picker.component.scss
@@ -31,6 +31,10 @@ $input-margin: 10px;
   }
 }
 
+.color-preview-no-field {
+  top: 4px;
+}
+
 :host md-form-field {
   width: 300px - $input-margin - $preview-width !important;
   margin-left: $input-margin;
@@ -68,3 +72,8 @@ $input-margin: 10px;
   padding: 5px;
   box-sizing: content-box;
 }
+
+.color-picker-no-field {
+  margin-left: 47%;
+  margin-top: 2%;
+}
diff --git a/src/app/shared/components/color-picker/color-picker.component.ts b/src/app/shared/components/color-picker/color-picker.component.ts
index 2d1df446db..1a4b7dbe73 100644
--- a/src/app/shared/components/color-picker/color-picker.component.ts
+++ b/src/app/shared/components/color-picker/color-picker.component.ts
@@ -31,6 +31,7 @@ export class ColorPickerComponent implements OnChanges, ControlValueAccessor {
   @Input() public colors: Array<Color>;
   @Input() public colorsPerLine: number;
   @Input() public containerWidth = 256;
+  @Input() public hasColorField = true;
   @Output() public change = new EventEmitter();
   @ViewChild(PopoverTriggerDirective) public popoverTrigger: PopoverTriggerDirective;
   public colorWidth: number;
diff --git a/src/app/vm/vm-sidebar/color/vm-color.component.html b/src/app/vm/vm-sidebar/color/vm-color.component.html
index 6ecc3ed094..e9c0e29c09 100644
--- a/src/app/vm/vm-sidebar/color/vm-color.component.html
+++ b/src/app/vm/vm-sidebar/color/vm-color.component.html
@@ -1,17 +1,9 @@
-<md-card class="vm-card">
-  <md-card-header>
-    <md-card-title>
-      <h2 class="md-card-title-text">{{ 'VM_PAGE.VM_DETAILS.COLOR' | translate }}</h2>
-    </md-card-title>
-  </md-card-header>
-  <md-card-content>
-    <cs-color-picker
-      *ngIf="colorList"
-      class="color-picker"
-      [colors]="colorList"
-      [ngModel]="color"
-      [disabled]="colorUpdateInProgress"
-      (change)="changeColor($event)"
-    ></cs-color-picker>
-  </md-card-content>
-</md-card>
+<cs-color-picker
+  *ngIf="colorList"
+  class="color-picker"
+  [colors]="colorList"
+  [ngModel]="color"
+  [disabled]="colorUpdateInProgress"
+  [hasColorField]="false"
+  (change)="changeColor($event)"
+></cs-color-picker>
diff --git a/src/app/vm/vm-sidebar/vm-detail/vm-detail.component.html b/src/app/vm/vm-sidebar/vm-detail/vm-detail.component.html
index d37c995f6c..1d660fda56 100644
--- a/src/app/vm/vm-sidebar/vm-detail/vm-detail.component.html
+++ b/src/app/vm/vm-sidebar/vm-detail/vm-detail.component.html
@@ -1,6 +1,5 @@
 <div *ngIf="vm">
   <div>
-    <cs-vm-color [vm]="vm"></cs-vm-color>
 
     <cs-description
       [description]="description"
diff --git a/src/app/vm/vm-sidebar/vm-sidebar.component.html b/src/app/vm/vm-sidebar/vm-sidebar.component.html
index 8860306ced..17674db7b7 100644
--- a/src/app/vm/vm-sidebar/vm-sidebar.component.html
+++ b/src/app/vm/vm-sidebar/vm-sidebar.component.html
@@ -1,6 +1,10 @@
 <ng-container *ngIf="entity">
   <div class="title-container">
-    <h4 class="details-header">{{ entity.displayName }}</h4>
+    <div class="title-color-container">
+      <cs-vm-color [vm]="vm"></cs-vm-color>
+    </div>
+    <h4 class="details-header ml-1">
+      {{ entity.displayName }}</h4>
     <cs-vm-actions-sidebar [vm]="entity"></cs-vm-actions-sidebar>
   </div>
   <nav md-tab-nav-bar>
diff --git a/src/app/vm/vm-sidebar/vm-sidebar.component.ts b/src/app/vm/vm-sidebar/vm-sidebar.component.ts
index f7aeaf0b25..407df1cef4 100644
--- a/src/app/vm/vm-sidebar/vm-sidebar.component.ts
+++ b/src/app/vm/vm-sidebar/vm-sidebar.component.ts
@@ -14,6 +14,8 @@ import { EntityDoesNotExistError } from '../../shared/components/sidebar/entity-
   styleUrls: ['vm-sidebar.component.scss']
 })
 export class VmSidebarComponent extends SidebarComponent<VirtualMachine> {
+  public vm: VirtualMachine;
+
   constructor(
     protected vmService: VmService,
     protected notificationService: NotificationService,
@@ -27,6 +29,7 @@ export class VmSidebarComponent extends SidebarComponent<VirtualMachine> {
     return this.vmService.getWithDetails(id)
       .switchMap(vm => {
         if (vm) {
+          this.vm = vm;
           return Observable.of(vm);
         } else {
           return Observable.throw(new EntityDoesNotExistError());
diff --git a/src/style/app.scss b/src/style/app.scss
index 3b19fed464..abf9c43e32 100644
--- a/src/style/app.scss
+++ b/src/style/app.scss
@@ -385,6 +385,10 @@ md-card-actions {
   align-items: center;
 }
 
+.title-color-container {
+  width: 35px;
+}
+
 .details-header {
   width: 340px;
   white-space: nowrap;

From 73b57c6cb1b11143f9b94cdba70733ba2ccbb660 Mon Sep 17 00:00:00 2001
From: Ivaschenko Christina <caloriees@gmail.com>
Date: Wed, 4 Oct 2017 08:45:07 +0700
Subject: [PATCH 2/2] feat(vm-color-picker): Move VM color picker from bar to
 the VM name line

---
 .../components/color-picker/color-picker.component.html     | 3 +--
 .../components/color-picker/color-picker.component.scss     | 6 +-----
 src/app/vm/vm-sidebar/color/vm-color.component.scss         | 2 +-
 src/app/vm/vm-sidebar/vm-sidebar.component.html             | 2 +-
 src/app/vm/vm-sidebar/vm-sidebar.component.scss             | 4 ++++
 src/app/vm/vm-sidebar/vm-sidebar.component.ts               | 2 --
 src/style/app.scss                                          | 4 ----
 7 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/app/shared/components/color-picker/color-picker.component.html b/src/app/shared/components/color-picker/color-picker.component.html
index 27c715413b..5bde0805f0 100644
--- a/src/app/shared/components/color-picker/color-picker.component.html
+++ b/src/app/shared/components/color-picker/color-picker.component.html
@@ -1,6 +1,5 @@
 <div
   class="color-preview-container"
-  [ngClass]="{'color-preview-no-field': !hasColorField}"
   [class.disabled]="disabled"
   (click)="handlePreviewClick($event)"
 >
@@ -8,7 +7,7 @@
        class="color-preview"
        [style.background-color]="selectedColor?.value"></div>
   <div *ngIf="!hasColorField"
-       class="color-preview mb-1"
+       class="color-preview"
        [csPopoverTrigger]="popover"
        [style.background-color]="selectedColor?.value"></div>
 </div>
diff --git a/src/app/shared/components/color-picker/color-picker.component.scss b/src/app/shared/components/color-picker/color-picker.component.scss
index 8396528b96..5a38d74801 100644
--- a/src/app/shared/components/color-picker/color-picker.component.scss
+++ b/src/app/shared/components/color-picker/color-picker.component.scss
@@ -31,10 +31,6 @@ $input-margin: 10px;
   }
 }
 
-.color-preview-no-field {
-  top: 4px;
-}
-
 :host md-form-field {
   width: 300px - $input-margin - $preview-width !important;
   margin-left: $input-margin;
@@ -75,5 +71,5 @@ $input-margin: 10px;
 
 .color-picker-no-field {
   margin-left: 47%;
-  margin-top: 2%;
+  margin-top: 10px;
 }
diff --git a/src/app/vm/vm-sidebar/color/vm-color.component.scss b/src/app/vm/vm-sidebar/color/vm-color.component.scss
index 46ce4d7a77..bf8b54eefa 100644
--- a/src/app/vm/vm-sidebar/color/vm-color.component.scss
+++ b/src/app/vm/vm-sidebar/color/vm-color.component.scss
@@ -1,5 +1,5 @@
 .color-picker {
-  margin: -20px 0;
+  margin-bottom: 14px;
   width: 330px;
 }
 
diff --git a/src/app/vm/vm-sidebar/vm-sidebar.component.html b/src/app/vm/vm-sidebar/vm-sidebar.component.html
index 17674db7b7..c7a89805bc 100644
--- a/src/app/vm/vm-sidebar/vm-sidebar.component.html
+++ b/src/app/vm/vm-sidebar/vm-sidebar.component.html
@@ -1,7 +1,7 @@
 <ng-container *ngIf="entity">
   <div class="title-container">
     <div class="title-color-container">
-      <cs-vm-color [vm]="vm"></cs-vm-color>
+      <cs-vm-color [vm]="entity"></cs-vm-color>
     </div>
     <h4 class="details-header ml-1">
       {{ entity.displayName }}</h4>
diff --git a/src/app/vm/vm-sidebar/vm-sidebar.component.scss b/src/app/vm/vm-sidebar/vm-sidebar.component.scss
index 6c91e46aef..a6f306043c 100644
--- a/src/app/vm/vm-sidebar/vm-sidebar.component.scss
+++ b/src/app/vm/vm-sidebar/vm-sidebar.component.scss
@@ -17,3 +17,7 @@ h4 {
 :host /deep/ .mat-tab-link {
   min-width: 83px !important;
 }
+
+.title-color-container {
+  width: 35px;
+}
diff --git a/src/app/vm/vm-sidebar/vm-sidebar.component.ts b/src/app/vm/vm-sidebar/vm-sidebar.component.ts
index 407df1cef4..1123ac0a74 100644
--- a/src/app/vm/vm-sidebar/vm-sidebar.component.ts
+++ b/src/app/vm/vm-sidebar/vm-sidebar.component.ts
@@ -14,7 +14,6 @@ import { EntityDoesNotExistError } from '../../shared/components/sidebar/entity-
   styleUrls: ['vm-sidebar.component.scss']
 })
 export class VmSidebarComponent extends SidebarComponent<VirtualMachine> {
-  public vm: VirtualMachine;
 
   constructor(
     protected vmService: VmService,
@@ -29,7 +28,6 @@ export class VmSidebarComponent extends SidebarComponent<VirtualMachine> {
     return this.vmService.getWithDetails(id)
       .switchMap(vm => {
         if (vm) {
-          this.vm = vm;
           return Observable.of(vm);
         } else {
           return Observable.throw(new EntityDoesNotExistError());
diff --git a/src/style/app.scss b/src/style/app.scss
index abf9c43e32..3b19fed464 100644
--- a/src/style/app.scss
+++ b/src/style/app.scss
@@ -385,10 +385,6 @@ md-card-actions {
   align-items: center;
 }
 
-.title-color-container {
-  width: 35px;
-}
-
 .details-header {
   width: 340px;
   white-space: nowrap;