From 990b3341f351583bcad4b3288de0549a423772ec Mon Sep 17 00:00:00 2001
From: Alexander Zhukov <a.zhukov@akveo.com>
Date: Fri, 7 Jul 2017 15:39:07 +0300
Subject: [PATCH] fix(forms): fix a form inputs template

---
 .../form-inputs/form-inputs.component.html    | 106 +++++++-----------
 .../form-inputs.component.scss}               |  33 +++++-
 .../form-inputs/form-inputs.component.ts      |   3 +-
 src/app/pages/forms/forms.component.ts        |   1 -
 src/app/pages/forms/forms.module.ts           |   2 +
 5 files changed, 75 insertions(+), 70 deletions(-)
 rename src/app/pages/forms/{forms.component.scss => form-inputs/form-inputs.component.scss} (50%)

diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.html b/src/app/pages/forms/form-inputs/form-inputs.component.html
index 80a3b7d6..7da44348 100644
--- a/src/app/pages/forms/form-inputs/form-inputs.component.html
+++ b/src/app/pages/forms/form-inputs/form-inputs.component.html
@@ -3,42 +3,40 @@
     <nga-card>
       <nga-card-header>Default Inputs</nga-card-header>
       <nga-card-body>
-        <div class="input-group input-group-lg">
+        <div class="input-group">
           <input type="text" placeholder="Project" class="form-control" />
         </div>
-        <div class="row">
-          <div class="col-md-6">
-            <div class="input-group input-group-lg">
-              <input type="text" placeholder="Nick" class="form-control" />
-            </div>
+        <div class="full-name-inputs">
+          <div class="input-group">
+            <input type="text" placeholder="Nick" class="form-control" />
           </div>
-          <div class="col-md-6">
-            <div class="input-group input-group-lg">
-              <input type="text" placeholder="Last Name" class="form-control" />
-            </div>
+          <div class="input-group">
+            <input type="text" placeholder="Last Name" class="form-control" />
           </div>
         </div>
-        <div class="input-group input-group-lg">
+        <div class="input-group">
           <input type="password" placeholder="Password" class="form-control" />
         </div>
-        <div class="input-group input-group-lg">
-          <span class="input-group-addon"></span>
+        <div class="input-group">
+          <span class="input-group-addon input-group-icon">
+            <i class="ion-ios-person-outline"></i>
+          </span>
           <input type="text" placeholder="With Icon" class="form-control" />
         </div>
-        <div class="input-group input-group-lg">
+        <div class="input-group input-group-rounded">
           <input type="text" placeholder="Rounded border" class="form-control" />
         </div>
         <div class="form-group">
           <input type="text" placeholder="Project" class="form-control" />
-          <small class="form-text text-muted">A block of help text that breaks into a new line and may extend beyond one line.</small>
+          <small class="form-text">A block of help text that breaks into a new line and may extend beyond one line.</small>
         </div>
-        <div class="input-group input-group-lg">
-          <input type="text" placeholder="Disabled input" class="form-control" />
+        <div class="input-group">
+          <input type="text" placeholder="Disabled input" class="form-control" disabled />
         </div>
         <div class="input-group">
           <textarea rows="5" placeholder="Text Area" class="form-control"></textarea>
         </div>
-        <div class="input-group">
+        <div class="input-group input-group-sm">
           <input type="text" placeholder="Small Input" class="form-control" />
         </div>
         <div class="input-group input-group-lg">
@@ -50,12 +48,12 @@
       <nga-card-header>Input Groups</nga-card-header>
       <nga-card-body>
         <div class="input-group">
-          <span class="input-group-addon">@</span>
+          <span class="input-group-addon success">@</span>
           <input type="text" class="form-control" placeholder="Username" />
         </div>
         <div class="input-group">
           <span class="input-group-btn">
-            <button class="btn btn-primary">
+            <button class="btn btn-primary btn-icon">
               <i class="ion-ios-email-outline"></i>
             </button>
           </span>
@@ -121,13 +119,13 @@
     <nga-card>
       <nga-card-header>Input Styles</nga-card-header>
       <nga-card-body>
-        <div class="input-group input-group-lg">
+        <div class="input-group input-group-border-only">
           <input type="text" placeholder="Border Only" class="form-control" />
         </div>
-        <div class="input-group input-group-lg">
+        <div class="input-group">
           <input type="text" placeholder="Default Input" class="form-control">
         </div>
-        <div class="input-group input-group-lg">
+        <div class="input-group input-group-fill-only">
           <input type="text" placeholder="Fill Only" class="form-control">
         </div>
       </nga-card-body>
@@ -145,21 +143,9 @@
           <input type="text" placeholder="Input with Danger" class="form-control form-control-danger">
         </div>
         <div class="form-group validation-checkboxes">
-          <label class="custom-control custom-checkbox">
-            <input type="checkbox" class="custom-control-input">
-            <span class="custom-control-indicator"></span>
-            <span class="custom-control-description">Input with Success</span>
-          </label>
-          <label class="custom-control custom-checkbox">
-            <input type="checkbox" class="custom-control-input">
-            <span class="custom-control-indicator"></span>
-            <span class="custom-control-description">Input with Warning</span>
-          </label>
-          <label class="custom-control custom-checkbox">
-            <input type="checkbox" class="custom-control-input">
-            <span class="custom-control-indicator"></span>
-            <span class="custom-control-description">Input with Danger</span>
-          </label>
+          <nga-checkbox status="success">Checkbox with Success</nga-checkbox>
+          <nga-checkbox status="warning">Checkbox with Warning</nga-checkbox>
+          <nga-checkbox status="danger">Checkbox with Danger</nga-checkbox>
         </div>
         <div class="form-group has-success">
           <input type="text" placeholder="Input with Success Icon" class="form-control form-control-success">
@@ -177,21 +163,9 @@
       <nga-card-body>
         <div class="demo-checkboxes-radio">
           <div class="demo-checkboxes">
-            <label class="custom-control custom-checkbox">
-              <input type="checkbox" class="custom-control-input">
-              <span class="custom-control-indicator"></span>
-              <span class="custom-control-description">Checkbox 1</span>
-            </label>
-            <label class="custom-control custom-checkbox">
-              <input type="checkbox" class="custom-control-input">
-              <span class="custom-control-indicator"></span>
-              <span class="custom-control-description">Checkbox 2</span>
-            </label>
-            <label class="custom-control custom-checkbox">
-              <input type="checkbox" class="custom-control-input">
-              <span class="custom-control-indicator"></span>
-              <span class="custom-control-description">Checkbox 3</span>
-            </label>
+            <nga-checkbox>Checkbox 1</nga-checkbox>
+            <nga-checkbox>Checkbox 2</nga-checkbox>
+            <nga-checkbox>Checkbox 3</nga-checkbox>
           </div>
           <div class="demo-radio">
             <label class="custom-control custom-radio">
@@ -211,11 +185,7 @@
             </label>
           </div>
           <div class="demo-disabled-checkbox-radio">
-            <label class="custom-control custom-checkbox">
-              <input type="checkbox" class="custom-control-input">
-              <span class="custom-control-indicator"></span>
-              <span class="custom-control-description">Disabled Checkbox</span>
-            </label>
+            <nga-checkbox>Disbaled Checkbox</nga-checkbox>
             <label class="custom-control custom-radio">
               <input type="radio" class="custom-control-input">
               <span class="custom-control-indicator"></span>
@@ -227,22 +197,28 @@
     </nga-card>
     <nga-card>
       <nga-card-body class="demo-rating">
-        <span>Rating</span>
+        <span class="header">Rating</span>
         <div>
-          <ngb-rating [(rate)]="currentRate">
+          <ngb-rating [(rate)]="currentRate" max=5>
             <ng-template let-fill="fill">
-              <span class="star" [class.filled]="fill === 100">&#9733;</span>
+              <span class="star fill" [class.filled]="fill === 100">
+                <i class="ion-android-star" *ngIf="fill === 100"></i>
+                <i class="ion-android-star-outline" *ngIf="fill !== 100"></i>
+              </span>
             </ng-template>
           </ngb-rating>
-          <span>{{ currentRate }}</span>
+          <span class="current-rate">{{ currentRate | number : '1.1' }}</span>
         </div>
         <div>
-          <ngb-rating [(rate)]="currentRate">
+          <ngb-rating [(rate)]="currentRate" max=5>
             <ng-template let-fill="fill">
-              <span class="star" [class.filled]="fill === 100">&#9733;</span>
+              <span class="star fill" [class.filled]="fill === 100">
+                <i class="ion-android-star" *ngIf="fill === 100"></i>
+                <i class="ion-android-star-outline" *ngIf="fill !== 100"></i>
+              </span>
             </ng-template>
           </ngb-rating>
-          <span>{{ currentRate }}</span>
+          <span class="current-rate">{{ currentRate | number : '1.1' }}</span>
         </div>
       </nga-card-body>
     </nga-card>
diff --git a/src/app/pages/forms/forms.component.scss b/src/app/pages/forms/form-inputs/form-inputs.component.scss
similarity index 50%
rename from src/app/pages/forms/forms.component.scss
rename to src/app/pages/forms/form-inputs/form-inputs.component.scss
index 54a8544f..ea078c1b 100644
--- a/src/app/pages/forms/forms.component.scss
+++ b/src/app/pages/forms/form-inputs/form-inputs.component.scss
@@ -1,4 +1,6 @@
-:host /deep/ {
+@import '../../../@theme/styles/variables';
+
+@include nga-install-component() {
   .input-group {
     margin-bottom: 1rem;
   }
@@ -6,6 +8,10 @@
   .validation-checkboxes {
     display: flex;
     justify-content: space-between;
+
+    .custom-control {
+      margin-left: 1rem;
+    }
   }
 
   .demo-checkboxes {
@@ -35,10 +41,31 @@
 
   .star {
     font-size: 1.5rem;
-    color: #b0c4de;
+    color: nga-theme(color-fg);
   }
 
   .filled {
-    color: #1e90ff;
+    color: nga-theme(color-fg);
+  }
+
+  .header {
+    line-height: 2rem;
+    font-size: 1.25rem;
+    font-family: nga-theme(font-secondary);
+    font-weight: nga-theme(font-weight-bolder);
+  }
+
+  .current-rate {
+    font-size: 1.5rem;
+    padding-left: 1rem;
+    color: nga-theme(color-fg-heading);
+  }
+
+  .full-name-inputs {
+    display: flex;
+
+    .input-group:not(:last-child) {
+      margin-right: 1rem;
+    }
   }
 }
diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.ts b/src/app/pages/forms/form-inputs/form-inputs.component.ts
index 380631a2..b8610722 100644
--- a/src/app/pages/forms/form-inputs/form-inputs.component.ts
+++ b/src/app/pages/forms/form-inputs/form-inputs.component.ts
@@ -2,8 +2,9 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ngx-form-inputs',
+  styleUrls: ['./form-inputs.component.scss'],
   templateUrl: './form-inputs.component.html',
 })
 export class FormInputsComponent {
-  currentRate: number = 6;
+  currentRate: number = 3;
 }
diff --git a/src/app/pages/forms/forms.component.ts b/src/app/pages/forms/forms.component.ts
index f306fc52..424ce42e 100644
--- a/src/app/pages/forms/forms.component.ts
+++ b/src/app/pages/forms/forms.component.ts
@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ngx-form-elements',
-  styleUrls: ['./forms.component.scss'],
   template: `
     <router-outlet></router-outlet>
   `,
diff --git a/src/app/pages/forms/forms.module.ts b/src/app/pages/forms/forms.module.ts
index 54559f49..41b85789 100644
--- a/src/app/pages/forms/forms.module.ts
+++ b/src/app/pages/forms/forms.module.ts
@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgaCheckboxModule } from '@akveo/nga-theme';
 
 import { SharedModule } from '../../shared.module';
 
@@ -10,6 +11,7 @@ import { FormsRoutingModule, routedComponents } from './forms-routing.module';
     SharedModule,
     FormsRoutingModule,
     NgbModule,
+    NgaCheckboxModule,
   ],
   declarations: [
     ...routedComponents,