WIP: Redesign the wizard (#335)

* new design of navigation buttons * redesign 1st step on the wizard * redesing set-provider step * redesign: set-datacenter step * add: 'cancel' button * redesing: progress bar * review feedback
kubermatic · Dec 18, 2017 · ad101f5 · ad101f5
1 parent c3b176b
commit ad101f5
Show file tree

Hide file tree

Showing 16 changed files with 283 additions and 232 deletions.
diff --git a/src/app/core/components/navigation/navigation.component.html b/src/app/core/components/navigation/navigation.component.html
@@ -35,7 +35,7 @@
           <div class="mat-button-ripple mat-ripple" md-ripple></div>
           <div class="mat-button-focus-overlay"></div>
         </button>
-  --->
+      -->
 
 </header>
 

diff --git a/src/app/kubermatic.component.html b/src/app/kubermatic.component.html
@@ -7,7 +7,7 @@
     <kubermatic-navigation></kubermatic-navigation>
 
     <md-sidenav-container>
-      <md-sidenav #sidenav opened mode="side" >
+      <md-sidenav #sidenav opened mode="side">
         <kubermatic-sidenav></kubermatic-sidenav>
       </md-sidenav>
 

diff --git a/src/app/wizard/navigation-buttons/navigation-buttons.component.html b/src/app/wizard/navigation-buttons/navigation-buttons.component.html
@@ -1,22 +1,14 @@
 <div class="km-buttom-navigation">
-  <button type="button" md-raised-button color="primary" (click)="stepBack()" [disabled]="step == 0">
-    <i class="fa fa-chevron-left" style="margin-right: 5px;" aria-hidden="true"></i>Back
+  <button type="button" class="btn-back" md-raised-button (click)="stepBack()" *ngIf="step !== 0">
+    Back
   </button>
   <button type="button" md-raised-button color="primary" (click)="stepForward()"  [disabled]="!nextStep">
-    <ng-container *ngIf="step == 0">
-      continue to select provider<i class="fa fa-chevron-right" aria-hidden="true"></i>
-    </ng-container>
-    <ng-container *ngIf="step == 1">
-      continue to select datacenter<i class="fa fa-chevron-right"  aria-hidden="true"></i>
-    </ng-container>
-    <ng-container *ngIf="step == 2">
-      continue to add credentials and settings<i class="fa fa-chevron-right" aria-hidden="true"></i>
-    </ng-container>
-    <ng-container *ngIf="step == 3">
-      continue to review settings <i class="fa fa-chevron-right" aria-hidden="true"></i>
-    </ng-container>
-    <ng-container *ngIf="step == 4 || step == 5">
-      create cluster
+    <ng-container *ngIf="step < 4; else summaryStep">
+      Next
     </ng-container>
+    <ng-template #summaryStep>
+      Create
+    </ng-template>
   </button>
+  <a type="button" class="cancel-button" routerLink="/clusters">Cancel</a>
 </div>
diff --git a/src/app/wizard/navigation-buttons/navigation-buttons.component.scss b/src/app/wizard/navigation-buttons/navigation-buttons.component.scss
@@ -1,14 +1,36 @@
 .km-buttom-navigation {
-  margin-top: 10px;
-  margin-bottom: 70px;
+  margin-top: 35px;
+  text-align: center;
+
+  .mat-raised-button {
+    line-height: 32px;
+  }
 
   button {
-    text-transform: uppercase;
-    font-size: 12px;
+    font-size: 14px;
+    font-weight: 600;
     letter-spacing: 0.4px;
-
-    i {
-      margin-left: 5px;
+    border-radius: 4px;
+    &.btn-back {
+      color: #444D58;
+    }
+    &.mat-raised-button.mat-primary {
+      width: 110px;
     }
+    &.mat-raised-button.mat-primary[disabled] {
+      color: #fff;
+      background-color: #BDC6D1;
+      box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+    }
+  }
+
+  .cancel-button {
+    position: absolute;
+    right: 30px;
+    bottom: 25px;
+    color: #BDC6D1;
+    text-decoration: none;
+    font-size: 14px;
+    font-weight: 600;
   }
 }
diff --git a/src/app/wizard/progress/progress.component.html b/src/app/wizard/progress/progress.component.html
@@ -1,32 +1,32 @@
 <md-card class="km-card-progress-bar" fxLayout fxLayoutGap="25px">
   <md-card-title fxFlex class="wizard-step" >
     <span [style.cursor]="getCurser(0)" (click)="gotoStep(0)">
+      <small [ngClass]="getTitleClass(0)">Name</small>
       <i [ngClass]="getIconClass(0)"></i>
-      <small>Cluster Name</small>
     </span>
   </md-card-title>
   <md-card-title fxFlex class="wizard-step">
     <span [style.cursor]="getCurser(1)" (click)="gotoStep(1)">
+      <small [ngClass]="getTitleClass(1)">Provider</small>
       <i [ngClass]="getIconClass(1)"></i>
-      <small>Provider</small>
     </span>
   </md-card-title>
   <md-card-title fxFlex class="wizard-step">
     <span [style.cursor]="getCurser(2)" (click)="gotoStep(2)">
+      <small [ngClass]="getTitleClass(2)">Datacenter</small>
       <i [ngClass]="getIconClass(2)"></i>
-      <small>Datacenter</small>
     </span>
   </md-card-title>
   <md-card-title fxFlex class="wizard-step">
     <span [style.cursor]="getCurser(3)" (click)="gotoStep(3)">
+      <small [ngClass]="getTitleClass(3)">Settings</small>
       <i [ngClass]="getIconClass(3)"></i>
-      <small>Settings</small>
     </span>
   </md-card-title>
   <md-card-title fxFlex class="wizard-step">
     <span [style.cursor]="getCurser(4)" (click)="gotoStep(4)">
+      <small [ngClass]="getTitleClass(4)">Summary</small>
       <i [ngClass]="getIconClass(4)"></i>
-      <small>Summary</small>
     </span>
   </md-card-title>
 </md-card>
diff --git a/src/app/wizard/progress/progress.component.scss b/src/app/wizard/progress/progress.component.scss
@@ -1,17 +1,23 @@
 .km-card-progress-bar {
-  margin-bottom: 10px;
   padding-top: 14px;
   background-color: #0288d1;
+  border-radius: 0;
 
   .mat-card-title {
     font-size: 16px;
-    font-weight: 400;
+    font-weight: 600;
     margin-bottom: 0;
     margin-top: 0px;
     padding-right: 15px;
+    text-align: center;
 
     i {
       color: #fff;
+      margin-left: 5px;
+
+      &.fa-check {
+        color: #78C347;
+      }
     }
   }
 }
@@ -21,3 +27,7 @@
   color: #fff;
   font-weight: bold;
 }
+
+.title-unchecked {
+  color: #BDC6D1;
+}
diff --git a/src/app/wizard/progress/progress.component.ts b/src/app/wizard/progress/progress.component.ts
@@ -24,25 +24,34 @@ export class ProgressComponent implements OnInit, OnDestroy {
     });
   }
 
-  public gotoStep(clickStep: number) {
+  public gotoStep(clickStep: number): void {
     if (this.step >= clickStep) {
       WizardActions.goToStep(clickStep);
     }
   }
 
-  public getIconClass (iconStep: number) {
+  public getIconClass(iconStep: number): string {
     let iconClass = 'fa fa-circle-o-notch fa-spin';
 
     if (this.step > iconStep) {
       iconClass = 'fa fa-check';
     } else if (this.step < iconStep) {
-      iconClass = 'fa fa-times';
+      iconClass = '';
     }
 
     return iconClass;
   }
 
-  public getCurser (curserStep: number) {
+  public getTitleClass(step: number): string {
+    let titleClass = '';
+
+    if (this.step < step) {
+      titleClass = 'title-unchecked';
+    }
+    return titleClass;
+  }
+
+  public getCurser (curserStep: number): string {
     let curser = 'default';
 
     if (this.step > curserStep) {

diff --git a/src/app/wizard/set-cluster-name/set-cluster-name.component.html b/src/app/wizard/set-cluster-name/set-cluster-name.component.html
@@ -1,18 +1,16 @@
-<md-card>
-  <md-card-header>
-    <md-card-title>
-      <h4>Name your Kubernetes cluster</h4>
-    </md-card-title>
-  </md-card-header>
-  <md-card-content>
-    <p>This is how you will identify your Kubernetes cluster instance. Choose a name that is easy for you to remember.</p>
-    <form [connect]="['wizard', 'clusterNameForm']" [formGroup]="clusterNameForm" novalidate fxLayout="column">
-      <md-input-container fxFlex>
-        <input id="name" mdInput formControlName="name" type="text" placeholder="Name" title="name">
-      </md-input-container>
-      <div fxFlex>
-        <button type="button" md-raised-button (click)="generateName()">Generate name</button>
-      </div>
-    </form>
-  </md-card-content>
-</md-card>
+<md-card-header>
+  <md-card-title>
+    <h4>Name your Cluster</h4>
+  </md-card-title>
+</md-card-header>
+<md-card-content>
+  <p>This is how you will identify your Kubernetes cluster instance. Choose a name that is easy for you to remember</p>
+  <form [connect]="['wizard', 'clusterNameForm']" [formGroup]="clusterNameForm" novalidate fxLayout="column">
+    <md-input-container fxFlex>
+      <input id="name" mdInput formControlName="name" type="text" placeholder="Enter a cluster name" title="name">
+    </md-input-container>
+    <div fxFlex>
+      <button type="button" (click)="generateName()">Generate name</button>
+    </div>
+  </form>
+</md-card-content>
diff --git a/src/app/wizard/set-cluster-name/set-cluster-name.component.scss b/src/app/wizard/set-cluster-name/set-cluster-name.component.scss
@@ -1,30 +1,51 @@
-.mat-card {
-  .mat-card-header {
-    padding: 0;
-    margin-bottom: 10px;
-  }
+.mat-card-header {
+  padding: 0;
+  margin-bottom: 10px;
+  border: none;
+}
 
-  .mat-card-header-text {
-    margin: 0;
-  }
+.mat-card-header-text {
+  margin: 0;
+}
 
-  .mat-card-title {
-    margin: 0;
-    h4 {
-      font-weight: 400;
-      margin: 10px 0;
-      font-size: 18px;
-      color: #444D58;
-    }
+.mat-card-title {
+  margin: 0;
+  h4 {
+    font-weight: 600;
+    margin: 10px 0;
+    font-size: 18px;
+    color: #444D58;
   }
+}
 
-  .mat-card-content {
-    form {
-      padding-top: 10px;
+.mat-card-content {
+  .mat-input-container {
+    margin-top: 20px;
+    .mat-input-placeholder-wrapper .mat-input-placeholder {
+      color: #BDC6D1;
+      font-weight: 600;
+      font-size: 14px;
     }
-    p {
-      color: #444D58;
-      margin: 0 0 5px;
+  }
+  form {
+    padding-top: 10px;
+  }
+  p {
+    color: #BDC6D1;
+    font-size: 12px;
+    margin: 0 0 5px;
+  }
+  button {
+    background-color: transparent;
+    border: none;
+    color: #0288D1;
+    outline: none;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 600;
+    padding: 0;
+    &:hover {
+      color: #0288D1;
     }
   }
 }
diff --git a/src/app/wizard/set-datacenter/set-datacenter.component.html b/src/app/wizard/set-datacenter/set-datacenter.component.html
@@ -1,26 +1,29 @@
-<md-card>
-  <md-card-header>
-    <md-card-title>
-      <h4>Select the datacenter of your cloud provider</h4>
-    </md-card-title>
-  </md-card-header>
-  <md-card-content>
-    <p>This is the cloud provider the Kubernetes nodes are deployed in by Kubermatic.
-      Your nodes can be placed in any cloud you like, but for performance reasons as near to the master as possible.</p>
-    <form *ngIf="datacenters" [connect]="['wizard', 'setDatacenterForm']" [formGroup]="setDatacenterForm" fxLayoutAlign="center" fxLayout="row wrap">
-      <label class="wizard-box" fxFlex="100px" *ngFor="let dc of datacenters[selectedProvider]; let i = index;"
-           [ngClass]="{'selected': !!selectedDatacenter && selectedDatacenter.metadata.name === dc.metadata.name, 'wizard-box-color_primary': i % 2 === 0, 'wizard-box-color_secondary': i % 2 !== 0}"
-           [attr.for]="dc.metadata.name">
-        <!-- TODO: OnClick go to next step -->
-        <!-- TODO: Refresh Button is no region shown -->
-        <div class="wizard-box-content">
-          <span class="{{'flag-icon flag-icon-' + dc.spec.country.toLowerCase()}}"></span>
-          <div class="location">
-            {{dc.spec.location}}
-          </div>
+<md-card-header>
+  <md-card-title>
+    <h4>Select the datacenter of your cloud provider</h4>
+  </md-card-title>
+</md-card-header>
+<md-card-content>
+  <p>This is the cloud provider the Kubernetes nodes are deployed in by Kubermatic. Your nodes can be placed in any cloud you
+    like, but for performance reasons as near to the master as possible.</p>
+  <form *ngIf="datacenters" [connect]="['wizard', 'setDatacenterForm']" [formGroup]="setDatacenterForm" fxLayoutAlign="left"
+    fxLayout="row wrap">
+    <label class="wizard-box" 
+           fxFlex="90px" 
+           *ngFor="let dc of datacenters[selectedProvider]; let i = index;" 
+           [ngClass]="{
+              'selected': !!selectedDatacenter && selectedDatacenter.metadata.name === dc.metadata.name, 
+              'wizard-box-color_primary': i % 2 === 0, 'wizard-box-color_secondary': i % 2 !== 0}"
+      [attr.for]="dc.metadata.name">
+      <!-- TODO: OnClick go to next step -->
+      <!-- TODO: Refresh Button is no region shown -->
+      <div class="wizard-box-content">
+        <span class="{{'flag-icon flag-icon-' + dc.spec.country.toLowerCase()}}"></span>
+        <div class="location">
+          {{dc.spec.location}}
         </div>
-        <input style="display: none" type="radio" [attr.name]="dc.metadata.name" formControlName="datacenter" [value]="dc" [attr.id]="dc.metadata.name">
-      </label>
-    </form>
-  </md-card-content>
-</md-card>
+      </div>
+      <input style="display: none" type="radio" [attr.name]="dc.metadata.name" formControlName="datacenter" [value]="dc" [attr.id]="dc.metadata.name">
+    </label>
+  </form>
+</md-card-content>