diff --git a/skins/elastic/styles/layout.less b/skins/elastic/styles/layout.less
index 322593694..cfd8c3087 100644
--- a/skins/elastic/styles/layout.less
+++ b/skins/elastic/styles/layout.less
@@ -251,11 +251,21 @@ body {
width: 6px;
height: 100%;
- .sidebar-right & {
+ &.inverted {
+ right: auto;
left: -3px;
}
-}
+ &.active {
+ width: 10000px;
+ right: -5000px;
+
+ &.inverted {
+ right: auto;
+ left: -5000px;
+ }
+ }
+}
@media screen and (max-width: @screen-width-large) {
#layout-sidebar,
diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js
index f3627ca58..4cb61510d 100644
--- a/skins/elastic/ui.js
+++ b/skins/elastic/ui.js
@@ -4006,7 +4006,7 @@ function rcube_elastic_ui()
var list_id = node.find('.scroller .listing').first().attr('id'),
key = rcmail.env.task + '.' + (list_id || (rcmail.env.action + '.' + node.attr('id'))),
pos = get_pref(key),
- reverted = node.is('.sidebar-right'),
+ inverted = node.is('.sidebar-right'),
set_width = function(width) {
node.css({
width: Math.max(100, width),
@@ -4016,18 +4016,19 @@ function rcube_elastic_ui()
});
};
- if (!node[reverted ? 'prev' : 'next']().length) {
+ if (!node[inverted ? 'prev' : 'next']().length) {
return;
}
$('
')
+ .addClass(inverted ? 'inverted' : null)
.appendTo(node)
.on('mousedown', function(e) {
var ts, splitter = $(this), offset = node.position().left;
// Makes col-resize cursor follow the mouse pointer on dragging
// and fixes issues related to iframes
- splitter.width(10000).css(reverted ? 'left' : 'right', -5000);
+ splitter.addClass('active');
// Disable selection on document while dragging
// It can happen when you move mouse out of window, on top
@@ -4040,11 +4041,11 @@ function rcube_elastic_ui()
clearTimeout(ts);
ts = setTimeout(function() {
// For left-side-splitter we need the current offset
- if (reverted) {
+ if (inverted) {
offset = node.position().left;
}
var cursor_position = rcube_event.get_mouse_pos(e).x,
- width = reverted ? node.width() + (offset - cursor_position) : cursor_position - offset;
+ width = inverted ? node.width() + (offset - cursor_position) : cursor_position - offset;
set_width(width);
}, 5);
@@ -4056,7 +4057,7 @@ function rcube_elastic_ui()
document.body.style.userSelect = 'auto';
// Set back the splitter width to normal
- splitter.width(6).css(reverted ? 'left' : 'right', -3);
+ splitter.removeClass('active');
// Save the current position (width)
save_pref(key, node.width());