Improve Mail editor

Resolves #3705

NEWS

@@ -18,6 +18,7 @@ Bug fixes
  - [web] restored Catalan and Slovak translations (#3687)
  - [web] fixed restore of mailboxes expansion state when multiple IMAP accounts are configured
  - [web] improved CSS sanitizer for HTML messages (#3700)
+ - [web] fixed toolbar of mail editor when sender address was too long (#3705)
  - [core] strip X- tags when securing content (#3695)
 
 3.1.0 (2016-05-18)

UI/Templates/MailerUI/UIxMailEditor.wox

@@ -10,23 +10,23 @@
              nv-file-over="nv-file-over"
              over-class="sg-over-dropzone"
              uploader="editor.uploader">
+    <form name="messageForm">
       <md-toolbar>
         <div class="md-toolbar-tools">
-        <md-icon class="sg-icon-toolbar-bg">edit</md-icon>
           <!-- from -->
-        <sg-avatar-image hide-sm="hide-sm"
+          <sg-avatar-image class="hide-xs"
                            sg-email="editor.message.editable.from"
                            size="32"><!-- avatar --></sg-avatar-image>
-        <md-input-container flex="flex">
+          <md-input-container class="sg-no-wrap">
             <label><var:string label:value="From"/></label>
-          <md-select class="sg-no-wrap" name="from"
+            <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 flex-gt-sm="flex-gt-sm"><!-- spacer --></div>
+          <div flex="flex"><!-- spacer --></div>
           <md-button class="sg-icon-button" ng-click="editor.send()"
-                   ng-disabled="!(editor.message.editable.to.length > 0 || editor.message.editable.cc.length > 0 || editor.message.editable.bcc.length > 0)">
+                     ng-disabled="!(editor.message.editable.to.length > 0 || editor.message.editable.cc.length > 0 || editor.message.editable.bcc.length > 0) || messageForm.$invalid">
             <md-icon>send</md-icon>
           </md-button>
           <md-button class="sg-icon-button" ng-click="editor.save()">
@@ -153,7 +153,10 @@
               <label>
                 <var:string label:value="Subject"/>
               </label>
-            <input type="text" name="subject" ng-model="editor.message.editable.subject"/>
+              <input type="text" name="subject" ng-model="editor.message.editable.subject" ng-required="true"/>
+              <div ng-messages="messageForm.subject.$error">
+                <div ng-message="required"><var:string label:value="error_missingsubject"/></div>
+              </div>
             </md-input-container>
           </div>
 
@@ -250,5 +253,6 @@
           <!-- multiple="multiple" -->
         </div>
       </md-dialog-actions>
+    </form>
   </md-dialog>
 </container>