From 006fed33d3365fd0342a930b12707717c203efd5 Mon Sep 17 00:00:00 2001 From: Aleksander Machniak Date: Thu, 14 Jun 2018 12:38:25 +0200 Subject: [PATCH] Elastic: Completed TinyMCE styling --- program/js/editor.js | 6 +- skins/elastic/styles/widgets/editor.less | 295 +++++++++++++++++------ skins/elastic/ui.js | 27 +++ 3 files changed, 247 insertions(+), 81 deletions(-) diff --git a/program/js/editor.js b/program/js/editor.js index a0e220bf3..68be4ac97 100644 --- a/program/js/editor.js +++ b/program/js/editor.js @@ -700,13 +700,17 @@ function rcube_text_editor(config, id) }); button.keydown(function(e) { - if (e.which == 9) { + if (e.which == 9) { // Tab if (rcube_event.get_modifier(e) == SHIFT_KEY || !list.find('li:first').focus().length) { cancel.focus(); } return false; } + + if (e.which == 13) { // Enter + this.click(); + } }); cancel.keydown(function(e) { diff --git a/skins/elastic/styles/widgets/editor.less b/skins/elastic/styles/widgets/editor.less index 2798df123..909a42a29 100644 --- a/skins/elastic/styles/widgets/editor.less +++ b/skins/elastic/styles/widgets/editor.less @@ -44,6 +44,9 @@ } } + .mce-reset { + background: #fff; + } .mce-container-body { &.mce-abs-layout { @@ -112,6 +115,11 @@ margin-right: .5rem; line-height: 1; width: auto !important; + height: auto !important; + + &:last-child { + margin-right: 1rem; + } .mce-txt { line-height: 1.5; @@ -146,7 +154,7 @@ } div:nth-of-type(3) button:before, div:nth-of-type(4) button:before { - content: @fa-var-check; + content: @fa-var-pencil-alt; } div:nth-of-type(6) button:before { content: @fa-var-chevron-left; @@ -154,13 +162,128 @@ div:nth-of-type(7) button:before { content: @fa-var-chevron-right; } + div:nth-of-type(7) button:after { + &:extend(.font-icon-class); + display: inline; + float: none; + margin: 0 0 0 .2rem; + content: @fa-var-chevron-right; + } + + @media screen and (min-width: (@screen-width-xs + 1px)) { + div:nth-of-type(6) { + margin-left: .5rem; + } + div:nth-of-type(7) button { + &:before { + display: none; + } + } + } } } // Form elements, let's keep'em in .mce-window to make overwriting simpler + .mce-formitem { + min-width: 450px; + position: unset !important; + + & > .mce-container-body { + margin-bottom: .5rem; + + & > * { + width: 75% !important; + position: unset !important; + } + + & > label { + max-width: 25%; + min-width: 25%; + line-height: 2.5 !important; + } + } + + .mce-widget { + border-radius: .25rem; + } + } + + .mce-form { + padding: 1rem; + box-sizing: border-box; + + .mce-form { + padding: 0; + position: unset !important; + width: 100% !important; + + & > .mce-container-body { + flex-wrap: wrap; + height: auto !important; + } + + .mce-formitem { + min-width: 100%; + width: 100% !important; + } + } + + .mce-container { + height: auto !important; + + .mce-container-body { + display: flex; + height: auto !important; + + & > input:not([size="5"]) { + position: relative; + left: 0 !important; + flex: 1; + } + + } + } + + & > .mce-container-body { + box-sizing: border-box; + width: 100% !important; + } + + .mce-form-split { + .mce-formitem { + min-width: auto; + + & > .mce-container-body { + width: 100% !important; + } + } + } + + label { + position: unset; + line-height: 2.5 !important; + height: auto !important; + } + } + + .mce-colorpicker { + & + .mce-form { + width: 150px !important; + padding: 0; + + .mce-formitem { + min-width: unset; + + & + :not(.mce-formitem) { + height: 50px !important; + } + } + } + } + .mce-textbox { - padding: .375rem .75rem; + padding: .375rem .75rem !important; line-height: 1.5; color: @color-font; @@ -177,16 +300,30 @@ &[size="5"] { width: auto !important; } + + &.mce-multiline { + line-height: 1.25; + width: 100% !important; + position: unset; + box-sizing: border-box; + display: block; + } } - .mce-formitem { - .mce-widget { - border-radius: .25rem; + .mce-listbox { + button { + line-height: 1.5; + padding: .375rem .75rem; + } + + &:focus { + border-color: @color-input-border-focus !important; + box-shadow: 0 0 0 .2rem @color-input-border-focus-shadow !important; } } .mce-checkbox { - line-height: 1.5; + line-height: 2.5; i.mce-i-checkbox { border: 0; @@ -225,6 +362,12 @@ } } + &.mce-combobox-fake { + input { + border-radius: .3rem; + } + } + button { padding: .4rem .6rem; } @@ -272,26 +415,6 @@ text-shadow: none; color: @color-font; } - - .mce-form { - .mce-container { - height: auto !important; - - .mce-container-body { - display: flex; - - & > label { - position: relative; - } - - & > input:not([size="5"]) { - position: relative; - left: 0 !important; - flex: 1; - } - } - } - } } .mce-btn { @@ -405,6 +528,64 @@ display: none; } } + + .mce-search-foot { + div:nth-of-type(7) button:after { + display: none; + } + } + } + + .mce-form, + .mce-form + .mce-container, // for Embed tab in Media dialog + .mce-formitem, + .mce-combobox, + .mce-panel:not(.mce-popover) { + width: 100% !important; + } + + .mce-formitem { + min-width: unset; + } + + .mce-form { + & > .mce-container-body { + display: flex; + flex-direction: column; + left: 0; + right: 0; + box-sizing: border-box; + } + + .mce-container-body { + height: auto !important; + flex-direction: column; + + & > label { + position: unset !important; + width: 100% !important; + max-width: 100%; + } + + & > label + * { + position: unset !important; + width: auto !important; + } + + & > .mce-checkbox { + position: absolute; + left: 0 !important; + top: 3rem !important; + } + } + } + + // FIXME: How to fix the input width in less hacky way? + .mce-combobox input { + max-width: ~"calc(100% - 4rem)"; + } + .mce-combobox-fake input { + max-width: ~"calc(100% - 1.7rem)"; } } @@ -423,14 +604,17 @@ z-index: 65530 !important; } - .mce-container.mce-abs-layout-item.mce-first + .mce-container.mce-abs-layout-item.mce-last:not(.mce-formitem), .mce-menu-item-sep, .mce-menu-shortcut { display: none !important; } .mce-charmap-dialog { - position: unset; + position: unset !important; + + + .mce-container { + display: none; + } } .mce-charmap { @@ -459,59 +643,10 @@ } } } +} - .mce-form, - .mce-form + .mce-container, // for Embed tab in Media dialog - .mce-formitem, - .mce-combobox, - .mce-panel:not(.mce-popover) { - width: 100% !important; - } - - .mce-form + .mce-container, // for Embed tab in Media dialog - .mce-form { - & > .mce-container-body { - display: flex; - flex-direction: column; - padding: 0 1rem; - left: 0; - right: 0; - box-sizing: border-box; - - & > .mce-container { - position: unset; - } - } - - .mce-container-body { - height: auto !important; - flex-direction: column; - - & > label { - position: unset !important; - width: 100% !important; - margin-top: 1rem; - } - - & > label + * { - position: unset !important; - margin-top: .5rem; - width: auto !important; - flex: 1; - } - - & > .mce-checkbox { - position: absolute; - left: 0 !important; - top: 3rem !important; - } - } - } - - // FIXME: How to fix the input width in less hacky way? - .mce-window .mce-combobox input { - max-width: ~"calc(100% - 4rem)"; - } +html.touch .mce-grid td { + padding: .5rem; } diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js index 384a1dd5c..ea4be9e03 100644 --- a/skins/elastic/ui.js +++ b/skins/elastic/ui.js @@ -952,7 +952,34 @@ function rcube_elastic_ui() foot.addClass('mce-search-foot'); } + // Apply some form structure fixes and helper classes $(elem).find('.mce-charmap').parent().parent().addClass('mce-charmap-dialog'); + $(elem).find('.mce-combobox').each(function() { + if (!$(this).children('.mce-btn').length) { + $(this).addClass('mce-combobox-fake'); + } + }); + $(elem).find('.mce-form > .mce-container-body').each(function() { + if ($(this).children('.mce-formitem').length > 4) { + $(this).addClass('mce-form-split'); + } + }); + $(elem).find('.mce-form').next(':not(.mce-formitem)').addClass('mce-form'); + + // Fix dialog height (e.g. Table properties dialog) + if (!is_mobile()) { + var offset, max_height = 0, height = body.height(); + $(elem).find('.mce-form').each(function() { + max_height = Math.max(max_height, $(this).height()); + }); + + if (height < max_height) { + max_height += (body.find('.mce-tabs').height() || 0) + 25; + body.height(max_height); + $(elem).height($(elem).height() + (max_height - height)); + $(elem).css('top', ($(window).height() - $(elem).height())/2 + 'px'); + } + } } };