From 780d757d6b9e1827879974f541901e2a9a693027 Mon Sep 17 00:00:00 2001
From: iRouge <bfavreault@inverse.ca>
Date: Thu, 12 Feb 2015 03:55:46 -0500
Subject: [PATCH] Styled ngTags for Mail editor and propose a chip-like version
 of tags

---
 UI/Templates/MailerUI/UIxMailEditor.wox       | 20 ++++---
 UI/Templates/UIxPageFrame.wox                 | 32 +++++------
 .../scss/components/ngTags/ng-tags-input.scss | 54 ++++++++++++-------
 .../scss/views/MailerUI.scss                  |  2 +-
 .../scss/views/MessageEditorUI.scss           | 15 +++++-
 5 files changed, 73 insertions(+), 50 deletions(-)

diff --git a/UI/Templates/MailerUI/UIxMailEditor.wox b/UI/Templates/MailerUI/UIxMailEditor.wox
index 04383b6c4..27b24e0a1 100644
--- a/UI/Templates/MailerUI/UIxMailEditor.wox
+++ b/UI/Templates/MailerUI/UIxMailEditor.wox
@@ -22,16 +22,16 @@
       </div>
 
       <div class="PseudoField">
-        <label class="PseudoField-label">
+        <label class="PseudoField-label" ng-class="{focused: to.hasFocus}">
           <var:string label:value="To"/>
         </label>
-        <div class="PseudoField-inputLike">
+
           <tags-input type="text" name="to"
                       ng-model="message.editable.to"
                       label:placeholder="Add a recipient">
             <auto-complete data-source="userFilter($query)"><!-- to --></auto-complete>
           </tags-input>
-        </div>
+
       </div>
       <div class="PseudoField">
         <label class="PseudoField-label">
@@ -77,18 +77,16 @@
       </ul>
       <textarea name="content" var:class="editorClass" ng-model="message.editable.text"/>
       <div class="buttonsToolbar">
-        <span>
-          <a class="button tiny radius"
+        <div layout="row" layout-align="end center">
+          <md-button
              data-ng-click="message.$save()">
-            <i class="icon-disk"><!-- send --></i>
             <var:string label:value="Save"/>
-          </a>
-          <a class="button tiny radius"
+          </md-button>
+          <md-button class="fg-sogoBlue-700"
              data-ng-click="send(message)">
-            <i class="icon-mail"><!-- send --></i>
             <var:string label:value="Send"/>
-          </a>
-        </span>
+          </md-button>
+        </div>
       </div>
     </form>
   </div>
diff --git a/UI/Templates/UIxPageFrame.wox b/UI/Templates/UIxPageFrame.wox
index f7e1bb0c6..ebb1298de 100644
--- a/UI/Templates/UIxPageFrame.wox
+++ b/UI/Templates/UIxPageFrame.wox
@@ -82,31 +82,31 @@
           <var:if condition="shortUserNameForDisplay" const:value="anonymous" const:negate="YES">
           <md-toolbar class="sg-bottombar md-hide-sm" layout="row" layout-align="center center">
             <var:if condition = "userHasCalendarAccess">
-              <var:if condition = "isCalendar">
-                <md-button ng-disabled = "true">
-                  <var:string label:value = "Calendar" />
+              <var:if condition="isCalendar">
+                <md-button ng-disabled="true">
+                  <var:string label:value="Calendar"/>
                 </md-button>
               </var:if>
-              <var:if condition = "isCalendar" const:negate = "YES">
-                <md-button var:href = "relativeCalendarPath">
-                  <var:string label:value = "Calendar" />
+              <var:if condition="isCalendar" const:negate="YES">
+                <md-button var:href="relativeCalendarPath">
+                  <var:string label:value="Calendar"/>
                 </md-button>
               </var:if>
             </var:if>
-            <var:if condition = "isContacts">
-              <md-button ng-disabled = "true">
-                <var:string label:value = "Address Book" />
+            <var:if condition="isContacts">
+              <md-button ng-disabled="true">
+                <var:string label:value="Address Book"/>
               </md-button>
             </var:if>
-            <var:if condition = "isContacts" const:negate = "YES">
-              <md-button var:href = "relativeContactsPath">
-                <var:string label:value = "Address Book" />
+            <var:if condition="isContacts" const:negate="YES">
+              <md-button var:href="relativeContactsPath">
+                <var:string label:value="Address Book"/>
               </md-button>
             </var:if>
-            <var:if condition = "userHasMailAccess">
-              <var:if condition = "isMail">
-                <md-button ng-disabled = "true">
-                  <var:string label:value = "Mail" />
+            <var:if condition="userHasMailAccess">
+              <var:if condition="isMail">
+                <md-button ng-disabled="true">
+                  <var:string label:value="Mail"/>
                 </md-button>
               </var:if>
               <var:if condition = "isMail" const:negate = "YES">
diff --git a/UI/WebServerResources/scss/components/ngTags/ng-tags-input.scss b/UI/WebServerResources/scss/components/ngTags/ng-tags-input.scss
index 1635d8418..5f986a9b0 100644
--- a/UI/WebServerResources/scss/components/ngTags/ng-tags-input.scss
+++ b/UI/WebServerResources/scss/components/ngTags/ng-tags-input.scss
@@ -7,42 +7,58 @@ tags-input *, tags-input *:before, tags-input *:after {
   box-sizing: border-box;
 }
 tags-input .host {
-  @extend .PseudoField-inputLike;
   position: relative;
+
 }
 tags-input .host:active {
   outline: none;
 }
 
 tags-input .tags {
+  @extend .PseudoField-inputLike;
+  padding: 0;
+  line-height: 2 * $mg;
   word-wrap: break-word;
   cursor: text;
-
+  border-bottom: 1px solid $colorGrayLight;
+  transition: $swift-ease-out;
 }
 tags-input .tags.focused {
+  border-bottom: 2px solid sg-color($sogoBlue, 700);
+}
 
+tags-input/deep/#inner-editor {
+  color: $colorGrayLight;
+  line-height: inherit;
+}
+:root/deep/#placeholder,
+:root/deep/[pseudo="-webkit-input-placeholder"] {
+  color: $colorGrayLight;
+  height: $mg;
+  font: inherit;
+  line-height: inherit;
+  padding: 0;
 }
 tags-input .tags .tag-list {
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
+// Trying to make it chip-like
 tags-input .tags .tag-item {
   margin: 2px;
-  padding: 0 5px;
+  padding: $line $mg;
   display: inline-block;
   float: left;
-  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
-  height: 26px;
-  line-height: 25px;
-  border: 1px solid #acacac;
-  border-radius: 3px;
-  background: -webkit-linear-gradient(top, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
-  background: linear-gradient(to bottom, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
+  height: (4 * $line);
+  font-size: sg-size(body);
+  line-height: (2 * $line);
+  border: none;
+  border-radius: (2 * $line);
+  background-color: sg-color($sogoPaper, 400);
 }
 tags-input .tags .tag-item.selected {
-  background: -webkit-linear-gradient(top, #febbbb 0%, #fe9090 45%, #ff5c5c 100%);
-  background: linear-gradient(to bottom, #febbbb 0%, #fe9090 45%, #ff5c5c 100%);
+
 }
 tags-input .tags .tag-item .remove-button {
   margin: 0 0 0 5px;
@@ -51,7 +67,6 @@ tags-input .tags .tag-item .remove-button {
   background: none;
   cursor: pointer;
   vertical-align: middle;
-  font: bold 16px Arial, sans-serif;
   color: #585858;
 }
 tags-input .tags .tag-item .remove-button:active {
@@ -78,16 +93,17 @@ tags-input.ng-invalid .tags {
 }
 
 tags-input .autocomplete {
-  margin-top: 5px;
+  margin-top: 0;
   position: absolute;
   padding: 5px 0;
   z-index: 999;
   width: 100%;
   background-color: white;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border: none;
   -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  top: 100%;
 }
 tags-input .autocomplete .suggestion-list {
   margin: 0;
@@ -100,20 +116,18 @@ tags-input .autocomplete .suggestion-item {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  font: 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: black;
   background-color: white;
 }
 tags-input .autocomplete .suggestion-item.selected {
   color: white;
-  background-color: #0097cf;
+  background-color: sg-color($sogoBlue, 300);
 }
 tags-input .autocomplete .suggestion-item.selected em {
   color: white;
-  background-color: #0097cf;
+  background-color: sg-color($sogoBlue, 700);
 }
 tags-input .autocomplete .suggestion-item em {
-  font: normal bold 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: black;
+  color: $colorGrayDark;
   background-color: white;
 }
diff --git a/UI/WebServerResources/scss/views/MailerUI.scss b/UI/WebServerResources/scss/views/MailerUI.scss
index 13967fcdc..7c3e2025c 100644
--- a/UI/WebServerResources/scss/views/MailerUI.scss
+++ b/UI/WebServerResources/scss/views/MailerUI.scss
@@ -64,7 +64,7 @@
   font-size: sg-size(caption);
   line-height: $sg-line-height-1; // 16px;
   font-weight: $sg-font-regular;
-  color: $colorGray;
+  color: $colorGrayLight;
 }
 .PseudoField-inputLike {
   display: block;
diff --git a/UI/WebServerResources/scss/views/MessageEditorUI.scss b/UI/WebServerResources/scss/views/MessageEditorUI.scss
index 10181868a..9bad71cf2 100644
--- a/UI/WebServerResources/scss/views/MessageEditorUI.scss
+++ b/UI/WebServerResources/scss/views/MessageEditorUI.scss
@@ -6,8 +6,19 @@
 ////
 
 [id=messageEditor] {
-  width: 13 *$pitch;
+  width: (13 * $pitch + $mg); // 13 cols + 1margin for scrollbar
   margin: 0 auto;
+  overflow: auto;
   background-color: sg-color($sogoPaper, 100);
-
+}
+.buttonsToolbar {
+  padding: $mg 0;
+  button {
+    min-width: 5em;
+    margin: 1em 0 1em 1em;
+  }
+}
+// CKE is overqualifying... let's use an ID
+#cke_content {
+  margin-top: $mg;
 }
\ No newline at end of file