feat(vm-color-picker): Move VM color picker from bar to the VM name line (#583)

* feat(vm-color-picker): Move VM color picker from bar to the VM name line

* feat(vm-color-picker): Move VM color picker from bar to the VM name line

Author: HeyRoach

src/app/shared/components/color-picker/color-picker.component.html

@@ -3,9 +3,15 @@
   [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"
+       [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 +24,7 @@
   <cs-popover #popover>
     <div
       class="color-picker-container mat-elevation-z2"
+      [ngClass]="{'color-picker-no-field': !hasColorField}"
       [style.width.px]="containerWidth"
     >
       <div

src/app/shared/components/color-picker/color-picker.component.scss

@@ -68,3 +68,8 @@ $input-margin: 10px;
   padding: 5px;
   box-sizing: content-box;
 }
+
+.color-picker-no-field {
+  margin-left: 47%;
+  margin-top: 10px;
+}

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;

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>

src/app/vm/vm-sidebar/color/vm-color.component.scss

@@ -1,5 +1,5 @@
 .color-picker {
-  margin: -20px 0;
+  margin-bottom: 14px;
   width: 330px;
 }
 

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"

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]="entity"></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>

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

src/app/vm/vm-sidebar/vm-sidebar.component.ts

@@ -14,6 +14,7 @@ import { EntityDoesNotExistError } from '../../shared/components/sidebar/entity-
   styleUrls: ['vm-sidebar.component.scss']
 })
 export class VmSidebarComponent extends SidebarComponent<VirtualMachine> {
+
   constructor(
     protected vmService: VmService,
     protected notificationService: NotificationService,