Improvements in autocomplete and googiespell menus

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;

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;

skins/elastic/styles/styles.less

@@ -151,7 +151,6 @@ a:hover {
 @import "widgets/lists";
 @import "widgets/forms";
 @import "widgets/mail";
-@import "widgets/googiespell";
 
 
 

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 {

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

skins/elastic/styles/widgets/googiespell.less

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

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;

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;
 

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 = $('<a>').attr('class', class_name).text(title)
+                    .click(function(e) {
+                        e.stopPropagation();
+                        $('.popover-overlay').remove();
+                        $(o.obj).hide();
+                    });
+
+            $('<h3 class="popover-header">').append(close_link).prependTo(o.obj);
+
+            // add overlay element for phone layout
+            if (!$('.popover-overlay').length) {
+                $('<div>').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();
+                }
+            });
+        }
     };
 
     /**