diff options
author | Aleksander Machniak <alec@alec.pl> | 2019-11-10 20:54:43 +0300 |
---|---|---|
committer | Aleksander Machniak <alec@alec.pl> | 2019-11-10 20:55:26 +0300 |
commit | 0ac39592fc14e20cefc7cfaa2414178c4395c634 (patch) | |
tree | 07b95e3ccae3603c06bc6433dd85de24cd38bd62 /skins/elastic | |
parent | 392734f9846260d22f9e3c3356a6f4b16a24b670 (diff) |
Elastic: Change HTML editor widget to improve form flow (#6992)
Diffstat (limited to 'skins/elastic')
-rw-r--r-- | skins/elastic/styles/styles.less | 7 | ||||
-rw-r--r-- | skins/elastic/styles/widgets/editor.less | 69 | ||||
-rw-r--r-- | skins/elastic/styles/widgets/forms.less | 3 | ||||
-rw-r--r-- | skins/elastic/templates/compose.html | 2 | ||||
-rw-r--r-- | skins/elastic/ui.js | 79 |
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 |