diff options
| -rw-r--r-- | skins/larry/mail.css | 8 | ||||
| -rw-r--r-- | skins/larry/settings.css | 16 | ||||
| -rw-r--r-- | skins/larry/styles.css | 29 | ||||
| -rw-r--r-- | skins/larry/templates/folders.html | 4 | ||||
| -rw-r--r-- | skins/larry/templates/identities.html | 4 | ||||
| -rw-r--r-- | skins/larry/templates/identityedit.html | 4 | ||||
| -rw-r--r-- | skins/larry/templates/mail.html | 9 | ||||
| -rw-r--r-- | skins/larry/templates/settings.html | 4 | ||||
| -rw-r--r-- | skins/larry/ui.js | 291 |
9 files changed, 351 insertions, 18 deletions
diff --git a/skins/larry/mail.css b/skins/larry/mail.css index 04266bc49..323f31b6d 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -23,7 +23,7 @@ #mailview-right { position: absolute; top: 0; - left: 250px; + left: 252px; right: 0; bottom: 0; } @@ -44,6 +44,12 @@ height: 26px; } +#mailviewsplitter { + right: 30px; + width: 30px; + left: auto !important; +} + #mailboxcontainer, #messagelistcontainer { position: absolute; diff --git a/skins/larry/settings.css b/skins/larry/settings.css index 5f27ae7ac..05a587a8b 100644 --- a/skins/larry/settings.css +++ b/skins/larry/settings.css @@ -20,10 +20,18 @@ bottom: 0; } +#settings-right { + position: absolute; + top: 0; + left: 232px; + right: 0; + bottom: 0; +} + #sectionslist { position: absolute; top: 0; - left: 230px; + left: 0; width: 260px; bottom: 0; } @@ -31,7 +39,7 @@ #preferences-box { position: absolute; top: 0; - left: 500px; + left: 270px; right: 0; bottom: 0; } @@ -149,7 +157,7 @@ #identitieslist { position: absolute; top: 0; - left: 230px; + left: 0; width: 300px; bottom: 0; } @@ -158,7 +166,7 @@ #identity-details { position: absolute; top: 0; - left: 540px; + left: 310px; right: 0; bottom: 0; } diff --git a/skins/larry/styles.css b/skins/larry/styles.css index 3746ee3c2..c1847f2f9 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -271,6 +271,11 @@ a.iconbutton { background: url(images/buttons.png) -1000px 0 no-repeat; } +a.iconbutton.disabled { + opacity: 0.4; + cursor: default; +} + a.iconbutton.searchoptions { background-position: -2px -337px; } @@ -540,6 +545,7 @@ a.iconbutton.reset { margin: 0; text-shadow: 1px 1px 1px #fff; border-bottom: 1px solid #bbd3da; + white-space: nowrap; } .uibox .boxtitle, @@ -1040,6 +1046,29 @@ ul.toolbarmenu li label { text-shadow: 1px 1px 1px #333; } +.splitter { + user-select: none; + -moz-user-select: none; + -khtml-user-select: none; + position: absolute; + background: url(images/splitter.png) center no-repeat; +} + +.splitter-h { + height: 10px; + width: 100%; + cursor: n-resize; + cursor: row-resize; + background-position: center 0; +} + +.splitter-v { + width: 10px; + height: 100%; + cursor: e-resize; + cursor: col-resize; + background-position: 0 center; +} #rcmdraglayer { min-width: 260px; diff --git a/skins/larry/templates/folders.html b/skins/larry/templates/folders.html index 385d2686f..0b263e9fe 100644 --- a/skins/larry/templates/folders.html +++ b/skins/larry/templates/folders.html @@ -12,6 +12,8 @@ <roundcube:include file="/includes/settingstabs.html" /> +<div id="settings-right"> + <div id="folderslist" class="uibox listbox"> <h2 class="boxtitle"><span style="float:right"><roundcube:label name="subscribed" /></span><roundcube:label name="folders" /></h2> <div class="scroller withfooter"> @@ -29,6 +31,8 @@ </div> +</div> + <div id="mailboxmenu" class="popupmenu"> <ul class="toolbarmenu" id="mailboxoptionsmenu"> <li><roundcube:button command="delete-folder" label="delete" classAct="active" /></li> diff --git a/skins/larry/templates/identities.html b/skins/larry/templates/identities.html index 53d7539bc..905bc100a 100644 --- a/skins/larry/templates/identities.html +++ b/skins/larry/templates/identities.html @@ -12,6 +12,8 @@ <roundcube:include file="/includes/settingstabs.html" /> +<div id="settings-right"> + <div id="identitieslist" class="uibox listbox"> <h2 class="boxtitle"><roundcube:label name="identities" /></h2> <div class="scroller withfooter"> @@ -28,6 +30,8 @@ </div> +</div> + <roundcube:include file="/includes/footer.html" /> </body> diff --git a/skins/larry/templates/identityedit.html b/skins/larry/templates/identityedit.html index 147098286..d31c4a6e7 100644 --- a/skins/larry/templates/identityedit.html +++ b/skins/larry/templates/identityedit.html @@ -12,6 +12,8 @@ <roundcube:include file="/includes/settingstabs.html" /> +<div id="settings-right"> + <div id="identitieslist" class="uibox listbox"> <h2 class="boxtitle"><roundcube:label name="identities" /></h2> <div class="scroller withfooter"> @@ -39,6 +41,8 @@ </div> +</div> + <roundcube:include file="/includes/footer.html" /> </body> diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html index 88b7c5840..87e690b54 100644 --- a/skins/larry/templates/mail.html +++ b/skins/larry/templates/mail.html @@ -64,8 +64,13 @@ <!-- list footer --> <div id="messagelistfooter"> <div id="listcontrols"> - <a href="#list" class="iconbutton listmode" id="maillistmode" title="<roundcube:label name='list' />">List</a> - <a href="#threads" class="iconbutton threadmode" id="mailthreadmode" title="<roundcube:label name='threads' />">Threads</a> + <roundcube:if condition="env:threads" /> + <a href="#list" class="iconbutton listmode" id="maillistmode" title="<roundcube:label name='list' />">List</a> + <a href="#threads" class="iconbutton threadmode" id="mailthreadmode" title="<roundcube:label name='threads' />">Threads</a> + <roundcube:else /> + <a href="#list" class="iconbutton listmode selected" title="<roundcube:label name='list' />" onclick="return false">List</a> + <a href="#threads" class="iconbutton threadmode disabled" title="<roundcube:label name='threads' />" onclick="return false">Threads</a> + <roundcube:endif /> </div> <div id="countcontrols" class="pagenav dark"> diff --git a/skins/larry/templates/settings.html b/skins/larry/templates/settings.html index bd90ae38e..15ce1e94f 100644 --- a/skins/larry/templates/settings.html +++ b/skins/larry/templates/settings.html @@ -12,6 +12,8 @@ <roundcube:include file="/includes/settingstabs.html" /> +<div id="settings-right"> + <div id="sectionslist" class="uibox listbox"> <div class="scroller"> <roundcube:object name="sectionslist" id="sections-table" class="listing" /> @@ -25,6 +27,8 @@ </div> +</div> + <roundcube:include file="/includes/footer.html" /> </body> diff --git a/skins/larry/ui.js b/skins/larry/ui.js index f2e230fc3..a995610ab 100644 --- a/skins/larry/ui.js +++ b/skins/larry/ui.js @@ -20,6 +20,7 @@ function rcube_mail_ui() }; var me = this; + var mailviewsplit; // export public methods this.init = init; @@ -32,18 +33,31 @@ function rcube_mail_ui() function init() { if (rcmail.env.task == 'mail') { + rcmail.gui_object('message_dragmenu', 'dragmessagemenu'); rcmail.addEventListener('menu-open', function(){ show_popup('listoptions'); }); rcmail.addEventListener('menu-save', save_listoptions); // rcmail.addEventListener('aftersend-attachment', 'uploadmenu', rcmail_ui); // rcmail.addEventListener('aftertoggle-editor', 'resize_compose_body_ev', rcmail_ui); - rcmail.gui_object('message_dragmenu', 'dragmessagemenu'); - $('#mailpreviewtoggle').addClass($('#mailpreviewframe').is(':visible') ? 'enabled' : 'closed').click(function(e){ toggle_preview_pane(e); return false }); + + var previewframe = $('#mailpreviewframe').is(':visible'); + $('#mailpreviewtoggle').addClass(previewframe ? 'enabled' : 'closed').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 }); - + if (rcmail.env.action == 'show' || rcmail.env.action == 'preview') { layout_messageview(); } + else if (rcmail.env.action == 'list' || !rcmail.env.action) { + mailviewsplit = new rcube_splitter({ id:'mailviewsplitter', p1:'#mailview-top', p2:'#mailview-bottom', + orientation:'h', relative:true, start:310, min:150, size:0, offset:-22 }); + if (previewframe) + mailviewsplit.init(); + } + + if ($('#mailview-left').length) { + new rcube_splitter({ id:'mailviewsplitterv', p1:'#mailview-left', p2:'#mailview-right', + orientation:'v', relative:true, start:248, min:150, size:12, callback:render_mailboxlist, render:resize_leftcol }).init(); + } } else if (rcmail.env.task == 'settings') { var tab = '#settingstabpreferences'; @@ -52,6 +66,15 @@ function rcube_mail_ui() $(tab).addClass('selected') .children().first().removeAttr('onclick').click(function() { return false; }); + + if (rcmail.env.action == 'folders') { + new rcube_splitter({ id:'folderviewsplitter', p1:'#folderslist', p2:'#folder-details', + orientation:'v', relative:true, start:305, min:150, size:12 }).init(); + } + else if (rcmail.env.action.indexOf('identit') >= 0) { + new rcube_splitter({ id:'identviewsplitter', p1:'#identitieslist', p2:'#identity-details', + orientation:'v', relative:true, start:305, min:150, size:12 }).init(); + } } $(document.body).bind('mouseup', function(e){ @@ -106,6 +129,19 @@ function rcube_mail_ui() } } + + function render_mailboxlist(splitter) + { + } + + + function resize_leftcol(splitter) + { + if (splitter) + $('#quicksearchbar input').css('width', (splitter.pos - 70) + 'px'); + } + + /** * Trigger for popup menus */ @@ -187,33 +223,46 @@ function rcube_mail_ui() } + /** + * Show/hide the preview pane + */ function toggle_preview_pane(e) { var button = $(e.target), frame = $('#mailpreviewframe'), visible = !frame.is(':visible'), - splitter = parseInt(bw.get_cookie('mailviewsplitter') || 320), + splitter = mailviewsplit.pos || parseInt(bw.get_cookie('mailviewsplitter') || 320), topstyles, bottomstyles, uid; frame.toggle(); button.removeClass().addClass(visible ? 'enabled' : 'closed'); if (visible) { - topstyles = { height:(splitter-38)+'px', bottom:'auto' }; - bottomstyles = { top:(splitter+5)+'px', height:'auto' }; + $('#mailview-top').css({ bottom:'auto' }); + $('#mailview-bottom').css({ height:'auto' }); + rcmail.env.contentframe = 'messagecontframe'; if (uid = rcmail.message_list.get_single_selection()) rcmail.show_message(uid, false, true); + + // let the splitter set the correct size and position + if (mailviewsplit.handle) { + mailviewsplit.handle.show(); + mailviewsplit.resize(); + } + else + mailviewsplit.init(); } else { - topstyles = { height:'auto', bottom:'28px' }; - bottomstyles = { top:'auto', height:'26px' }; rcmail.env.contentframe = null; rcmail.show_contentframe(false); - } - $('#mailview-top').css(topstyles); - $('#mailview-bottom').css(bottomstyles); + $('#mailview-top').css({ height:'auto', bottom:'28px' }); + $('#mailview-bottom').css({ top:'auto', height:'26px' }); + + if (mailviewsplit.handle) + mailviewsplit.handle.hide(); + } if (visible && uid && rcmail.message_list) rcmail.message_list.scrollto(uid); @@ -222,6 +271,9 @@ function rcube_mail_ui() } + /** + * + */ function switch_view_mode(mode) { if (rcmail.env.threading != (mode == 'thread')) @@ -265,6 +317,9 @@ function rcube_mail_ui() } + /** + * + */ function save_listoptions() { show_popupmenu('listoptions', false); @@ -279,6 +334,9 @@ function rcube_mail_ui() } + /** + * + */ function set_searchmod(elem) { var all, m, task = rcmail.env.task, @@ -325,3 +383,214 @@ function rcube_mail_ui() } } + + +/** + * Roundcube splitter GUI class + * + * @constructor + */ +function rcube_splitter(p) +{ + this.p = p; + this.id = p.id; + this.horizontal = (p.orientation == 'horizontal' || p.orientation == 'h'); + this.halfsize = (p.size !== undefined ? p.size : 10) / 2; + this.pos = p.start || 0; + this.min = p.min || 20; + this.offset = p.offset || 0; + this.relative = p.relative ? true : false; + this.drag_active = false; + this.render = p.render; + this.callback = p.callback; + + var me = this; + + this.init = function() + { + this.p1 = $(this.p.p1); + this.p2 = $(this.p.p2); + + // create and position the handle for this splitter + this.p1pos = this.relative ? this.p1.position() : this.p1.offset(); + this.p2pos = this.relative ? this.p2.position() : this.p2.offset(); + this.handle = $('<div>') + .attr('id', this.id) + .attr('unselectable', 'on') + .addClass('splitter ' + (this.horizontal ? 'splitter-h' : 'splitter-v')) + .appendTo(this.p1.parent()) + .bind('mousedown', onDragStart); + + if (this.horizontal) { + var top = this.p1pos.top + this.p1.outerHeight(); + this.handle.css({ left:'0px', top:top+'px' }); + } + else { + var left = this.p1pos.left + this.p1.outerWidth(); + this.handle.css({ left:left+'px', top:'0px' }); + } + + this.elm = this.handle.get(0); + + // listen to window resize on IE + if (bw.ie) + $(window).resize(function(e){ onResize(e) }); + + // read saved position from cookie + var cookie = bw.get_cookie(this.id); + if (cookie && !isNaN(cookie)) { + this.pos = parseFloat(cookie); + this.resize(); + } + else if (this.pos) { + this.resize(); + this.set_cookie(); + } + }; + + /** + * Set size and position of all DOM objects + * according to the saved splitter position + */ + this.resize = function() + { + if (this.horizontal) { + this.p1.css('height', Math.floor(this.pos - this.p1pos.top - this.halfsize) + 'px'); + this.p2.css('top', Math.ceil(this.pos + this.halfsize + 2) + 'px'); + this.handle.css('top', Math.round(this.pos - this.halfsize + this.offset)+'px'); + if (bw.ie) { + var new_height = parseInt(this.p2.parent().outerHeight(), 10) - parseInt(this.p2.css('top'), 10) - (bw.ie8 ? 2 : 0); + this.p2.css('height') = (new_height > 0 ? new_height : 0) + 'px'; + } + } + else { + this.p1.css('width', Math.floor(this.pos - this.p1pos.left - this.halfsize) + 'px'); + this.p2.css('left', Math.ceil(this.pos + this.halfsize) + 'px'); + this.handle.css('left', Math.round(this.pos - this.halfsize + this.offset + 3)+'px'); + if (bw.ie) { + var new_width = parseInt(this.p2.parent().outerWidth(), 10) - parseInt(this.p2.css('left'), 10) ; + this.p2.css('width', (new_width > 0 ? new_width : 0) + 'px'); + } + } + + this.p2.resize(); + this.p1.resize(); + + if (typeof this.render == 'function') + this.render(this); + }; + + /** + * Handler for mousedown events + */ + function onDragStart(e) + { + // disable text selection while dragging the splitter + if (bw.konq || bw.chrome || bw.safari) + document.body.style.webkitUserSelect = 'none'; + + me.p1pos = me.relative ? me.p1.position() : me.p1.offset(); + me.p2pos = me.relative ? me.p2.position() : me.p2.offset(); + me.drag_active = true; + + // start listening to mousemove events + $(document).bind('mousemove.'+this.id, onDrag).bind('mouseup.'+this.id, onDragStop); + + // enable dragging above iframes + $('iframe').each(function() { + $('<div class="iframe-splitter-fix"></div>') + .css({ background: '#fff', + width: this.offsetWidth+'px', height: this.offsetHeight+'px', + position: 'absolute', opacity: '0.001', zIndex: 1000 + }) + .css($(this).offset()) + .appendTo('body'); + }); + }; + + /** + * Handler for mousemove events + */ + function onDrag(e) + { + if (!me.drag_active) + return false; + + var pos = rcube_event.get_mouse_pos(e); + + if (me.relative) { + var parent = me.p1.parent().offset(); + pos.x -= parent.left; + pos.y -= parent.top; + } + + if (me.horizontal) { + if (((pos.y - me.halfsize) > me.p1pos.top) && ((pos.y + me.halfsize) < (me.p2pos.top + me.p2.outerHeight()))) { + me.pos = Math.max(me.min, pos.y - me.offset); + me.resize(); + } + } + else { + if (((pos.x - me.halfsize) > me.p1pos.left) && ((pos.x + me.halfsize) < (me.p2pos.left + me.p2.outerWidth()))) { + me.pos = Math.max(me.min, pos.x - me.offset); + me.resize(); + } + } + + me.p1pos = me.relative ? me.p1.position() : me.p1.offset(); + me.p2pos = me.relative ? me.p2.position() : me.p2.offset(); + return false; + }; + + /** + * Handler for mouseup events + */ + function onDragStop(e) + { + // resume the ability to highlight text + if (bw.konq || bw.chrome || bw.safari) + document.body.style.webkitUserSelect = 'auto'; + + // cancel the listening for drag events + $(document).unbind('.'+me.id); + me.drag_active = false; + + // remove temp divs + $('div.iframe-splitter-fix').each(function(){ this.parentNode.removeChild(this); }); + + me.set_cookie(); + + if (typeof me.callback == 'function') + me.callback(me); + + return bw.safari ? true : rcube_event.cancel(e); + }; + + /** + * Handler for window resize events + */ + function onResize(e) + { + if (me.horizontal) { + var new_height = parseInt(me.p2.parent().outerHeight(), 10) - parseInt(me.p2[0].style.top, 10) - (bw.ie8 ? 2 : 0); + me.p2.css('height', (new_height > 0 ? new_height : 0) +'px'); + } + else { + var new_width = parseInt(me.p2.parent().outerWidth(), 10) - parseInt(me.p2[0].style.left, 10); + me.p2.css('width', (new_width > 0 ? new_width : 0) + 'px'); + } + }; + + /** + * Saves splitter position in cookie + */ + this.set_cookie = function() + { + var exp = new Date(); + exp.setYear(exp.getFullYear() + 1); + bw.set_cookie(this.id, this.pos, exp); + }; + +} // end class rcube_splitter + + |