diff --git a/skins/elastic/styles/colors.less b/skins/elastic/styles/colors.less index f639565f6..f4a8d9f36 100644 --- a/skins/elastic/styles/colors.less +++ b/skins/elastic/styles/colors.less @@ -58,9 +58,6 @@ @color-toolbarmenu-hover-background: darken(@color-main, 20%); -@color-pagenav-secondary: #666; - - // Listings @color-list: @color-font; @color-list-selected: inherit; @@ -89,6 +86,9 @@ // Popovers (menus) @color-popover-header: #888; @color-popover-header-background: transparent; +@color-popover-shadow: #eee; +@color-popover-separator: #666; +@color-popover-separator-background: #f4f4f4; // Dialogs diff --git a/skins/elastic/styles/widgets/dialogs.less b/skins/elastic/styles/widgets/dialogs.less index b14b0fdc8..1a4de5d9c 100644 --- a/skins/elastic/styles/widgets/dialogs.less +++ b/skins/elastic/styles/widgets/dialogs.less @@ -30,9 +30,13 @@ } } -/* On mobile don't display popup arrows and titles */ -.popover > h3 { - display: none; +.popover { + box-shadow: 3px 3px 5px @color-popover-shadow; + + & > h3 { + /* On mobile don't display popup arrows and titles */ + display: none; + } } html.layout-small, diff --git a/skins/elastic/styles/widgets/taskmenu.less b/skins/elastic/styles/widgets/taskmenu.less index 2413eb351..cd450684e 100644 --- a/skins/elastic/styles/widgets/taskmenu.less +++ b/skins/elastic/styles/widgets/taskmenu.less @@ -26,7 +26,7 @@ &:extend(.font-icon-class); display: block; height: 1.75rem; - line-height: 1.75; + line-height: 1.5; width: @layout-menu-width; } diff --git a/skins/elastic/styles/widgets/toolbar.less b/skins/elastic/styles/widgets/toolbar.less index 27701b136..9de170dda 100644 --- a/skins/elastic/styles/widgets/toolbar.less +++ b/skins/elastic/styles/widgets/toolbar.less @@ -164,11 +164,14 @@ display: none; } } + + a.button:first-child { + padding-right: 0; + } } & > .spacer { - display: inline-block; - width: 1.2em; + width: 1em; } &.pagenav { @@ -290,9 +293,8 @@ } } - .spacer { - height: 1px; - display: block; + li.spacer { + display: none; } li:last-child { @@ -303,10 +305,11 @@ .toolbarmenu li { &.separator { /* TODO: all separator properties */ - line-height: 1.5em; - font-size: .75em; + line-height: 1.5rem !important; + font-size: .75rem; padding: 0 .5rem; - color: #888; + color: @color-popover-separator; + background-color: @color-popover-separator-background; label { margin: 0; /* Unsets Bootstrap label margin, bug? */ @@ -352,6 +355,9 @@ a.extwin:before { content: @fa-var-external-link; } + a.create:before { + content: @fa-var-plus-square; + } a.edit:before { content: @fa-var-edit; /* TODO: edit.asnew */ } @@ -430,6 +436,9 @@ a.settings:before { content: @fa-var-sliders; } + a.insertresponse:before { + content: @fa-var-comment; + } } #layout > .sidebar, diff --git a/skins/elastic/templates/compose.html b/skins/elastic/templates/compose.html index 4118a1a6e..386d073f4 100644 --- a/skins/elastic/templates/compose.html +++ b/skins/elastic/templates/compose.html @@ -237,8 +237,8 @@ - - + + diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js index bc10b1041..134c2cf01 100644 --- a/skins/elastic/ui.js +++ b/skins/elastic/ui.js @@ -1243,10 +1243,6 @@ function rcube_elastic_ui() env.got_smart_toolbar = true; - // TODO: if the toolbar contains "global or list only" buttons - // another popup menu with these options should be created - // on the list (or sidebar if there's no list element). - // TODO: spacer item // TODO: a way to inject buttons to the menu from content iframe // or automatically add all buttons except Save and Cancel // (example QR Code button in contact frame) @@ -1258,12 +1254,20 @@ function rcube_elastic_ui() var toolbar = $(this); toolbar.children().each(function() { - var button = $(this).detach(); + var item = $('
  • '), + button = $(this).detach(); // Remove empty text nodes that break alignment of text of the menu item button.contents().filter(function() { if (this.nodeType == 3 && !$.trim(this.nodeValue).length) $(this).remove(); }); - items.push($('
  • ').append(button)); + if (button.is('.spacer')) { + item.addClass('spacer'); + } + else { + item.append(button); + } + + items.push(item); }); toolbar.remove();