diff --git a/skins/elastic/styles/layout.less b/skins/elastic/styles/layout.less index 371bb88ec..9c1da4bc3 100644 --- a/skins/elastic/styles/layout.less +++ b/skins/elastic/styles/layout.less @@ -223,6 +223,7 @@ html.iframe body { max-width: none; } + body > #layout > div > .footer, body > #layout > div > .header { a.button:before { font-size: 1.75rem; diff --git a/skins/elastic/styles/widgets/toolbar.less b/skins/elastic/styles/widgets/toolbar.less index 3829bf542..79d2a5996 100644 --- a/skins/elastic/styles/widgets/toolbar.less +++ b/skins/elastic/styles/widgets/toolbar.less @@ -93,6 +93,12 @@ &.firstpage:before { content: @fa-var-fast-backward; } + &.prev:before { + content: @fa-var-arrow-left; + } + &.next:before { + content: @fa-var-arrow-right; + } &.prevpage:before { content: @fa-var-backward; } @@ -433,6 +439,12 @@ } } +.toolbar.content-frame-navigation { + span { + flex-grow: 1; + } +} + @media screen and (min-width: (@screen-width-small + 1px)) { ul.toolbar { flex: 1; @@ -517,6 +529,10 @@ #layout .footer span.inner { display: inline !important; } + + .toolbar.content-frame-navigation { + display: none !important; + } } @media screen and (max-width: @screen-width-small) { diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js index 3515aa2af..4a9c15ee8 100644 --- a/skins/elastic/ui.js +++ b/skins/elastic/ui.js @@ -537,40 +537,48 @@ function rcube_elastic_ui() // when loading content-frame in small-screen mode display it layout.content.find('iframe').on('load', function(e) { - var show = true; + var href = '', show = true; try { - show = !e.target.contentWindow.location.href.endsWith(rcmail.env.blankpage); + href = e.target.contentWindow.location.href; + show = !href.endsWith(rcmail.env.blankpage); // Reset title back to the default $(e.target.contentWindow).on('unload', title_reset); } catch(e) { /* ignore */ } + content_frame_navigation(href, e); + if (show && !layout.content.is(':visible')) { env.last_selected = layout.content[0]; screen_resize(); } else if (!show) { - if (env.last_selected != last_selected) { + if (env.last_selected != last_selected && !env.content_lock) { env.last_selected = last_selected; screen_resize(); } title_reset(); } + + env.content_lock = false; }); // display the list widget after 'list' and 'listgroup' commands // @TODO: plugins should be able to do the same var list_handler = function(e) { - if (mode != 'large') { + if (mode != 'large' && !env.content_lock) { if (rcmail.env.task == 'addressbook' || (rcmail.env.task == 'mail' && !rcmail.env.action)) { show_list(); } } + env.content_lock = false; + // display current folder name in list header if (rcmail.env.task == 'mail' && !rcmail.env.action) { - var name = $.type(e) == 'string' ? e : rcmail.env.mailbox; - var folder = rcmail.env.mailboxes[name]; + var name = $.type(e) == 'string' ? e : rcmail.env.mailbox, + folder = rcmail.env.mailboxes[name]; + $('.header > .header-title', layout.list).text(folder ? folder.name : ''); } }; @@ -581,6 +589,80 @@ function rcube_elastic_ui() .addEventListener('afterlistsearch', list_handler); }; + /** + * Content frame navigation + */ + function content_frame_navigation(href, event) + { + // Don't display navigation for create/add action frames + if (href.match(/_action=(create|add)/)) { + if (env.frame_nav) { + $(env.frame_nav).addClass('hidden'); + } + + return; + } + + var uid, list = $('[data-list]', layout.list).data('list'); + + if (!list || !(list = rcmail[list]) || !list.get_single_selection) { + return; + } + + // expand collapsed row so we do not skip the whole thread + if (uid = list.get_single_selection()) { + if (list.rows[uid] && !list.rows[uid].expanded) { + list.expand_row(event, uid); + } + } + + // TODO: Add "message X from Y" text between buttons + // TODO: Support tree_list widget (Settings > Folders) + + if (!env.frame_nav) { + env.frame_nav = $('