diff --git a/CHANGELOG b/CHANGELOG index 188bc94cd..6c2b75d34 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,6 +1,8 @@ CHANGELOG Roundcube Webmail =========================== +- Elastic: Resizeable columns (#6929) + RELEASE 1.4-rc2 --------------- - Update to jQuery 3.4.1 diff --git a/skins/elastic/styles/layout.less b/skins/elastic/styles/layout.less index c5f8f81e3..704cbc37e 100644 --- a/skins/elastic/styles/layout.less +++ b/skins/elastic/styles/layout.less @@ -120,6 +120,7 @@ body { } #layout-sidebar { + position: relative; // e.g. for .column-resizer display: flex; flex-direction: column; flex: 2; @@ -139,6 +140,7 @@ body { } #layout-list { + position: relative; // e.g. for .column-resizer display: flex; flex-direction: column; flex: 3; @@ -152,7 +154,6 @@ body { display: flex; flex: 6; flex-direction: column; - min-width: 50%; background-color: @color-layout-content-background; html.iframe & { @@ -241,6 +242,20 @@ body { } } +.column-resizer { + cursor: col-resize; + z-index: 1; + position: absolute; + top: 0; + right: -3px; + width: 6px; + height: 100%; + + .sidebar-right & { + left: -3px; + } +} + @media screen and (max-width: @screen-width-large) { #layout-sidebar, @@ -256,6 +271,14 @@ body { } @media screen and (max-width: @screen-width-medium) { + // Disable column resizing by hiding splitters and reseting columns width + .column-resizer { + display: none; + } + #layout-sidebar, + #layout-list { + width: auto !important; + } } @media screen and (max-width: @screen-width-small) { diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js index ca663984b..cd2e444c0 100644 --- a/skins/elastic/ui.js +++ b/skins/elastic/ui.js @@ -15,7 +15,7 @@ function rcube_elastic_ui() { - var ref = this, + var prefs, ref = this, mode = 'normal', // one of: large, normal, small, phone touch = false, ios = false, @@ -491,6 +491,15 @@ function rcube_elastic_ui() (new MutationObserver(callback)).observe(document.body, {childList: true}); } + + // Initialize column resizers + if (layout.sidebar.length) { + splitter_init(layout.sidebar); + } + + if (layout.list.length) { + splitter_init(layout.list); + } }; /** @@ -1707,7 +1716,7 @@ function rcube_elastic_ui() app_menu(true); screen_resize_small_none(); - if (layout.list) { + if (layout.list.length) { $('.header > ul.menu', layout.list).addClass('popupmenu'); } }; @@ -3870,6 +3879,75 @@ function rcube_elastic_ui() } }; + /** + * Create a splitter (resizing) element on a layout column + */ + function splitter_init(node) + { + var key = rcmail.env.task + rcmail.env.action + '.' + node.attr('id'), + pos = get_pref(key), + reverted = node.is('.sidebar-right'), + set_width = function(width) { + node.css({ + width: Math.max(100, width), + // reset default properties + // 'min-width': 100, + flex: 'none' + }); + }; + + if (!node[reverted ? 'prev' : 'next']().length) { + return; + } + + $('