From b6ea1de4c060ecc9e7ed923f6cc6928c37cbd34d Mon Sep 17 00:00:00 2001
From: Ludovic Marcotte <lmarcotte@inverse.ca>
Date: Mon, 3 Aug 2015 12:43:21 -0400
Subject: [PATCH] (fix) improved message editor

---
 UI/Templates/MailerUI/UIxMailEditor.wox       | 327 +++++++++---------
 .../MailerUI/UIxMailFolderTemplate.wox        |   2 +-
 .../scss/views/MessageEditorUI.scss           |  36 +-
 3 files changed, 183 insertions(+), 182 deletions(-)

diff --git a/UI/Templates/MailerUI/UIxMailEditor.wox b/UI/Templates/MailerUI/UIxMailEditor.wox
index 443b5e9cb..c46baf12f 100644
--- a/UI/Templates/MailerUI/UIxMailEditor.wox
+++ b/UI/Templates/MailerUI/UIxMailEditor.wox
@@ -10,175 +10,176 @@
       <!-- TOOLBAR TO SHOW CC/BCC/ATTACHMENT FIELDS -->
 
       <div class="md-toolbar-tools">
+        <md-icon class="material-icons sg-icon-toolbar-bg">edit</md-icon>
         <md-button ng-show="editor.hideCc" ng-click="editor.hideCc = false">Cc</md-button>
         <md-button ng-show="editor.hideBcc" ng-click="editor.hideBcc = false">Bcc</md-button>
 
-          <md-button>
-            <label for="file-input">
+        <md-button>
+          <label for="file-input">
               Add files
-            </label>
+          </label>
+        </md-button>
+        <input id="file-input" type="file"
+               nv-file-select="nv-file-select"
+               multiple="multiple"
+               uploader="editor.uploader"
+               ng-show="false"/>
+
+        <md-menu>
+          <md-button label:aria-label="More mail options" class="iconBtton" ng-click="$mdOpenMenu($event)">
+            <md-icon>more_vert</md-icon>
           </md-button>
-          <input id="file-input" type="file"
-                 nv-file-select="nv-file-select"
-                 multiple="multiple"
-                 uploader="editor.uploader"
-                 ng-show="false"/>
-
-          <md-menu>
-            <md-button label:aria-label="More mail options" class="iconBtton" ng-click="$mdOpenMenu($event)">
-              <md-icon>more_vert</md-icon>
-            </md-button>
-            <md-menu-content width="4">
-              <md-menu-item>
-                <md-button>
-                  <md-checkbox ng-model="editor.message.editable.receipt">
-                    <var:string label:value="Receipt"/>
-                  </md-checkbox>
-                </md-button>
-              </md-menu-item>
-              <md-menu-item>
-                <div layout="row" layout-align="center center">
-                  <span>
-                    <var:string label:value="Priority"/>
-                  </span>
-                  <md-slider flex="flex"
-                             md-discrete="md-discrete"
-                             ng-model="editor.message.editable.priority"
-                             step="1"
-                             min="1"
-                             max="5"
-                             label:aria-label="Priority">
-                  </md-slider>
-                </div>
-              </md-menu-item>
+          <md-menu-content width="4">
+            <md-menu-item>
+              <md-button>
+                <md-checkbox ng-model="editor.message.editable.receipt">
+                  <var:string label:value="Receipt"/>
+                </md-checkbox>
+              </md-button>
+            </md-menu-item>
+            <md-menu-item>
+              <div layout="row" layout-align="center center">
+                <span>
+                  <var:string label:value="Priority"/>
+                </span>
+                <md-slider flex="flex"
+                           md-discrete="md-discrete"
+                           ng-model="editor.message.editable.priority"
+                           step="1"
+                           min="1"
+                           max="5"
+                           label:aria-label="Priority">
+                </md-slider>
+              </div>
+            </md-menu-item>
             </md-menu-content>
-          </md-menu>
+        </md-menu>
 
-    </div>
-  </md-toolbar>
-
-  <md-dialog-content>
-    <form>
-      <header>
-
-        <!-- FROM / TO / CC/ BCC / SUBJECT / ATTACHMENTS -->
-        <div class="msg-header-content">
-          <md-input-container>
-            <label> <var:string label:value="From"/></label>
-            <md-select name="from"
-                       ng-model="editor.message.editable.from">
-              <md-option ng-value="identity" ng-repeat="identity in editor.identities">{{identity}}</md-option>
-            </md-select>
-          </md-input-container>
-
-          <div class="pseudo-input-container">
-            <label class="pseudo-input-label">
-              <var:string label:value="To"/>
-            </label>
-            <md-chips ng-model="editor.message.editable.to">
-              <md-autocomplete
-                  md-selected-item="editor.autocomplete.to.selected"
-                  md-search-text="editor.autocomplete.to.searchText"
-                  md-items="user in editor.contactFilter(editor.autocomplete.to.searchText)"
-                  label:placeholder="Add a recipient">
-                <span md-highlight-text="editor.autocomplete.to.searchText"
-                      md-highlight-flags="^i">{{user}}</span>
-              </md-autocomplete>
-              <md-chip-template>{{$chip}}</md-chip-template>
-            </md-chips>
-          </div>
-
-          <div class="pseudo-input-container" ng-hide="editor.hideCc">
-            <label class="pseudo-input-label">
-              <var:string label:value="Cc"/>
-            </label>
-            <md-chips ng-model="editor.message.editable.cc">
-              <md-autocomplete
-                  md-selected-item="editor.autocomplete.cc.selected"
-                  md-search-text="editor.autocomplete.cc.searchText"
-                  md-items="user in editor.contactFilter(editor.autocomplete.cc.searchText)"
-                  label:placeholder="Add a recipient">
-                <span md-highlight-text="editor.autocomplete.cc.searchText"
-                      md-highlight-flags="^i">{{user}}</span>
-              </md-autocomplete>
-              <md-chip-template>{{$chip}}</md-chip-template>
-            </md-chips>
-          </div>
-
-          <div class="pseudo-input-container" ng-hide="editor.hideBcc">
-            <label class="pseudo-input-label">
-              <var:string label:value="Bcc"/>
-            </label>
-            <md-chips ng-model="editor.message.editable.bcc">
-              <md-autocomplete
-                  md-selected-item="editor.autocomplete.bcc.selected"
-                  md-search-text="editor.autocomplete.bcc.searchText"
-                  md-items="user in editor.contactFilter(editor.autocomplete.bcc.searchText)"
-                  label:placeholder="Add a recipient">
-                <span md-highlight-text="editor.autocomplete.bcc.searchText"
-                      md-highlight-flags="^i">{{user}}</span>
-              </md-autocomplete>
-              <md-chip-template>{{$chip}}</md-chip-template>
-            </md-chips>
-          </div>
-
-          <md-input-container>
-            <label>
-              <var:string label:value="Subject"/>
-            </label>
-            <input type="text" name="subject" ng-model="editor.message.editable.subject"/>
-          </md-input-container>
-
-          <md-list>
-            <!-- FILES ALREADY UPLOADED, FOR EXAMPLE WHEN WE FORWARD A
-                 MAIL WITH ATTACHMENTS -->
-            <md-list-item ng-repeat="item in editor.message.editable.attachmentAttrs">
-              <div layout="row" layout-align="space-between center">
-                <span ng-bind="item.filename"><!-- filename --></span>
-                <md-button class="sg-icon-button"
-                           ng-click="editor.message.$deleteAttachment(item.filename);">
-                  <md-icon>remove_circle_outline</md-icon>
-                </md-button>
-              </div>
-            </md-list-item>
-            <!-- FILE BEING ATTACHED TO A MAIL -->
-            <md-list-item ng-repeat="item in editor.uploader.queue">
-              <div layout="row" layout-align="space-between center">
-                <span ng-bind="item.file.name"><!-- filename --></span>
-                <md-progress-linear md-mode="determinate"
-                                    value="{{item.progress}}"
-                                    ng-show="item.isUploading" ><!-- progress--></md-progress-linear>
-                <md-button class="sg-icon-button"
-                           ng-click="editor.uploader.cancelItem(item)"
-                           ng-show="item.isUploading">
-                  <md-icon>cancel</md-icon>
-                </md-button>
-                <md-button class="sg-icon-button"
-                           ng-click="editor.message.$deleteAttachment(item.file.name); item.remove();"
-                           ng-show="!item.isUploading">
-                  <md-icon>remove_circle_outline</md-icon>
-                </md-button>
-              </div>
-            </md-list-item>
-          </md-list>
-        </div>
-
-      </header>
-
-      <!-- MESSAGE CONTENT -->
-      <textarea name="content" var:class="editorClass"
-                ng-model="editor.message.editable.text"/>
-
-      <!-- TOOLBAR BUTTONS -->
-      <div class="buttonsToolbar">
-        <div layout="row" layout-align="end center">
-          <md-button ng-click="editor.cancel()"><var:string label:value="Cancel"/></md-button>
-          <md-button ng-click="editor.message.$save()"><var:string label:value="Save"/></md-button>
-          <md-button class="fg-sogoBlue-700 md-primary md-hue-3"
-                     ng-click="editor.send()"><var:string label:value="Send"/></md-button>
-        </div>
       </div>
-    </form>
-  </md-dialog-content>
-</md-dialog>
+    </md-toolbar>
+
+    <md-dialog-content>
+      <form>
+        <header>
+
+          <!-- FROM / TO / CC/ BCC / SUBJECT / ATTACHMENTS -->
+          <div class="msg-header-content">
+            <md-input-container>
+              <label> <var:string label:value="From"/></label>
+              <md-select name="from"
+                         ng-model="editor.message.editable.from">
+                <md-option ng-value="identity" ng-repeat="identity in editor.identities">{{identity}}</md-option>
+              </md-select>
+            </md-input-container>
+
+            <div class="pseudo-input-container">
+              <label class="pseudo-input-label">
+                <var:string label:value="To"/>
+              </label>
+              <md-chips ng-model="editor.message.editable.to">
+                <md-autocomplete
+                    md-selected-item="editor.autocomplete.to.selected"
+                    md-search-text="editor.autocomplete.to.searchText"
+                    md-items="user in editor.contactFilter(editor.autocomplete.to.searchText)"
+                    label:placeholder="Add a recipient">
+                  <span md-highlight-text="editor.autocomplete.to.searchText"
+                        md-highlight-flags="^i">{{user}}</span>
+                </md-autocomplete>
+                <md-chip-template>{{$chip}}</md-chip-template>
+              </md-chips>
+            </div>
+
+            <div class="pseudo-input-container" ng-hide="editor.hideCc">
+              <label class="pseudo-input-label">
+                <var:string label:value="Cc"/>
+              </label>
+              <md-chips ng-model="editor.message.editable.cc">
+                <md-autocomplete
+                    md-selected-item="editor.autocomplete.cc.selected"
+                    md-search-text="editor.autocomplete.cc.searchText"
+                    md-items="user in editor.contactFilter(editor.autocomplete.cc.searchText)"
+                    label:placeholder="Add a recipient">
+                  <span md-highlight-text="editor.autocomplete.cc.searchText"
+                        md-highlight-flags="^i">{{user}}</span>
+                </md-autocomplete>
+                <md-chip-template>{{$chip}}</md-chip-template>
+              </md-chips>
+            </div>
+
+            <div class="pseudo-input-container" ng-hide="editor.hideBcc">
+              <label class="pseudo-input-label">
+                <var:string label:value="Bcc"/>
+              </label>
+              <md-chips ng-model="editor.message.editable.bcc">
+                <md-autocomplete
+                    md-selected-item="editor.autocomplete.bcc.selected"
+                    md-search-text="editor.autocomplete.bcc.searchText"
+                    md-items="user in editor.contactFilter(editor.autocomplete.bcc.searchText)"
+                    label:placeholder="Add a recipient">
+                  <span md-highlight-text="editor.autocomplete.bcc.searchText"
+                        md-highlight-flags="^i">{{user}}</span>
+                </md-autocomplete>
+                <md-chip-template>{{$chip}}</md-chip-template>
+              </md-chips>
+            </div>
+
+            <md-input-container>
+              <label>
+                <var:string label:value="Subject"/>
+              </label>
+              <input type="text" name="subject" ng-model="editor.message.editable.subject"/>
+            </md-input-container>
+
+            <md-list>
+              <!-- FILES ALREADY UPLOADED, FOR EXAMPLE WHEN WE FORWARD A
+                   MAIL WITH ATTACHMENTS -->
+              <md-list-item ng-repeat="item in editor.message.editable.attachmentAttrs">
+                <div layout="row" layout-align="space-between center">
+                  <span ng-bind="item.filename"><!-- filename --></span>
+                  <md-button class="sg-icon-button"
+                             ng-click="editor.message.$deleteAttachment(item.filename);">
+                    <md-icon>remove_circle_outline</md-icon>
+                  </md-button>
+                </div>
+              </md-list-item>
+              <!-- FILE BEING ATTACHED TO A MAIL -->
+              <md-list-item ng-repeat="item in editor.uploader.queue">
+                <div layout="row" layout-align="space-between center">
+                  <span ng-bind="item.file.name"><!-- filename --></span>
+                  <md-progress-linear md-mode="determinate"
+                                      value="{{item.progress}}"
+                                      ng-show="item.isUploading" ><!-- progress--></md-progress-linear>
+                  <md-button class="sg-icon-button"
+                             ng-click="editor.uploader.cancelItem(item)"
+                             ng-show="item.isUploading">
+                    <md-icon>cancel</md-icon>
+                  </md-button>
+                  <md-button class="sg-icon-button"
+                             ng-click="editor.message.$deleteAttachment(item.file.name); item.remove();"
+                             ng-show="!item.isUploading">
+                    <md-icon>remove_circle_outline</md-icon>
+                  </md-button>
+                </div>
+              </md-list-item>
+            </md-list>
+          </div>
+
+        </header>
+
+        <!-- MESSAGE CONTENT -->
+        <textarea name="content" var:class="editorClass"
+                  ng-model="editor.message.editable.text"/>
+
+        <!-- TOOLBAR BUTTONS -->
+        <div class="buttonsToolbar">
+          <div layout="row" layout-align="end center">
+            <md-button ng-click="editor.cancel()"><var:string label:value="Cancel"/></md-button>
+            <md-button ng-click="editor.message.$save()"><var:string label:value="Save"/></md-button>
+            <md-button class="fg-sogoBlue-700 md-primary md-hue-3"
+                       ng-click="editor.send()"><var:string label:value="Send"/></md-button>
+          </div>
+        </div>
+      </form>
+    </md-dialog-content>
+  </md-dialog>
 </container>
diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index 0e83fb99f..c7aad028c 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -49,7 +49,7 @@
       <md-button class="md-fab md-fab-bottom-right md-accent"
                  label:aria-label="Write a new message"
                  ng-click="mailbox.newMessage($event)">
-        <md-icon>add</md-icon>
+        <md-icon>edit</md-icon>
       </md-button>
     </md-content>
   </div>
diff --git a/UI/WebServerResources/scss/views/MessageEditorUI.scss b/UI/WebServerResources/scss/views/MessageEditorUI.scss
index a356592b4..e8611379b 100644
--- a/UI/WebServerResources/scss/views/MessageEditorUI.scss
+++ b/UI/WebServerResources/scss/views/MessageEditorUI.scss
@@ -1,21 +1,21 @@
 /// MessageEditorUI.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 
-[id=messageEditor] {
-  //width: (13 * $pitch + $mg); // 13 cols + 1margin for scrollbar
-  @include from(lg) {
-    @include flex-col(lg, 11, 1, 1);
-  }
-  @include at(md) {
-    @include flex-col(md, 10, 1, 1);
-  }
-  margin: 0 auto;
-  overflow: auto;
-  height: 100%;
-  background-color: sg-color($sogoPaper, 50);
-  transform: translateY(-1 * $pitch);
-  z-index: 40;
-  box-shadow: $whiteframe-shadow-z1;
-}
+// [id=messageEditor] {
+//   //width: (13 * $pitch + $mg); // 13 cols + 1margin for scrollbar
+//   @include from(lg) {
+//     @include flex-col(lg, 11, 1, 1);
+//   }
+//   @include at(md) {
+//     @include flex-col(md, 10, 1, 1);
+//   }
+//   margin: 0 auto;
+//   overflow: auto;
+//   height: 100%;
+//   background-color: sg-color($sogoPaper, 50);
+//   transform: translateY(-1 * $pitch);
+//   z-index: 40;
+//   box-shadow: $whiteframe-shadow-z1;
+// }
 .buttonsToolbar {
   padding: $mg 0;
   button {
@@ -25,11 +25,11 @@
 }
 // CKE is overqualifying... let's use an ID
 #cke_content,
-textarea.ck-editor{
+textarea.ck-editor {
   margin-top: $mg;
 }
 // Plain text editor
-[id=messageEditor] textarea {
+textarea.plain-text {
   width: 100%;
   min-height: grid-step(3);
   margin-top: $mg;