Dev

dev@lists.roundcube.net

4290 discussions

Re: Resize Preview pane .. With the diff
by davidig 17 Dec '06

17 Dec '06

Doh ...and here is the same patch, but without it being garbled by newlines. This patch seems to be cursed by poor e-mailing attempts...and/or Ryan and I are dolts. You decide. :) I got smart and sent this one using Roundcube... peace, David > Thanks for throwing this up here Ryan. Here's an updated patch (for > svn 410) that also works in IE and Opera in addition to Firefox. (Can > someone test Safari?) This one also resizes the splitter bar when the > window is resized. The setting still isn't saved in user_prefs but > I'm sure Ryan will have that working soon... > peace, > David Glick Index: program/include/main.inc =================================================================== --- program/include/main.inc (revision 410) +++ program/include/main.inc (working copy) @@ -1277,6 +1277,7 @@ // GENERAL 'loginform' => 'rcmail_login_form', 'username' => 'rcmail_current_username', + 'splitter' => 'rcube_splitter', // MAIL 'mailboxlist' => 'rcmail_mailbox_list', @@ -1912,7 +1913,19 @@ return $select->show($set); } +function rcube_splitter($attrib) + { + global $OUTPUT, $JS_OBJECT_NAME; + + // register splitter in the system + $OUTPUT->add_script(sprintf("%s.register_splitter('%s', '%s', '%s');", + $JS_OBJECT_NAME, + $attrib['first'], + $attrib['second'], + $attrib['orientation'])); + } + /****** debugging functions ********/ Index: program/js/common.js =================================================================== --- program/js/common.js (revision 410) +++ program/js/common.js (working copy) @@ -380,6 +380,187 @@ } +/** + * RoundCube splitter GUI class + * + * @constructor + */ +function rcube_splitter(attrib) + { + this.p1id = attrib.p1; + this.p2id = attrib.p2; + this.id = this.p1id + '_' + this.p2id + '_splitter'; + this.orientation = attrib.orientation; + this.horizontal = (this.orientation == 'horizontal'); + + this.init = function() + { + this.p1 = document.getElementById(this.p1id); + this.p2 = document.getElementById(this.p2id); + + // create and position the handle for this splitter + this.p1pos = rcube_get_object_pos(this.p1); + this.p2pos = rcube_get_object_pos(this.p2); + var top = this.p1pos.y + this.p1.offsetHeight; + var height = this.p2pos.y - this.p1pos.y - this.p1.offsetHeight; + var left = this.p1pos.x + this.p1.offsetWidth; + var width = this.p2pos.x - this.p1pos.x - this.p1.offsetWidth; + if (this.horizontal) + this.layer = new rcube_layer(this.id, {x: this.p1pos.x, y: top, height: height, zindex: 1, vis: 1}); + else + this.layer = new rcube_layer(this.id, {x: left, y: this.p1pos.y, width: width, zindex: 1, vis: 1}); + this.elm = this.layer.elm; + this.elm.className = 'splitter'; + if (this.horizontal) + this.elm.style.paddingTop = Math.floor(height / 2) + 'px'; + else + this.elm.style.paddingLeft = Math.floor(width / 2) + 'px'; + + this.line = document.createElement('DIV'); + this.line.className = 'splitterLine'; + if (this.horizontal) + { + this.line.style.borderTopWidth = '1px'; + this.line.style.width = '100%'; + this.line.style.height = '1px'; + } + else + { + this.line.style.borderLeftWidth = '1px'; + this.line.style.width = '1px'; + this.line.style.height = '100%'; + } + + this.elm.appendChild(this.line); + rcube_event.add_listener({element: this.elm, event:'mouseover', object:this, method:'onMouseOver'}); + rcube_event.add_listener({element: this.elm, event:'mouseout', object:this, method:'onMouseOut'}); + + // add the event to start dragging when the handle is pressed + var s = this; + this.elm.onmousedown = function(e){ return s.onDragStart(e); }; + } + + this.onDragStart = function(e) + { + this.p1pos = rcube_get_object_pos(this.p1); + this.p2pos = rcube_get_object_pos(this.p2); + + // start listening to mousemove events + rcube_event.add_listener({element:document, event:'mousemove', object:this, method:'onDrag'}); + rcube_event.add_listener({element:document, event:'mouseup', object:this, method:'onDragStop'}); + + // need to listen in any iframe documents too, b/c otherwise the splitter stops moving when we move over an iframe + var iframes = document.getElementsByTagName('IFRAME'); + this.iframe_events = Object(); + for (var n in iframes) + { + var iframedoc = null; + if (iframes[n].contentDocument) + iframedoc = iframes[n].contentDocument; + else if (iframes[n].contentWindow) + iframedoc = iframes[n].contentWindow.document; + else if (iframes[n].document) + iframedoc = iframes[n].document; + if (iframedoc) + { + // I don't use the add_listener function for this one because I need to create closures to fetch + // the position of each iframe when the event is received + var s = this; + var id = iframes[n].id; + this.iframe_events[n] = function(e){ e._rc_pos_offset = rcube_get_object_pos(document.getElementById(id)); return s.onDrag(e); } + if (iframedoc.addEventListener) + iframedoc.addEventListener('mousemove', this.iframe_events[n], false); + else if (iframes[n].attachEvent) + iframedoc.attachEvent('onmousemove', this.iframe_events[n]); + else + iframedoc['onmousemove'] = this.iframe_events[n]; + + rcube_event.add_listener({element:iframedoc, event:'mouseup', object:this, method:'onDragStop'}); + } + } + } + + this.onDrag = function(e) + { + var pos = rcube_event.get_mouse_pos(e); + if (e._rc_pos_offset) + { + pos.x += e._rc_pos_offset.x; + pos.y += e._rc_pos_offset.y; + } + + if (this.horizontal) + { + if (((pos.y - this.layer.height * 1.5) > this.p1pos.y) && ((pos.y + this.layer.height * 1.5) < (this.p2pos.y + this.p2.offsetHeight))) + { + // resize the panels + this.p2.style.top = Math.round(pos.y + this.layer.height / 2 + 1 - (bw.ie ? 10 : 0)) + 'px'; + this.p1.style.height = Math.round(pos.y - this.p1pos.y - this.layer.height / 2 - 1) + 'px'; + + // move the splitter handle + this.layer.move(this.layer.x, Math.round(pos.y - this.layer.height / 2 + 1)); + } + } + else + { + if (((pos.x - this.layer.width * 1.5) > this.p1pos.x) && ((pos.x + this.layer.width * 1.5) < (this.p2pos.x + this.p2.offsetWidth))) + { + this.p1.style.width = Math.round(pos.x - this.p1pos.x - this.layer.width / 2 - 1) + 'px'; + this.p2.style.left = Math.round(pos.x + this.layer.width / 2 + 1) + 'px'; + + this.layer.move(Math.round(pos.x - this.layer.width / 2 + 1), this.layer.y); + } + } + + this.p1pos = rcube_get_object_pos(this.p1); + this.p2pos = rcube_get_object_pos(this.p2); + return false; + } + + this.onDragStop = function(e) + { + // cancel the listening for drag events + rcube_event.remove_listener({element:document, event:'mousemove', object:this, method:'onDrag'}); + rcube_event.remove_listener({element:document, event:'mouseup', object:this, method:'onDragStop'}); + var iframes = document.getElementsByTagName('IFRAME'); + for (var n in iframes) + { + var iframedoc; + if (iframes[n].contentDocument) + iframedoc = iframes[n].contentDocument; + else if (iframes[n].contentWindow) + iframedoc = iframes[n].contentWindow.document; + else if (iframes[n].document) + iframedoc = iframes[n].document; + if (iframedoc) + { + if (this.iframe_events[n]) { + if (iframedoc.removeEventListener) + iframedoc.removeEventListener('mousemove', this.iframe_events[n], false); + else if (iframedoc.detachEvent) + iframedoc.detachEvent('onmousemove', this.iframe_events[n]); + else + iframedoc['onmousemove'] = null; + } + + rcube_event.remove_listener({element:iframedoc, event:'mouseup', object:this, method:'onDragStop'}); + } + } + return rcube_event.cancel(e); + } + + // events to make the handle appear when the mouse hovers over it + // (pure CSS doesn't work b/c IE only applies :hover classes to links) + this.onMouseOver = function(e) + { + this.line.style.visibility = 'visible'; + } + this.onMouseOut = function(e) + { + this.line.style.visibility = 'hidden'; + } + } + // check if input is a valid email address // By Cal Henderson <cal(a)iamcal.com> // http://code.iamcal.com/php/rfc822/ Index: program/js/app.js =================================================================== --- program/js/app.js (revision 410) +++ program/js/app.js (working copy) @@ -24,6 +24,7 @@ this.env = new Object(); this.labels = new Object(); this.buttons = new Object(); + this.splitters = new Object(); this.gui_objects = new Object(); this.commands = new Object(); @@ -78,6 +79,13 @@ }; + // add a splitter to the splitter list + this.register_splitter = function(p1, p2, orientation) + { + this.splitters[p1 + '_' + p2] = new rcube_splitter({p1: p1, p2: p2, orientation: orientation}); + } + + // register a specific gui object this.gui_object = function(name, id) { @@ -108,6 +116,10 @@ // enable general commands this.enable_command('logout', 'mail', 'addressbook', 'settings', true); + + // initialize splitters + for (var n in this.splitters) + this.splitters[n].init(); switch (this.task) { Index: skins/default/common.css =================================================================== --- skins/default/common.css (revision 410) +++ skins/default/common.css (working copy) @@ -213,7 +213,21 @@ border: 1px solid #CCCCCC; } +.splitter +{ + position: absolute; + cursor: move; + background: url(images/cleardot.png); +} +.splitterLine +{ + visibility: hidden; + border-color: #ff0000; + border-style: solid; + border-width: 0; +} + /***** common table settings ******/ table.records-table thead tr td Index: skins/default/templates/mail.html =================================================================== --- skins/default/templates/mail.html (revision 410) +++ skins/default/templates/mail.html (working copy) @@ -55,6 +55,7 @@ </div> <roundcube:if condition="config:preview_pane == true" /> +<roundcube:object name="splitter" first="mailcontframe" second="mailpreviewframe" orientation="horizontal" /> <div id="mailpreviewframe"> <roundcube:object name="messagecontentframe" id="messagecontframe" width="100%" height="100%" frameborder="0" src="/watermark.html" /> </div> Index: skins/default/templates/addressbook.html =================================================================== --- skins/default/templates/addressbook.html (revision 410) +++ skins/default/templates/addressbook.html (working copy) @@ -31,6 +31,8 @@ <roundcube:object name="addresslist" id="contacts-table" class="records-table" cellspacing="0" summary="Contacts list" /> </div> +<roundcube:object name="splitter" first="addresslist" second="contacts-box" orientation="vertical" /> + <div id="contacts-box"> <roundcube:object name="addressframe" id="contact-frame" width="100%" height="100%" frameborder="0" src="/watermark.html" /> </div> Index: skins/default/addresses.css =================================================================== --- skins/default/addresses.css (revision 410) +++ skins/default/addresses.css (working copy) @@ -70,10 +70,19 @@ border: 1px solid #999999; overflow: hidden; /* css hack for IE */ - width: expression((parseInt(document.documentElement.clientWidth)-530)+'px'); + width: expression((parseInt(document.documentElement.clientWidth)-80-document.getElementById('addresslist').offsetWidth)+'px'); height: expression((parseInt(document.documentElement.clientHeight)-135)+'px'); } + +#addresslist_contacts-box_splitter +{ + bottom: 40px; + /* css hack for IE */ + height: expression((parseInt(document.documentElement.clientHeight)-135)+'px'); +} + + body.iframe, #contact-frame { Index: skins/default/mail.css =================================================================== --- skins/default/mail.css (revision 410) +++ skins/default/mail.css (working copy) @@ -131,9 +131,16 @@ background-color: #F9F9F9; /* css hack for IE */ width: expression((parseInt(document.documentElement.clientWidth)-240)+'px'); - height: expression((parseInt(document.documentElement.clientHeight)-340)+'px'); + height: expression((parseInt(document.documentElement.clientHeight)-130-document.getElementById('mailcontframe').offsetHeight)+'px'); } +#mailcontframe_mailpreviewframe_splitter +{ + right: 40px; + /* css hack for IE */ + width: expression((parseInt(document.documentElement.clientWidth)-240)+'px'); +} + #messagecontframe { width: 100%;

1 0

Re: Can't double click on address in ldap results (snv)
by Pierre Mauduit 16 Dec '06

16 Dec '06

Hi, > After having taken a look to the sources, it seems to be a difficult > functionality to add : it is working for MySQL addressbook using the id > row, which obviously doesn't have sense with LDAP searches. Finally, RC offers some facilities, and I found a way to code the functionality ; since some people around here are interested in the LDAP search, here is the patch : http://pedrov.kwain.net/~pedrov/rcube/ldapsearchform_410_wcpy.diff Anyway this probably is a temporary patch, since some things are going to change with the rewrite of the LDAP module (no more iframe, etc ...), and it does not really comply with the RC code (must be a better way to do this). -- Pierre

1 0

Can't double click on address in ldap results (snv)
by Ryan Rittenhouse 16 Dec '06

16 Dec '06

Hey all, just noticed that in the svn version after you do an ldap search your can't double click on a result to jump to to compose screen w/ the email address entered. In the current beta release you can. Was this intentionally removed? Any idea how to put it back? -Ryan -- Network Administrator Goshen College (574) 535-7004

2 2

Resize Preview pane .. With the diff
by Ryan Rittenhouse 16 Dec '06

16 Dec '06

I really am batting 1000 today. Here's the diff. Going to bed. -Ryan -- Network Administrator Goshen College (574) 535-7004 =================================================================== --- program/include/main.inc (revision 408) +++ program/include/main.inc (working copy) @@ -1277,6 +1277,7 @@ // GENERAL 'loginform' => 'rcmail_login_form', 'username' => 'rcmail_current_username', + 'splitter' => 'rcube_splitter', // MAIL 'mailboxlist' => 'rcmail_mailbox_list', @@ -1912,7 +1913,19 @@ return $select->show($set); } +function rcube_splitter($attrib) + { + global $OUTPUT, $JS_OBJECT_NAME; + + // register splitter in the system + $OUTPUT->add_script(sprintf("%s.register_splitter('%s', '%s', '%s');", + $JS_OBJECT_NAME, + $attrib['first'], + $attrib['second'], + $attrib['orientation'])); + } + /****** debugging functions ********/ Index: program/js/common.js =================================================================== --- program/js/common.js (revision 408) +++ program/js/common.js (working copy) @@ -380,6 +380,170 @@ } +/** + * RoundCube splitter GUI class + * + * @constructor + */ +function rcube_splitter(attrib) + { + this.p1id = attrib.p1; + this.p2id = attrib.p2; + this.id = this.p1id + '_' + this.p2id + '_splitter'; + this.orientation = attrib.orientation; + this.horizontal = (this.orientation == 'horizontal'); + + this.init = function() + { + this.p1 = document.getElementById(this.p1id); + this.p2 = document.getElementById(this.p2id); + + // create and position the handle for this splitter + this.p1pos = rcube_get_object_pos(this.p1); + this.p2pos = rcube_get_object_pos(this.p2); + var top = this.p1pos.y + this.p1.offsetHeight; + var height = this.p2pos.y - this.p1pos.y - this.p1.offsetHeight; + var left = this.p1pos.x + this.p1.offsetWidth; + var width = this.p2pos.x - this.p1pos.x - this.p1.offsetWidth; + if (this.horizontal) + this.layer = new rcube_layer(this.id, {x: this.p1pos.x, y: top, width: this.p1.offsetWidth, height: height, zindex: 1, vis: 1}); + else + this.layer = new rcube_layer(this.id, {x: left, y: this.p1pos.y, width: width, height: this.p1.offsetHeight, zindex: 1, vis: 1}); + this.elm = this.layer.elm; + this.elm.className = 'splitter'; + if (this.horizontal) + this.elm.style.paddingTop = Math.floor(height / 2) + 'px'; + else + this.elm.style.paddingLeft = Math.floor(width / 2) + 'px'; + this.line = document.createElement('DIV'); + this.line.className = 'splitterLine'; + if (this.horizontal) + { + this.line.style.borderTopWidth = '1px'; + this.line.style.width = '100%'; + this.line.style.height = '1px'; + } + else + { + this.line.style.borderLeftWidth = '1px'; + this.line.style.width = '1px'; + this.line.style.height = '100%'; + } + + this.elm.appendChild(this.line); + rcube_event.add_listener({element: this.elm, event:'mouseover', object:this, method:'onMouseOver'}); + rcube_event.add_listener({element: this.elm, event:'mouseout', object:this, method:'onMouseOut'}); + + // add the event to start dragging when the handle is pressed + var s = this; + this.elm.onmousedown = function(e){ return s.onDragStart(e); }; + } + + this.onDragStart = function(e) + { + this.p1pos = rcube_get_object_pos(this.p1); + this.p2pos = rcube_get_object_pos(this.p2); + + // start listening to mousemove events + rcube_event.add_listener({element:document, event:'mousemove', object:this, method:'onDrag'}); + rcube_event.add_listener({element:document, event:'mouseup', object:this, method:'onDragStop'}); + + // need to listen in any iframe documents too, b/c otherwise the splitter stops moving when we move over an iframe + var iframes = document.getElementsByTagName('IFRAME'); + this.iframe_events = Object(); + for (var n in iframes) + { + if (iframes[n].contentDocument) + { + // I don't use the add_listener function for this one because I need to create closures to fetch + // the position of each iframe when the event is received + var s = this; + var id = iframes[n].id; + this.iframe_events[n] = function(e){ e._rc_pos_offset = rcube_get_object_pos(document.getElementById(id)); return s.onDrag(e); } + if (iframes[n].contentDocument.addEventListener) + iframes[n].contentDocument.addEventListener('mousemove', this.iframe_events[n], false); + else if (p.element.attachEvent) + iframes[n].contentDocument.attachEvent('onmousemove', this.iframe_events[n]); + else + iframes[n].contentDocument['onmousemove'] = this.iframe_events[n]; + + rcube_event.add_listener({element:iframes[n].contentDocument, event:'mouseup', object:this, method:'onDragStop'}); + } + } + } + + this.onDrag = function(e) + { + var pos = rcube_event.get_mouse_pos(e); + if (e._rc_pos_offset) + { + pos.x += e._rc_pos_offset.x; + pos.y += e._rc_pos_offset.y; + } + + if (this.horizontal) + { + // resize the panels + if (pos.y > this.p1pos.y && pos.y < this.p2pos.y + this.p2.offsetHeight) + { + this.p1.style.height = Math.round(pos.y - this.p1pos.y - this.layer.height / 2 - 1) + 'px'; + this.p2.style.top = Math.round(pos.y + this.layer.height / 2 + 1) + 'px'; + } + // move the splitter handle + this.layer.move(this.layer.x, Math.round(pos.y - this.layer.height / 2 + 1)); + } + else + { + if (pos.x > this.p1pos.x && pos.x < this.p2pos.x + this.p2.offsetWidth) + { + this.p1.style.width = Math.round(pos.x - this.p1pos.x - this.layer.width / 2 - 1) + 'px'; + this.p2.style.left = Math.round(pos.x + this.layer.width / 2 + 1) + 'px'; + } + this.layer.move(Math.round(pos.x - this.layer.width / 2 + 1), this.layer.y); + } + + this.p1pos = rcube_get_object_pos(this.p1); + this.p2pos = rcube_get_object_pos(this.p2); + return false; + } + + this.onDragStop = function(e) + { + // cancel the listening for drag events + rcube_event.remove_listener({element:document, event:'mousemove', object:this, method:'onDrag'}); + rcube_event.remove_listener({element:document, event:'mouseup', object:this, method:'onDragStop'}); + var iframes = document.getElementsByTagName('IFRAME'); + for (var n in iframes) + { + if (iframes[n].contentDocument) + { + if (this.iframe_events[n]) { + if (iframes[n].contentDocument.removeEventListener) + iframes[n].contentDocument.removeEventListener('mousemove', this.iframe_events[n], false); + else if (iframes[n].contentDocument.detachEvent) + iframes[n].contentDocument.detachEvent('onmousemove', this.iframe_events[n]); + else + iframes[n].contentDocument['onmousemove'] = null; + } + + rcube_event.remove_listener({element:iframes[n].contentDocument, event:'mouseup', object:this, method:'onDragStop'}); + } + } + return rcube_event.cancel(e); + } + + // events to make the handle appear when the mouse hovers over it + // (pure CSS doesn't work b/c IE only applies :hover classes to links) + this.onMouseOver = function(e) + { + this.line.style.visibility = 'visible'; + } + this.onMouseOut = function(e) + { + this.line.style.visibility = 'hidden'; + } + } + // check if input is a valid email address // By Cal Henderson <cal(a)iamcal.com> // http://code.iamcal.com/php/rfc822/ Index: program/js/app.js =================================================================== --- program/js/app.js (revision 408) +++ program/js/app.js (working copy) @@ -24,6 +24,7 @@ this.env = new Object(); this.labels = new Object(); this.buttons = new Object(); + this.splitters = new Object(); this.gui_objects = new Object(); this.commands = new Object(); @@ -78,6 +79,13 @@ }; + // add a splitter to the splitter list + this.register_splitter = function(p1, p2, orientation) + { + this.splitters[p1 + '_' + p2] = new rcube_splitter({p1: p1, p2: p2, orientation: orientation}); + } + + // register a specific gui object this.gui_object = function(name, id) { @@ -108,6 +116,10 @@ // enable general commands this.enable_command('logout', 'mail', 'addressbook', 'settings', true); + + // initialize splitters + for (var n in this.splitters) + this.splitters[n].init(); switch (this.task) { Index: skins/default/common.css =================================================================== --- skins/default/common.css (revision 408) +++ skins/default/common.css (working copy) @@ -213,7 +213,20 @@ border: 1px solid #CCCCCC; } +.splitter +{ + position: absolute; + cursor: move; +} +.splitterLine +{ + visibility: hidden; + border-color: #ff0000; + border-style: solid; + border-width: 0; +} + /***** common table settings ******/ table.records-table thead tr td Index: skins/default/templates/mail.html =================================================================== --- skins/default/templates/mail.html (revision 408) +++ skins/default/templates/mail.html (working copy) @@ -55,6 +55,7 @@ </div> <roundcube:if condition="config:preview_pane == true" /> +<roundcube:object name="splitter" first="mailcontframe" second="mailpreviewframe" orientation="horizontal" /> <div id="mailpreviewframe"> <roundcube:object name="messagecontentframe" id="messagecontframe" width="100%" height="100%" frameborder="0" src="/watermark.html" /> </div> Index: skins/default/templates/addressbook.html =================================================================== --- skins/default/templates/addressbook.html (revision 408) +++ skins/default/templates/addressbook.html (working copy) @@ -31,6 +31,8 @@ <roundcube:object name="addresslist" id="contacts-table" class="records-table" cellspacing="0" summary="Contacts list" /> </div> +<roundcube:object name="splitter" first="addresslist" second="contacts-box" orientation="vertical" />

2 1

Resize Preview pane .. for real this time
by Ryan Rittenhouse 16 Dec '06

16 Dec '06

For whatever reason, svn diff didnt spit out the diff correctly. Here's the one that works I swear :p -Ryan -- Network Administrator Goshen College (574) 535-7004

1 0

Resizable preview pane!
by Ryan Rittenhouse 16 Dec '06

16 Dec '06

A friend of mine who does development for the Caravel CMS got interested in roundcube yesterday when I was showing him the latest svn. Since I can't program my way out of a soggy paper bag with javascript I asked if he'd take a shot at making the preview pane resize able. A few hour later he threw me this diff that I've just installed and tested. Nifty stuff. I'm working on saving the size of the pane in user preferences but I wanted to get his unmodified code out here for anyone else to use/see. So here's the code to resize the preview pane courtesy of David Glick from the Caravel CMS crew. -Ryan -- Network Administrator Goshen College (574) 535-7004 Index: program/include/main.inc =================================================================== --- program/include/main.inc (revision 408) +++ program/include/main.inc (working copy) @@ -1277,6 +1277,7 @@ // GENERAL 'loginform' => 'rcmail_login_form', 'username' => 'rcmail_current_username', + 'splitter' => 'rcube_splitter', // MAIL 'mailboxlist' => 'rcmail_mailbox_list', @@ -1912,7 +1913,19 @@ return $select->show($set); } +function rcube_splitter($attrib) + { + global $OUTPUT, $JS_OBJECT_NAME; + + // register splitter in the system + $OUTPUT->add_script(sprintf("%s.register_splitter('%s', '%s', '%s');", + $JS_OBJECT_NAME, + $attrib['first'], + $attrib['second'], + $attrib['orientation'])); + } + /****** debugging functions ********/ Index: program/js/common.js =================================================================== --- program/js/common.js (revision 408) +++ program/js/common.js (working copy) } +/** + * RoundCube splitter GUI class + * + * @constructor + */ +function rcube_splitter(attrib) + { + this.p1id = attrib.p1; + this.p2id = attrib.p2; + this.id = this.p1id + '_' + this.p2id + '_splitter'; + this.orientation = attrib.orientation; + this.horizontal = (this.orientation == 'horizontal'); + + this.init = function() + { + this.p1 = document.getElementById(this.p1id); + this.p2 = document.getElementById(this.p2id); + + // create and position the handle for this splitter + this.p1pos = rcube_get_object_pos(this.p1); + this.p2pos = rcube_get_object_pos(this.p2); + var top = this.p1pos.y + this.p1.offsetHeight; + var height = this.p2pos.y - this.p1pos.y - this.p1.offsetHeight; + var left = this.p1pos.x + this.p1.offsetWidth; + var width = this.p2pos.x - this.p1pos.x - this.p1.offsetWidth; + if (this.horizontal) + this.layer = new rcube_layer(this.id, {x: this.p1pos.x, y: top, width: this.p1.offsetWidth, height: height, zindex: 1, vis: 1}); + else + this.layer = new rcube_layer(this.id, {x: left, y: this.p1pos.y, width: width, height: this.p1.offsetHeight, zindex: 1, vis: 1}); + this.elm = this.layer.elm; + this.elm.className = 'splitter'; + if (this.horizontal) + this.elm.style.paddingTop = Math.floor(height / 2) + 'px'; + else + this.elm.style.paddingLeft = Math.floor(width / 2) + 'px'; + this.line = document.createElement('DIV'); + this.line.className = 'splitterLine'; + if (this.horizontal) + { + this.line.style.borderTopWidth = '1px'; + this.line.style.width = '100%'; + this.line.style.height = '1px'; + } + else + { + this.line.style.borderLeftWidth = '1px'; + this.line.style.width = '1px'; + this.line.style.height = '100%'; + } + + this.elm.appendChild(this.line); + rcube_event.add_listener({element: this.elm, event:'mouseover', object:this, method:'onMouseOver'}); + rcube_event.add_listener({element: this.elm, event:'mouseout', object:this, method:'onMouseOut'}); + + // add the event to start dragging when the handle is pressed + var s = this; + this.elm.onmousedown = function(e){ return s.onDragStart(e); }; + } + + this.onDragStart = function(e) + { + this.p1pos = rcube_get_object_pos(this.p1); + this.p2pos = rcube_get_object_pos(this.p2); + + // start listening to mousemove events + rcube_event.add_listener({element:document, event:'mousemove', object:this, method:'onDrag'}); + rcube_event.add_listener({element:document, event:'mouseup', object:this, method:'onDragStop'}); + + // need to listen in any iframe documents too, b/c otherwise the splitter stops moving when we move over an iframe + var iframes = document.getElementsByTagName('IFRAME'); + this.iframe_events = Object(); + for (var n in iframes) + { + if (iframes[n].contentDocument) + { + // I don't use the add_listener function for this one because I need to create closures to fetch + // the position of each iframe when the event is received + var s = this; + var id = iframes[n].id; + this.iframe_events[n] = function(e){ e._rc_pos_offset = rcube_get_object_pos(document.getElementById(id)); return s.onDrag(e); } + if (iframes[n].contentDocument.addEventListener) + iframes[n].contentDocument.addEventListener('mousemove', this.iframe_events[n], false); + else if (p.element.attachEvent) + iframes[n].contentDocument.attachEvent('onmousemove', this.iframe_events[n]); + else + iframes[n].contentDocument['onmousemove'] = this.iframe_events[n]; + + rcube_event.add_listener({element:iframes[n].contentDocument, event:'mouseup', object:this, method:'onDragStop'}); + } + } + } + + this.onDrag = function(e) + { + var pos = rcube_event.get_mouse_pos(e); + if (e._rc_pos_offset) + { + pos.x += e._rc_pos_offset.x; + pos.y += e._rc_pos_offset.y; + } + + if (this.horizontal) + { + // resize the panels + if (pos.y > this.p1pos.y && pos.y < this.p2pos.y + this.p2.offsetHeight) + { + this.p1.style.height = Math.round(pos.y - this.p1pos.y - this.layer.height / 2 - 1) + 'px'; + this.p2.style.top = Math.round(pos.y + this.layer.height / 2 + 1) + 'px'; + } + // move the splitter handle + this.layer.move(this.layer.x, Math.round(pos.y - this.layer.height / 2 + 1)); + } + else + { + if (pos.x > this.p1pos.x && pos.x < this.p2pos.x + this.p2.offsetWidth) + { + this.p1.style.width = Math.round(pos.x - this.p1pos.x - this.layer.width / 2 - 1) + 'px'; + this.p2.style.left = Math.round(pos.x + this.layer.width / 2 + 1) + 'px'; + } + this.layer.move(Math.round(pos.x - this.layer.width / 2 + 1), this.layer.y); + } + + this.p1pos = rcube_get_object_pos(this.p1); + this.p2pos = rcube_get_object_pos(this.p2); + return false; + } + + this.onDragStop = function(e) + { + // cancel the listening for drag events + rcube_event.remove_listener({element:document, event:'mousemove', object:this, method:'onDrag'}); + rcube_event.remove_listener({element:document, event:'mouseup', object:this, method:'onDragStop'}); + var iframes = document.getElementsByTagName('IFRAME'); + for (var n in iframes) + { + if (iframes[n].contentDocument) + { + if (this.iframe_events[n]) { + if (iframes[n].contentDocument.removeEventListener) + iframes[n].contentDocument.removeEventListener('mousemove', this.iframe_events[n], false); + else if (iframes[n].contentDocument.detachEvent) + iframes[n].contentDocument.detachEvent('onmousemove', this.iframe_events[n]); + else + iframes[n].contentDocument['onmousemove'] = null; + } + + rcube_event.remove_listener({element:iframes[n].contentDocument, event:'mouseup', object:this, method:'onDragStop'}); + } + } + return rcube_event.cancel(e); + } + + // events to make the handle appear when the mouse hovers over it + // (pure CSS doesn't work b/c IE only applies :hover classes to links) + this.onMouseOver = function(e) + { + this.line.style.visibility = 'visible'; + } + this.onMouseOut = function(e) + { + this.line.style.visibility = 'hidden'; + } + } + // check if input is a valid email address // By Cal Henderson <cal(a)iamcal.com> // http://code.iamcal.com/php/rfc822/ Index: program/js/app.js =================================================================== --- program/js/app.js (revision 408) +++ program/js/app.js (working copy) @@ -24,6 +24,7 @@ this.env = new Object(); this.labels = new Object(); this.buttons = new Object(); + this.splitters = new Object(); this.gui_objects = new Object(); this.commands = new Object(); @@ -78,6 +79,13 @@ }; + // add a splitter to the splitter list + this.register_splitter = function(p1, p2, orientation) + { + this.splitters[p1 + '_' + p2] = new rcube_splitter({p1: p1, p2: p2, orientation: orientation}); + } + + // register a specific gui object this.gui_object = function(name, id) { @@ -108,6 +116,10 @@ // enable general commands this.enable_command('logout', 'mail', 'addressbook', 'settings', true); + + // initialize splitters + for (var n in this.splitters) + this.splitters[n].init(); switch (this.task) { Index: skins/default/common.css =================================================================== --- skins/default/common.css (revision 408) +++ skins/default/common.css (working copy) @@ -213,7 +213,20 @@ border: 1px solid #CCCCCC; } +.splitter +{ + position: absolute; + cursor: move; +} +.splitterLine +{ + visibility: hidden; + border-color: #ff0000; + border-style: solid; + border-width: 0; +} + /***** common table settings ******/ table.records-table thead tr td Index: skins/default/templates/mail.html =================================================================== --- skins/default/templates/mail.html (revision 408) +++ skins/default/templates/mail.html (working copy) @@ -55,6 +55,7 @@ </div> <roundcube:if condition="config:preview_pane == true" /> +<roundcube:object name="splitter" first="mailcontframe" second="mailpreviewframe" orientation="horizontal" /> <div id="mailpreviewframe"> <roundcube:object name="messagecontentframe" id="messagecontframe" width="100%" height="100%" frameborder="0" src="/watermark.html" /> </div> Index: skins/default/templates/addressbook.html =================================================================== --- skins/default/templates/addressbook.html (revision 408) +++ skins/default/templates/addressbook.html (working copy) @@ -31,6 +31,8 @@ <roundcube:object name="addresslist" id="contacts-table" class="records-table" cellspacing="0" summary="Contacts list" /> </div> +<roundcube:object name="splitter" first="addresslist" second="contacts-box" orientation="vertical" /> + <div id="contacts-box"> <roundcube:object name="addressframe" id="contact-frame" width="100%" height="100%" frameborder="0" src="/watermark.html" /> </div>

1 1

Quota display
by Robin Elfrink 15 Dec '06

15 Dec '06

Hi, When a message is deleted in the main page, the quota display does not get updated correctly. This patch fixes that. It's a fairly large patch for such a small problem, but that's because the object gets created by the php code on page retrieval. Please comment, and see if I overlooked something. Robin Index: program/js/app.js =================================================================== --- program/js/app.js (revision 408) +++ program/js/app.js (working copy) @@ -3025,10 +3025,14 @@ }; // replace content of quota display - this.set_quota = function(text) + this.set_quota = function() { - if (this.gui_objects.quotadisplay) - this.gui_objects.quotadisplay.innerHTML = text; + if (this.gui_objects.quotadisplay && + this.gui_objects.quotadisplay.attributes.getNamedItem('display') && + this.gui_objects.quotadisplay.attributes.getNamedItem('id')) + this.http_request('quotadisplay', '_display='+ + this.gui_objects.quotadisplay.attributes.getNamedItem('display').nodeValue+ + '&_id='+this.gui_objects.quotadisplay.attributes.getNamedItem('id').nodeValue, false); }; Index: program/steps/mail/quotadisplay.inc =================================================================== --- program/steps/mail/quotadisplay.inc (revision 0) +++ program/steps/mail/quotadisplay.inc (revision 0) @@ -0,0 +1,29 @@ +<?php + +/* + +-----------------------------------------------------------------------+ + | program/steps/mail/quotadisplay.inc | + | | + | This file is part of the RoundCube Webmail client | + | Copyright (C) 2005, RoundCube Dev. - Switzerland | + | Licensed under the GNU GPL | + | | + | PURPOSE: | + | Remote call to return the quota image or text | + | | + +-----------------------------------------------------------------------+ + | Author: Robin Elfrink <robin(a)15augustus.nl> | + +-----------------------------------------------------------------------+ + + $Id: $ + +*/ + +$display = isset($_GET['_display']) ? $_GET['_display'] : 'text'; +$id = isset($_GET['_id']) ? $_GET['_id'] : 'rcmquotadisplay'; +$quota = rcmail_quota_content($display); +$command = sprintf("this.gui_objects.%s.innerHTML = '%s';\n", $id, $quota); +rcube_remote_response($command); + +exit; +?> Index: program/steps/mail/func.inc =================================================================== --- program/steps/mail/func.inc (revision 408) +++ program/steps/mail/func.inc (working copy) @@ -634,7 +634,7 @@ function rcmail_quota_display($attrib) { - global $IMAP, $OUTPUT, $JS_OBJECT_NAME, $COMM_PATH; + global $OUTPUT, $JS_OBJECT_NAME, $COMM_PATH; if (!$attrib['id']) $attrib['id'] = 'rcmquotadisplay'; @@ -642,8 +642,19 @@ $OUTPUT->add_script(sprintf("%s.gui_object('quotadisplay', '%s');", $JS_OBJECT_NAME, $attrib['id'])); // allow the following attributes to be added to the <span> tag - $attrib_str = create_attrib_string($attrib, array('style', 'class', 'id')); + $attrib_str = create_attrib_string($attrib, array('style', 'class', 'id', 'display')); + $out = '<span' . $attrib_str . '>'; + $out .= rcmail_quota_content($attrib['display']); + $out .= '</span>'; + return $out; + } + + +function rcmail_quota_content($display) + { + global $IMAP, $COMM_PATH; + if (!$IMAP->get_capability('QUOTA')) $quota_text = rcube_label('unknown'); else if ($quota = $IMAP->get_quota()) @@ -654,9 +665,9 @@ $quota["percent"]); // show quota as image (by Brett Patterson) - if ($attrib['display'] == 'image' && function_exists('imagegif')) + if ($display == 'image' && function_exists('imagegif')) { - $attrib += array('width' => 100, 'height' => 14); + $attrib = array('width' => 100, 'height' => 14); $quota_text = sprintf('<img src="%s&_action=quotaimg&u=%s&q=%d&w=%d&h=%d" width="%d" height="%d" alt="%s" title="%s / %s" />', $COMM_PATH, $quota['used'], $quota['total'], @@ -669,12 +680,8 @@ } else $quota_text = rcube_label('unlimited'); - - $out = '<span' . $attrib_str . '>'; - $out .= $quota_text; - $out .= '</span>'; - return $out; + return $quota_text; } Index: index.php =================================================================== --- index.php (revision 408) +++ index.php (working copy) @@ -314,7 +314,10 @@ if ($_action=='quotaimg') include('program/steps/mail/quotaimg.inc'); + if ($_action=='quotadisplay') + include('program/steps/mail/quotadisplay.inc'); + // make sure the message count is refreshed $IMAP->messagecount($_SESSION['mbox'], 'ALL', TRUE); }

1 0

Next release
by Robin Elfrink 14 Dec '06

14 Dec '06

Thomas, Do you have a list with tickets that you want closed before the next release? Robin

4 4

Changing the size of the preview pane...
by Ryan Rittenhouse 14 Dec '06

14 Dec '06

Hey all, I've been bumbling around in the source for roundcube most of the day, tweaking bits of it to work with our crazy setup and people here, but I haven't been able to find where the size of the preview pane gets set. Back when it was patched in it was fairly easy to locate but now I just seem to be wondering around in circles. Is anyone able to tell me where I can change it at? Ideally to make it user configurable but either way I'd like to know :p. -Ryan -- Network Administrator Goshen College (574) 535-7004

1 1

Launched new Mailserver wit Roundcube als Webmail Client
by Stefan Novak 13 Dec '06

13 Dec '06

We have launched a mail cluster system for about 20,000 customers with Roundcube as webmail client. I want to thank all of the delevopers for the great stuff you made. Roundcube Webmail is one of the best I found, because it's fast, does not have millions of options and is very very user friendly... It is running at the Internet Service Provider Bnet in Austria (http://www.bnet.at). greetings, Stefan

1 0

Jump to page:

2024

2023

2022

2021

2020

2019

2018

2017

2016

2015

2014

2013

2012

2011

2010

2009

2008

2007

2006

2005

Dev