diff --git a/skins/elastic/styles/colors.less b/skins/elastic/styles/colors.less index 8fe0727b1..a22a75903 100644 --- a/skins/elastic/styles/colors.less +++ b/skins/elastic/styles/colors.less @@ -112,7 +112,6 @@ @color-checkbox-focus: darken(@color-checkbox, 30%); @color-checkbox-checked-focus: darken(@color-checkbox-checked, 30%); - @color-blockquote-background: #f6f6f6; @color-blockquote-0: blue; @color-blockquote-1: green; @@ -121,6 +120,8 @@ @color-blockquote-1-border: green; @color-blockquote-2-border: #b00; +@color-spellcheck-link: #b91414; + // Datepicker @color-datepicker-border: @color-layout-border; diff --git a/skins/elastic/styles/layout.less b/skins/elastic/styles/layout.less index 15ff3754a..62127d14e 100644 --- a/skins/elastic/styles/layout.less +++ b/skins/elastic/styles/layout.less @@ -257,7 +257,7 @@ html.iframe body { @media screen and (max-width: @screen-width-xs) { body > #layout > div.menu { position: absolute; - z-index: 100; + z-index: 30001; /* because autocompletion popup uses z-index:30000 */ top: 0; left: 0; right: 0; diff --git a/skins/elastic/styles/styles.less b/skins/elastic/styles/styles.less index 7ce6ee511..fe33fbc03 100644 --- a/skins/elastic/styles/styles.less +++ b/skins/elastic/styles/styles.less @@ -151,7 +151,6 @@ a:hover { @import "widgets/lists"; @import "widgets/forms"; @import "widgets/mail"; -@import "widgets/googiespell"; diff --git a/skins/elastic/styles/widgets/dialogs.less b/skins/elastic/styles/widgets/dialogs.less index 1a4de5d9c..4afaa158a 100644 --- a/skins/elastic/styles/widgets/dialogs.less +++ b/skins/elastic/styles/widgets/dialogs.less @@ -32,6 +32,8 @@ .popover { box-shadow: 3px 3px 5px @color-popover-shadow; + overflow: hidden; + padding: 0; & > h3 { /* On mobile don't display popup arrows and titles */ @@ -67,6 +69,11 @@ html.layout-phone { font-size: @layout-touch-header-font-size; color: @color-popover-header; background-color: @color-popover-header-background; + + a { + display: inline-block; + width: 100%; + } } .popover-body > * { @@ -91,6 +98,12 @@ html.layout-phone { bottom: 0; width: 100%; } + + #rcmKSearchpane { + bottom: auto; + box-shadow: none; + border: 1px solid @color-input-border; + } } html.touch .popover { diff --git a/skins/elastic/styles/widgets/forms.less b/skins/elastic/styles/widgets/forms.less index 341759b12..7e1fcaf4d 100644 --- a/skins/elastic/styles/widgets/forms.less +++ b/skins/elastic/styles/widgets/forms.less @@ -451,10 +451,62 @@ html.touch input.icon-checkbox + label { } } + & > .googie_edit_layer, & > .mce-tinymce, & > textarea { margin-top: 2.55rem; font-family: monospace; - width: 100%; + width: 100% !important; + } +} + + +/*** GoogieSpell widget ***/ + +.googie_window { + width: 16rem; +} + +.googie_edit_layer { + font-family: monospace; + + /* from Bootstrap's textarea */ + padding: .5rem .75rem; + border: 1px solid @color-input-border; + border-radius: .3rem; + line-height: 1.25; +} + +.googie_link { + color: @color-spellcheck-link; + text-decoration: underline; + cursor: pointer; +} + +.googie_list { + td { + min-width: 8rem; + width: auto; + + &.googie_list_onhover { + color: @color-toolbarmenu-hover; + background-color: @color-toolbarmenu-hover-background; + } + + .googie_list_revert:before { + &:extend(.font-icon-class); + content: @fa-var-plus-square; + } + + .googie_add_to_dict:before { + &:extend(.font-icon-class); + content: @fa-var-plus-square; + } + } + + input { + display: inline-block; + margin: .5rem .5rem .5rem 0 !important; + padding: .5rem .75rem !important; } } diff --git a/skins/elastic/styles/widgets/googiespell.less b/skins/elastic/styles/widgets/googiespell.less deleted file mode 100644 index 918797a6b..000000000 --- a/skins/elastic/styles/widgets/googiespell.less +++ /dev/null @@ -1,68 +0,0 @@ -/** - * Roundcube webmail styles for the Elastic skin - * - * Copyright (c) 2017, The Roundcube Dev Team - * - * The contents are subject to the Creative Commons Attribution-ShareAlike - * License. It is allowed to copy, distribute, transmit and to adapt the work - * by keeping credits to the original authors in the README.md file. - * See http://creativecommons.org/licenses/by-sa/3.0/ for details. - */ - -/*** GoogieSpell widget ***/ - -/* TODO: review and use only what we need */ - -.googie_window { - width: 185px; - margin: 0; - padding: 0; -} - -.googie_edit_layer { - padding: 4px; - font-family: monospace; - border: 0; -} - -.googie_edit_layer span { - font-family: monospace; -} - -.googie_link { - color: #b91414; - text-decoration: underline; - cursor: pointer; - font-size: 9pt; - font-family: monospace; -} - -.googie_list { - width: 100%; - margin: 0; - padding: 0; - border-spacing: 0; -} - -.googie_list td { - min-width: 80px; - width: auto; -} - -.googie_list td.googie_list_selected { -} - -.googie_list_close { -} - -.googie_list_onhover .googie_list_close { -} - -.googie_list_revert { -} - -.googie_list_revert:hover { -} - -.googie_ok_button { -} diff --git a/skins/elastic/styles/widgets/lists.less b/skins/elastic/styles/widgets/lists.less index bf0cca1a8..7a2e1c10e 100644 --- a/skins/elastic/styles/widgets/lists.less +++ b/skins/elastic/styles/widgets/lists.less @@ -185,6 +185,7 @@ html.touch { & > i:before { &:extend(.font-icon-class); content: @fa-var-user; + margin-left: .5rem; } &.group > i:before { content: @fa-var-group; @@ -238,6 +239,13 @@ html.touch { } } +.popupmenu .listing { + li.selected { + color: @color-toolbarmenu-hover; + background-color: @color-toolbarmenu-hover-background; + } +} + ul.treelist li { div.treetoggle { position: absolute; diff --git a/skins/elastic/styles/widgets/toolbar.less b/skins/elastic/styles/widgets/toolbar.less index 02b92cea8..ad15694b0 100644 --- a/skins/elastic/styles/widgets/toolbar.less +++ b/skins/elastic/styles/widgets/toolbar.less @@ -302,6 +302,7 @@ } } + .toolbarmenu li { &.separator { /* TODO: all separator properties */ @@ -315,7 +316,6 @@ margin: 0; /* Unsets Bootstrap label margin, bug? */ } } - a { opacity: .5; diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js index 6672a0c09..3727f179e 100644 --- a/skins/elastic/ui.js +++ b/skins/elastic/ui.js @@ -735,9 +735,40 @@ function rcube_elastic_ui() function rcmail_popup_init(o) { // Add some common styling to the autocomplete/googiespell popups - $('table,ul', o.obj).addClass('listing iconized'); - $(o.obj).addClass('popupmenu'); + $('table,ul', o.obj).addClass('toolbarmenu listing iconized'); + $(o.obj).addClass('popupmenu popover'); bootstrap_style(o.obj); + + // for googiespell list + $('input', o.obj).addClass('form-control'); + + // Modify the googiespell menu on mobile + if (is_mobile() && $(o.obj).is('.googie_window')) { + // Set popup Close title + var title = rcmail.gettext('close'), + class_name = 'button icon cancel', + close_link = $('').attr('class', class_name).text(title) + .click(function(e) { + e.stopPropagation(); + $('.popover-overlay').remove(); + $(o.obj).hide(); + }); + + $('

').append(close_link).prependTo(o.obj); + + // add overlay element for phone layout + if (!$('.popover-overlay').length) { + $('
').attr('class', 'popover-overlay') + .appendTo('body') + .click(function() { $(this).remove(); }); + } + + $('table,button', o.obj).click(function(e) { + if (!$(e.target).is('input')) { + $('.popover-overlay').remove(); + } + }); + } }; /**