Elastic: Change HTML editor widget to improve form flow (#6992)

5 files changed, 96 insertions, 64 deletions

diff --git a/skins/elastic/styles/styles.less b/skins/elastic/styles/styles.less
index 9f9b78980..acbdc9c85 100644
--- a/skins/elastic/styles/styles.less
+++ b/skins/elastic/styles/styles.less
@@ -374,8 +374,8 @@ body.task-error-login #layout {
 }
 
 #composestatusbar {
-    position: absolute;
     opacity: .3;
+    right: 2.5rem;
 
     @media screen and (min-width: (@screen-width-small + 1px)) {
         display: none;
@@ -383,11 +383,10 @@ body.task-error-login #layout {
 
     a.button {
         display: inline-block;
-        height: 2.5rem;
-        margin-right: .25rem;
 
         &:before {
-            line-height: 2.5rem;
+            line-height: @layout-touch-header-height;
+            font-size: 1.25rem !important;
         }
     }
 }
diff --git a/skins/elastic/styles/widgets/editor.less b/skins/elastic/styles/widgets/editor.less
index acc1c9832..d2f536b86 100644
--- a/skins/elastic/styles/widgets/editor.less
+++ b/skins/elastic/styles/widgets/editor.less
@@ -836,42 +836,63 @@ html.touch .mce-grid td {
 
 .html-editor {
     position: relative;
-    display: flex;
-    margin-bottom: .25rem;
+    margin-bottom: .2rem;
 
-    & > .nav {
-        border-color: transparent;
-        z-index: 1;
+    .editor-toolbar {
         position: absolute;
-        right: 1rem;
-
-        a.active {
-            border-color: @color-input-border !important;
+        left: 1px;
+        top: 1px;
+        right: 1px;
+        border-radius: .25rem .25rem 0 0;
+        border-bottom: 1px solid @color-input-border;
+        background-color: @color-input-addon-background;
 
-            &.mode-html {
-                background-color: @color-input-addon-background;
-                border-bottom-color: @color-input-addon-background !important;
-            }
+        .mce-i-html {
+            display: block;
+            padding: 1px 5px;
+            margin: 2px;
+            width: 2rem;
+            height: 24px;
+            border: 1px solid transparent;
+            color: #595959;
 
-            &.mode-plain {
-                border-bottom-color: #fff !important;
+            &:focus,
+            &:hover {
+                text-decoration: none;
+                border-color: #e2e4e7;
+                background-color: #fff;
             }
         }
+    }
 
-        a:hover,
-        a:focus {
-            border-bottom-color: transparent;
-            outline: 0;
-        }
+    // hide toolbar in html mode and in mailvelope mode
+    &.mailvelope .editor-toolbar,
+    .mce-tinymce + textarea + .editor-toolbar {
+        display: none;
+    }
+
+    .mce-i-html:before,
+    .mce-i-plaintext:before {
+        &:extend(.font-icon-class);
+        margin: 0;
+        width: 1em;
+        font-size: 1.2rem;
+    }
+
+    .mce-i-html:before {
+        content: @fa-var-image;
+        line-height: 1.2em;
+    }
+
+    .mce-i-plaintext:before {
+        content: @fa-var-window-close; //@fa-var-align-justify;
     }
 
-    & > iframe, // e.g. mailvelope frame
     & > .googie_edit_layer,
-    & > .mce-tinymce,
     & > textarea {
-        margin-top: 2.55rem;
         font-family: monospace;
         width: 100% !important;
+        padding-top: 2.5rem;
     }
 
     & > iframe { // e.g. mailvelope frame
@@ -905,7 +926,7 @@ html.touch .mce-grid td {
     padding: .5rem .75rem;
     border: 1px solid @color-input-border;
     border-radius: .3rem;
-    line-height: 1.25;
+    line-height: 1.5;
 }
 
 .googie_link {
diff --git a/skins/elastic/styles/widgets/forms.less b/skins/elastic/styles/widgets/forms.less
index 69a2b21ee..863fa6056 100644
--- a/skins/elastic/styles/widgets/forms.less
+++ b/skins/elastic/styles/widgets/forms.less
@@ -612,7 +612,7 @@ html.ms .propform {
         &:extend(.font-icon-class);
         margin: 0 !important;
         line-height: 1;
-        font-size: 1.1em;
+        font-size: 1.1rem;
     }
     &.user:before {
         content: @fa-var-user;
@@ -984,7 +984,6 @@ html.ms .propform {
             float: none;
             display: inline-block;
             width: 1em;
-            margin: 0;
             line-height: 1.5;
         }
     }
diff --git a/skins/elastic/templates/compose.html b/skins/elastic/templates/compose.html
index 7c2f11dca..34f0f9983 100644
--- a/skins/elastic/templates/compose.html
+++ b/skins/elastic/templates/compose.html
@@ -77,6 +77,7 @@
 	<div class="header">
 		<a class="button icon task-menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
 		<span class="header-title"><roundcube:label name="compose" /></span>
+		<div id="composestatusbar" class="position-absolute"></div>
 		<!-- toolbar -->
 		<div id="messagetoolbar" class="toolbar menu" role="toolbar" aria-labelledby="aria-label-toolbar">
 			<a class="options" href="#options" onclick="UI.show_sidebar()" data-hidden="big">
@@ -214,7 +215,6 @@
 		<div id="composebodycontainer">
 			<label for="composebody" class="voice"><roundcube:label name="arialabelmessagebody" /></label>
 			<roundcube:object name="composeBody" id="composebody" form="form" cols="70" rows="20" class="form-control" tabindex="1" />
-			<div id="composestatusbar"></div>
 		</div>
 		</form>
 		<div class="formbuttons">
diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js
index 36da378ce..4511a2839 100644
--- a/skins/elastic/ui.js
+++ b/skins/elastic/ui.js
@@ -1350,6 +1350,9 @@ function rcube_elastic_ui()
      */
     function tinymce_init(o)
     {
+        var onload = [],
+            is_editor = $('#' + o.id).is('[data-html-editor]');
+
         // Enable autoresize plugin
         o.config.plugins += ' autoresize';
 
@@ -1374,9 +1377,9 @@ function rcube_elastic_ui()
                 };
 
             // Shift+Tab on mail compose editor scrolls the page to the top
-            o.config.setup_callback = function(ed) {
+            onload.push(function(ed) {
                 ed.on('keypress', keypress);
-            };
+            });
 
             $('#composebody').on('keypress', keypress);
 
@@ -1397,6 +1400,26 @@ function rcube_elastic_ui()
 
             $(window).resize(function() { form.trigger('scroll'); });
         }
+
+        if (is_editor) {
+            o.config.toolbar = 'plaintext | ' + o.config.toolbar;
+            // Use setup_callback, we can't use editor-load event
+            o.config.setup_callback = function(ed) {
+                ed.addButton('plaintext', {
+                    tooltip: rcmail.gettext('plaintoggle'),
+                    icon: 'plaintext',
+                    onclick: function(e) {
+                        if (rcmail.command('toggle-editor', {id: ed.id, html: false}, '', e.originalEvent)) {
+                            $('#' + ed.id).parent().removeClass('ishtml');
+                        }
+                    }
+                });
+            };
+        }
+
+        rcmail.addEventListener('editor-load', function(e) {
+            $.each(onload, function() { this(e.ref.editor); });
+        });
     };
 
     function datepicker_init(datepicker)
@@ -1665,7 +1688,7 @@ function rcube_elastic_ui()
             var title, right = 0, left = 0, padding = 0,
                 sizes = {left: 0, right: 0};
 
-            $(this).children(':visible').each(function() {
+            $(this).children(':visible:not(.position-absolute)').each(function() {
                 if (!title && $(this).is('.header-title')) {
                     title = $(this);
                     return;
@@ -3602,21 +3625,20 @@ function rcube_elastic_ui()
         var sw, is_table = false,
             editor = $(obj),
             parent = editor.parent(),
-            tabindex = editor.attr('tabindex'),
-            mode = function() {
-                if (is_table) {
-                    return sw.is(':checked') ? 'html' : 'plain';
-                }
-
-                return sw.val();
-            },
-            tabs = $('<ul class="nav nav-tabs">')
-                .append($('<li class="nav-item">')
-                    .append($('<a class="nav-link mode-html" href="#">')
-                        .text(rcmail.gettext('htmltoggle'))))
-                .append($('<li class="nav-item">')
-                    .append($('<a class="nav-link mode-plain" href="#">')
-                        .text(rcmail.gettext('plaintoggle'))));
+            plain_btn = $('<a class="mce-i-html" href="#" tabindex="-1"></a>')
+                .attr('title', rcmail.gettext('htmltoggle'))
+                .on('click', function(e) {
+                    if (rcmail.command('toggle-editor', {id: editor.attr('id'), html: true}, '', e.originalEvent)) {
+                        parent.addClass('ishtml');
+                    }
+                })
+                .on('keydown', function(e) {
+                    if (e.which == 9) { // TAB
+                        editor.focus();
+                        return false;
+                    }
+                }),
+            toolbar = $('<div class="editor-toolbar">').append(plain_btn);
 
         if (parent.is('td')) {
             sw = $('input[type="checkbox"]', parent.parent().next());
@@ -3632,23 +3654,14 @@ function rcube_elastic_ui()
         }
 
         parent.addClass('html-editor');
-        editor.before(tabs);
 
-        $('a', tabs).attr('tabindex', tabindex)
-            .on('click', function(e) {
-                var id = editor.attr('id'), is_html = $(this).is('.mode-html');
-
-                e.preventDefault();
-                if (rcmail.command('toggle-editor', {id: id, html: is_html}, '', e.originalEvent)) {
-                    $(this).tab('show').prop('tabindex', -1);
-                    $('.mode-' + (is_html ? 'plain' : 'html'), tabs).prop('tabindex', tabindex);
-
-                    if (is_table) {
-                        sw.prop('checked', is_html);
-                    }
+        editor.after(toolbar)
+            .on('keydown', function(e) {
+                // ALT + F10 is the way to access toolbar in TinyMCE, let's do the same for plain editor
+                if (e.altKey && e.which == 121) {
+                    plain_btn.focus();
                 }
-            })
-            .filter('.mode-' + mode()).tab('show').prop('tabindex', -1);
+            });
 
         if (is_table) {
             // Hide unwanted table cells