From 7ecaacaf40edf5084b6e0200f3af001a15d84a9b Mon Sep 17 00:00:00 2001
From: saravanakumarkandasami <saravanakumar.k@venbainfotech.com>
Date: Wed, 31 Oct 2018 13:59:36 +0530
Subject: [PATCH] PD- Startpd UI

---
 .../list-pd/start-pd/start-pd.component.html  | 55 ++++++++++---------
 .../list-pd/start-pd/start-pd.component.scss  |  4 +-
 2 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.html
index 18e6a2295..58b8db549 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.html
@@ -1,4 +1,4 @@
-<mat-card>
+<mat-card style="min-height:540px;">
     <mat-card-content>
         <mat-sidenav-container class="app-inner background-none shadow-none mail-db">
             <mat-sidenav #mailnav [mode]="isOver() ? 'over' : 'side'" [opened]="!isOver()" class="mail-sidebar pl-xs pr-xs">
@@ -8,7 +8,7 @@
                           <mat-expansion-panel *ngFor="let category of categoryList;let catIndex = index; ">
                               <mat-expansion-panel-header>
                                 <mat-panel-title class="text-xs-left">
-                                 <h6 class="mt-0"> {{category.category_name}}</h6>
+                                 <span class="mt-0"> {{category.category_name}}</span>
                                 </mat-panel-title>
                               
                               </mat-expansion-panel-header>
@@ -62,7 +62,8 @@
                                   
                                   <form [formGroup]="optionsForm" *ngIf="answerList.length>0 ; else noanswers;"> 
                                   <mat-card-content>
-                                          <h6 class="mt-0">{{optionsForm.controls.pd_question.value}}</h6>
+                                       
+                                          <span class="mt-0">{{optionsForm.controls.pd_question.value}}</span>
                                           <div fxLayout="row" >
                                               <div fxFlex="60" class="text-xs-left">
               
@@ -125,10 +126,10 @@
                                                 <!-- this section for questions type options button actions -->
                                                 <div fxFlex="40" class="pb-0 text-sm-right">
                                                         <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
-                                                                <mat-button-toggle value="bold" matTooltip="Save&Previous" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" (click)="saveNextPrevious(optionsForm.controls,previous)" matTooltipPosition="below"><mat-icon>arrow_backward</mat-icon></mat-button-toggle>
-                                                                <mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
-                                                                <mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
-                                                                <mat-button-toggle value="bold" matTooltip="Save&Next"  (click)="saveNextPrevious(optionsForm.controls,next)" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" matTooltipPosition="below"><mat-icon>arrow_forward</mat-icon></mat-button-toggle>
+                                                                <mat-button-toggle value="bold" matTooltip="Save&Previous" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" (click)="saveNextPrevious(optionsForm.controls,previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
+                                                                <mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
+                                                                <mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>chevron_right</mat-icon></mat-button-toggle>
+                                                                <mat-button-toggle value="bold" matTooltip="Save&Next"  (click)="saveNextPrevious(optionsForm.controls,next)" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
                                                               </mat-button-toggle-group>
                             
                                                   </div>
@@ -140,7 +141,7 @@
                                   
                                   <ng-template #noanswers>
                                           <mat-card-content>
-                                                  <h6 class="mt-0">{{selectedCategory.question}}</h6>
+                                                  <span class="mt-0">{{selectedCategory.question}}</span>
   
                                           </mat-card-content>
                                           <mat-card-actions>
@@ -148,8 +149,8 @@
                                                      
                                                         <div fxFlex="100" class="pb-0 text-sm-right">
                                                                 <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
-                                                                        <mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
-                                                                        <mat-button-toggle value="bold" matTooltip="Skip&Next"  (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
+                                                                        <mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
+                                                                        <mat-button-toggle value="bold" matTooltip="Skip&Next"  (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>chevron_right</mat-icon></mat-button-toggle>
                                                                       </mat-button-toggle-group>
                                     
                                                           </div>
@@ -166,7 +167,7 @@
                                  
                                   <form [formGroup]="textBoxForm" *ngIf="answerList.length>0 ; else noanswers;"> 
                                   <mat-card-content>
-                                          <h6 class="mt-0">{{textBoxForm.controls.pd_question.value}}</h6>
+                                          <span class="mt-0">{{textBoxForm.controls.pd_question.value}}</span>
                                           <div fxLayout="row" >
                                               <div fxFlex="60" class="text-xs-left">
                                                      
@@ -228,10 +229,10 @@
                                                 <!-- this section for questions type options button actions -->
                                                 <div fxFlex="40" class="pb-0 text-sm-right">
                                                         <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
-                                                              <mat-button-toggle value="bold" matTooltip="Save&Previous" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" (click)="saveNextPreviousText(textBoxForm.controls,previous)" matTooltipPosition="below"><mat-icon>arrow_backward</mat-icon></mat-button-toggle>
-                                                              <mat-button-toggle value="bold" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
-                                                              <mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
-                                                              <mat-button-toggle value="bold" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" matTooltip="Save&Next" (click)="saveNextPreviousText(textBoxForm.controls,next)" matTooltipPosition="below"><mat-icon>arrow_forward</mat-icon></mat-button-toggle>
+                                                              <mat-button-toggle value="bold" matTooltip="Save&Previous" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" (click)="saveNextPreviousText(textBoxForm.controls,previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
+                                                              <mat-button-toggle value="bold" matTooltipPosition="below"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
+                                                              <mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>chevron_right</mat-icon></mat-button-toggle>
+                                                              <mat-button-toggle value="bold" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" matTooltip="Save&Next" (click)="saveNextPreviousText(textBoxForm.controls,next)" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
                                                               </mat-button-toggle-group>
                             
                                                   </div>
@@ -242,7 +243,7 @@
                                   </form>   
                                   <ng-template #noanswers>
                                           <mat-card-content>
-                                                  <h6 class="mt-0">{{selectedCategory.question}}</h6>
+                                                  <span class="mt-0">{{selectedCategory.question}}</span>
   
                                           </mat-card-content>
                                           <mat-card-actions>
@@ -250,8 +251,8 @@
                                                      
                                                         <div fxFlex="100" class="pb-0 text-sm-right">
                                                                 <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
-                                                                        <mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
-                                                                        <mat-button-toggle value="bold" matTooltip="Skip&Next"  (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
+                                                                        <mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
+                                                                        <mat-button-toggle value="bold" matTooltip="Skip&Next"  (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>chevron_right</mat-icon></mat-button-toggle>
                                                                       </mat-button-toggle-group>
                                     
                                                           </div>
@@ -266,7 +267,7 @@
                                  
                                   <form [formGroup]="checkBoxForm" *ngIf="answerList.length>0 ; else noanswers;"> 
                                   <mat-card-content>
-                                          <h6 class="mt-0">{{checkBoxForm.controls.pd_question.value}}</h6>
+                                          <span class="mt-0">{{checkBoxForm.controls.pd_question.value}}</span>
                                           <div fxLayout="row" >
                                               <div fxFlex="60" class="text-xs-left">
                                                      
@@ -324,10 +325,10 @@
                                                 <!-- this section for questions type options button actions -->
                                                 <div fxFlex="40" class="pb-0 text-sm-right">
                                                         <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
-                                                              <mat-button-toggle value="bold" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltip="Save&Previous" (click)="saveNextPrevious(checkBoxForm.controls,previous)" matTooltipPosition="below"><mat-icon>arrow_backward</mat-icon></mat-button-toggle>
-                                                              <mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
-                                                              <mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
-                                                              <mat-button-toggle value="bold" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" matTooltip="Save&Next" (click)="saveNextPrevious(checkBoxForm.controls,next)" matTooltipPosition="below"><mat-icon>arrow_forward</mat-icon></mat-button-toggle>
+                                                              <mat-button-toggle value="bold" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltip="Save&Previous" (click)="saveNextPrevious(checkBoxForm.controls,previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
+                                                              <mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
+                                                              <mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>chevron_right</mat-icon></mat-button-toggle>
+                                                              <mat-button-toggle value="bold" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" matTooltip="Save&Next" (click)="saveNextPrevious(checkBoxForm.controls,next)" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
                                                               </mat-button-toggle-group>
                             
                                                   </div>
@@ -337,8 +338,8 @@
                                        </mat-card-actions> 
                                   </form> 
                                   <ng-template #noanswers>
-                                          <mat-card-content>
-                                                  <h6 class="mt-0">{{selectedCategory.question}}</h6>
+                                          <mat-card-content> 
+                                                  <span class="mt-0">{{selectedCategory.question}}</span>
   
                                           </mat-card-content>
                                           <mat-card-actions>
@@ -346,8 +347,8 @@
                                                      
                                                         <div fxFlex="100" class="pb-0 text-sm-right">
                                                                 <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
-                                                                        <mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
-                                                                        <mat-button-toggle value="bold" matTooltip="Skip&Next"  (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
+                                                                        <mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
+                                                                        <mat-button-toggle value="bold" matTooltip="Skip&Next"  (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>chevron_right</mat-icon></mat-button-toggle>
                                                                       </mat-button-toggle-group>
                                     
                                                           </div>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.scss
index 3c41b47e0..e71caa4d2 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.scss
@@ -113,7 +113,9 @@ $product-bg-color-hover: rgba(103, 58, 183, 0.7);
     }
    
 }
-
+mat-icon{
+    color: #ff3636;
+}
 .start_close_btn {
     position: fixed;
     right: 69px;