From 0fddf7a6a23f4940fcd4c2c3b646cc4d3c01db8b Mon Sep 17 00:00:00 2001 From: Thomas Bruederli <thomas@roundcube.net> Date: Thu, 14 Aug 2014 04:39:05 -0400 Subject: [PATCH] Place folder namespace selector above search box. Adjust height after box is visible and real heights can be computed --- skins/larry/ui.js | 110 +++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 79 insertions(+), 31 deletions(-) diff --git a/skins/larry/ui.js b/skins/larry/ui.js index 6385e73..153abdc 100644 --- a/skins/larry/ui.js +++ b/skins/larry/ui.js @@ -47,6 +47,7 @@ this.update_quota = update_quota; this.get_pref = get_pref; this.save_pref = save_pref; + this.folder_search_init = folder_search_init; // set minimal mode on small screens (don't wait for document.ready) @@ -76,7 +77,7 @@ function get_pref(key) { if (!prefs) { - prefs = window.localStorage ? rcmail.local_storage_get_item('prefs.larry', {}) : {}; + prefs = rcmail.local_storage_get_item('prefs.larry', {}); } // fall-back to cookies @@ -85,9 +86,8 @@ if (cookie != null) { prefs[key] = cookie; - // copy value to local storage and remove cookie - if (window.localStorage) { - rcmail.local_storage_set_item('prefs.larry', prefs); + // copy value to local storage and remove cookie (if localStorage is supported) + if (rcmail.local_storage_set_item('prefs.larry', prefs)) { rcmail.set_cookie(key, cookie, new Date()); // expire cookie } } @@ -103,11 +103,8 @@ { prefs[key] = val; - // write prefs to local storage - if (window.localStorage) { - rcmail.local_storage_set_item('prefs.larry', prefs); - } - else { + // write prefs to local storage (if supported) + if (!rcmail.local_storage_set_item('prefs.larry', prefs)) { // store value in cookie var exp = new Date(); exp.setYear(exp.getFullYear() + 1); @@ -214,13 +211,15 @@ $('#composeoptionstoggle').click(); new rcube_splitter({ id:'composesplitterv', p1:'#composeview-left', p2:'#composeview-right', - orientation:'v', relative:true, start:248, min:170, size:12, render:layout_composeview }).init(); + orientation:'v', relative:true, start:206, min:170, size:12, render:layout_composeview }).init(); } else if (rcmail.env.action == 'list' || !rcmail.env.action) { var previewframe = $('#mailpreviewframe').is(':visible'); - $('#mailpreviewtoggle').addClass(previewframe ? 'enabled' : 'closed').attr('aria-expanded', previewframe ? 'true' : 'false').click(function(e){ toggle_preview_pane(e); return false }); - $('#maillistmode').addClass(rcmail.env.threading ? '' : 'selected').click(function(e){ switch_view_mode('list'); return false }); - $('#mailthreadmode').addClass(rcmail.env.threading ? 'selected' : '').click(function(e){ switch_view_mode('thread'); return false }); + + $('#mailpreviewtoggle').addClass(previewframe ? 'enabled' : 'closed').attr('aria-expanded', previewframe ? 'true' : 'false') + .click(function(e) { toggle_preview_pane(e); return false; }); + $('#maillistmode').addClass(rcmail.env.threading ? '' : 'selected').click(function(e) { switch_view_mode('list'); return false; }); + $('#mailthreadmode').addClass(rcmail.env.threading ? 'selected' : '').click(function(e) { switch_view_mode('thread'); return false; }); mailviewsplit = new rcube_splitter({ id:'mailviewsplitter', p1:'#mailview-top', p2:'#mailview-bottom', orientation:'h', relative:true, start:310, min:150, size:12, offset:4 }); @@ -238,7 +237,7 @@ if ($('#mailview-left').length) { new rcube_splitter({ id:'mailviewsplitterv', p1:'#mailview-left', p2:'#mailview-right', - orientation:'v', relative:true, start:226, min:150, size:12, callback:render_mailboxlist, render:resize_leftcol }).init(); + orientation:'v', relative:true, start:206, min:150, size:12, callback:render_mailboxlist, render:resize_leftcol }).init(); } } /*** settings task ***/ @@ -256,9 +255,9 @@ new rcube_splitter({ id:'folderviewsplitter', p1:'#folderslist', p2:'#folder-details', orientation:'v', relative:true, start:266, min:180, size:12 }).init(); - new rcube_scroller('#folderslist-content', '#folderslist-header', '#folderslist-footer'); - rcmail.addEventListener('setquota', update_quota); + + folder_search_init($('#folderslist')); } else if (rcmail.env.action == 'identities') { new rcube_splitter({ id:'identviewsplitter', p1:'#identitieslist', p2:'#identity-details', @@ -296,9 +295,9 @@ if (rcmail.env.action == '') { new rcube_splitter({ id:'addressviewsplitterd', p1:'#addressview-left', p2:'#addressview-right', - orientation:'v', relative:true, start:226, min:150, size:12, render:resize_leftcol }).init(); + orientation:'v', relative:true, start:206, min:150, size:12, render:resize_leftcol }).init(); new rcube_splitter({ id:'addressviewsplitter', p1:'#addresslist', p2:'#contacts-box', - orientation:'v', relative:true, start:286, min:270, size:12 }).init(); + orientation:'v', relative:true, start:266, min:260, size:12 }).init(); } var dragmenu = $('#dragcontactmenu'); @@ -327,7 +326,7 @@ if ($('option:selected', this).val() != '') title = $('option:selected', this).text(); - var overlay = $('<a class="menuselector"><span class="handle">' + title + '</span></a>') + var overlay = $('<a class="menuselector" tabindex="-1"><span class="handle">' + title + '</span></a>') .css('position', 'absolute') .offset(select.position()) .insertAfter(select); @@ -339,7 +338,7 @@ // re-set original select width to fix click action and options width in some browsers select.width(overlay.width()) - .change(function() { + .on(bw.mz ? 'change keyup' : 'change', function() { var val = $('option:selected', this).text(); $(this).next().children().text(val); }); @@ -440,7 +439,8 @@ me.messagedialog.closest('div[role=dialog]').attr('role', 'alertdialog'); - me.message_timer = window.setTimeout(dialog_close, p.timeout); + if (p.timeout > 0) + me.message_timer = window.setTimeout(dialog_close, p.timeout); } } @@ -490,19 +490,19 @@ w, h, bh, ovflw, btns = 0, minheight = 300, - bh = (form.height() - bottom.position().top); + bh = form.height() - bottom.position().top; ovflw = minheight - bh; btns = ovflw > -100 ? 0 : 40; - bottom.css('height', Math.max(minheight, bh) + 'px'); + bottom.height(Math.max(minheight, bh)); form.css('overflow', ovflw > 0 ? 'auto' : 'hidden'); w = body.parent().width() - 5; - h = body.parent().height() - 16; + h = body.parent().height() - 8; body.width(w).height(h); - $('#composebody_tbl').width((w+8)+'px').height('').css('margin-top', '1px'); - $('#composebody_ifr').width((w+8)+'px').height((h-40)+'px'); - $('#googie_edit_layer').height(h+'px'); + $('#composebodycontainer > div').width(w+8); + $('#composebody_ifr').height(h + 4 - $('div.mce-toolbar').height()); + $('#googie_edit_layer').height(h - 8); // $('#composebodycontainer')[(btns ? 'addClass' : 'removeClass')]('buttons'); // $('#composeformbuttons')[(btns ? 'show' : 'hide')](); @@ -513,16 +513,59 @@ function update_quota(p) { - var step = 24, step_count = 20, + var element = $('#quotadisplay'), menu = $('#quotamenu'), + step = 24, step_count = 20, y = p.total ? Math.ceil(p.percent / 100 * step_count) * step : 0; // never show full-circle if quota is close to 100% but below. if (p.total && y == step * step_count && p.percent < 100) y -= step; - $('#quotadisplay').css('background-position', '0 -'+y+'px'); + element.css('background-position', '0 -' + y + 'px'); + + if (p.table) { + if (!menu.length) + menu = $('<div id="quotamenu" class="popupmenu">').appendTo($('body')); + + menu.html(p.table); + element.css('cursor', 'pointer').off('click').on('click', function(e) { + return rcmail.command('menu-open', 'quotamenu', e.target, e); + }); + } } + function folder_search_init(container) + { + // animation to unfold list search box + $('.boxtitle a.search', container).click(function(e) { + var title = $('.boxtitle', container), + box = $('.listsearchbox', container), + dir = box.is(':visible') ? -1 : 1, + height = 34 + ($('select', box).length ? 22 : 0); + + box.slideToggle({ + duration: 160, + progress: function(animation, progress) { + if (dir < 0) progress = 1 - progress; + $('.scroller', container).css('top', (title.outerHeight() + height * progress) + 'px'); + }, + complete: function() { + box.toggleClass('expanded'); + if (box.is(':visible')) { + box.find('input[type=text]').focus(); + height = 34 + ($('select', box).length ? $('select', box).outerHeight() + 4 : 0); + $('.scroller', container).css('top', (title.outerHeight() + height) + 'px'); + } + else { + $('a.reset', box).click(); + } + // TODO: save state in localStorage + } + }); + + return false; + }); + } function enable_command(p) { @@ -595,7 +638,7 @@ topstyles, bottomstyles, uid; frame.toggle(); - button.removeClass().toggleClass('enabled closed').attr('aria-expanded', visible ? 'true' : 'false'); + button.toggleClass('enabled closed').attr('aria-expanded', visible ? 'true' : 'false'); if (visible) { $('#mailview-top').removeClass('fullheight').css({ bottom:'auto' }); @@ -1017,7 +1060,10 @@ row.show(); $('#' + which + '-link').hide(); + layout_composeview(); + $('input,textarea', row).focus(); + return false; } @@ -1120,6 +1166,8 @@ /** * Roundcube Scroller class + * + * @deprecated Use treelist widget */ function rcube_scroller(list, top, bottom) { @@ -1412,4 +1460,4 @@ return rcube_splitter._instances[id]; }; -// @license-end \ No newline at end of file +// @license-end -- Gitblit v1.9.1