From 79dc49b905b5a8c15c00e3a52564d47e6dcb078d Mon Sep 17 00:00:00 2001
From: iRouge <bfavreault@inverse.ca>
Date: Tue, 24 Feb 2015 00:00:59 -0500
Subject: [PATCH] Style contact editor layout (needs more work)

---
 .../ContactsUI/UIxContactEditorTemplate.wox   | 129 ++++++------------
 .../scss/components/button/_button.scss       |  13 ++
 .../components/pseudo-input/pseudo-input.scss |  17 +++
 3 files changed, 70 insertions(+), 89 deletions(-)

diff --git a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
index f6e616240..a6d899274 100644
--- a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
@@ -4,99 +4,67 @@
   <md-content md-scroll-y="true" class="md-padding">
     <div class="editor md-padding" style="padding-bottom: 72px">
       <hgroup class="header">
-        <h1 class="sg-md-display-1" data-ng-bind-html="card.$fullname()"><!-- fullname --></h1>
-        <h6>{{card.$description()}}
-          <span class="label radius" data-ng-repeat="category in card.categories">{{category.value}}</span>
+        <h1 class="sg-md-display-2--light" data-ng-bind-html="card.$fullname()"><!-- fullname --></h1>
+        <h6 class="sg-md-display-2-subheader">{{card.$description()}}
+          <span data-ng-repeat="category in card.categories">{{category.value}}</span>
         </h6>
       </hgroup>
   <form name="cardForm" data-ng-show="card.$isCard()" data-ng-submit="save(cardForm)">
-      <md-input-container class="pseudo-input">
+      <md-input-container>
         <var:entity const:name="nbsp"/>
         <label class="pseudo-input-label">
           <var:string label:value="Display"/>
         </label>
-        <p class="pseudo-input-inputLike--underline">
           <input type="text" ng-maxlength="30" data-ng-model="card.fn"/>
-        </p>
       </md-input-container>
-      <md-input-container class="pseudo-input">
-        <div class="action">
-          <var:entity const:name="nbsp"/>
-        </div>
-        <label class="pseudo-input-label">
+      <md-input-container>
+                 <label class="pseudo-input-label">
           <var:string label:value="Firstname"/>
         </label>
-        <p class="pseudo-input-inputLike--underline">
           <input type="text" data-ng-model="card.givenname"/>
-        </p>
       </md-input-container>
-      <div class="pseudo-input">
-        <div class="action">
-          <var:entity const:name="nbsp"/>
-        </div>
-        <label class="pseudo-input-label">
+      <md-input-container>
+                 <label class="pseudo-input-label">
           <var:string label:value="Lastname"/>
         </label>
-        <p class="pseudo-input-inputLike--underline">
           <input type="text" data-ng-model="card.sn"/>
-        </p>
-      </div>
-      <div class="pseudo-input">
-        <div class="action">
-          <var:entity const:name="nbsp"/>
-        </div>
-        <label class="pseudo-input-label">
+      </md-input-container>
+      <md-input-container>
+                 <label class="pseudo-input-label">
           <var:string label:value="Nickname"/>
         </label>
-        <p class="pseudo-input-inputLike--underline">
           <input type="text" data-ng-model="card.nickname"/>
-        </p>
-
-      </div>
-      <div class="pseudo-input">
-        <div class="action">
-          <var:entity const:name="nbsp"/>
-        </div>
-        <label class="pseudo-input-label">
+      </md-input-container>
+      <md-input-container>
+                 <label class="pseudo-input-label">
           <var:string label:value="Organization"/>
         </label>
-        <p class="pseudo-input-inputLike--underline">
           <input type="text" data-ng-model="card.org"/>
-        </p>
-
-      </div>
-      <div class="pseudo-input">
-        <div class="action">
-          <var:entity const:name="nbsp"/>
-        </div>
-        <label class="pseudo-input-label">
+      </md-input-container>
+      <md-input-container>
+                 <label class="pseudo-input-label">
           <var:string label:value="Title"/>
         </label>
-        <p class="pseudo-input-inputLike--underline">
           <input type="text" data-ng-model="card.title"/>
-        </p>
-
-      </div>
+      </md-input-container>
 
       <!-- org units -->
-    <div class="pseudo-input">
+
       <div class="attr" data-ng-repeat="unit in card.orgUnits">
-        <div class="action">
-          <span class="button alert icon" data-ng-click="card.$delete('orgUnits', $index)">
-            <i class="md-icon-remove-circle-outline"><!-- remove --></i>
-          </span>
-        </div>
-        <md-input-container class="pseudo-input">
-          <div class="key">
+
+        <div layout="row" layout-align="center end">
+          <md-input-container>
             <label class="pseudo-input-label">
               <var:string label:value="Organization Unit"/>
             </label>
-          </div>
-          <div class="value">
-              <input type="text" label:placeholder="unit" data-ng-model="unit.value"
-                     data-sg-focus-on="orgUnit_{{$index}}"/>
-          </div>
-        </md-input-container>
+            <input type="text" data-ng-model="unit.value"
+                   data-sg-focus-on="orgUnit_{{$index}}"/>
+          </md-input-container>
+            <md-button class="icon" data-ng-click="card.$delete('orgUnits', $index)">
+              <i class="md-icon-remove-circle"><!-- remove --></i>
+            </md-button>
+        </div>
+
       </div>
       <div class="attr">
         <div class="value single">
@@ -106,26 +74,15 @@
           </span>
         </div>
       </div>
-    </div>
+
     
     <!-- birthday -->
-    <div class="pseudo-input">
-      <div class="attr">
-        <div class="action">
-          <var:entity const:name="nbsp"/>
-        </div>
-        <div class="key">
+    <md-input-container>
           <label class="pseudo-input-label">
             <var:string label:value="Birthday"/>
           </label>
-        </div>
-        <div class="value">
-          <p class="pseudo-input-inputLike--underline">
             <input type="date" data-ng-model="card.birthday"/>
-          </p>
-        </div>
-      </div>
-    </div>
+    </md-input-container>
 
     <!-- categories -->
     <div class="pseudo-input">
@@ -137,7 +94,7 @@
             <i class="md-icon-remove-circle-outline"
                data-ng-click="card.$delete('categories', $index)"><!-- remove --></i>
             <div class="key">
-              <label class="pseudo-input-label md-flex">
+              <label class=" md-flex">
                 <var:string label:value="Category"/>
               </label>
             </div>
@@ -320,7 +277,7 @@
         <var:entity const:name="nbsp"/>
       </div>
       <div class="key">
-        <label class="pseudo-input-label right inline">
+        <label class=" right inline">
           <var:string label:value="Note"/>
         </label>
       </div>
@@ -360,11 +317,8 @@
     </div>
     <div class="section">
       <div class="attr">
-        <div class="action">
-          <var:entity const:name="nbsp"/>
-        </div>
-        <div class="key">
-          <label class="pseudo-input-label right inline">
+                 <div class="key">
+          <label class=" right inline">
             <var:string label:value="Display"/>
           </label>
         </div>
@@ -373,11 +327,8 @@
         </div>
       </div>
       <div class="attr">
-        <div class="action">
-          <var:entity const:name="nbsp"/>
-        </div>
-        <div class="key">
-          <label class="pseudo-input-label right inline">
+                 <div class="key">
+          <label class=" right inline">
             <var:string label:value="Nickname"/>
           </label>
         </div>
@@ -395,7 +346,7 @@
           </span>
         </div>
         <div class="key">
-          <label class="pseudo-input-label right inline">
+          <label class=" right inline">
             <var:string label:value="Member"/>
           </label>
         </div>
diff --git a/UI/WebServerResources/scss/components/button/_button.scss b/UI/WebServerResources/scss/components/button/_button.scss
index 2f080a93b..1d2f1eef9 100644
--- a/UI/WebServerResources/scss/components/button/_button.scss
+++ b/UI/WebServerResources/scss/components/button/_button.scss
@@ -20,4 +20,17 @@ sg-folder-tree .md-button {
 }
 .sg-active .md-button {
   color: sg-color($sogoBlue, 800);
+}
+// Custom icon-buttons
+// ----------------------------------------------------------------------------
+button.icon {
+  font-size: sg-size('title');
+  color: $colorGray;
+  transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
+  background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
+  color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
+  transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+  &:hover {
+    color: sg-color($sogoBlue, 500);
+  }
 }
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss b/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
index 32a216755..1034fb1f5 100644
--- a/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
+++ b/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
@@ -44,6 +44,12 @@ $input-padding-top: 2px !default;
   font-size: sg-size(caption);
   line-height: $sg-line-height-1;
 }
+// md overqualifies so we are
+.md-input-focused label.pseudo-input-label,
+.md-input-has-value label.pseudo-input-label {
+  transform: translate3d(0, 4px, 0) scale(1);
+  margin-top: $mg;
+}
 
 .pseudo-input-field {
   display: block;
@@ -86,10 +92,21 @@ input /deep/ #inner-editor {
   line-height: inherit;
 }
 
+input::-webkit-datetime-edit,
+:root /deep/ div#date-time-edit {
+  opacity: 0;
+}
+
+.md-input-focused input::-webkit-datetime-edit,
+.md-input-focused /deep/ div#date-time-edit {
+  opacity: 1;
+}
+
 md-input-container {
   display: flex;
   position: relative;
   flex-direction: column;
+  flex: 1 1 auto;
   padding: $input-container-padding;
 
   textarea,