From 85b764c1794e34a685591af922fc64bf8ef3c0ca Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Tue, 14 Jun 2016 16:11:12 -0400
Subject: [PATCH] (html,css) Improve forms

Improved pseudo-input and used md-inline-form
---
 UI/PreferencesUI/UIxPreferences.m             |  5 ++
 .../ContactsUI/UIxContactEditorTemplate.wox   | 16 +++----
 .../ContactsUI/UIxContactViewTemplate.wox     | 48 +++++--------------
 .../PreferencesUI/UIxFilterEditor.wox         | 19 +++++---
 UI/Templates/PreferencesUI/UIxPreferences.wox | 12 ++---
 .../components/pseudo-input/pseudo-input.scss | 10 ++++
 6 files changed, 53 insertions(+), 57 deletions(-)

diff --git a/UI/PreferencesUI/UIxPreferences.m b/UI/PreferencesUI/UIxPreferences.m
index 98808a6a9..8eb158bd1 100644
--- a/UI/PreferencesUI/UIxPreferences.m
+++ b/UI/PreferencesUI/UIxPreferences.m
@@ -1243,6 +1243,11 @@ static NSArray *reminderValues = nil;
   return fontSizes;
 }
 
+- (NSString *) itemFontSizeText
+{
+  return [NSString stringWithFormat: @"%@ px", item];
+}
+
 //
 // Used by templates
 //
diff --git a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
index 8fe690509..4f204aab7 100644
--- a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
@@ -32,7 +32,7 @@
         </hgroup>
         
         <!-- contact editor -->
-        <form name="cardForm" ng-show="editor.card.$isCard()" ng-submit="editor.save(cardForm)">
+        <form class="md-inline-form" name="cardForm" ng-show="editor.card.$isCard()" ng-submit="editor.save(cardForm)">
           <md-input-container class="md-block md-flex">
             <var:entity const:name="nbsp"/>
             <label>
@@ -123,7 +123,7 @@
           <!-- emails -->
           <div class="section">
             <div class="attr" ng-repeat="email in editor.card.emails">
-              <div layout="row">
+              <div layout="row" layout-align="start center">
                 <md-input-container flex="20">
                   <md-select ng-model="email.type" label:placeholder="Type">
                     <md-option ng-repeat="type in ::editor.allEmailTypes" ng-value="type">{{ type }}</md-option>
@@ -155,7 +155,7 @@
           <div class="section">
             <div layout="row" ng-show="editor.card.c_screenname != null">
               <md-input-container class="md-flex">
-                <label class="pseudo-input-label">
+                <label>
                   <var:string label:value="Screen Name"/>
                 </label>
                 <input type="text" ng-model="editor.card.c_screenname"/>
@@ -201,7 +201,7 @@
           <!-- phones -->
           <div class="section">
             <div class="attr" ng-repeat="phone in editor.card.phones">
-              <div layout="row">
+              <div layout="row" layout-align="start center">
                 <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>
@@ -232,7 +232,7 @@
           <!-- urls -->
           <div class="section">
             <div class="attr" ng-repeat="url in editor.card.urls">
-              <div layout="row">
+              <div layout="row" layout-align="start center">
                 <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>
@@ -304,7 +304,7 @@
                   <input type="text" ng-model="address.region"/>
                 </md-input-container>
               </div>
-              <div layout="row">
+              <div layout="row" layout-align="start center">
                 <md-input-container flex="50" flex-xs="100">
                   <label>
                     <var:string label:value="Country"/>
@@ -334,9 +334,7 @@
 
           <!-- note -->
           <md-input-container class="md-block md-flex">
-            <label class="right inline">
-              <var:string label:value="Note"/>
-            </label>
+            <label><var:string label:value="Note"/></label>
             <textarea ng-model="editor.card.note"><!-- note --></textarea>
           </md-input-container>
         </form>
diff --git a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
index c32b74e34..8fa0c7de7 100644
--- a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
@@ -74,11 +74,7 @@
           <section class="msg-body">
 
             <div class="pseudo-input-container" ng-show="editor.card.birthday">
-              <div class="key">
-                <label class="pseudo-input-label">
-                  <var:string label:value="Birthday"/>
-                </label>
-              </div>
+              <label class="pseudo-input-label"><var:string label:value="Birthday"/></label>
               <div class="pseudo-input-field">
                 <span>{{editor.card.$birthday}}</span>
               </div>
@@ -86,9 +82,7 @@
 
             <!-- list members -->
             <div class="section" ng-show="editor.card.refs.length > 0">
-              <label class="pseudo-input-label">
-                <var:string label:value="Members"/>
-              </label>
+              <label class="pseudo-input-label"><var:string label:value="Members"/></label>
               <md-list>
                 <md-list-item class="md-2-line" ng-repeat="ref in editor.card.refs track by ref.reference">
                   <sg-avatar-image class="md-tile-left"
@@ -111,73 +105,55 @@
 
             <div class="section" ng-show="editor.card.emails.length > 0">
               <div class="pseudo-input-container" ng-repeat="email in editor.card.emails">
-                <div class="key">
-                  <label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{email.type}}</label>
-                </div>
-
+                <label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{email.type}}</label>
                 <div class="pseudo-input-field">
                   <a href="#" ng-bind="email.value"
                      ng-click="addressbook.newMessageWithRecipient($event, email.value, editor.card.$fullname())"><!-- recipient --></a>
                 </div>
-
               </div>
             </div>
 
             <div class="section" ng-show="editor.card.c_screenname">
               <div class="pseudo-input-container">
-                <div class="key">
-                  <label class="pseudo-input-label"><var:string label:value="Screen Name"/></label>
-                </div>
-
+                <label class="pseudo-input-label"><var:string label:value="Screen Name"/></label>
                 <div class="pseudo-input-field">{{editor.card.c_screenname}}</div>
               </div>
             </div>
 
             <div class="section" ng-show="editor.card.phones.length > 0">
               <div class="pseudo-input-container" ng-repeat="phone in editor.card.phones">
-                <div class="key">
-                  <label class="pseudo-input-label">{{phone.type}}</label>
-                </div>
-
+                <label class="pseudo-input-label">{{phone.type}}</label>
                 <div class="pseudo-input-field">
                   <a href="tel:{{phone.value}}">{{phone.value}}</a>
                 </div>
-
               </div>
             </div>
+
             <div class="section" ng-show="editor.card.urls">
               <div class="pseudo-input-container" ng-repeat="url in editor.card.urls">
-                <div class="key">
-                  <label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{url.type}}
-                  </label>
-                </div>
-
+                <label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{url.type}}</label>
                 <div class="pseudo-input-field">
                   <a href="#" target="_new" ng-href="{{url.value}}">{{url.value}}</a>
                 </div>
-
               </div>
             </div>
+
             <div class="section" ng-show="editor.card.addresses">
               <div class="pseudo-input-container" ng-repeat="address in editor.card.addresses">
-                <div class="key">
-                  <label class="pseudo-input-label">{{address.type}}</label>
-                </div>
+                <label class="pseudo-input-label">{{address.type}}</label>
                 <div class="pseudo-input-field">
                   <div sg-address="address"><!-- address --></div>
                 </div>
               </div>
             </div>
+
             <div class="pseudo-input-container" ng-show="editor.card.note">
-              <div class="key">
-                <label class="pseudo-input-label">
-                  <var:string label:value="Note"/>
-                </label>
-              </div>
+              <label class="pseudo-input-label"><var:string label:value="Note"/></label>
               <div class="pseudo-input-field">
                 <div ng-bind-html="editor.card.note"><!-- note --></div>
               </div>
             </div>
+
           </section>
         </md-card-content>
       </md-card>
diff --git a/UI/Templates/PreferencesUI/UIxFilterEditor.wox b/UI/Templates/PreferencesUI/UIxFilterEditor.wox
index 869580f87..e61e08872 100644
--- a/UI/Templates/PreferencesUI/UIxFilterEditor.wox
+++ b/UI/Templates/PreferencesUI/UIxFilterEditor.wox
@@ -8,7 +8,7 @@
     xmlns:rsrc="OGo:url"
     xmlns:uix="OGo:uix"><var:string var:value="doctype" const:escapeHTML="NO" />
 <md-dialog flex="50" flex-sm="80" flex-xs="100">
-  <form id="filterForm" name="filterForm" ng-submit="filterEditor.save(filterForm)">
+  <form id="filterForm" name="filterForm" class="md-inline-form" ng-submit="filterEditor.save(filterForm)">
     <md-toolbar>
       <div class="md-toolbar-tools">
         <md-icon class="material-icons sg-icon-toolbar-bg">filter_list</md-icon>
@@ -18,19 +18,23 @@
                  type="text"
                  md-autofocus="true"
                  ng-model="filterEditor.filter.name"
+                 label:placeholder="Filter name"
                  required="required"/>
         </md-input-container>
       </div>
     </md-toolbar>
-    <md-dialog-content class="md-dialog-content">
+    <md-dialog-content class="sg-has-form-sections">
       <script type="text/javascript">
         var filterId = '<var:string value="filterId"/>';
         var sieveFolderEncoding = '<var:string value="sieveFolderEncoding"/>';
         var mailTags = <var:string value="labels" const:escapeHTML="NO"/>;
       </script>
 
-      <div layout="row" layout-align="start center">
-        <p><var:string label:value="For incoming messages that"/></p>
+      <div class="sg-form-section">
+        <div layout="row" layout-align="start center">
+          <div class="pseudo-input-container">
+            <p class="pseudo-input-field"><var:string label:value="For incoming messages that"/></p>
+          </div>
         <md-input-container class="md-flex">
           <md-select ng-model="filterEditor.filter.match">
             <md-option const:value="all">
@@ -49,7 +53,7 @@
       <!-- CONDITIONS -->
       <div layout="column">
         <div id="filterRules"><!-- empty --></div>
-          <div layout="row"
+          <div layout="row" layout-align="start center"
                ng-repeat="rule in filterEditor.filter.rules">
 
             <md-input-container class="md-block" flex="25">
@@ -97,12 +101,14 @@
           </md-button>
         </div>
       </div>
+      </div>
+      <div class="sg-form-section">
 
       <!-- ACTIONS -->
       <div layout="column">
         <p><var:string label:value="Perform these actions"/></p>
         <div id="filterActions"><!-- empty --></div>
-        <div layout="row"
+        <div layout="row" layout-align="start center"
              ng-repeat="action in filterEditor.filter.actions">
 
           <md-input-container class="md-block md-flex">
@@ -173,6 +179,7 @@
           </md-button>
         </div>
       </div>
+      </div>
     </md-dialog-content>
     <md-dialog-actions>
       <md-button type="button" ng-click="filterEditor.cancel()"><var:string label:value="Cancel"/></md-button>
diff --git a/UI/Templates/PreferencesUI/UIxPreferences.wox b/UI/Templates/PreferencesUI/UIxPreferences.wox
index e1b13e571..92f0811a1 100644
--- a/UI/Templates/PreferencesUI/UIxPreferences.wox
+++ b/UI/Templates/PreferencesUI/UIxPreferences.wox
@@ -100,7 +100,7 @@
       <md-tab id="generalOptionsView" aria-controls="generalOptionsView-content" label:label="General">
         <md-content layout="row"
                     aria-labelledby="generalOptionsView"
-                    id="generalOptionsView-content" class="md-padding">
+                    id="generalOptionsView-content" class="md-inline-form md-padding">
           <div layout="column" flex="100">
             <md-input-container>
               <label><var:string label:value="SOGo Version"/></label>
@@ -520,7 +520,7 @@
         <!-- MAIL > GENERAL -->
         <md-tab id="mailGeneralTab" aria-controls="mailGeneralTab-content" label:label="General">
           <md-content role="tabpanel" aria-labelledby="mailGeneralView"
-                      id="mailGeneralView-content" class="md-padding">
+                      id="mailGeneralView-content" class="md-padding md-inline-form">
 
             <div>
               <md-checkbox
@@ -635,11 +635,10 @@
                              ng-model="app.preferences.defaults.SOGoMailComposeFontSize">
                     <var:foreach list="fontSizesList" item="item">
                       <md-option var:value="item">
-                        <var:string value="item"/>
+                        <var:string value="itemFontSizeText"/>
                       </md-option>
                     </var:foreach>
                   </md-select>
-                  <div class="md-char-counter">px</div>
                 </md-input-container>
               </div>
             </div>
@@ -817,7 +816,8 @@
                 <var:string label:value="Enable vacation auto reply"/>
               </md-checkbox>
 
-              <div layout="column" flex-offset="5" ng-show="app.preferences.defaults.Vacation.enabled == 1">
+              <div class="md-inline-form" layout="column" flex-offset="5" ng-show="app.preferences.defaults.Vacation.enabled == 1">
+
                 <md-input-container class="md-block md-flex">
                   <label><var:string label:value="Auto reply message"/></label>
                   <var:if condition="vacationHeader.length">
@@ -865,7 +865,7 @@
                   </md-checkbox>
                 </div>
 
-		<div layout="row">
+                <div>
                   <md-checkbox
                       ng-model="app.preferences.defaults.Vacation.startDateEnabled"
                       ng-true-value="1"
diff --git a/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss b/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
index 82883c873..95ec46178 100644
--- a/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
+++ b/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
@@ -18,6 +18,7 @@
 .pseudo-input-container {
   display: block; // Should be (reset to ?) a plain block element
   padding: 0 2px;
+  vertical-align: middle;
 }
 .sg-search-field-container {
   margin-bottom: 12px;
@@ -42,6 +43,10 @@
   @include rtl(transform-origin, left top, right top);
 }
 
+.button-label {
+  @include rtl(transform-origin, left center, right center);
+}
+
 .pseudo-input-label--no-margin,
 .button-label {
   margin-top: 0;
@@ -55,6 +60,11 @@
 
 .pseudo-input-field {
   display: block;
+  padding-top: $input-padding-top + 2;
+  padding-bottom: $input-border-width-focused - $input-border-width-default;
+  padding-left: 2px;
+  padding-right: 2px;
+  border-width: 0;
 }
 
 .pseudo-input-field--underline {