(css) Improve display of HTML CKEditor

UI/Templates/MailerUI/UIxMailEditor.wox

@@ -232,6 +232,7 @@
         <md-input-container class="md-block sg-mail-editor-content">
           <textarea name="content" var:class="editorClass"
                     ck-locale="editor.localeCode"
+                    ck-margin="16px"
                     rows="9"
                     ng-model="editor.message.editable.text"
                     md-no-resize="md-no-resize"

UI/Templates/PreferencesUI/UIxAccountEditor.wox

@@ -122,10 +122,11 @@
           <label class="pseudo-input-label"><var:string label:value="Signature"/></label>
           <textarea class="ck-editor"
                     ck-locale="$AccountDialogController.defaults.LocaleCode"
-                    ck-options="{ 'height': '70px',
+                    ck-options="{ 'autoGrow_minHeight': 70,
                                   'toolbar': [['Bold', 'Italic', '-', 'Link',
                                              'Font','FontSize','-','TextColor',
                                              'BGColor']] }"
+                    ck-margin="8px"
                     ng-model="$AccountDialogController.account.identities[0].signature"><!-- signature --></textarea>
         </div>
 

UI/WebServerResources/js/vendor/ckeditor/ck.js

@@ -40,7 +40,7 @@
       },
 
       link: function($scope, elm, attr, ngModel) {
-        var ck, options = {}, locale;
+        var ck, options = {}, locale, margin;
         if (!ngModel) {
           return;
         }
@@ -59,11 +59,20 @@
           options.scayt_sLang = locale;
         }
 
+        if (attr.ckMargin) {
+          // Set the margin of the iframe editable content
+          margin = attr.ckMargin;
+          CKEDITOR.addCss('.cke_editable { margin-top: ' + margin +
+                          '; margin-left: ' + margin +
+                          '; margin-right: ' + margin + '; }');
+        }
+
         // The Upload Image plugin requires a remote URL to be defined even though we won't use it
         options.imageUploadUrl = '/SOGo/';
 
         ck = CKEDITOR.replace(elm[0], options);
 
+
         // Update the model whenever the content changes
         ck.on('change', function() {
           $scope.$apply(function() {

UI/WebServerResources/scss/views/MessageEditorUI.scss

@@ -1,38 +1,7 @@
 /// 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;
-// }
-.buttonsToolbar {
-  padding: $mg 0;
-  button {
-    min-width: 5em;
-    margin: 1em 0 1em 1em;
-  }
-}
-// CKE is overqualifying... let's use an ID
-#cke_content,
-textarea.ck-editor {
-  margin-top: $mg;
-}
 // Plain text editor
-div.plain-text {
-  padding: 0 $mg $mg;
-  textarea {
-    width: 100%;
-    min-height: grid-step(3);
-  }
-}
+md-input-container .md-input.plain-text {
+  padding-left: $mg;
+  padding-right: $mg;
+}