banananetwork
/
roundcubemail
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Elastic: Completed TinyMCE styling

Browse Source
pull/6273/head^2
Aleksander Machniak 8 years ago
parent 00acb46411
commit 006fed33d3
3 changed files with 247 additions and 81 deletions
Show Stats Download Patch File Download Diff File

6
program/js/editor.js
Unescape Escape View File

@ -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) {

295
skins/elastic/styles/widgets/editor.less
Unescape Escape View File

@ -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;
}

27
skins/elastic/ui.js
Unescape Escape View File

@ -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');
}
}
}
};

Write Preview
Loading…
Cancel
Save