diff options
Diffstat (limited to 'skins')
43 files changed, 848 insertions, 197 deletions
diff --git a/skins/classic/addressbook.css b/skins/classic/addressbook.css index 9575ae25f..2fcb1715a 100644 --- a/skins/classic/addressbook.css +++ b/skins/classic/addressbook.css @@ -224,6 +224,24 @@ -o-text-overflow: ellipsis; } +/* This padding-left should be equal to the focused border-left + the focused padding-left */ +#contacts-table thead tr td:first-child, +#contacts-table tbody tr td:first-child { + border-left: 0; + padding-left: 8px; +} + +/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */ +#contacts-table tbody tr.focused > td:first-child { + border-left: 2px solid #d4d4d4; + padding-left: 6px; +} + +#contacts-table tbody tr.selected.focused > td:first-child { + border-left: 1px solid #ccc; + padding-left: 7px; +} + #contacts-table .contact.readonly td { font-style: italic; diff --git a/skins/classic/common.css b/skins/classic/common.css index 3c322f0ed..10bc91c09 100644 --- a/skins/classic/common.css +++ b/skins/classic/common.css @@ -483,6 +483,9 @@ body.iframe .boxtitle top: 32px; left: 90px; width: auto; + max-height: 70%; + overflow: -moz-scrollbars-vertical; + overflow-y: auto; display: none; background-color: #fff; background-color: rgba(255, 255, 255, 0.95); @@ -511,16 +514,25 @@ body.iframe .boxtitle margin: 3px -4px; } -.popupmenu li a +.popupmenu li a, +.popupmenu li label { display: block; color: #a0a0a0; - padding: 2px 10px; + padding: 2px 16px 2px 10px; text-decoration: none; min-height: 14px; background: transparent; } +.popupmenu li label.comment +{ + color: #999; + font-style: italic; + padding-top: 4px; + padding-bottom: 3px; +} + .popupmenu li a.active, .popupmenu li a.active:active, .popupmenu li a.active:visited @@ -704,6 +716,24 @@ ul.treelist li div.expanded outline: none; } +.propform div.prop +{ + margin-bottom: 0.5em; +} + +.propform div.prop.block label +{ + display: block; + margin-bottom: 2px; +} + +.propform div.prop.block input, +.propform div.prop.block textarea +{ + width: 97%; +} + + /***** roundcube webmail pre-defined classes *****/ #rcmversion @@ -935,6 +965,57 @@ ul.toolbarmenu li.separator_above } +/*** folder selector ***/ + +#folder-selector li a +{ + padding: 0; +} + +#folder-selector li a span +{ + background: url(images/icons/folders.png) no-repeat 6px 0; + display: block; + height: 15px; + min-height: 14px; + padding: 2px 4px 2px 28px; + overflow: hidden; + max-width: 120px; + text-overflow: ellipsis; +} + +#folder-selector li a.virtual +{ + color: #A0A0A0; +} + +#folder-selector li a.active:hover span +{ + color: white; +} + +#folder-selector li a.inbox span +{ + background-position: 6px -18px; +} +#folder-selector li a.drafts span +{ + background-position: 6px -37px; +} +#folder-selector li a.sent span +{ + background-position: 6px -54px; +} +#folder-selector li a.trash span +{ + background-position: 6px -91px; +} +#folder-selector li a.junk span +{ + background-position: 6px -73px; +} + + /***** tabbed interface elements *****/ div.tabsbar, diff --git a/skins/classic/functions.js b/skins/classic/functions.js index 4ad13136f..049e4d5d4 100644 --- a/skins/classic/functions.js +++ b/skins/classic/functions.js @@ -419,6 +419,7 @@ body_mouseup: function(evt, p) && !this.popups[i].toggle && (!this.popups[i].editable || !this.target_overlaps(target, this.popups[i].id)) && (!this.popups[i].sticky || !rcube_mouse_is_over(evt, rcube_find_object(this.popups[i].id))) + && !$(target).is('.folder-selector-link') && !$(target).children('.folder-selector-link').length ) { window.setTimeout('rcmail_ui.show_popup("'+i+'",false);', 50); } @@ -625,7 +626,7 @@ prev_sibling: function(elm) enable_command: function(p) { - if (p.command == 'reply-list') { + if (p.command == 'reply-list' && rcmail.env.reply_all_mode == 1) { var label = rcmail.gettext(p.status ? 'replylist' : 'replyall'); $('a.button.replyAll').attr('title', label); } @@ -975,8 +976,6 @@ function rcube_init_mail_ui() rcmail.addEventListener('responseaftercheck-recent', rcube_render_mailboxlist); rcmail.addEventListener('responseafterrefresh', rcube_render_mailboxlist); rcmail.addEventListener('afterimport-messages', function(){ rcmail_ui.show_popup('uploadform', false); }); - - new rcmail_scroller('#mailboxlist-content', '#mailboxlist-title', '#mailboxlist-footer'); } if (rcmail.env.action == 'compose') @@ -984,15 +983,12 @@ function rcube_init_mail_ui() else if (rcmail.env.action == 'show' || rcmail.env.action == 'preview') // add menu link for each attachment $('#attachment-list > li[id^="attach"]').each(function() { - $(this).append($('<a class="drop">').click(function() { rcmail_ui.show_attachmentmenu(this); })); + $(this).append($('<a class="drop"></a>').click(function() { rcmail_ui.show_attachmentmenu(this); })); }); } else if (rcmail.env.task == 'addressbook') { rcmail.addEventListener('afterupload-photo', function(){ rcmail_ui.show_popup('uploadform', false); }); - if (rcmail.gui_objects.folderlist) - new rcmail_scroller('#directorylist-content', '#directorylist-title', '#directorylist-footer'); - rcmail.gui_object('dragmenu', 'dragmenu'); } else if (rcmail.env.task == 'settings') { diff --git a/skins/classic/images/icons/folders.gif b/skins/classic/images/icons/folders.gif Binary files differindex eb06bd8c1..279519496 100644 --- a/skins/classic/images/icons/folders.gif +++ b/skins/classic/images/icons/folders.gif diff --git a/skins/classic/images/icons/folders.png b/skins/classic/images/icons/folders.png Binary files differindex 4c27052a5..92432521c 100644 --- a/skins/classic/images/icons/folders.png +++ b/skins/classic/images/icons/folders.png diff --git a/skins/classic/images/mail_toolbar.png b/skins/classic/images/mail_toolbar.png Binary files differindex 4a8431715..3ef003f23 100644 --- a/skins/classic/images/mail_toolbar.png +++ b/skins/classic/images/mail_toolbar.png diff --git a/skins/classic/includes/messagetoolbar.html b/skins/classic/includes/messagetoolbar.html index 8f8efd291..8d98c7e42 100644 --- a/skins/classic/includes/messagetoolbar.html +++ b/skins/classic/includes/messagetoolbar.html @@ -20,9 +20,6 @@ <roundcube:container name="toolbar" id="messagetoolbar" /> <roundcube:button name="markmenulink" id="markmenulink" type="link" class="button markmessage" title="markmessages" onclick="rcmail_ui.show_popup('markmenu');return false" content=" " /> <roundcube:button name="messagemenulink" id="messagemenulink" type="link" class="button messagemenu" title="moreactions" onclick="rcmail_ui.show_popup('messagemenu');return false" content=" " /> -<roundcube:if condition="template:name == 'message'" /> -<roundcube:object name="mailboxlist" type="select" noSelection="moveto" maxlength="25" onchange="rcmail.command('move', this.options[this.selectedIndex].value)" class="mboxlist" folder_filter="mail" /> -<roundcube:endif /> </div> <div id="forwardmenu" class="popupmenu"> @@ -46,6 +43,8 @@ <li><roundcube:button class="printlink" command="print" label="printmessage" classAct="printlink active" /></li> <li><roundcube:button class="downloadlink" command="download" label="emlsave" classAct="downloadlink active" /></li> <li><roundcube:button class="editlink" command="edit" prop="new" label="editasnew" classAct="editlink active" /></li> + <li><roundcube:button class="movelink" command="move" label="moveto" classAct="copylink active" innerclass="folder-selector-link" /></li> + <li><roundcube:button class="copylink" command="copy" label="copyto" classAct="movelink active" innerclass="folder-selector-link" /></li> <li class="separator_below"><roundcube:button class="sourcelink" command="viewsource" label="viewsource" classAct="sourcelink active" /></li> <li><roundcube:button class="openlink" command="open" label="openinextwin" target="_blank" classAct="openlink active" /></li> <roundcube:container name="messagemenu" id="messagemenu" /> diff --git a/skins/classic/mail.css b/skins/classic/mail.css index 43367749c..f5406b591 100644 --- a/skins/classic/mail.css +++ b/skins/classic/mail.css @@ -171,21 +171,8 @@ background-position: -480px -32px; } -#messagetoolbar select.mboxlist -{ - position: relative; - margin: 0 8px; - top: 7px; -} - -#messagetoolbar select.mboxlist option -{ - padding-left: 15px; -} - -#messagetoolbar select.mboxlist option[value=""] -{ - padding-left: 2px; +#messagetoolbar a.responses { + background-position: -512px 0; } #messagemenu li a.active:hover, @@ -408,38 +395,42 @@ display: block; position: relative; font-size: 11px; - background: url(images/icons/folders.png) 5px 0 no-repeat; border-bottom: 1px solid #EBEBEB; } #mailboxlist li ul li:last-child { - border-bottom: none; + border-bottom: 0 none; } -#mailboxlist li.inbox +#mailboxlist li.inbox a { background-position: 5px -18px; } -#mailboxlist li.drafts +#mailboxlist li.drafts a { background-position: 5px -37px; } -#mailboxlist li.sent +#mailboxlist li.sent a { background-position: 5px -54px; } -#mailboxlist li.junk +#mailboxlist li.junk a { background-position: 5px -73px; } -#mailboxlist li.trash +#mailboxlist li.trash a { - background-position: 5px -91px; + background-position: 5px -180px; +} + +#mailboxlist li.trash.empty a +{ + background-position: 5px -90px; } #mailboxlist li a @@ -452,6 +443,7 @@ padding-bottom: 2px; text-decoration: none; height: 15px; + background: url(images/icons/folders.png) 5px 0 no-repeat; } #mailboxlist li.unread @@ -493,13 +485,50 @@ padding: 0; margin: 0; border-top: 1px solid #EBEBEB; - padding-left: 15px; - background-position: 25px 1px; background-color: #FFF; - color: blue; font-weight: normal; } +#mailboxlist li.mailbox ul li a { + padding-left: 40px; /* 24 + 1 x 16 */ + background-position: 20px 0; /* 4 + 1 x 16 */ +} +#mailboxlist li.mailbox ul li div.treetoggle { + left: 23px !important; +} + +#mailboxlist li.mailbox ul ul li.mailbox a { + padding-left: 56px; /* 2x */ + background-position: 36px 0; +} +#mailboxlist li.mailbox ul ul li div.treetoggle { + left: 39px !important; +} + +#mailboxlist li.mailbox ul ul ul li.mailbox a { + padding-left: 72px; /* 3x */ + background-position: 52px 0; +} +#mailboxlist li.mailbox ul ul ul li div.treetoggle { + left: 55px !important; +} + +#mailboxlist li.mailbox ul ul ul ul li.mailbox a { + padding-left: 88px; /* 4x */ + background-position: 68px 0; +} +#mailboxlist li.mailbox ul ul ul ul li div.treetoggle { + left: 71px !important; +} + +/* indent folders on levels > 4 */ +#mailboxlist li.mailbox ul ul ul ul ul li { + padding-left: 16px; +} +#mailboxlist li.mailbox ul ul ul ul ul li div.treetoggle { + left: 87px !important; +} + #listcontrols { position: relative; @@ -933,7 +962,7 @@ table.messagelist.fixedcopy .messagelist tr td.date { - width: 118px; + width: 135px; padding: 0 2px; } @@ -954,6 +983,24 @@ table.messagelist.fixedcopy color: #CC0000; } +/* This padding-left minus the focused padding left should be half of the focused border-left */ +.messagelist thead tr td:first-child, +.messagelist tbody tr td:first-child { + border-left: 0; + padding-left: 6px; +} + +/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */ +.messagelist tbody tr.focused > td:first-child { + border-left: 4px solid #d4d4d4; + padding-left: 4px; +} + +.messagelist tbody tr.selected.focused > td:first-child { + border-left: 2px solid #ccc; + padding-left: 5px; +} + .messagelist tr.selected td { color: #FFFFFF; @@ -985,6 +1032,7 @@ table.messagelist.fixedcopy #listmenu { padding: 6px; + max-height: none; } #listmenu legend diff --git a/skins/classic/settings.css b/skins/classic/settings.css index 2433f5040..acd0b9fd0 100644 --- a/skins/classic/settings.css +++ b/skins/classic/settings.css @@ -34,6 +34,11 @@ height: 18px; } +#identities-table tbody tr.readonly td +{ + font-style: italic; +} + #subscription-table tr.virtual td { color: #666; @@ -81,6 +86,7 @@ } #identity-details table td.title, +#response-details table td.title, #folder-details table td.title { font-weight: bold; @@ -89,6 +95,14 @@ white-space: nowrap; } +#response-details table td.title +{ + text-align: left; + vertical-align: top; + width: 140px; + padding-top: 5px; +} + #bottomboxes { position: absolute; @@ -149,6 +163,12 @@ body.iframe, float: right; } +#formfooter .footerindent +{ + padding: 10px 0; + margin-left: 155px; +} + #quota { position: absolute; diff --git a/skins/classic/splitter.js b/skins/classic/splitter.js index 72ada5719..cec6a4713 100644 --- a/skins/classic/splitter.js +++ b/skins/classic/splitter.js @@ -17,6 +17,8 @@ function rcube_splitter(attrib) this.drag_active = false; this.callback = attrib.callback; + var me = this; + this.init = function() { this.p1 = document.getElementById(this.p1id); @@ -42,9 +44,9 @@ function rcube_splitter(attrib) this.elm.unselectable = 'on'; // add the mouse event listeners - rcube_event.add_listener({element: this.elm, event:'mousedown', object:this, method:'onDragStart'}); + $(this.elm).mousedown(onDragStart); if (bw.ie) - rcube_event.add_listener({element: window, event:'resize', object:this, method:'onResize'}); + $(window).resize(onResize); // read saved position from cookie var cookie = rcmail.get_cookie(this.id); @@ -90,19 +92,19 @@ function rcube_splitter(attrib) /** * Handler for mousedown events */ - this.onDragStart = function(e) + function onDragStart(e) { + me.drag_active = true; + // disable text selection while dragging the splitter if (bw.konq || bw.chrome || bw.safari) document.body.style.webkitUserSelect = 'none'; - this.p1pos = this.relative ? $(this.p1).position() : $(this.p1).offset(); - this.p2pos = this.relative ? $(this.p2).position() : $(this.p2).offset(); - this.drag_active = true; + me.p1pos = me.relative ? $(me.p1).position() : $(me.p1).offset(); + me.p2pos = me.relative ? $(me.p2).position() : $(me.p2).offset(); // 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'}); + $(document).bind('mousemove.'+me.id, onDrag).bind('mouseup.'+me.id, onDragStop); // enable dragging above iframes $('iframe').each(function() { @@ -119,59 +121,64 @@ function rcube_splitter(attrib) /** * Handler for mousemove events */ - this.onDrag = function(e) + function onDrag(e) { - if (!this.drag_active) + if (!me.drag_active) return false; + // with timing events dragging action is more responsive + window.clearTimeout(me.ts); + me.ts = window.setTimeout(function() { onDragAction(e); }, 1); + + return false; + }; + + function onDragAction(e) + { var pos = rcube_event.get_mouse_pos(e); - if (this.relative) { - var parent = $(this.p1.parentNode).offset(); + if (me.relative) { + var parent = $(me.p1.parentNode).offset(); pos.x -= parent.left; pos.y -= parent.top; } - if (this.horizontal) { - if (((pos.y - this.layer.height * 1.5) > this.p1pos.top) && ((pos.y + this.layer.height * 1.5) < (this.p2pos.top + this.p2.offsetHeight))) { - this.pos = pos.y; - this.resize(); + if (me.horizontal) { + if (((pos.y - me.layer.height * 1.5) > me.p1pos.top) && ((pos.y + me.layer.height * 1.5) < (me.p2pos.top + me.p2.offsetHeight))) { + me.pos = pos.y; + me.resize(); } } - else { - if (((pos.x - this.layer.width * 1.5) > this.p1pos.left) && ((pos.x + this.layer.width * 1.5) < (this.p2pos.left + this.p2.offsetWidth))) { - this.pos = pos.x; - this.resize(); - } + else if (((pos.x - me.layer.width * 1.5) > me.p1pos.left) && ((pos.x + me.layer.width * 1.5) < (me.p2pos.left + me.p2.offsetWidth))) { + me.pos = pos.x; + me.resize(); } - this.p1pos = this.relative ? $(this.p1).position() : $(this.p1).offset(); - this.p2pos = this.relative ? $(this.p2).position() : $(this.p2).offset(); - - return false; + me.p1pos = me.relative ? $(me.p1).position() : $(me.p1).offset(); + me.p2pos = me.relative ? $(me.p2).position() : $(me.p2).offset(); }; /** * Handler for mouseup events */ - this.onDragStop = function(e) + function onDragStop(e) { + me.drag_active = false; + // resume the ability to highlight text if (bw.konq || bw.chrome || bw.safari) document.body.style.webkitUserSelect = 'auto'; // 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'}); - this.drag_active = false; + $(document).unbind('.' + me.id); // remove temp divs - $('div.iframe-splitter-fix').each(function() { this.parentNode.removeChild(this); }); + $('div.iframe-splitter-fix').remove(); - this.set_cookie(); + me.set_cookie(); - if (typeof this.callback == 'function') - this.callback(this); + if (typeof me.callback == 'function') + me.callback(me); return bw.safari ? true : rcube_event.cancel(e); }; @@ -179,15 +186,15 @@ function rcube_splitter(attrib) /** * Handler for window resize events */ - this.onResize = function(e) + function onResize(e) { - if (this.horizontal) { - var new_height = parseInt(this.p2.parentNode.offsetHeight, 10) - parseInt(this.p2.style.top, 10) - (bw.ie8 ? 2 : 0); - this.p2.style.height = (new_height > 0 ? new_height : 0) +'px'; + if (me.horizontal) { + var new_height = parseInt(me.p2.parentNode.offsetHeight, 10) - parseInt(me.p2.style.top, 10) - (bw.ie8 ? 2 : 0); + me.p2.style.height = (new_height > 0 ? new_height : 0) +'px'; } else { - var new_width = parseInt(this.p2.parentNode.offsetWidth, 10) - parseInt(this.p2.style.left, 10); - this.p2.style.width = (new_width > 0 ? new_width : 0) + 'px'; + var new_width = parseInt(me.p2.parentNode.offsetWidth, 10) - parseInt(me.p2.style.left, 10); + me.p2.style.width = (new_width > 0 ? new_width : 0) + 'px'; } }; diff --git a/skins/classic/templates/compose.html b/skins/classic/templates/compose.html index 7d8aa1e43..74d25778b 100644 --- a/skins/classic/templates/compose.html +++ b/skins/classic/templates/compose.html @@ -40,6 +40,7 @@ <span id="spellmenulink" onclick="rcmail_ui.show_popup('spellmenu');return false"></span> </span> <roundcube:endif /> + <a href="#responses" class="button responses" label="responses" title="<roundcube:label name='insertresponse' />" id="responsesmenulink" unselectable="on" onmousedown="return false" onclick="rcmail_ui.show_popup('responsesmenu');return false"> </a> <roundcube:container name="toolbar" id="compose-toolbar" /> <roundcube:button name="messageoptions" id="composemenulink" type="link" class="button messagemenu" title="messageoptions" onclick="rcmail_ui.show_popup('composemenu', true);return false" content=" " /> </div> @@ -198,6 +199,16 @@ </table> </div> +<div id="responsesmenu" class="popupmenu"> + <ul id="textresponsesmenu"> + <li><label class="comment"><roundcube:label name="insertresponse" /></label></li> + <roundcube:object name="responseslist" id="responseslist" tagname="ul" itemclass="active" /> + <li><label class="comment"><roundcube:label name="manageresponses" /></label></li> + <li><roundcube:button command="save-response" type="link" label="savenewresponse" classAct="active" unselectable="on" /></li> + <li><roundcube:button command="responses" type="link" label="editresponses" classAct="active" /></li> + </ul> +</div> + <div id="spellmenu" class="popupmenu selectable"></div> </form> diff --git a/skins/classic/templates/message.html b/skins/classic/templates/message.html index bd4fbf277..3ab0a2e5e 100644 --- a/skins/classic/templates/message.html +++ b/skins/classic/templates/message.html @@ -30,11 +30,13 @@ <div id="mailboxlist-container"> <div id="mailboxlist-title" class="boxtitle"><roundcube:label name="mailboxlist" /></div> <div class="boxlistcontent"> - <roundcube:object name="mailboxlist" id="mailboxlist" class="treelist" maxlength="25" /> + <roundcube:object name="mailboxlist" id="mailboxlist" class="treelist" folder_filter="mail" /> </div> <div class="boxfooter"></div> </div> </div> +<roundcube:else /> +<roundcube:object name="mailboxlist" folder_filter="mail" type="js" /> <roundcube:endif /> <div id="messageframe"> diff --git a/skins/classic/templates/responseedit.html b/skins/classic/templates/responseedit.html new file mode 100644 index 000000000..67ba35bac --- /dev/null +++ b/skins/classic/templates/responseedit.html @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title><roundcube:object name="pagetitle" /></title> +<roundcube:include file="/includes/links.html" /> +<script type="text/javascript" src="/functions.js"></script> + +</head> +<body class="iframe"> + +<div id="prefs-title" class="boxtitle"><roundcube:object name="steptitle" /></div> + +<div id="response-details" class="boxcontent"> + <roundcube:object name="responseform" class="propform" size="60" textareacols="60" textarearows="18" /> + + <div id="formfooter"> + <div class="footerindent"> + <roundcube:button command="save" type="input" class="button mainaction" label="save" condition="!env:readonly" /> + </div> + </div> +</div> + +</body> +</html> diff --git a/skins/classic/templates/responses.html b/skins/classic/templates/responses.html new file mode 100644 index 000000000..2459827b0 --- /dev/null +++ b/skins/classic/templates/responses.html @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title><roundcube:object name="pagetitle" /></title> +<roundcube:include file="/includes/links.html" /> +<script type="text/javascript" src="/functions.js"></script> +<script type="text/javascript" src="/splitter.js"></script> +<style type="text/css"> +#identities-list { width: <roundcube:exp expression="!empty(cookie:identviewsplitter) ? cookie:identviewsplitter-5 : 295" />px; } +#identity-box { left: <roundcube:exp expression="!empty(cookie:identviewsplitter) ? cookie:identviewsplitter+5 : 305" />px; + <roundcube:exp expression="browser:ie ? ('width:expression((parseInt(this.parentNode.offsetWidth)-'.(!empty(cookie:identviewsplitter) ? cookie:identviewsplitter+5 : 305).')+\\'px\\');') : ''" /> +} +</style> + +</head> +<body> + +<roundcube:include file="/includes/taskbar.html" /> +<roundcube:include file="/includes/header.html" /> +<roundcube:include file="/includes/settingstabs.html" /> + +<div id="mainscreen"> + +<div id="identities-list"> +<div id="identity-title" class="boxtitle"><roundcube:label name="responses" /></div> +<div class="boxlistcontent"> +<roundcube:object name="responsesList" id="identities-table" class="records-table" cellspacing="0" summary="Responses list" noheader="true" editIcon="" /> +</div> +<div class="boxfooter"> +<roundcube:button command="add" type="link" title="newidentity" class="buttonPas addgroup" classAct="button addgroup" content=" " condition="config:identities_level:0<2" /><roundcube:button command="delete" type="link" title="delete" class="buttonPas delgroup" classAct="button delgroup" content=" " condition="config:identities_level:0<2" /> +</div> +</div> + +<script type="text/javascript"> + var identviewsplit = new rcube_splitter({id:'identviewsplitter', p1: 'identities-list', p2: 'identity-box', orientation: 'v', relative: true, start: 300 }); + rcmail.add_onload('identviewsplit.init()'); +</script> + +<div id="identity-box"> + <roundcube:object name="responseframe" id="identity-frame" width="100%" height="100%" frameborder="0" src="/watermark.html" /> +</div> + +</div> + +</body> +</html> diff --git a/skins/larry/addressbook.css b/skins/larry/addressbook.css index 39d0cce21..54a14da0b 100644 --- a/skins/larry/addressbook.css +++ b/skins/larry/addressbook.css @@ -149,26 +149,59 @@ background: url(images/listicons.png) -2px -1180px no-repeat; } +/* This padding-left should be equal to the focused border-left + the focused padding-left */ +#contacts-table thead tr td:first-child, +#contacts-table tbody tr td:first-child { + border-left: 0; + padding-left: 36px; +} + +/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */ +#contacts-table tbody tr.focused > td:first-child { + border-left: 2px solid #b0ccd7; + padding-left: 34px; +} + +#contacts-table tbody tr.selected.focused > td:first-child { + border-left-color: #9ec2d0; +} + #contacts-table .contact td.name { background-position: 6px -1603px; } +#contacts-table .contact.focused td.name { + background-position: 4px -1603px; +} + #contacts-table .contact.selected td.name, #contacts-table .contact.unfocused td.name { background-position: 6px -1627px; font-weight: bold; } +#contacts-table .contact.selected.focused td.name { + background-position: 4px -1627px; +} + #contacts-table .group td.name { background-position: 6px -1555px; } +#contacts-table .group.focused td.name { + background-position: 4px -1555px; +} + #contacts-table .group.selected td.name, #contacts-table .group.unfocused td.name { background-position: 6px -1579px; font-weight: bold; } +#contacts-table .group.selected.focused td.name { + background-position: 4px -1579px; +} + #addresslist .boxtitle { padding-right: 95px; overflow: hidden; @@ -187,7 +220,7 @@ top: 0; left: 0; right: 0; - bottom: 28px; + bottom: 0px; border: 0; border-radius: 4px; } @@ -380,7 +413,7 @@ a.deletebutton { #import-box { position: absolute; - bottom: 28px; + bottom: 0px; top: 34px; left: 0; right: 0; diff --git a/skins/larry/ie7hacks.css b/skins/larry/ie7hacks.css index fc4713361..60adff7a1 100644 --- a/skins/larry/ie7hacks.css +++ b/skins/larry/ie7hacks.css @@ -43,7 +43,8 @@ a.deletebutton, .attachmentslist li a.cancelupload, #contacts-table td.action a, .previewheader .iconlink, -.minimal #taskbar .button-inner { +.minimal #taskbar .button-inner, +#preferences-details fieldset.advanced .advanced-toggle { /* workaround for text-indent which also offsets the background image */ text-indent: 0; font-size: 0; diff --git a/skins/larry/iehacks.css b/skins/larry/iehacks.css index 960ce7648..7c1585107 100644 --- a/skins/larry/iehacks.css +++ b/skins/larry/iehacks.css @@ -56,6 +56,10 @@ input.button:active { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaeaea', endColorstr='#c8c8c8', GradientType=0); } +#messagestack div { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0404040', endColorstr='#e0303030', GradientType=0); +} + .ui-dialog.popupmessage .ui-dialog-titlebar { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e3e3e3', endColorstr='#cfcfcf', GradientType=0); } diff --git a/skins/larry/images/ajaxloader_dark.gif b/skins/larry/images/ajaxloader_dark.gif Binary files differnew file mode 100644 index 000000000..f1cce35ac --- /dev/null +++ b/skins/larry/images/ajaxloader_dark.gif diff --git a/skins/larry/images/buttons.png b/skins/larry/images/buttons.png Binary files differindex 9f8f44536..8e2560198 100644 --- a/skins/larry/images/buttons.png +++ b/skins/larry/images/buttons.png diff --git a/skins/larry/images/filetypes.png b/skins/larry/images/filetypes.png Binary files differindex 53b2eee9a..09772660b 100644 --- a/skins/larry/images/filetypes.png +++ b/skins/larry/images/filetypes.png diff --git a/skins/larry/images/listicons.png b/skins/larry/images/listicons.png Binary files differindex e4ffef660..5abbbb229 100644 --- a/skins/larry/images/listicons.png +++ b/skins/larry/images/listicons.png diff --git a/skins/larry/images/messages_dark.png b/skins/larry/images/messages_dark.png Binary files differnew file mode 100644 index 000000000..d7c932502 --- /dev/null +++ b/skins/larry/images/messages_dark.png diff --git a/skins/larry/includes/footer.html b/skins/larry/includes/footer.html index a4fa69296..5cf9d1ec5 100644 --- a/skins/larry/includes/footer.html +++ b/skins/larry/includes/footer.html @@ -1,3 +1,5 @@ +<roundcube:object name="message" id="messagestack" condition="env:task != 'login'" /> + <script type="text/javascript"> // UI startup diff --git a/skins/larry/includes/mailtoolbar.html b/skins/larry/includes/mailtoolbar.html index 59f2d581a..5708a94f1 100644 --- a/skins/larry/includes/mailtoolbar.html +++ b/skins/larry/includes/mailtoolbar.html @@ -39,6 +39,8 @@ <li><roundcube:button command="download" label="emlsave" class="icon" classAct="icon active" innerclass="icon download" /></li> <li><roundcube:button command="edit" prop="new" label="editasnew" class="icon" classAct="icon active" innerclass="icon edit" /></li> <li><roundcube:button command="viewsource" label="viewsource" class="icon" classAct="icon active" innerclass="icon viewsource" /></li> + <li><roundcube:button command="move" label="moveto" class="icon" classAct="icon active" innerclass="icon move folder-selector-link" /></li> + <li><roundcube:button command="copy" label="copyto" class="icon" classAct="icon active" innerclass="icon copy folder-selector-link" /></li> <li><roundcube:button command="open" label="openinextwin" target="_blank" class="icon" classAct="icon active" innerclass="icon extwin" /></li> <roundcube:container name="messagemenu" id="messagemenu" /> </ul> diff --git a/skins/larry/mail.css b/skins/larry/mail.css index 3c7242b4f..35d79d184 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -36,20 +36,17 @@ position: absolute; top: 42px; left: 0; - width: 100%; - bottom: 28px; -} - -#mailview-top.fullheight { - border-radius: 4px 4px 0 0; + right: 0; + bottom: 0px; } #mailview-bottom { + display: none; position: absolute; left: 0; bottom: 0; - width: 100%; - height: 27px; + right: 0; + height: 0; border-radius: 4px; border-top: none; } @@ -58,12 +55,6 @@ border-radius: 0 0 4px 4px; } -#folderlist-header { - width: 100%; - height: 12px; - top: 32px; -} - #mailboxcontainer, #messagelistcontainer { position: absolute; @@ -102,10 +93,6 @@ html>/**/body #messagelist { border-radius: 0 0 4px 4px; } -#mailview-top.fullheight #messagelistfooter { - border-radius: 0; -} - #messagelistfooter.rightalign { text-align: right; } @@ -424,12 +411,6 @@ a.iconbutton.threadmode.selected { right: 0; } -#messagetoolbar .toolbarselect { - position: absolute; - bottom: 6px; - right: 3px; -} - #messagesearchtools { position: absolute; right: 0; @@ -453,11 +434,6 @@ a.iconbutton.threadmode.selected { /*** message list ***/ -/* this is necessary to make FF3 display borders */ -body:-moz-last-node #messagelist { - border-collapse: separate; -} - table.messagelist { z-index: 1; } @@ -518,6 +494,10 @@ table.messagelist.fixedcopy { } .messagelist tr td.date { + width: 155px; +} + +.messagelist tr td.folder { width: 135px; } @@ -629,6 +609,10 @@ table.messagelist.fixedcopy { background-position: -24px -1116px; } +.messagelist thead tr td.priority span.priority { + background-position: -24px -1845px; +} + .messagelist tr td.priority span.prio5 { background-position: 0 -1905px; } @@ -650,7 +634,7 @@ table.messagelist.fixedcopy { } .messagelist thead tr td.flag span.flagged { - background-position: -24px -1036px; + background-position: -22px -1036px; } .messagelist tr td.status span.msgicon:hover { @@ -704,7 +688,7 @@ table.messagelist.fixedcopy { } .messagelist thead tr td.status span.status { - background-position: -24px -1016px; + background-position: -23px -1017px; } .messagelist tr td div.collapsed { @@ -761,7 +745,7 @@ table.messagelist.fixedcopy { top: 0; left: 0; width: 100%; - bottom: 28px; + bottom: 0px; } #messagecontframe { @@ -774,8 +758,9 @@ table.messagelist.fixedcopy { top: 110px; left: 0; width: 100%; - bottom: 27px; + bottom: 1px; overflow: auto; + -webkit-overflow-scrolling: touch; } #messageheader, @@ -1374,10 +1359,8 @@ div.message-partheaders .headers-table td.header { position: absolute; top: 42px; left: 0; - width: 100%; - bottom: 28px; - border-radius: 4px 4px 0 0; - border-bottom: none; + right: 0; + bottom: 0px; overflow: hidden; } @@ -1498,6 +1481,7 @@ div.message-partheaders .headers-table td.header { left: 0; right: 260px; bottom: 0; + border-radius: 0 0 0 4px; } #composebodycontainer.buttons { @@ -1511,7 +1495,7 @@ div.message-partheaders .headers-table td.header { bottom: 0; width: 99%; border: 0; - border-radius: 0; + border-radius: 0 0 0 4px; padding: 8px 0 8px 8px; resize: none; font-family: monospace; diff --git a/skins/larry/settings.css b/skins/larry/settings.css index 6afa48c40..af667b9e7 100644 --- a/skins/larry/settings.css +++ b/skins/larry/settings.css @@ -2,7 +2,7 @@ * Roundcube webmail styles for the Settings section * * Copyright (c) 2012, The Roundcube Dev Team - * Screendesign by FLINT / Büro für Gestaltung, bueroflint.com + * Screendesign by FLINT / Büro für Gestaltung, bueroflint.com * * The contents are subject to the Creative Commons Attribution-ShareAlike * License. It is allowed to copy, distribute, transmit and to adapt the work @@ -61,11 +61,21 @@ #preferences-details fieldset.advanced .advanced-toggle { position: absolute; - top: 2px; + display: block; + top: 0px; right: 6px; text-decoration: none; color: #666; font-size: 11px; + width: 20px; + height: 18px; + background: url('images/listicons.png') 0 -1157px no-repeat; + text-indent: 1000px; + overflow: hidden; +} + +#preferences-details fieldset.advanced .collapsed .advanced-toggle { + background-position: -24px -1137px; } #sections-table tbody td.section, @@ -130,6 +140,14 @@ background-position: 6px -1819px; } +#settings-sections span.responses a { + background-position: 6px -1972px; +} + +#settings-sections span.responses.selected a { + background-position: 6px -1996px; +} + #sections-table #rcmrowgeneral td.section { background-position: 6px -573px; } @@ -206,6 +224,10 @@ text-overflow: ellipsis; } +#identities-table tbody tr.readonly td { + font-style: italic; +} + #folder-details, #identity-details { position: absolute; diff --git a/skins/larry/styles.css b/skins/larry/styles.css index 4b238c163..21d93c106 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -509,6 +509,7 @@ a.iconlink.upload { } #message.statusbar { + display: none; position: absolute; bottom: 0; left: 0; @@ -528,6 +529,102 @@ a.iconlink.upload { text-overflow: ellipsis; } +#messagestack { + position: absolute; + bottom: 20px; + right: 12px; + z-index: 50000; + width: auto; + height: auto; + max-height: 85%; + overflow-y: auto; + padding: 2px; +} + +#messagestack div { + display: block; + position: relative; + width: 280px; + height: auto; + min-height: 16px; + margin: 3px 2px 5px 2px; + padding: 8px 10px 7px 30px; + cursor: default; + font-size: 12px; + font-weight: bold; + border-radius: 4px; + border: 1px solid #444; + color: #ebebeb; + text-shadow: 0 1px 1px #000; + + background: rgba(64,64,64,0.85); + background: -moz-linear-gradient(top, rgba(64,64,64,0.85) 0%, rgba(48,48,48,0.9) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(64,64,64,0.85)), color-stop(100%,rgba(48,48,48,0.9))); + background: -webkit-linear-gradient(top, rgba(64,64,64,0.85) 0%, rgba(48,48,48,0.85) 100%); + background: -o-linear-gradient(top, rgba(64,64,64,0.85) 0%, rgba(48,48,48,0.85) 100%); + background: -ms-linear-gradient(top, rgba(64,64,64,0.85) 0%, rgba(48,48,48,0.85) 100%); + background: linear-gradient(to bottom, rgba(64,64,64,0.85) 0%, rgba(48,48,48,0.85) 100%); + + -moz-box-shadow: 0 1px 4px 0 rgba(50,50,50,0.8), inset 0px 1px 0 0px #888; + -webkit-box-shadow: 0 1px 4px 0 rgba(50,50,50,0.8), inset 0px 1px 0 0px #888; + -o-box-shadow: 0 1px 4px 0 rgba(50,50,50,0.8), inset 0px 1px 0 0px #888; + box-shadow: 0 1px 4px 0 rgba(50,50,50,0.8), inset 0px 1px 0 0px #888; +} + +#messagestack div:after { + content: ""; + position: absolute; + display: block; + top: 0; + left: 4px; + width: 20px; + height: 24px; + background: url(images/messages_dark.png) 0 7px no-repeat; +} + +#messagestack div.error { + color: #ff615d; +} + +#messagestack div.error:after { + background-position: 0 -55px; +} + +#messagestack div.warning { + color: #f4bf0e; +} + +#messagestack div.warning:after { + background-position: 0 -84px; +} + +#messagestack div.confirmation { + color: #00e05a; +} + +#messagestack div.confirmation:after { + background-position: 0 -25px; +} + +#messagestack div.loading { + color: #ddd; +} + +#messagestack div.loading:after { + top: 4px; + left: 6px; + background: url(images/ajaxloader_dark.gif) 0 4px no-repeat; +} + +#messagestack div a { + color: #94c0da; +} + +#messagestack div a:hover { + text-decoration: underline; + cursor: pointer; +} + .ui-dialog.error .ui-dialog-title, .ui-dialog.warning .ui-dialog-title, .ui-dialog.confirmation .ui-dialog-title { @@ -1045,6 +1142,9 @@ ul.listing { ul.listing li { background-color: #d9ecf4; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } ul.listing li ul { @@ -1241,7 +1341,6 @@ table.records-table { display: table; width: 100%; table-layout: fixed; - border-collapse: collapse; border-spacing: 0; border: 1px solid #bbd3da; } @@ -1291,9 +1390,21 @@ table.records-table { background-color: #fff; } +/* This padding-left minus the focused padding left should be half of the focused border-left */ .records-table thead tr td:first-child, .records-table tbody tr td:first-child { border-left: 0; + padding-left: 6px; +} + +/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */ +.records-table tbody tr.focused > td:first-child { + border-left: 2px solid #b0ccd7; + padding-left: 4px; +} + +.records-table tbody tr.selected.focused > td:first-child { + border-left-color: #49b3d2; } .records-table tr.selected td { @@ -1326,7 +1437,6 @@ table.records-table { color: #ccc !important; } - /*** iFrames ***/ #aboutframe { @@ -1405,7 +1515,7 @@ body.iframe .footerleft.floating:before, top: 34px; left: 0; right: 0; - bottom: 28px; + bottom: 0px; overflow: auto; } @@ -1414,7 +1524,7 @@ body.iframe .footerleft.floating:before, top: 0; left: 0; right: 0; - bottom: 28px; + bottom: 0px; } .footerleft { @@ -1440,6 +1550,20 @@ body.iframe .footerleft.floating:before, font-size: 12px; } +.propform div.prop { + margin-bottom: 0.5em; +} + +.propform div.prop.block label { + display: block; + margin-bottom: 0.3em; +} + +.propform div.prop.block input, +.propform div.prop.block textarea { + width: 95%; +} + fieldset.floating { float: left; margin-right: 10px; @@ -1597,11 +1721,13 @@ ul.proplist li { min-height: 40px; padding: 5px 25px; text-align: center; + font-size: 1.1em; } #login-form #message div { display: inline-block; padding-right: 0; + font-size: 12px; } #bottomline { @@ -1620,7 +1746,7 @@ ul.proplist li { #quicksearchbar { position: absolute; - right: 1px; + right: 2px; top: 2px; width: 240px; } @@ -1817,7 +1943,11 @@ ul.proplist li { } .toolbar a.button.download { - background-position: center -1906px; + background-position: center -1892px; +} + +.toolbar a.button.responses { + background-position: center -1932px; } a.menuselector { @@ -1889,11 +2019,11 @@ select.decorated option { #quotadisplay { left: 6px; + height: 18px; font-size: 12px; font-weight: bold; text-shadow: 0px 1px 1px #fff; padding-left: 30px; - height: 18px; background: url(images/quota.png) -100px 0 no-repeat; } @@ -1906,6 +2036,9 @@ select.decorated option { top: 32px; left: 90px; width: auto; + max-height: 70%; + overflow: -moz-scrollbars-vertical; + overflow-y: auto; background: #444; border: 1px solid #999; z-index: 240; @@ -1922,6 +2055,7 @@ select.decorated option { } ul.toolbarmenu, +ul.toolbarmenu ul, #rcmKSearchpane ul { margin: 0; padding: 0; @@ -1940,13 +2074,13 @@ ul.toolbarmenu li, } .googie_list tr:first-child td, -ul.toolbarmenu li:first-child, +ul.toolbarmenu > li:first-child, select.decorated option:first-child { border-top: 0; } .googie_list tr:last-child td, -ul.toolbarmenu li:last-child, +ul.toolbarmenu > li:last-child, select.decorated option:last-child { border-bottom: 0; } @@ -2000,6 +2134,11 @@ ul.toolbarmenu li label { text-shadow: 0px 1px 1px #333; } +ul.toolbarmenu li.separator label { + color: #bbb; + font-style: italic; +} + ul.toolbarmenu li a.icon { color: #eee; padding: 2px 6px; @@ -2078,6 +2217,15 @@ ul.toolbarmenu li span.conversation { background-position: 0 -1532px; } +#snippetslist { + max-width: 200px; +} + +#snippetslist li a { + overflow: hidden; + text-overflow: ellipsis; +} + #rcmKSearchpane { border-radius: 0 0 4px 4px; border-top: 0; @@ -2181,6 +2329,38 @@ ul.toolbarmenu li span.conversation { z-index: 255; } +/*** folder selector ***/ + +#folder-selector li a span { + background: url("images/listicons.png") 4px -2021px no-repeat; + display: block; + height: 17px; + min-height: 14px; + padding: 4px 4px 1px 28px; + overflow: hidden; + max-width: 120px; + text-overflow: ellipsis; +} + +#folder-selector li a.virtual { + opacity: .2; +} + +#folder-selector li a.inbox span { + background-position: 4px -2049px; +} +#folder-selector li a.drafts span { + background-position: 4px -1388px; +} +#folder-selector li a.sent span { + background-position: 4px -2074px; +} +#folder-selector li a.trash span { + background-position: 4px -1508px; +} +#folder-selector li a.junk span { + background-position: 4px -2100px; +} /*** attachment list ***/ @@ -2287,6 +2467,18 @@ ul.toolbarmenu li span.conversation { background-position: 0 -494px; } +.attachmentslist li.ppt, +.attachmentslist li.pptx, +.attachmentslist li.ppsx, +.attachmentslist li.vnd.mspowerpoint { + background-position: 0 -520px; +} + +.attachmentslist li.odp, +.attachmentslist li.otp { + background-position: 0 -546px; +} + .attachmentslist li a, #compose-attachments ul li { display: block; diff --git a/skins/larry/svggradients.css b/skins/larry/svggradients.css index c40d44f4b..2596f2bd2 100644 --- a/skins/larry/svggradients.css +++ b/skins/larry/svggradients.css @@ -56,6 +56,10 @@ input.button:active { background-image: url(svggradient.php?c=eaeaea;c8c8c8); } +#messagestack div { + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIgc3RvcC1vcGFjaXR5PSIwLjg4Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzMDMwMzAiIHN0b3Atb3BhY2l0eT0iMC44OCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); +} + .ui-dialog.popupmessage .ui-dialog-titlebar { background-image: url(svggradient.php?c=e3e3e3;cfcfcf); } diff --git a/skins/larry/templates/addressbook.html b/skins/larry/templates/addressbook.html index b33ebd999..9f83853b2 100644 --- a/skins/larry/templates/addressbook.html +++ b/skins/larry/templates/addressbook.html @@ -71,7 +71,6 @@ <div class="iframebox"> <roundcube:object name="addressframe" id="contact-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" /> </div> - <roundcube:object name="message" id="message" class="statusbar" /> </div> diff --git a/skins/larry/templates/compose.html b/skins/larry/templates/compose.html index 15c8e56ff..11662d185 100644 --- a/skins/larry/templates/compose.html +++ b/skins/larry/templates/compose.html @@ -30,6 +30,7 @@ <roundcube:endif /> <roundcube:button name="addattachment" type="link" class="button attach" classAct="button attach" classSel="button attach pressed" label="attach" title="addattachment" onclick="UI.show_uploadform();return false" /> <roundcube:button command="insert-sig" type="link" class="button insertsig disabled" classAct="button insertsig" classSel="button insertsig pressed" label="signature" title="insertsignature" /> + <a href="#responses" class="button responses" label="responses" title="<roundcube:label name='insertresponse' />" id="responsesmenulink" unselectable="on" onmousedown="return false" onclick="UI.show_popup('responsesmenu');return false"><roundcube:label name="responses" /></a> <roundcube:container name="toolbar" id="compose-toolbar" /> </div> </div> @@ -178,10 +179,6 @@ </form> -<div id="mailview-bottom" class="uibox"> - <roundcube:object name="message" id="message" class="statusbar" /> -</div> - </div><!-- end mailview-right --> </div><!-- end mainscreen --> @@ -196,6 +193,16 @@ <div id="spellmenu" class="popupmenu"></div> +<div id="responsesmenu" class="popupmenu"> + <ul class="toolbarmenu" id="textresponsesmenu"> + <li class="separator" id=""><label><roundcube:label name="insertresponse" /></label></li> + <roundcube:object name="responseslist" id="responseslist" tagname="ul" itemclass="active" /> + <li class="separator"><label><roundcube:label name="manageresponses" /></label></li> + <li><roundcube:button command="save-response" type="link" label="savenewresponse" classAct="active" unselectable="on" /></li> + <li><roundcube:button command="responses" type="link" label="editresponses" classAct="active" /></li> + </ul> +</div> + <roundcube:include file="/includes/footer.html" /> </body> diff --git a/skins/larry/templates/folders.html b/skins/larry/templates/folders.html index 988ff952c..56396bf1d 100644 --- a/skins/larry/templates/folders.html +++ b/skins/larry/templates/folders.html @@ -31,7 +31,6 @@ <div class="iframebox"> <roundcube:object name="folderframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" /> </div> - <roundcube:object name="message" id="message" class="statusbar" /> </div> </div> diff --git a/skins/larry/templates/identities.html b/skins/larry/templates/identities.html index d9270b68a..e3d2cc842 100644 --- a/skins/larry/templates/identities.html +++ b/skins/larry/templates/identities.html @@ -28,7 +28,6 @@ <div class="iframebox"> <roundcube:object name="identityframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" /> </div> - <roundcube:object name="message" id="message" class="statusbar" /> </div> </div> diff --git a/skins/larry/templates/importcontacts.html b/skins/larry/templates/importcontacts.html index 69b138b9a..a670d0354 100644 --- a/skins/larry/templates/importcontacts.html +++ b/skins/larry/templates/importcontacts.html @@ -25,8 +25,7 @@ </p> </div> -<roundcube:object name="message" id="message" class="statusbar" /> - +</div> </div> <roundcube:include file="/includes/footer.html" /> diff --git a/skins/larry/templates/login.html b/skins/larry/templates/login.html index 13e919ad3..8da941189 100644 --- a/skins/larry/templates/login.html +++ b/skins/larry/templates/login.html @@ -39,11 +39,13 @@ <roundcube:object name="preloader" images=" /images/ajaxloader.gif + /images/ajaxloader_dark.gif /images/buttons.png /images/addcontact.png /images/filetypes.png /images/listicons.png /images/messages.png + /images/messages_dark.png /images/quota.png /images/selector.png /images/splitter.png diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html index f2c52c820..ff5f7549c 100644 --- a/skins/larry/templates/mail.html +++ b/skins/larry/templates/mail.html @@ -5,8 +5,8 @@ <roundcube:include file="/includes/links.html" /> <style type="text/css"> <roundcube:if condition="config:preview_pane == true" /> - #mailview-top { height: <roundcube:exp expression="!empty(cookie:mailviewsplitter) ? cookie:mailviewsplitter-48 : 276" />px; } - #mailview-bottom { top: <roundcube:exp expression="!empty(cookie:mailviewsplitter) ? cookie:mailviewsplitter+6 : 330" />px; height: auto; } + #mailview-top { height: 276px; } + #mailview-bottom { top: 330px; height: auto; display: block; } #mailpreviewframe { display: block; } <roundcube:endif /> </style> @@ -27,7 +27,6 @@ <div id="mailview-left"> <!-- folders list --> -<div id="folderlist-header"></div> <div id="mailboxcontainer" class="uibox listbox"> <div id="folderlist-content" class="scroller withfooter"> <roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" /> @@ -116,8 +115,6 @@ <roundcube:object name="messagecontentframe" id="messagecontframe" style="width:100%; height:100%" frameborder="0" src="/watermark.html" /> </div> -<roundcube:object name="message" id="message" class="statusbar" /> - </div><!-- end mailview-bottom --> </div><!-- end mailview-right --> diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html index 6937b00af..df92b7511 100644 --- a/skins/larry/templates/message.html +++ b/skins/larry/templates/message.html @@ -16,9 +16,6 @@ <roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" /> <roundcube:endif /> <roundcube:include file="/includes/mailtoolbar.html" /> - <div class="toolbarselect"> - <roundcube:object name="mailboxlist" type="select" noSelection="moveto" maxlength="25" onchange="rcmail.command('move', this.options[this.selectedIndex].value)" class="mailboxlist decorated" folder_filter="mail" /> - </div> </div> <roundcube:if condition="!env:extwin" /> @@ -36,6 +33,7 @@ <div id="mailview-right" class="offset uibox"> <roundcube:else /> +<roundcube:object name="mailboxlist" folder_filter="mail" type="js" /> <div id="mailview-right" class="offset fullwidth uibox"> <roundcube:endif /> @@ -84,8 +82,6 @@ </div> </div> -<roundcube:object name="message" id="message" class="statusbar" /> - </div><!-- end mailview-right --> </div><!-- end mainscreen --> diff --git a/skins/larry/templates/messageerror.html b/skins/larry/templates/messageerror.html index a735d47f2..dbe373a12 100644 --- a/skins/larry/templates/messageerror.html +++ b/skins/larry/templates/messageerror.html @@ -38,8 +38,6 @@ <div id="messagecontent" class="watermark"></div> -<roundcube:object name="message" id="message" class="statusbar" /> - </div><!-- end mailview-right --> </div><!-- end mainscreen --> diff --git a/skins/larry/templates/messagepart.html b/skins/larry/templates/messagepart.html index d0e3a808d..0ec935873 100644 --- a/skins/larry/templates/messagepart.html +++ b/skins/larry/templates/messagepart.html @@ -27,7 +27,6 @@ <div class="iframebox"> <roundcube:object name="messagePartFrame" id="messagepartframe" frameborder="0" /> </div> - <roundcube:object name="message" id="message" class="statusbar" /> </div> </div> diff --git a/skins/larry/templates/plugin.html b/skins/larry/templates/plugin.html index 341f604ac..5b86563ab 100644 --- a/skins/larry/templates/plugin.html +++ b/skins/larry/templates/plugin.html @@ -16,7 +16,6 @@ <div id="pluginbody" class="uibox contentbox"> <roundcube:object name="plugin.body" /> -<roundcube:object name="message" id="message" class="statusbar" /> </div> </div> diff --git a/skins/larry/templates/responseedit.html b/skins/larry/templates/responseedit.html new file mode 100644 index 000000000..8f180fe7f --- /dev/null +++ b/skins/larry/templates/responseedit.html @@ -0,0 +1,22 @@ +<roundcube:object name="doctype" value="html5" /> +<html> +<head> +<title><roundcube:object name="pagetitle" /></title> +<roundcube:include file="/includes/links.html" /> +</head> +<body class="iframe"> + +<h1 class="boxtitle"><roundcube:object name="steptitle" /></h1> + +<div id="preferences-details" class="boxcontent"> +<roundcube:object name="responseform" class="propform" size="60" textareacols="60" textarearows="18" /> +</div> + +<div class="footerleft formbuttons"> + <roundcube:button command="save" type="input" class="button mainaction" label="save" condition="!env:readonly" /> +</div> + +<roundcube:include file="/includes/footer.html" /> + +</body> +</html> diff --git a/skins/larry/templates/responses.html b/skins/larry/templates/responses.html new file mode 100644 index 000000000..8e6884539 --- /dev/null +++ b/skins/larry/templates/responses.html @@ -0,0 +1,40 @@ +<roundcube:object name="doctype" value="html5" /> +<html> +<head> +<title><roundcube:object name="pagetitle" /></title> +<roundcube:include file="/includes/links.html" /> +</head> +<body class="noscroll"> + +<roundcube:include file="/includes/header.html" /> + +<div id="mainscreen" class="offset"> + +<roundcube:include file="/includes/settingstabs.html" /> + +<div id="settings-right"> + +<div id="identitieslist" class="uibox listbox"> +<h2 class="boxtitle"><roundcube:label name="responses" /></h2> +<div class="scroller withfooter"> +<roundcube:object name="responsesList" id="identities-table" class="listing" cellspacing="0" summary="Responses list" noheader="true" /> +</div> +<div class="boxfooter"> +<roundcube:button command="add" type="link" title="savenewresponse" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button command="delete" type="link" title="delete" class="listbutton delete disabled" classAct="listbutton delete" innerClass="inner" content="-" /> +</div> +</div> + +<div id="identity-details" class="uibox contentbox"> + <div class="iframebox"> + <roundcube:object name="responseframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" /> + </div> +</div> + +</div> + +</div> + +<roundcube:include file="/includes/footer.html" /> + +</body> +</html> diff --git a/skins/larry/templates/settings.html b/skins/larry/templates/settings.html index 427e0a4f5..08df7686e 100644 --- a/skins/larry/templates/settings.html +++ b/skins/larry/templates/settings.html @@ -24,7 +24,6 @@ <div class="iframebox"> <roundcube:object name="prefsframe" id="preferences-frame" style="width:100%; height:100%" frameborder="0" src="/watermark.html" /> </div> - <roundcube:object name="message" id="message" class="statusbar" /> </div> </div> diff --git a/skins/larry/ui.js b/skins/larry/ui.js index d558f16a2..44fc727f6 100644 --- a/skins/larry/ui.js +++ b/skins/larry/ui.js @@ -31,6 +31,7 @@ function rcube_mail_ui() var me = this; var mailviewsplit; var compose_headers = {}; + var prefs; // export public methods this.set = setenv; @@ -44,11 +45,13 @@ function rcube_mail_ui() this.show_header_row = show_header_row; this.hide_header_row = hide_header_row; this.update_quota = update_quota; + this.get_pref = get_pref; + this.save_pref = save_pref; // set minimal mode on small screens (don't wait for document.ready) if (window.$ && document.body) { - var minmode = rcmail.get_cookie('minimalmode'); + var minmode = get_pref('minimalmode'); if (parseInt(minmode) || (minmode === null && $(window).height() < 850)) { $(document.body).addClass('minimal'); } @@ -68,6 +71,51 @@ function rcube_mail_ui() } /** + * Get preference stored in browser + */ + function get_pref(key) + { + if (!prefs) { + prefs = window.localStorage ? rcmail.local_storage_get_item('prefs.larry', {}) : {}; + } + + // fall-back to cookies + if (prefs[key] == null) { + var cookie = rcmail.get_cookie(key); + 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); + rcmail.set_cookie(key, cookie, new Date()); // expire cookie + } + } + } + + return prefs[key]; + } + + /** + * Saves preference value to browser storage + */ + function save_pref(key, val) + { + prefs[key] = val; + + // write prefs to local storage + if (window.localStorage) { + rcmail.local_storage_set_item('prefs.larry', prefs); + } + else { + // store value in cookie + var exp = new Date(); + exp.setYear(exp.getFullYear() + 1); + rcmail.set_cookie(key, val, exp); + } + } + + /** * Initialize UI * Called on document.ready */ @@ -82,15 +130,15 @@ function rcube_mail_ui() $('#taskbar .minmodetoggle').click(function(e){ var ismin = $(document.body).toggleClass('minimal').hasClass('minimal'); - rcmail.set_cookie('minimalmode', ismin?1:0); + save_pref('minimalmode', ismin?1:0); $(window).resize(); }); /*** mail task ***/ if (rcmail.env.task == 'mail') { - rcmail.addEventListener('menu-open', menu_open); - rcmail.addEventListener('menu-save', menu_save); - rcmail.addEventListener('responseafterlist', function(e){ switch_view_mode(rcmail.env.threading ? 'thread' : 'list') }); + rcmail.addEventListener('menu-open', menu_open) + .addEventListener('menu-save', menu_save) + .addEventListener('responseafterlist', function(e){ switch_view_mode(rcmail.env.threading ? 'thread' : 'list') }); var dragmenu = $('#dragmessagemenu'); if (dragmenu.length) { @@ -99,21 +147,28 @@ function rcube_mail_ui() } if (rcmail.env.action == 'show' || rcmail.env.action == 'preview') { - rcmail.addEventListener('enable-command', enable_command); - rcmail.addEventListener('aftershow-headers', function() { layout_messageview(); }); - rcmail.addEventListener('afterhide-headers', function() { layout_messageview(); }); + rcmail.addEventListener('enable-command', enable_command) + .addEventListener('aftershow-headers', function() { layout_messageview(); }) + .addEventListener('afterhide-headers', function() { layout_messageview(); }); $('#previewheaderstoggle').click(function(e){ toggle_preview_headers(); return false }); // add menu link for each attachment $('#attachment-list > li').each(function() { - $(this).append($('<a class="drop">').click(function() { attachmentmenu(this); })); + $(this).append($('<a class="drop"></a>').click(function() { attachmentmenu(this); })); }); + + if (get_pref('previewheaders') == '1') { + toggle_preview_headers(); + } } else if (rcmail.env.action == 'compose') { - rcmail.addEventListener('aftertoggle-editor', function(){ window.setTimeout(function(){ layout_composeview() }, 200); }); - rcmail.addEventListener('aftersend-attachment', show_uploadform); - rcmail.addEventListener('add-recipient', function(p){ show_header_row(p.field, true); }); - layout_composeview(); + rcmail.addEventListener('aftersend-attachment', show_uploadform) + .addEventListener('add-recipient', function(p){ show_header_row(p.field, true); }) + .addEventListener('aftertoggle-editor', function(e){ + window.setTimeout(function(){ layout_composeview() }, 200); + if (e && e.mode) + $("select[name='editorSelector']").val(e.mode); + }); // Show input elements with non-empty value var f, v, field, fields = ['cc', 'bcc', 'replyto', 'followupto']; @@ -130,9 +185,18 @@ function rcube_mail_ui() $('#composeoptionstoggle').toggleClass('remove'); $('#composeoptions').toggle(); layout_composeview(); + save_pref('composeoptions', $('#composeoptions').is(':visible') ? '1' : '0'); return false; }).css('cursor', 'pointer'); + if (get_pref('composeoptions') !== '0') { + $('#composeoptionstoggle').click(); + } + + // adjust hight when textarea starts to scroll + $("textarea[name='_to'], textarea[name='_cc'], textarea[name='_bcc']").change(function(e){ adjust_compose_editfields(this); }).change(); + rcmail.addEventListener('autocomplete_insert', function(p){ adjust_compose_editfields(p.field); }); + // toggle compose options if opened in new window and they were visible before var opener_rc = rcmail.opener(); if (opener_rc && opener_rc.env.action == 'compose' && $('#composeoptionstoggle', opener.document).hasClass('remove')) @@ -152,11 +216,9 @@ function rcube_mail_ui() if (previewframe) mailviewsplit.init(); - new rcube_scroller('#folderlist-content', '#folderlist-header', '#folderlist-footer'); - - rcmail.addEventListener('setquota', update_quota); - rcmail.addEventListener('enable-command', enable_command); - rcmail.addEventListener('afterimport-messages', show_uploadform); + rcmail.addEventListener('setquota', update_quota) + .addEventListener('enable-command', enable_command) + .addEventListener('afterimport-messages', show_uploadform); } else if (rcmail.env.action == 'get') { new rcube_splitter({ id:'mailpartsplitterv', p1:'#messagepartheader', p2:'#messagepartcontainer', @@ -211,17 +273,15 @@ function rcube_mail_ui() } /*** addressbook task ***/ else if (rcmail.env.task == 'addressbook') { - rcmail.addEventListener('afterupload-photo', show_uploadform); - rcmail.addEventListener('beforepushgroup', push_contactgroup); - rcmail.addEventListener('beforepopgroup', pop_contactgroup); + rcmail.addEventListener('afterupload-photo', show_uploadform) + .addEventListener('beforepushgroup', push_contactgroup) + .addEventListener('beforepopgroup', pop_contactgroup); 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(); new rcube_splitter({ id:'addressviewsplitter', p1:'#addresslist', p2:'#contacts-box', orientation:'v', relative:true, start:286, min:270, size:12 }).init(); - - new rcube_scroller('#directorylist-content', '#directorylist-header', '#directorylist-footer'); } var dragmenu = $('#dragcontactmenu'); @@ -309,8 +369,10 @@ function rcube_mail_ui() function body_mouseup(e) { var config, obj, target = e.target; + if (target.className == 'inner') target = e.target.parentNode; + for (var id in popups) { obj = popups[id]; config = popupconfig[id]; @@ -319,9 +381,10 @@ function rcube_mail_ui() && !config.toggle && (!config.editable || !target_overlaps(target, obj.get(0))) && (!config.sticky || !rcube_mouse_is_over(e, obj.get(0))) + && !$(target).is('.folder-selector-link') ) { var myid = id+''; - window.setTimeout(function(){ show_popupmenu(myid, false) }, 10); + window.setTimeout(function() { show_popupmenu(myid, false); }, 10); } } } @@ -366,8 +429,15 @@ function rcube_mail_ui() */ function message_displayed(p) { + var siblings = $(p.object).siblings('div'); + if (siblings.length) + $(p.object).insertBefore(siblings.first()); + // show a popup dialog on errors if (p.type == 'error' && rcmail.env.task != 'login') { + // hide original message object, we don't want both + rcmail.hide_message(p.object); + if (me.message_timer) { window.clearTimeout(me.message_timer); } @@ -376,8 +446,10 @@ function rcube_mail_ui() } var msg = p.message, - pos = $(p.object).offset(); - pos.top -= (rcmail.env.task == 'login' ? 20 : 160); + dialog_close = function() { + // check if dialog is still displayed, to prevent from js error + me.messagedialog.is(':visible') && me.messagedialog.dialog('destroy').hide(); + }; if (me.messagedialog.is(':visible')) msg = me.messagedialog.html() + '<p>' + p.message + '</p>'; @@ -388,16 +460,14 @@ function rcube_mail_ui() closeOnEscape: true, dialogClass: 'popupmessage ' + p.type, title: env.errortitle, - close: function() { - me.messagedialog.dialog('destroy').hide(); - }, - position: ['center', pos.top], - hide: { effect:'drop', direction:'down' }, + close: dialog_close, + position: ['center', 'center'], + hide: {effect: 'fadeOut'}, width: 420, minHeight: 90 }).show(); - me.message_timer = window.setTimeout(function(){ me.messagedialog.dialog('close'); }, Math.max(2000, p.timeout / 2)); + me.message_timer = window.setTimeout(dialog_close, p.timeout); } } @@ -428,6 +498,16 @@ function rcube_mail_ui() // STUB } + function adjust_compose_editfields(elem) + { + if (elem.nodeName == 'TEXTAREA') { + var $elem = $(elem), line_height = 14, // hard-coded because some browsers only provide the outer height in elem.clientHeight + content_height = elem.scrollHeight, + rows = elem.value.length > 80 && content_height > line_height*1.5 ? 2 : 1; + $elem.css('height', (line_height*rows) + 'px'); + layout_composeview(); + } + } function layout_composeview() { @@ -473,7 +553,7 @@ function rcube_mail_ui() function enable_command(p) { - if (p.command == 'reply-list') { + if (p.command == 'reply-list' && rcmail.env.reply_all_mode == 1) { var label = rcmail.gettext(p.status ? 'replylist' : 'replyall'); if (rcmail.env.action == 'preview') $('a.button.replyall').attr('title', label); @@ -584,7 +664,7 @@ function rcube_mail_ui() var button = $(e.target), frame = $('#mailpreviewframe'), visible = !frame.is(':visible'), - splitter = mailviewsplit.pos || parseInt(rcmail.get_cookie('mailviewsplitter') || 320), + splitter = mailviewsplit.pos || parseInt(get_pref('mailviewsplitter') || 320), topstyles, bottomstyles, uid; frame.toggle(); @@ -592,7 +672,7 @@ function rcube_mail_ui() if (visible) { $('#mailview-top').removeClass('fullheight').css({ bottom:'auto' }); - $('#mailview-bottom').css({ height:'auto' }); + $('#mailview-bottom').css({ height:'auto' }).show(); rcmail.env.contentframe = 'messagecontframe'; if (uid = rcmail.message_list.get_single_selection()) @@ -610,8 +690,8 @@ function rcube_mail_ui() rcmail.env.contentframe = null; rcmail.show_contentframe(false); - $('#mailview-top').addClass('fullheight').css({ height:'auto', bottom:'28px' }); - $('#mailview-bottom').css({ top:'auto', height:'26px' }); + $('#mailview-top').addClass('fullheight').css({ height:'auto', bottom:'0px' }); + $('#mailview-bottom').css({ top:'auto', height:'0px' }).hide(); if (mailviewsplit.handle) mailviewsplit.handle.hide(); @@ -641,6 +721,8 @@ function rcube_mail_ui() button.attr('href', '#hide').removeClass('add').addClass('remove') else button.attr('href', '#details').removeClass('remove').addClass('add') + + save_pref('previewheaders', full.is(':visible') ? '1' : '0'); } @@ -1157,7 +1239,7 @@ function rcube_splitter(p) $(window).resize(onResize); // read saved position from cookie - var cookie = rcmail.get_cookie(this.id); + var cookie = this.get_cookie(); if (cookie && !isNaN(cookie)) { this.pos = parseFloat(cookie); this.resize(); @@ -1246,6 +1328,18 @@ function rcube_splitter(p) if (!me.drag_active) return false; + // with timing events dragging action is more responsive + window.clearTimeout(me.ts); + me.ts = window.setTimeout(function() { onDragAction(e); }, 1); + + return false; + }; + + /** + * Dragging action (see onDrag()) + */ + function onDragAction(e) + { var pos = rcube_event.get_mouse_pos(e); if (me.relative) { @@ -1269,7 +1363,6 @@ function rcube_splitter(p) me.p1pos = me.relative ? me.p1.position() : me.p1.offset(); me.p2pos = me.relative ? me.p2.position() : me.p2.offset(); - return false; }; /** @@ -1312,13 +1405,20 @@ function rcube_splitter(p) }; /** + * Get saved splitter position from cookie + */ + this.get_cookie = function() + { + return window.UI ? UI.get_pref(this.id) : null; + }; + + /** * Saves splitter position in cookie */ this.set_cookie = function() { - var exp = new Date(); - exp.setYear(exp.getFullYear() + 1); - rcmail.set_cookie(this.id, this.pos, exp); + if (window.UI) + UI.save_pref(this.id, this.pos); }; } // end class rcube_splitter |
