From b4698fc21945eec514506d006f6d351884626438 Mon Sep 17 00:00:00 2001 From: Michael M Slusarz Date: Thu, 3 Dec 2009 11:10:55 -0700 Subject: [PATCH] Add splitbar for sidebar in dimp. --- imp/docs/CHANGES | 1 + imp/js/DimpBase.js | 52 +++++++++++++++++++++++++++++++++++++++------- imp/themes/screen-dimp.css | 18 +++++++++------- 3 files changed, 56 insertions(+), 15 deletions(-) diff --git a/imp/docs/CHANGES b/imp/docs/CHANGES index 08d4fe452..82b87f179 100644 --- a/imp/docs/CHANGES +++ b/imp/docs/CHANGES @@ -2,6 +2,7 @@ v5.0-git -------- +[mms] Add splitbar to resize sidebar in DIMP. [mms] Use LIST-EXTENDED IMAP extension (RFC 5258) to get subscribed mailbox information, if available. [mms] Split ham/spam reporting actions into two separate preferences (Request diff --git a/imp/js/DimpBase.js b/imp/js/DimpBase.js index e88664476..eb86c3cfa 100644 --- a/imp/js/DimpBase.js +++ b/imp/js/DimpBase.js @@ -9,8 +9,8 @@ var DimpBase = { // Vars used and defaulting to null/false: - // cfolderaction, folder, folderswitch, offset, pollPE, pp, search, - // template, uid, viewport + // cfolderaction, folder, folderswitch, needSFL, offset, pollPE, pp, + // resize, search, splitbar, template, uid, viewport // msglist_template_horiz and msglist_template_vert set via // js/mailbox-dimp.js cacheids: {}, @@ -2085,8 +2085,8 @@ var DimpBase = { (Prototype.Browser.IE && Object.isUndefined(nfheight) && (nf.getStyle('height') == '0px'))) { + this.needSFL = true; this._sizeFolderlist(); - Event.observe(window, 'resize', this._sizeFolderlist.bind(this)); } if (r.response.quota) { @@ -2341,8 +2341,10 @@ var DimpBase = { _sizeFolderlist: function() { - var nf = $('normalfolders'); - nf.setStyle({ height: (document.viewport.getHeight() - nf.cumulativeOffset()[1]) + 'px' }); + if (this.needSFL) { + var nf = $('normalfolders'); + nf.setStyle({ height: (document.viewport.getHeight() - nf.cumulativeOffset()[1]) + 'px' }); + } }, toggleSubscribed: function() @@ -2615,6 +2617,7 @@ var DimpBase = { document.observe('keydown', this.keydownHandler.bindAsEventListener(this)); document.observe('change', this.changeHandler.bindAsEventListener(this)); document.observe('dblclick', this.dblclickHandler.bindAsEventListener(this)); + Event.observe(window, 'resize', this.onResize.bind(this)); /* Limit to folders sidebar only. */ $('foldersSidebar').observe('mouseover', this.mouseoverHandler.bindAsEventListener(this)); @@ -2623,7 +2626,24 @@ var DimpBase = { $('sidebar').setStyle({ width: DIMP.conf.sidebar_width }); $('dimpLoading').hide(); $('dimpPage').show(); - $('dimpmain').setStyle({ left: $('sidebar').getWidth() + 'px' }); + + /* Create splitbar for sidebar. */ + tmp = $('sidebar').getWidth(); + this.splitbar = new Element('DIV', { className: 'splitBarVertSidebar' }).setStyle({ height: document.viewport.getHeight() + 'px', left: tmp + 'px' }); + $('sidebar').insert({ after: this.splitbar }); + new Drag(this.splitbar, { + constraint: 'horizontal', + ghosting: true, + nodrop: true, + onEnd: function(drag) { + var w = drag.lastCoord[0]; + $('sidebar').setStyle({ width: w + 'px' }); + drag.element.setStyle({ left: w + 'px' }); + $('dimpmain').setStyle({ left: (w + drag.element.getWidth()) + 'px' }); + } + }); + + $('dimpmain').setStyle({ left: (tmp + this.splitbar.getWidth()) + 'px' }); /* Create the folder list. Any pending notifications will be caught * via the return from this call. */ @@ -2694,7 +2714,6 @@ var DimpBase = { if (DimpCore.is_ie6) { /* Disable text selection in preview pane for IE 6. */ document.observe('selectstart', Event.stop); - Event.observe(window, 'resize', this._resizeIE6.bind(this)); /* Since IE 6 doesn't support hover over non-links, use javascript * events to replicate mouseover CSS behavior. */ @@ -2732,6 +2751,25 @@ var DimpBase = { if (DimpCore.is_ie6) { iframe.setStyle({ width: $('dimpmain').getStyle('width'), height: (document.viewport.getHeight() - 20) + 'px' }); } + }, + + /* Resize function. */ + onResize: function() + { + if (this.resize) { + clearTimeout(this.resize); + } + + this.resize = this._onResize.bind(this).delay(0.1); + }, + + _onResize: function() + { + this.splitbar.setStyle({ height: document.viewport.getHeight() + 'px' }); + if (DimpCore.is_ie6) { + this._resizeIE6(); + this._sizeFolderlist(); + } } }; diff --git a/imp/themes/screen-dimp.css b/imp/themes/screen-dimp.css index c1f9aec32..f65e99ff7 100644 --- a/imp/themes/screen-dimp.css +++ b/imp/themes/screen-dimp.css @@ -18,20 +18,19 @@ input { /* Main container styles. */ #sidebar { background: #eee; - border-right: 1px silver solid; + bottom: 0; cursor: default; left: 0; + padding: 5px 0 0 5px; position: absolute; top: 0; - padding: 5px 0 0 5px; - z-index: 1; } #dimpmain { bottom: 0; margin-left: 5px; position: absolute; - right: 4px; - top: 4px; + right: 3px; + top: 2px; } /* ini header */ @@ -82,14 +81,14 @@ input { cursor: pointer; } -/* SplitPane styles. */ +/* Splitbar styles. */ #msgSplitPane { border-left: 1px silver solid; border-right: 1px silver solid; border-bottom: 1px silver solid; position: relative; } -.splitBarHoriz, .splitBarVert { +.splitBarHoriz, .splitBarVert, .splitBarVertSidebar { background: #e9e9e9 no-repeat scroll; z-index: 10; } @@ -101,7 +100,7 @@ input { cursor: row-resize; height: 5px; } -.splitBarVert { +.splitBarVert, .splitBarVertSidebar { background-image: url("graphics/dragHandleVert.png"); background-position: center; border-right: 1px solid silver; @@ -110,6 +109,9 @@ input { height: 300px; width: 5px; } +.splitBarVertSidebar { + position: absolute; +} /* Message List */ .mboxheader { -- 2.11.0