From 4cb8009c69dc4d8e9dc11fea2a4e47b84933d9a3 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Mon, 13 Nov 2017 10:36:32 +0300
Subject: [PATCH] Scrumboard label selector not working correctly + style
 refinements

---
 .../label-selector.component.html             | 26 ++++++++--------
 .../label-selector.component.scss             | 31 +++++++++++++++++++
 2 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.html b/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.html
index d3a19e64..0326b54f 100644
--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.html
+++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.html
@@ -1,8 +1,8 @@
 <div [ngSwitch]="labelsMenuView" class="views" (click)="$event.stopPropagation()">
 
-    <div class="view " *ngSwitchCase="'labels'" [@slideInLeft] fxFlex fxLayout="column">
+    <div class="view" *ngSwitchCase="'labels'" fxFlex fxLayout="column">
 
-        <div class="header mb-12 pb-4 px-8" fxLayout="row" fxLayoutAlign="space-between center">
+        <div class="header" fxLayout="row" fxLayoutAlign="space-between center">
             <div>Labels</div>
             <button mat-button (click)="labelsMenuView ='add'">
                 <mat-icon class="s-16">add</mat-icon>
@@ -12,7 +12,7 @@
 
         <div fxFlex fxLayout="column" fusePerfectScrollbar>
 
-            <div class="label pl-12 mx-8 mb-8" *ngFor="let label of board.labels" fxFlex="0 0 auto" fxLayout="row" fxFlexAlign="space-between center"
+            <div class="label" *ngFor="let label of board.labels" fxFlex="0 0 auto" fxLayout="row" fxFlexAlign="space-between center"
                  [ngClass]="label.color">
 
                 <mat-checkbox fxFlex fxLayout="row" fxLayoutAlign="start center" [checked]="card.idLabels.indexOf(label.id) > -1"
@@ -27,16 +27,16 @@
         </div>
     </div>
 
-    <div class="view px-8" *ngSwitchCase="'edit'" [@slideInRight] fxFlex fxLayout="column">
+    <div class="view edit" *ngSwitchCase="'edit'" fxFlex fxLayout="column">
 
-        <div class="header mb-12 pb-4" fxLayout="row" fxLayoutAlign="space-between center">
-            <div>Edit Label</div>
+        <div class="header" fxLayout="row" fxLayoutAlign="start center">
             <button mat-icon-button (click)="labelsMenuView ='labels'">
                 <mat-icon class="s-16">arrow_back</mat-icon>
             </button>
+            <div>Edit Label</div>
         </div>
 
-        <div fxLayout="row" fxLayoutAlign="space-between center">
+        <div class="content" fxLayout="row" fxLayoutAlign="start center">
             <mat-form-field>
                 <input matInput placeholder="Name" [(ngModel)]="selectedLabel.name" (change)="onLabelChange()">
             </mat-form-field>
@@ -46,26 +46,26 @@
 
     </div>
 
-    <div class="view px-8" *ngSwitchCase="'add'" [@slideInRight] fxFlex fxLayout="column">
+    <div class="view add" *ngSwitchCase="'add'" fxFlex fxLayout="column">
 
-        <div class="header mb-12 pb-4" fxLayout="row" fxLayoutAlign="space-between center">
-            <div>Add Label</div>
+        <div class="header" fxLayout="row" fxLayoutAlign="start center">
             <button mat-icon-button (click)="labelsMenuView ='labels'">
                 <mat-icon class="s-16">arrow_back</mat-icon>
             </button>
+            <div>Add Label</div>
         </div>
 
         <form (submit)="addNewLabel()" #newLabelForm="ngForm" fxFlex fxLayout="column" fxLayoutAlign="start end">
 
-            <div class="w-100-p" fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="space-between center">
+            <div fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="space-between center">
                 <mat-form-field fxFlex>
                     <input matInput placeholder="Name" [(ngModel)]="newLabel.name" name="labelName" required>
                 </mat-form-field>
 
-                <fuse-material-color-picker [(selectedClass)]="newLabel.color" name="labelColor" class="ml-8"></fuse-material-color-picker>
+                <fuse-material-color-picker class="ml-8" [(selectedClass)]="newLabel.color" name="labelColor"></fuse-material-color-picker>
             </div>
 
-            <button mat-raised-button class="mat-accent mt-16" [disabled]="!newLabelForm.valid">Add</button>
+            <button mat-raised-button class="mat-accent mt-16" [disabled]="!newLabelForm.valid">ADD NEW LABEL</button>
         </form>
     </div>
 </div>
diff --git a/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.scss b/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.scss
index ff96a72e..ea65ab35 100644
--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.scss
+++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.scss
@@ -30,6 +30,37 @@
 
                 > .header {
                     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+                    padding: 4px 8px 8px 16px;
+                    margin-bottom: 8px;
+                }
+
+                .label {
+                    margin: 0 8px 8px 8px;
+                    padding: 4px 4px 4px 16px;
+                }
+
+                &.edit,
+                &.add {
+
+                    > .header {
+                        padding: 0 8px 8px 0;
+                    }
+
+                    form {
+                        padding: 0 16px 8px 16px;
+
+                        .mat-form-field-infix {
+                            width: auto !important;
+                        }
+                    }
+
+                    .content {
+                        padding: 8px 16px 8px 16px;
+
+                        .mat-form-field-infix {
+                            width: auto !important;
+                        }
+                    }
                 }
             }
         }