From 6a608425f257b3408f1af2d508a0e5f00d6830d1 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Mon, 25 Jul 2016 14:41:42 -0400
Subject: [PATCH] (html) Improve card editor layout

---
 .../ContactsUI/UIxContactEditorTemplate.wox   | 156 +++++++++---------
 1 file changed, 80 insertions(+), 76 deletions(-)

diff --git a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
index 4f204aab7..706a5c1e3 100644
--- a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
@@ -84,7 +84,10 @@
 
           <!-- org units -->
           <div class="attr" ng-repeat="unit in editor.card.orgUnits">
-            <div layout="row" layout-align="center end">
+            <div layout="row" layout-align="start center">
+              <md-button class="md-icon-button" type="button" ng-click="editor.card.$delete('orgUnits', $index)">
+                <md-icon>remove_circle</md-icon>
+              </md-button>
               <md-input-container class="md-flex">
                 <label>
                   <var:string label:value="Organization Unit"/>
@@ -92,9 +95,6 @@
                 <input type="text" ng-model="unit.value"
                        sg-focus-on="orgUnit_{{$index}}"/>
               </md-input-container>
-              <md-button class="md-icon-button" type="button" ng-click="editor.card.$delete('orgUnits', $index)">
-                <md-icon>remove_circle</md-icon>
-              </md-button>
             </div>
           </div>
           <div class="md-layout-margin" layout="row" layout-align="start center">
@@ -124,8 +124,11 @@
           <div class="section">
             <div class="attr" ng-repeat="email in editor.card.emails">
               <div layout="row" layout-align="start center">
+                <md-button class="md-icon-button" type="button" ng-click="editor.card.$delete('emails', $index)">
+                  <md-icon>remove_circle</md-icon>
+                </md-button>
                 <md-input-container flex="20">
-                  <md-select ng-model="email.type" label:placeholder="Type">
+                  <md-select ng-model="email.type | last" label:placeholder="Type">
                     <md-option ng-repeat="type in ::editor.allEmailTypes" ng-value="type">{{ type }}</md-option>
                   </md-select>
                 </md-input-container>
@@ -136,9 +139,6 @@
                   <input type="email" ng-model="email.value"
                          sg-focus-on="email_{{$index}}"/>
                 </md-input-container>
-                <md-button class="md-icon-button" type="button" ng-click="editor.card.$delete('emails', $index)">
-                  <md-icon>remove_circle</md-icon>
-                </md-button>
               </div>
             </div>
             <div class="md-layout-margin" layout="row" layout-align="start center">
@@ -153,16 +153,16 @@
 
           <!-- screenname -->
           <div class="section">
-            <div layout="row" ng-show="editor.card.c_screenname != null">
+            <div layout="row" layout-align="start center" ng-show="editor.card.c_screenname != null">
+              <md-button class="md-icon-button" type="button" ng-click="editor.card.$delete('c_screenname', -1)">
+                <md-icon>remove_circle</md-icon>
+              </md-button>
               <md-input-container class="md-flex">
                 <label>
                   <var:string label:value="Screen Name"/>
                 </label>
                 <input type="text" ng-model="editor.card.c_screenname"/>
               </md-input-container>
-              <md-button class="md-icon-button" type="button" ng-click="editor.card.$delete('c_screenname', -1)">
-                <md-icon>remove_circle</md-icon>
-              </md-button>
             </div>
             <div class="md-layout-margin" layout="row" layout-align="start center" ng-show="editor.card.c_screenname == null">
               <md-button class="md-icon-button" type="button" ng-click="editor.addScreenName($event)">
@@ -176,7 +176,10 @@
 
           <!-- birthday -->
           <div class="section">
-            <div layout="row" layout-align="space-between end" ng-show="editor.card.birthday">
+            <div layout="row" layout-align="start end" ng-show="editor.card.birthday">
+              <md-button class="md-icon-button" type="button" ng-click="editor.card.$delete('birthday', -1)">
+                <md-icon>remove_circle</md-icon>
+              </md-button>
               <div class="pseudo-input-container">
                 <label class="pseudo-input-label">
                   <var:string label:value="Birthday"/>
@@ -184,9 +187,6 @@
                 <md-datepicker class="pseudo-input-field"
                                ng-model="editor.card.birthday"><!-- birthday --></md-datepicker>
               </div>
-              <md-button class="md-icon-button" type="button" ng-click="editor.card.$delete('birthday', -1)">
-                <md-icon>remove_circle</md-icon>
-              </md-button>
             </div>
             <div class="md-layout-margin" layout="row" layout-align="start center" ng-hide="editor.card.birthday">
               <md-button class="md-icon-button" type="button" ng-click="editor.addBirthday()">
@@ -202,6 +202,9 @@
           <div class="section">
             <div class="attr" ng-repeat="phone in editor.card.phones">
               <div layout="row" layout-align="start center">
+                <md-button class="md-icon-button" type="button" ng-click="editor.card.$delete('phones', $index)">
+                  <md-icon>remove_circle</md-icon>
+                </md-button>
                 <md-input-container flex="20">
                   <md-select ng-model="phone.type" label:placeholder="Type">
                     <md-option ng-repeat="type in ::editor.allTelTypes" ng-value="type">{{ type }}</md-option>
@@ -214,9 +217,6 @@
                   <input type="text" ng-model="phone.value"
                          sg-focus-on="phone_{{$index}}"/>
                 </md-input-container>
-                <md-button class="md-icon-button" type="button" ng-click="editor.card.$delete('phones', $index)">
-                  <md-icon>remove_circle</md-icon>
-                </md-button>
               </div>
             </div>
             <div layout="row" layout-align="start center">
@@ -233,6 +233,9 @@
           <div class="section">
             <div class="attr" ng-repeat="url in editor.card.urls">
               <div layout="row" layout-align="start center">
+                <md-button class="md-icon-button" type="button" ng-click="editor.card.$delete('urls', $index)">
+                  <md-icon>remove_circle</md-icon>
+                </md-button>
                 <md-input-container flex="20">
                   <md-select ng-model="url.type" label:placeholder="Type">
                     <md-option ng-repeat="type in ::editor.allUrlTypes" ng-value="type">{{ type }}</md-option>
@@ -244,9 +247,6 @@
                   </label>
                   <input type="url" ng-model="url.value" sg-focus-on="url_{{$index}}"/>
                 </md-input-container>
-                <md-button class="md-icon-button" type="button" ng-click="editor.card.$delete('urls', $index)">
-                  <md-icon>remove_circle</md-icon>
-                </md-button>
               </div>
             </div>
             <div class="md-layout-margin" layout="row" layout-align="start center">
@@ -262,64 +262,68 @@
           <!-- addresses -->
           <div class="section">
             <div class="attr" ng-repeat="address in editor.card.addresses">
-              <div layout="row">
-                <md-input-container flex="20">
-                  <md-select ng-model="address.type" label:placeholder="Type">
-                    <md-option ng-repeat="type in ::editor.allAddressTypes" ng-value="type">{{ type }}</md-option>
-                  </md-select>
-                </md-input-container>
-                <md-input-container class="md-flex">
-                  <label>
-                    <var:string label:value="street"/>
-                  </label>
-                  <input type="text" ng-model="address.street"
-                         sg-focus-on="address_{{$index}}"/>
-                </md-input-container>
-              </div>
-              <div layout="row">
-                <md-input-container flex="20">
-                  <label>
-                    <var:string label:value="Postoffice"/>
-                  </label>
-                  <input type="text" ng-model="address.postoffice"/>
-                </md-input-container>
-                <md-input-container class="md-flex">
-                  <label>
-                    <var:string label:value="street (continued)"/>
-                  </label>
-                  <input type="text" ng-model="address.street2"/>
-                </md-input-container>
-              </div>
-              <div layout="row">
-                <md-input-container flex="50" flex-xs="100">
-                  <label>
-                    <var:string label:value="City"/>
-                  </label>
-                  <input type="text" ng-model="address.locality"/>
-                </md-input-container>
-                <md-input-container flex="50" flex-xs="100">
-                  <label>
-                    <var:string label:value="Region"/>
-                  </label>
-                  <input type="text" ng-model="address.region"/>
-                </md-input-container>
-              </div>
               <div layout="row" layout-align="start center">
-                <md-input-container flex="50" flex-xs="100">
-                  <label>
-                    <var:string label:value="Country"/>
-                  </label>
-                  <input type="text" ng-model="address.country"/>
-                </md-input-container>
-                <md-input-container class="md-flex">
-                  <label>
-                    <var:string label:value="Postal Code"/>
-                  </label>
-                  <input type="text" ng-model="address.postalcode"/>
-                </md-input-container>
                 <md-button class="md-icon-button" type="button" ng-click="editor.card.$delete('addresses', $index)">
                   <md-icon>remove_circle</md-icon>
                 </md-button>
+                <div class="md-flex" layout="column">
+                  <div layout="row">
+                    <md-input-container flex="20">
+                      <md-select ng-model="address.type" label:placeholder="Type">
+                        <md-option ng-repeat="type in ::editor.allAddressTypes" ng-value="type">{{ type }}</md-option>
+                      </md-select>
+                    </md-input-container>
+                    <md-input-container class="md-flex">
+                      <label>
+                        <var:string label:value="street"/>
+                      </label>
+                      <input type="text" ng-model="address.street"
+                             sg-focus-on="address_{{$index}}"/>
+                    </md-input-container>
+                  </div>
+                  <div layout="row">
+                    <md-input-container flex="20">
+                      <label>
+                        <var:string label:value="Postoffice"/>
+                      </label>
+                      <input type="text" ng-model="address.postoffice"/>
+                    </md-input-container>
+                    <md-input-container class="md-flex">
+                      <label>
+                        <var:string label:value="street (continued)"/>
+                      </label>
+                      <input type="text" ng-model="address.street2"/>
+                    </md-input-container>
+                  </div>
+                  <div layout="row">
+                    <md-input-container flex="50" flex-xs="100">
+                      <label>
+                        <var:string label:value="City"/>
+                      </label>
+                      <input type="text" ng-model="address.locality"/>
+                    </md-input-container>
+                    <md-input-container flex="50" flex-xs="100">
+                      <label>
+                        <var:string label:value="Region"/>
+                      </label>
+                      <input type="text" ng-model="address.region"/>
+                    </md-input-container>
+                  </div>
+                  <div layout="row" layout-align="start center">
+                    <md-input-container flex="50" flex-xs="100">
+                      <label>
+                        <var:string label:value="Country"/>
+                      </label>
+                      <input type="text" ng-model="address.country"/>
+                    </md-input-container>
+                    <md-input-container class="md-flex">
+                      <label>
+                        <var:string label:value="Postal Code"/>
+                      </label>
+                      <input type="text" ng-model="address.postalcode"/>
+                    </md-input-container>
+                  </div>
+                </div>
               </div>
             </div>
             <div class="md-layout-margin" layout="row" layout-align="start center">