From 6b58f3a08090eb570a6c2ed87cce6149313b7fe6 Mon Sep 17 00:00:00 2001
From: iRouge <bfavreault@inverse.ca>
Date: Tue, 24 Feb 2015 19:40:57 -0500
Subject: [PATCH] Style contact editor (model for add and remove)

---
 .../ContactsUI/UIxContactEditorTemplate.wox   | 116 +++++++++---------
 UI/WebServerResources/js/Common/ui.js         |   6 +-
 .../scss/components/_palette.scss             |   2 +-
 .../components/pseudo-input/pseudo-input.scss |  10 +-
 UI/WebServerResources/scss/core/layout.scss   |   7 ++
 5 files changed, 76 insertions(+), 65 deletions(-)

diff --git a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
index a6d899274..de0dc116b 100644
--- a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
@@ -17,38 +17,45 @@
         </label>
           <input type="text" ng-maxlength="30" data-ng-model="card.fn"/>
       </md-input-container>
-      <md-input-container>
-                 <label class="pseudo-input-label">
+<!-- todo: look for better reset/normalization. Semanticaly this should be a fieldset, but content doesn't flex properly du to browser styles-->
+    <div id="contact-identification" class="sg-fieldset" layout="row" layout-sm="column">
+      <md-input-container flex="40">
+        <label class="pseudo-input-label">
           <var:string label:value="Firstname"/>
         </label>
-          <input type="text" data-ng-model="card.givenname"/>
+        <input type="text" data-ng-model="card.givenname"/>
       </md-input-container>
-      <md-input-container>
-                 <label class="pseudo-input-label">
+      <md-input-container flex="40">
+        <label class="pseudo-input-label">
           <var:string label:value="Lastname"/>
         </label>
-          <input type="text" data-ng-model="card.sn"/>
+        <input type="text" data-ng-model="card.sn"/>
       </md-input-container>
-      <md-input-container>
-                 <label class="pseudo-input-label">
+      <md-input-container flex="20">
+        <label class="pseudo-input-label">
           <var:string label:value="Nickname"/>
         </label>
-          <input type="text" data-ng-model="card.nickname"/>
+        <input type="text" data-ng-model="card.nickname"/>
       </md-input-container>
+    </div>
+
+    <div class="sg-fieldset" layout="row" layout-sm="column">
       <md-input-container>
-                 <label class="pseudo-input-label">
+        <label class="pseudo-input-label">
           <var:string label:value="Organization"/>
         </label>
-          <input type="text" data-ng-model="card.org"/>
+        <input type="text" data-ng-model="card.org"/>
       </md-input-container>
       <md-input-container>
-                 <label class="pseudo-input-label">
+        <label class="pseudo-input-label">
           <var:string label:value="Title"/>
         </label>
-          <input type="text" data-ng-model="card.title"/>
+        <input type="text" data-ng-model="card.title"/>
       </md-input-container>
+    </div>
 
-      <!-- org units -->
+
+    <!-- org units -->
 
       <div class="attr" data-ng-repeat="unit in card.orgUnits">
 
@@ -64,63 +71,54 @@
               <i class="md-icon-remove-circle"><!-- remove --></i>
             </md-button>
         </div>
-
-      </div>
-      <div class="attr">
-        <div class="value single">
-          <span class="button secondary outline tiny" data-ng-click="addOrgUnit()">
-            <i class="md-icon-add"><!-- new --></i>
-            <var:string label:value="Add Organizational Unit"/>
-          </span>
-        </div>
       </div>
+    <div class="md-layout-margin" layout="row" layout-align="start center">
+      <md-button class="icon" data-ng-click="addOrgUnit()">
+        <i class="md-icon-add-circle"><!-- plus icon button--></i>
+      </md-button>
+      <label class="button-label">
+        <var:string label:value="Add Organizational Unit"/>
+      </label>
+    </div>
 
-    
     <!-- birthday -->
     <md-input-container>
-          <label class="pseudo-input-label">
+          <label class="pseudo-input-label--no-margin">
             <var:string label:value="Birthday"/>
           </label>
             <input type="date" data-ng-model="card.birthday"/>
     </md-input-container>
 
     <!-- categories -->
-    <div class="pseudo-input">
-
         <!-- if there's some categories, here they are (this is sort of a template) -->
         <div class="attr" data-ng-repeat="category in card.categories">
 
-          <div class="pseudo-input">
-            <i class="md-icon-remove-circle-outline"
-               data-ng-click="card.$delete('categories', $index)"><!-- remove --></i>
-            <div class="key">
-              <label class=" md-flex">
+          <div layout="row" layout-align="center end">
+            <md-input-container>
+              <label class="pseudo-input-label">
                 <var:string label:value="Category"/>
               </label>
-            </div>
-            <div class="value">
-              <p class="pseudo-input-inputLike--underline">
-                <input type="text" label:placeholder="category" data-ng-model="category.value"
-                       data-sg-focus-on="category_{{$index}}" />
-                       <!--data-typeahead="cat for cat in card.allCategories | filter:$viewValue"/>-->
-              </p>
-            </div>
+              <input type="text" data-ng-model="category.value"
+                     data-sg-focus-on="category_{{$index}}"/>
+              <!--data-typeahead="cat for cat in card.allCategories | filter:$viewValue"/>-->
+            </md-input-container>
+            <md-button class="icon" data-ng-click="card.$delete('categories', $index)">
+              <i class="md-icon-remove-circle"><!-- remove --></i>
+            </md-button>
           </div>
         </div>
         <!-- New category button-group -->
-        <div class="attr">
-          <div class="value single">
-            <span class="button secondary outline tiny" data-ng-click="addCategory()">
-              <i class="md-icon-add"><!-- new --></i>
+        <div class="md-layout-margin" layout="row" layout-align="start center">
+            <md-button class="icon" data-ng-click="addCategory()">
+              <i class="md-icon-add-circle"><!-- new --></i>
+            </md-button>
+            <label class="button-label">
               <var:string label:value="New Category"/>
-            </span>
-          </div>
+            </label>
         </div>
 
-    </div>
-
     <!-- emails -->
-    <div class="pseudo-input">
+
     <div class="section">
       <div class="attr" data-ng-repeat="email in card.emails">
         <div class="action">
@@ -128,18 +126,18 @@
             <i class="md-icon-remove-circle-outline"><!-- remove --></i>
           </span>
         </div>
-        <div class="key">
-          <select class="text-right" data-ng-model="email.type" data-ng-options="type for type in allEmailTypes">
+
+          <select class="md-select" data-ng-model="email.type" data-ng-options="type for type in allEmailTypes">
             <!-- email types -->
           </select>
 
-        </div>
-        <div class="value">
-          <p class="pseudo-input-inputLike--underline">
-            <input type="email" label:placeholder="email address" data-ng-model="email.value"
-                   data-sg-focus-on="email_{{$index}}"/>
-          </p>
-        </div>
+
+        <md-input-container>
+          <input type="email" label:placeholder="email address" data-ng-model="email.value"
+                 data-sg-focus-on="email_{{$index}}"/>
+        </md-input-container>
+
+
       </div>
       <div class="attr">
         <div class="value single">
@@ -150,7 +148,7 @@
         </div>
       </div>
     </div>
-    </div>
+
     <!-- phones -->
     <div class="pseudo-input">
       <div class="section">
diff --git a/UI/WebServerResources/js/Common/ui.js b/UI/WebServerResources/js/Common/ui.js
index 177aa952a..b53c8dc93 100644
--- a/UI/WebServerResources/js/Common/ui.js
+++ b/UI/WebServerResources/js/Common/ui.js
@@ -52,7 +52,7 @@
           'contrastLightColors': ['300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700']
         });
         $mdThemingProvider.definePalette('paper', {
-          '50': 'fcf7f8',
+          '50': 'fcfbf8',
           '100': 'f7f1dc',
           '200': 'ede5ca',
           '300': 'e6d8ba',
@@ -68,7 +68,7 @@
           'A400': 'bdbdbd',
           'A700': '616161',
           'contrastDefaultColor': 'dark',
-          'contrastLightColors': '500 600 700 800 900'
+          'contrastLightColors': '800 900'
         });
         // Default theme definition
         // .primaryColor will soon be deprecated in favor of primaryPalette (already on dev builds https://groups.google.com/forum/m/#!topic/ngmaterial/-sXR8CYBMPg)
@@ -81,7 +81,7 @@
             })
           .accentColor('sogo-green')
           .backgroundColor('paper', {
-              'default': '600',
+              'default': '500',
               'hue-1': '200',
               'hue-2': '50',
               'hue-3': '100'
diff --git a/UI/WebServerResources/scss/components/_palette.scss b/UI/WebServerResources/scss/components/_palette.scss
index 85c3c8753..8e8c90e55 100755
--- a/UI/WebServerResources/scss/components/_palette.scss
+++ b/UI/WebServerResources/scss/components/_palette.scss
@@ -73,7 +73,7 @@ $sogoPaper: (
   A100: #fff,
   A200: #eee,
   A400: #bdbdbd,
-  A700: #616161
+  A700: #857545
 );
 $sogoGreen: (
   50: #eaf5e9,
diff --git a/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss b/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
index 1034fb1f5..71444eb85 100644
--- a/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
+++ b/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
@@ -36,7 +36,8 @@ $input-padding-top: 2px !default;
 
 }
 
-.pseudo-input-label {
+.pseudo-input-label,
+.button-label {
   display: inline-block;
   margin-top: $mg;
   color: $colorGrayLight;
@@ -44,6 +45,10 @@ $input-padding-top: 2px !default;
   font-size: sg-size(caption);
   line-height: $sg-line-height-1;
 }
+.pseudo-input-label--no-margin,
+.button-label {
+  margin-top: 0;
+}
 // md overqualifies so we are
 .md-input-focused label.pseudo-input-label,
 .md-input-has-value label.pseudo-input-label {
@@ -98,7 +103,8 @@ input::-webkit-datetime-edit,
 }
 
 .md-input-focused input::-webkit-datetime-edit,
-.md-input-focused /deep/ div#date-time-edit {
+.md-input-focused /deep/ div#date-time-edit,
+.md-input-has-value input::-webkit-datetime-edit {
   opacity: 1;
 }
 
diff --git a/UI/WebServerResources/scss/core/layout.scss b/UI/WebServerResources/scss/core/layout.scss
index aca68e028..a786dfb0a 100644
--- a/UI/WebServerResources/scss/core/layout.scss
+++ b/UI/WebServerResources/scss/core/layout.scss
@@ -26,3 +26,10 @@ flex, flex-sm, flex-gt-sm, flex-md, flex-gt-md, flex-lg, flex-gt-lg, hide, hide-
     width: grid-step($i);
   }
 }
+
+// Rows are included in padded containers, margins are used for vertical spacing
+// ----------------------------------------------------------------------------
+[layout="row"].md-layout-margin {
+  margin-right: 0;
+  margin-left: 0;
+}