diff options
Diffstat (limited to 'skins')
34 files changed, 810 insertions, 187 deletions
diff --git a/skins/classic/addressbook.css b/skins/classic/addressbook.css index 78314538a..5afa4592f 100644 --- a/skins/classic/addressbook.css +++ b/skins/classic/addressbook.css @@ -118,7 +118,7 @@ #directorylistbox input { - margin: 0px; + margin: 0 0 0 20px; font-size: 11px; width: 90%; } @@ -144,7 +144,8 @@ width: 280px; } -#directorylist +#directorylist, +#directorylist li ul { list-style: none; margin: 0; @@ -152,11 +153,15 @@ background-color: #FFFFFF; } +#directorylist li ul +{ + border-top: 1px solid #EBEBEB; +} + #directorylist li { display: block; font-size: 11px; - background: url(images/icons/folders.png) 5px -108px no-repeat; border-bottom: 1px solid #EBEBEB; white-space: nowrap; } @@ -168,31 +173,37 @@ padding-left: 25px; padding-top: 2px; padding-bottom: 2px; + height: 16px; text-decoration: none; white-space: nowrap; + background: url(images/icons/folders.png) 5px -108px no-repeat; } -#directorylist li.contactgroup +#directorylist li ul li a { - padding-left: 15px; - background-position: 20px -143px; + padding-left: 45px; } -#directorylist li.contactsearch +#directorylist li ul li:last-child { - background-position: 6px -162px; + border-bottom: 0; } -#directorylist li.selected +#directorylist li.contactgroup a { - background-color: #929292; - border-bottom: 1px solid #898989; + background-position: 22px -143px; +} + +#directorylist li.contactsearch a +{ + background-position: 6px -162px; } -#directorylist li.selected a +#directorylist li.selected > a { color: #FFF; font-weight: bold; + background-color: #929292; } #directorylist li.droptarget diff --git a/skins/classic/common.css b/skins/classic/common.css index b4adc58a7..1f62fbe07 100644 --- a/skins/classic/common.css +++ b/skins/classic/common.css @@ -20,7 +20,7 @@ body.extwin margin: 10px; } -td, th, div, p, select, input, textarea +select, input, textarea { font-size: 12px; font-family: inherit; @@ -622,6 +622,32 @@ table.records-table tr.unfocused td background-color: #929292; } +ul.treelist li +{ + position: relative; +} + +ul.treelist li div.treetoggle +{ + position: absolute; + left: 8px !important; + left: -16px; + top: 1px; + width: 14px; + height: 16px; + cursor: pointer; +} + +ul.treelist li div.collapsed +{ + background: url(images/icons/collapsed.png) bottom right no-repeat; +} + +ul.treelist li div.expanded +{ + background: url(images/icons/expanded.png) bottom right no-repeat; +} + /***** mac-style quicksearch field *****/ @@ -666,6 +692,7 @@ table.records-table tr.unfocused td font-size: 11px; padding: 0px; border: none; + outline: none; } /***** roundcube webmail pre-defined classes *****/ diff --git a/skins/classic/embed.css b/skins/classic/embed.css index b9715c77c..6d2c63c6a 100644 --- a/skins/classic/embed.css +++ b/skins/classic/embed.css @@ -14,12 +14,16 @@ font-size: 14px; color: #000; margin-bottom: .8em; - min-height: 20px; + min-height: 30px; padding: 10px 10px 6px 46px; background: url(images/display/icons.png) 6px 3px no-repeat #F7FDCB; border: 1px solid #C2D071; } +.rcmail-inline-warning { + background-position: 6px -92px; +} + .rcmail-inline-message > button { margin-left: 1em; vertical-align: baseline; diff --git a/skins/classic/functions.js b/skins/classic/functions.js index ee68ee729..d10812c57 100644 --- a/skins/classic/functions.js +++ b/skins/classic/functions.js @@ -92,6 +92,7 @@ function rcube_mail_ui() forwardmenu: {id:'forwardmenu', editable:1}, searchmenu: {id:'searchmenu', editable:1}, messagemenu: {id:'messagemenu'}, + attachmentmenu: {id:'attachmentmenu'}, listmenu: {id:'listmenu', editable:1}, dragmessagemenu:{id:'dragmessagemenu', sticky:1}, groupmenu: {id:'groupoptionsmenu', above:1}, @@ -133,24 +134,24 @@ show_popupmenu: function(popup, show) { var obj = this.popups[popup].obj, above = this.popups[popup].above, - ref = rcube_find_object(popup+'link'); + ref = $(this.popups[popup].link ? this.popups[popup].link : rcube_find_object(popup+'link')); if (typeof show == 'undefined') show = obj.is(':visible') ? false : true; else if (this.popups[popup].toggle && show && this.popups[popup].obj.is(':visible') ) show = false; - if (show && ref) { - var parent = $(ref).parent(), + if (show && ref.length) { + var parent = ref.parent(), win = $(window), - pos = parent.hasClass('dropbutton') ? parent.offset() : $(ref).offset(); + pos = parent.hasClass('dropbutton') ? parent.offset() : ref.offset(); - if (!above && pos.top + ref.offsetHeight + obj.height() > win.height()) + if (!above && pos.top + ref.height() + obj.height() > win.height()) above = true; if (pos.left + obj.width() > win.width()) pos.left = win.width() - obj.width() - 30; - obj.css({ left:pos.left, top:(pos.top + (above ? -obj.height() : ref.offsetHeight)) }); + obj.css({ left:pos.left, top:(pos.top + (above ? -obj.height() : ref.height())) }); } obj[show?'show':'hide'](); @@ -325,7 +326,7 @@ listmenu: function(show) }; }, -open_listmenu: function(e) +open_listmenu: function() { this.listmenu(); }, @@ -380,6 +381,35 @@ spellmenu: function(show) this.show_popupmenu('spellmenu', show); }, +show_attachmentmenu: function(elem) +{ + var id = elem.parentNode.id.replace(/^attach/, ''); + + $('#attachmenuopen').unbind('click').attr('onclick', '').click(function(e) { + return rcmail.command('open-attachment', id, this); + }); + + $('#attachmenudownload').unbind('click').attr('onclick', '').click(function() { + rcmail.command('download-attachment', id, this); + }); + + this.popups.attachmentmenu.link = elem; + rcmail.command('menu-open', {menu: 'attachmentmenu', id: id}); +}, + +menu_open: function(p) +{ + if (p && p.props && p.props.menu == 'attachmentmenu') + this.show_popup('attachmentmenu'); + else + this.open_listmenu(); +}, + +menu_save: function(prop) +{ + this.save_listmenu(); +}, + body_mouseup: function(evt, p) { var i, target = rcube_event.get_target(evt); @@ -462,14 +492,18 @@ switch_preview_pane: function(elem) /* Message composing */ init_compose_form: function() { - var f, field, fields = ['cc', 'bcc', 'replyto', 'followupto'], + var f, v, field, fields = ['cc', 'bcc', 'replyto', 'followupto'], div = document.getElementById('compose-div'), headers_div = document.getElementById('compose-headers-div'); // Show input elements with non-empty value for (f=0; f<fields.length; f++) { - if ((field = $('#_'+fields[f])) && field.length && field.val() != '') - rcmail_ui.show_header_form(fields[f]); + v = fields[f]; field = $('#_'+v); + if (field.length) { + field.on('change', {v:v}, function(e) { if (this.value) rcmail_ui.show_header_form(e.data.v); }); + if (field.val() != '') + rcmail_ui.show_header_form(v); + } } // prevent from form data loss when pressing ESC key in IE @@ -492,6 +526,9 @@ init_compose_form: function() div.style.top = (parseInt(headers_div.offsetHeight, 10) + 3) + 'px'; $(window).resize(); + // fixes contacts-table position when there's more than one addressbook + $('#contacts-table').css('top', $('#directorylist').height() + 24 + 'px'); + // contacts search submit $('#quicksearchbox').keydown(function(e) { if (rcube_event.get_keycode(e) == 13) @@ -584,14 +621,130 @@ prev_sibling: function(elm) while (ps && ps.nodeType == 3) ps = ps.previousSibling; return ps; +}, + +enable_command: function(p) +{ + if (p.command == 'reply-list') { + var label = rcmail.gettext(p.status ? 'replylist' : 'replyall'); + $('a.button.replyAll').attr('title', label); + } } }; /** - * Scroller + * Roundcube generic layer (floating box) class + * + * @constructor */ +function rcube_layer(id, attributes) +{ + this.name = id; + + // create a new layer in the current document + this.create = function(arg) + { + var l = (arg.x) ? arg.x : 0, + t = (arg.y) ? arg.y : 0, + w = arg.width, + h = arg.height, + z = arg.zindex, + vis = arg.vis, + parent = arg.parent, + obj = document.createElement('DIV'); + + obj.id = this.name; + obj.style.position = 'absolute'; + obj.style.visibility = (vis) ? (vis==2) ? 'inherit' : 'visible' : 'hidden'; + obj.style.left = l+'px'; + obj.style.top = t+'px'; + if (w) + obj.style.width = w.toString().match(/\%$/) ? w : w+'px'; + if (h) + obj.style.height = h.toString().match(/\%$/) ? h : h+'px'; + if (z) + obj.style.zIndex = z; + + if (parent) + parent.appendChild(obj); + else + document.body.appendChild(obj); + + this.elm = obj; + }; + + // create new layer + if (attributes != null) { + this.create(attributes); + this.name = this.elm.id; + } + else // just refer to the object + this.elm = document.getElementById(id); + if (!this.elm) + return false; + + + // ********* layer object properties ********* + + this.css = this.elm.style; + this.event = this.elm; + this.width = this.elm.offsetWidth; + this.height = this.elm.offsetHeight; + this.x = parseInt(this.elm.offsetLeft); + this.y = parseInt(this.elm.offsetTop); + this.visible = (this.css.visibility=='visible' || this.css.visibility=='show' || this.css.visibility=='inherit') ? true : false; + + + // ********* layer object methods ********* + + // move the layer to a specific position + this.move = function(x, y) + { + this.x = x; + this.y = y; + this.css.left = Math.round(this.x)+'px'; + this.css.top = Math.round(this.y)+'px'; + }; + + // change the layers width and height + this.resize = function(w,h) + { + this.css.width = w+'px'; + this.css.height = h+'px'; + this.width = w; + this.height = h; + }; + + // show or hide the layer + this.show = function(a) + { + if(a == 1) { + this.css.visibility = 'visible'; + this.visible = true; + } + else if(a == 2) { + this.css.visibility = 'inherit'; + this.visible = true; + } + else { + this.css.visibility = 'hidden'; + this.visible = false; + } + }; + + // write new content into a Layer + this.write = function(cont) + { + this.elm.innerHTML = cont; + }; + +}; + +/** + * Scroller + */ function rcmail_scroller(list, top, bottom) { var ref = this; @@ -631,8 +784,13 @@ function rcmail_scroller(list, top, bottom) function iframe_events() { // this==iframe - var doc = this.contentDocument ? this.contentDocument : this.contentWindow ? this.contentWindow.document : null; - rcube_event.add_listener({ element: doc, object:rcmail_ui, method:'body_mouseup', event:'mouseup' }); + try { + var doc = this.contentDocument ? this.contentDocument : this.contentWindow ? this.contentWindow.document : null; + rcube_event.add_listener({ element: doc, object:rcmail_ui, method:'body_mouseup', event:'mouseup' }); + } + catch (e) { + // catch possible "Permission denied" error in IE + }; }; // Abbreviate mailbox names to fit width of the container @@ -754,7 +912,7 @@ function percent_indicator(obj, data) var bar2 = $('<div>'); bar2.css({position: 'absolute', top: pos.top + 1, left: pos.left + 1, width: width + 'px', height: height + 'px', zIndex: 98}) - .addClass('quota_bg'); + .addClass('quota_bg'); if (quota >= limit_high) { main.addClass(' quota_text_high'); @@ -797,8 +955,9 @@ function rcube_init_mail_ui() .contents().mouseup(function(e){rcmail_ui.body_mouseup(e)}); if (rcmail.env.task == 'mail') { - rcmail.addEventListener('menu-open', 'open_listmenu', rcmail_ui); - rcmail.addEventListener('menu-save', 'save_listmenu', rcmail_ui); + rcmail.addEventListener('enable-command', 'enable_command', rcmail_ui); + rcmail.addEventListener('menu-open', 'menu_open', rcmail_ui); + rcmail.addEventListener('menu-save', 'menu_save', rcmail_ui); rcmail.addEventListener('aftersend-attachment', 'uploadmenu', rcmail_ui); rcmail.addEventListener('aftertoggle-editor', 'resize_compose_body_ev', rcmail_ui); rcmail.gui_object('message_dragmenu', 'dragmessagemenu'); @@ -808,12 +967,18 @@ function rcube_init_mail_ui() rcmail.addEventListener('responseaftergetunread', rcube_render_mailboxlist); rcmail.addEventListener('responseaftercheck-recent', rcube_render_mailboxlist); rcmail.addEventListener('aftercollapse-folder', 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') rcmail_ui.init_compose_form(); + 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); })); + }); } else if (rcmail.env.task == 'addressbook') { rcmail.addEventListener('afterupload-photo', function(){ rcmail_ui.show_popup('uploadform', false); }); diff --git a/skins/classic/iehacks.css b/skins/classic/iehacks.css index 18555809d..fabf73db6 100644 --- a/skins/classic/iehacks.css +++ b/skins/classic/iehacks.css @@ -106,7 +106,7 @@ body.iframe div.messageheaderbox #quicksearchbar { - z-index: 250; + z-index: 240; } #addresslist, diff --git a/skins/classic/images/icons/html.png b/skins/classic/images/icons/html.png Binary files differnew file mode 100644 index 000000000..3f022f678 --- /dev/null +++ b/skins/classic/images/icons/html.png diff --git a/skins/classic/images/icons/text.png b/skins/classic/images/icons/text.png Binary files differnew file mode 100644 index 000000000..94891be80 --- /dev/null +++ b/skins/classic/images/icons/text.png diff --git a/skins/classic/mail.css b/skins/classic/mail.css index 54673fe64..b99c599b4 100644 --- a/skins/classic/mail.css +++ b/skins/classic/mail.css @@ -173,13 +173,15 @@ } #messagemenu li a.active:hover, +#attachmentmenu li a.active:hover, #markmessagemenu li a.active:hover { color: #fff; background-color: #c00; } -#messagemenu li a +#messagemenu li a, +#attachmentmenu li a { background: url(images/messageactions.png) no-repeat 7px 0; background-position: 7px 20px; @@ -190,7 +192,8 @@ background-position: 7px 1px; } -#messagemenu li a.downloadlink +#messagemenu li a.downloadlink, +#attachmentmenu li a.downloadlink { background-position: 7px -17px; } @@ -200,7 +203,8 @@ background-position: 7px -35px; } -#messagemenu li a.openlink +#messagemenu li a.openlink, +#attachmentmenu li a.openlink { background-position: 7px -53px; } @@ -393,32 +397,6 @@ border-bottom: none; } -#mailboxlist li div -{ - position: absolute; - left: 8px !important; - left: -16px; - top: 1px; - width: 14px; - height: 16px; -} - -#mailboxlist li div.collapsed, -#mailboxlist li div.expanded -{ - cursor: pointer; -} - -#mailboxlist li div.collapsed -{ - background: url(images/icons/collapsed.png) bottom right no-repeat; -} - -#mailboxlist li div.expanded -{ - background: url(images/icons/expanded.png) bottom right no-repeat; -} - #mailboxlist li.inbox { background-position: 5px -18px; @@ -1161,6 +1139,16 @@ table.headers-table tr td.header span text-decoration: underline; } +#attachment-list li a.drop { + background: url(images/icons/down_small.gif) no-repeat center 6px; + width: 12px; + height: 7px; + cursor: pointer; + padding: 5px 0 0; + margin-left: 3px; + display: inline-block; +} + #messagebody { position:relative; @@ -1324,20 +1312,27 @@ div.message-htmlpart div.rcmBody text-decoration: underline; } -#openextwinlink +#messagelinks { position: absolute; top: 8px; right: 10px; - width: 15px; - height: 15px; - border: 0; + height: 16px; + text-align: right; +} + +#messageframe #messagelinks +{ + top: 2px; + right: 2px; } #compose-headers #openextwinlink { - top: 4px; - right: 2px; + position: absolute; + height: 15px; + top: 4px; + right: 2px; } #full-headers @@ -1605,16 +1600,19 @@ input.from_address vertical-align: middle; } +#upload-form, #attachment-form { padding: 6px; } +#upload-form div, #attachment-form div { padding: 2px; } +#upload-form div.buttons, #attachment-form div.buttons { margin-top: 4px; diff --git a/skins/classic/print.css b/skins/classic/print.css index 34125b0d3..d7e332dba 100644 --- a/skins/classic/print.css +++ b/skins/classic/print.css @@ -136,3 +136,32 @@ div.message-part blockquote blockquote blockquote border-left: 2px solid #bb0000; border-right: 2px solid #bb0000; } + +p.image-attachment +{ + position: relative; + padding: 1em; + border-top: 1px solid #ccc; +} + +p.image-attachment a.image-link +{ + float: left; + display: block; + margin-right: 2em; + min-width: 160px; + min-height: 60px; + text-align: center; +} + +p.image-attachment .image-filename +{ + display: block; + line-height: 1.6em; +} + +p.image-attachment .attachment-links +{ + display: none; +} + diff --git a/skins/classic/templates/about.html b/skins/classic/templates/about.html index d84ccbd3c..519acf773 100644 --- a/skins/classic/templates/about.html +++ b/skins/classic/templates/about.html @@ -16,7 +16,7 @@ <div id="license"> <roundcube:object name="aboutcontent" /> <h2 class="sysname">Roundcube Webmail <roundcube:object name="version" /></h2> -<p class="copyright">Copyright © 2005-2012, The Roundcube Dev Team</p> +<p class="copyright">Copyright © 2005-2013, The Roundcube Dev Team</p> <p class="license">This program is free software; you can redistribute it and/or modify it under the terms of the <a href="http://www.gnu.org/licenses/gpl.html" target="_blank">GNU General Public License</a> as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.<br/> diff --git a/skins/classic/templates/addressbook.html b/skins/classic/templates/addressbook.html index 404fb2c11..ba119891c 100644 --- a/skins/classic/templates/addressbook.html +++ b/skins/classic/templates/addressbook.html @@ -9,6 +9,7 @@ #addresslist { width: <roundcube:exp expression="!empty(cookie:addressviewsplitter) ? cookie:addressviewsplitter-5 : 245" />px; } #contacts-box { left: <roundcube:exp expression="!empty(cookie:addressviewsplitter) ? cookie:addressviewsplitter+5 : 255" />px; <roundcube:exp expression="browser:ie ? ('width:expression((parseInt(this.parentNode.offsetWidth)-'.(!empty(cookie:addressviewsplitter) ? cookie:addressviewsplitter+5 : 255).')+\\'px\\');') : ''" /> +} #directorylistbox { width: <roundcube:exp expression="!empty(cookie:addressviewsplitterd) ? cookie:addressviewsplitterd-5 : 195" />px; } #addressscreen { left: <roundcube:exp expression="!empty(cookie:addressviewsplitterd) ? cookie:addressviewsplitterd+5 : 205" />px; <roundcube:exp expression="browser:ie ? ('width:expression((parseInt(this.parentNode.offsetWidth)-'.(!empty(cookie:addressviewsplitterd) ? cookie:addressviewsplitterd+5 : 205).')+\\'px\\');') : ''" /> @@ -63,8 +64,7 @@ <div id="directorylistbox"> <div id="directorylist-title" class="boxtitle"><roundcube:label name="groups" /></div> <div id="directorylist-content" class="boxlistcontent"> - <roundcube:object name="directorylist" id="directorylist" /> - <roundcube:object name="groupslist" id="contactgroupslist" /> + <roundcube:object name="directorylist" id="directorylist" class="treelist" /> </div> <div id="directorylist-footer" class="boxfooter"> <roundcube:button command="group-create" type="link" title="newcontactgroup" class="buttonPas addgroup" classAct="button addgroup" content=" " /> diff --git a/skins/classic/templates/compose.html b/skins/classic/templates/compose.html index 6ca5e2cb5..5b0b47924 100644 --- a/skins/classic/templates/compose.html +++ b/skins/classic/templates/compose.html @@ -31,15 +31,15 @@ <roundcube:button command="list" type="link" class="button back" classAct="button back" classSel="button backSel" title="backtolist" content=" " /> <roundcube:endif /> <roundcube:button command="send" type="link" class="buttonPas send" classAct="button send" classSel="button sendSel" title="sendmessage" content=" " /> + <roundcube:button name="addattachment" type="link" class="button attach" classAct="button attach" classSel="button attachSel" title="addattachment" onclick="rcmail_ui.show_popup('uploadmenu', true);return false" content=" " /> + <roundcube:button command="insert-sig" type="link" class="buttonPas insertsig" classAct="button insertsig" classSel="button insertsigSel" title="insertsignature" content=" " /> + <roundcube:button command="savedraft" type="link" class="buttonPas savedraft" classAct="button savedraft" classSel="button savedraftSel" title="savemessage" content=" " /> <roundcube:if condition="config:enable_spellcheck" /> <span class="dropbutton"> <roundcube:button command="spellcheck" type="link" class="buttonPas spellcheck" classAct="button spellcheck" classSel="button spellcheckSel" title="checkspelling" content=" " /> <span id="spellmenulink" onclick="rcmail_ui.show_popup('spellmenu');return false"></span> </span> <roundcube:endif /> - <roundcube:button name="addattachment" type="link" class="button attach" classAct="button attach" classSel="button attachSel" title="addattachment" onclick="rcmail_ui.show_popup('uploadmenu', true);return false" content=" " /> - <roundcube:button command="insert-sig" type="link" class="buttonPas insertsig" classAct="button insertsig" classSel="button insertsigSel" title="insertsignature" content=" " /> - <roundcube:button command="savedraft" type="link" class="buttonPas savedraft" classAct="button savedraft" classSel="button savedraftSel" title="savemessage" content=" " /> <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> diff --git a/skins/classic/templates/mail.html b/skins/classic/templates/mail.html index 75a112ff5..c3b4004cc 100644 --- a/skins/classic/templates/mail.html +++ b/skins/classic/templates/mail.html @@ -28,7 +28,7 @@ <div id="mailboxlist-container"> <div id="mailboxlist-title" class="boxtitle"><roundcube:label name="mailboxlist" /></div> <div id="mailboxlist-content" class="boxlistcontent"> -<roundcube:object name="mailboxlist" id="mailboxlist" folder_filter="mail" /> +<roundcube:object name="mailboxlist" id="mailboxlist" class="treelist" folder_filter="mail" /> </div> <div id="mailboxlist-footer" class="boxfooter"> <roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="button groupactions" onclick="rcmail_ui.show_popup('mailboxmenu');return false" content=" " /> @@ -140,7 +140,8 @@ <div id="mailboxoptionsmenu" class="popupmenu"> <ul> <li><roundcube:button command="expunge" type="link" label="compact" classAct="active" /></li> - <li class="separator_below"><roundcube:button command="purge" type="link" label="empty" classAct="active" /></li> + <li><roundcube:button command="purge" type="link" label="empty" classAct="active" /></li> + <li class="separator_below"><roundcube:button name="messageimport" type="link" class="active" label="importmessages" id="uploadformlink" onclick="rcmail_ui.show_popup('uploadform', true); return false" /></li> <li><roundcube:button command="folders" task="settings" type="link" label="managefolders" classAct="active" /></li> <roundcube:container name="mailboxoptions" id="mailboxoptionsmenu" /> </ul> @@ -204,5 +205,7 @@ </div> </div> +<roundcube:object name="messageimportform" id="upload-form" attachmentFieldSize="40" class="popupmenu" /> + </body> </html> diff --git a/skins/classic/templates/message.html b/skins/classic/templates/message.html index b9c928f8f..11e58c711 100644 --- a/skins/classic/templates/message.html +++ b/skins/classic/templates/message.html @@ -30,7 +30,7 @@ <div id="mailboxlist-container"> <div id="mailboxlist-title" class="boxtitle"><roundcube:label name="mailboxlist" /></div> <div class="boxlistcontent"> - <roundcube:object name="mailboxlist" id="mailboxlist" maxlength="25" /> + <roundcube:object name="mailboxlist" id="mailboxlist" class="treelist" maxlength="25" /> </div> <div class="boxfooter"></div> </div> @@ -39,6 +39,14 @@ <div id="messageframe"> <div class="boxlistcontent" style="top:0; overflow-x:auto"> + <div id="messagelinks"> + <roundcube:if condition="env:optional_format=='text'" /> + <roundcube:button command="change-format" prop="text" image="/images/icons/text.png" width="15" height="15" title="changeformattext" id="changeformattext" /> + <roundcube:endif /> + <roundcube:if condition="env:optional_format=='html'" /> + <roundcube:button command="change-format" prop="html" image="/images/icons/html.png" width="15" height="15" title="changeformathtml" id="changeformathtml" /> + <roundcube:endif /> + </div> <roundcube:object name="messageHeaders" class="headers-table" cellspacing="0" cellpadding="2" addicon="/images/icons/silhouette.png" summary="Message headers" /> <roundcube:object name="messageFullHeaders" id="full-headers" /> <roundcube:object name="messageAttachments" id="attachment-list" /> @@ -65,5 +73,13 @@ </script> <roundcube:endif /> +<div id="attachmentmenu" class="popupmenu"> + <ul class="toolbarmenu"> + <li><roundcube:button command="open-attachment" id="attachmenuopen" type="link" label="open" class="openlink" classAct="openlink active" innerclass="openlink" /></li> + <li><roundcube:button command="download-attachment" id="attachmenudownload" type="link" label="download" class="downloadlink" classAct="downloadlink active" innerclass="downloadlink" /></li> + <roundcube:container name="attachmentmenu" id="attachmentmenu" /> + </ul> +</div> + </body> </html> diff --git a/skins/classic/templates/messageerror.html b/skins/classic/templates/messageerror.html index 918e3092a..d02508942 100644 --- a/skins/classic/templates/messageerror.html +++ b/skins/classic/templates/messageerror.html @@ -42,7 +42,7 @@ <div id="mailboxlist-container"> <div class="boxtitle"><roundcube:label name="mailboxlist" /></div> <div class="boxlistcontent"> - <roundcube:object name="mailboxlist" id="mailboxlist" folder_filter="mail" /> + <roundcube:object name="mailboxlist" id="mailboxlist" class="treelist" folder_filter="mail" /> </div> <div class="boxfooter"></div> </div> diff --git a/skins/classic/templates/messagepreview.html b/skins/classic/templates/messagepreview.html index 78b2306f6..80dbe381a 100644 --- a/skins/classic/templates/messagepreview.html +++ b/skins/classic/templates/messagepreview.html @@ -3,11 +3,21 @@ <head> <title><roundcube:object name="pagetitle" /></title> <roundcube:include file="/includes/links.html" /> +<script type="text/javascript" src="/splitter.js"></script> +<script type="text/javascript" src="/functions.js"></script> </head> -<body class="iframe"> +<body class="iframe" onload="rcube_init_mail_ui()"> <div class="messageheaderbox"> -<roundcube:button command="extwin" image="/images/icons/extwin.png" width="15" height="15" title="openinextwin" id="openextwinlink" /> + <div id="messagelinks"> + <roundcube:if condition="env:optional_format=='text'" /> + <roundcube:button command="change-format" prop="text" image="/images/icons/text.png" width="15" height="15" title="changeformattext" id="changeformattext" /> + <roundcube:endif /> + <roundcube:if condition="env:optional_format=='html'" /> + <roundcube:button command="change-format" prop="html" image="/images/icons/html.png" width="15" height="15" title="changeformathtml" id="changeformathtml" /> + <roundcube:endif /> + <roundcube:button command="extwin" image="/images/icons/extwin.png" width="15" height="15" title="openinextwin" id="openextwinlink" /> + </div> <roundcube:object name="messageHeaders" class="headers-table" cellspacing="0" cellpadding="2" addicon="/images/icons/silhouette.png" summary="Message headers" /> <roundcube:object name="messageFullHeaders" id="full-headers" /> <roundcube:object name="messageAttachments" id="attachment-list" /> @@ -16,5 +26,13 @@ <roundcube:object name="messageObjects" id="message-objects" /> <roundcube:object name="messageBody" id="messagebody" /> +<div id="attachmentmenu" class="popupmenu"> + <ul class="toolbarmenu"> + <li><roundcube:button command="open-attachment" id="attachmenuopen" type="link" label="open" class="openlink" classAct="openlink active" innerclass="openlink" /></li> + <li><roundcube:button command="download-attachment" id="attachmenudownload" type="link" label="download" class="downloadlink" classAct="downloadlink active" innerclass="downloadlink" /></li> + <roundcube:container name="attachmentmenu" id="attachmentmenu" /> + </ul> +</div> + </body> </html> diff --git a/skins/larry/addressbook.css b/skins/larry/addressbook.css index 54fabfa8b..ff3951497 100644 --- a/skins/larry/addressbook.css +++ b/skins/larry/addressbook.css @@ -83,10 +83,23 @@ background-position: 6px -766px; } -#directorylist li.addressbook.selected a { +#directorylist li.addressbook.selected > a { background-position: 6px -791px; } +#directorylist li.addressbook ul li:last-child { + border-bottom: 0; +} + +#directorylist li.addressbook ul.groups { + margin: 0; + padding: 0; +} + +#directorylist li.addressbook ul.groups li { + width: 100%; +} + #directorylist li.contactgroup a { padding-left: 62px; background-position: 32px -1555px; @@ -112,6 +125,12 @@ margin-left: 8px; } +#directorylist li.addressbook div.collapsed, +#directorylist li.addressbook div.expanded { + top: 15px; + left: 20px; +} + #contacts-table .contact td.name { background-position: 6px -1603px; } @@ -317,3 +336,13 @@ a.deletebutton { text-indent: -5000px; background: url(images/buttons.png) -7px -377px no-repeat; } + +#import-box { + position: absolute; + bottom: 28px; + top: 34px; + left: 0; + right: 0; + overflow: auto; + padding: 10px; +} diff --git a/skins/larry/iehacks.css b/skins/larry/iehacks.css index 871cce4fd..960ce7648 100644 --- a/skins/larry/iehacks.css +++ b/skins/larry/iehacks.css @@ -29,7 +29,8 @@ input.button.mainaction:active { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a2e31', endColorstr='#505050', GradientType=0); } -a.button { +a.button, +.buttongroup { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e6e6e6', GradientType=0); } @@ -47,6 +48,10 @@ input.button:active { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bababa', endColorstr='#d8d8d8', GradientType=0); } +.buttongroup a.button.selected { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#909090', endColorstr='#858585', GradientType=0); +} + #message.statusbar { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaeaea', endColorstr='#c8c8c8', GradientType=0); } diff --git a/skins/larry/images/buttons.gif b/skins/larry/images/buttons.gif Binary files differindex d8a33d6b2..8a4a78ee4 100644 --- a/skins/larry/images/buttons.gif +++ b/skins/larry/images/buttons.gif diff --git a/skins/larry/images/buttons.png b/skins/larry/images/buttons.png Binary files differindex 4438d9cbc..54bee0156 100644 --- a/skins/larry/images/buttons.png +++ b/skins/larry/images/buttons.png diff --git a/skins/larry/includes/footer.html b/skins/larry/includes/footer.html index ee93fcf57..a4fa69296 100644 --- a/skins/larry/includes/footer.html +++ b/skins/larry/includes/footer.html @@ -8,4 +8,16 @@ $(document).ready(function(){ }); </script> +<!--[if lte IE 8]> +<script type="text/javascript"> + +// fix missing :last-child selectors +$(document).ready(function(){ + $('ul.treelist ul').each(function(i,ul){ + $('li:last-child', ul).css('border-bottom', 0); + }); +}); + +</script> +<![endif]--> diff --git a/skins/larry/includes/header.html b/skins/larry/includes/header.html index 5a30020f3..f2efb8e06 100644 --- a/skins/larry/includes/header.html +++ b/skins/larry/includes/header.html @@ -10,16 +10,16 @@ <roundcube:container name="topline-center" id="topline-center" /> <div class="topright"> <roundcube:container name="topline-right" id="topline-right" /> - <roundcube:if condition="!env:extwin" /> + <roundcube:if condition="!env:extwin && !env:framed" /> <span class="username"><roundcube:object name="username" /></span> <roundcube:button command="logout" label="logout" class="button-logout" /> - <roundcube:else /> + <roundcube:elseif condition="env:extwin" /> <roundcube:button command="close" label="close" class="closelink" /> <roundcube:endif /> </div> </div> -<roundcube:if condition="!env:extwin" /> +<roundcube:if condition="!env:extwin && !env:framed" /> <div id="topnav"> <div id="taskbar" class="topright"> <roundcube:button command="mail" label="mail" class="button-mail" classSel="button-mail button-selected" innerClass="button-inner" /> diff --git a/skins/larry/mail.css b/skins/larry/mail.css index b98a89c8b..fe9e56ea3 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -2,7 +2,7 @@ * Roundcube webmail styles for the Email 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 @@ -54,6 +54,10 @@ border-top: none; } +#composeview-right #mailview-bottom { + border-radius: 0 0 4px 4px; +} + #folderlist-header { width: 100%; height: 12px; @@ -141,7 +145,7 @@ a.iconbutton.threadmode.selected { background-position: 6px 2px; } -#mailboxlist li:first-child { +#mailboxlist > li:first-child { border-radius: 4px 4px 0 0; border-top: 0; } @@ -156,7 +160,7 @@ a.iconbutton.threadmode.selected { background-position: 6px 3px; } -#mailboxlist li.mailbox.unread a { +#mailboxlist li.mailbox.unread > a { padding-right: 36px; } @@ -224,6 +228,17 @@ a.iconbutton.threadmode.selected { color: #017cb4; } +#mailboxlist li.mailbox div.treetoggle { + top: 13px; + left: 19px; +} + +#mailboxlist li.mailbox ul li:last-child { + border-bottom: 0; +} + +/* nested mailboxes */ + #mailboxlist li.mailbox ul { list-style: none; margin: 0; @@ -231,50 +246,57 @@ a.iconbutton.threadmode.selected { border-top: 1px solid #bbd3da; } -#mailboxlist li.mailbox ul li { - padding-left: 26px; -} - #mailboxlist li.mailbox ul li a { - background-position: 6px -93px; + padding-left: 52px; /* 36 + 1 x 16 */ + background-position: 22px -93px; /* 6 + 1 x 16 */ } - #mailboxlist li.mailbox ul li.selected > a { - background-position: 6px -117px; + background-position: 22px -117px; } - -#mailboxlist li.mailbox ul li:last-child { - border-bottom: 0; +#mailboxlist li.mailbox ul li div.treetoggle { + left: 33px; + top: 14px; } -#mailboxlist li.mailbox div.collapsed, -#mailboxlist li.mailbox div.expanded { - position: absolute; - top: 13px; - left: 19px; - width: 13px; - height: 13px; - background: url(images/listicons.png) -3px -144px no-repeat; - cursor: pointer; +#mailboxlist li.mailbox ul ul li.mailbox a { + padding-left: 68px; /* 2x */ + background-position: 38px -93px; } - -#mailboxlist li.mailbox div.expanded { - background-position: -3px -168px; +#mailboxlist li.mailbox ul ul li.selected > a { + background-position: 38px -117px; } - -#mailboxlist li.mailbox.selected > div.collapsed { - background-position: -23px -144px; +#mailboxlist li.mailbox ul ul li div.treetoggle { + left: 48px; } -#mailboxlist li.mailbox.selected > div.expanded { - background-position: -23px -168px; +#mailboxlist li.mailbox ul ul ul li.mailbox a { + padding-left: 84px; /* 3x */ + background-position: 54px -93px; +} +#mailboxlist li.mailbox ul ul ul li.selected > a { + background-position: 54px -117px; +} +#mailboxlist li.mailbox ul ul ul li div.treetoggle { + left: 64px; } +#mailboxlist li.mailbox ul ul ul ul li.mailbox a { + padding-left: 100px; /* 4x */ + background-position: 70px -93px; +} +#mailboxlist li.mailbox ul ul ul ul li.selected > a { + background-position: 70px -117px; +} +#mailboxlist li.mailbox ul ul ul ul li div.treetoggle { + left: 80px; +} -#mailboxlist li.mailbox ul li div.collapsed, -#mailboxlist li.mailbox ul li div.expanded { - left: 43px; - top: 14px; +/* 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: 96px; } #mailboxlist li.mailbox .unreadcount { @@ -438,7 +460,7 @@ a.iconbutton.threadmode.selected { } #messagelist tr td.date { - width: 125px; + width: 135px; } #messagelist tr.message { @@ -850,7 +872,7 @@ div.more-headers { } div.hide-headers { - background-position: center -1589px; + background-position: center -1590px; } #all-headers { @@ -913,6 +935,10 @@ div.hide-headers { border-radius: 3px; } +#messageheader .message-headers { + min-height: 60px; +} + #messageheader #contactphoto { display: block; position: absolute; @@ -932,7 +958,8 @@ div.hide-headers { border-radius: 4px; } -#messageheader #countcontrols { +#messageheader #countcontrols, +#messageheader #formatcontrols { position: absolute; top: 8px; right: 8px; @@ -940,6 +967,11 @@ div.hide-headers { white-space: nowrap; } +#messageheader #formatcontrols { + top: 38px; + right: 8px; +} + #messageheader .pagenav .countdisplay { min-width: 0; padding-right: 0.5em; @@ -1010,8 +1042,8 @@ div.message-partheaders { div.message-part pre, div.message-htmlpart pre, div.message-part div.pre { - margin: 0px; - padding: 0px; + margin: 0; + padding: 0; font-family: monospace; font-size: 12px; white-space: -moz-pre-wrap !important; @@ -1020,7 +1052,7 @@ div.message-part div.pre { } div.message-part span.sig { - color: #666666; + color: #666; } div.message-part blockquote { @@ -1028,7 +1060,7 @@ div.message-part blockquote { border-left: 2px solid blue; border-right: 2px solid blue; background-color: #F6F6F6; - margin: 2px 0px 2px 0px; + margin: 2px 0 2px 0; padding: 1px 8px 1px 10px; } @@ -1039,9 +1071,9 @@ div.message-part blockquote blockquote { } div.message-part blockquote blockquote blockquote { - color: #990000; - border-left: 2px solid #bb0000; - border-right: 2px solid #bb0000; + color: #900; + border-left: 2px solid #b00; + border-right: 2px solid #b00; } div.message-partheaders { @@ -1117,9 +1149,9 @@ div.message-partheaders .headers-table td.header { #messagepartcontainer { position: absolute; top: 60px; - left: 0px; - right: 0px; - bottom: 0px; + left: 0; + right: 0; + bottom: 0; } #messagepartframe { diff --git a/skins/larry/print.css b/skins/larry/print.css index 6481ea9e6..a56c9b938 100644 --- a/skins/larry/print.css +++ b/skins/larry/print.css @@ -123,3 +123,28 @@ div.message-part blockquote blockquote blockquote { border-left: 2px solid #b00; border-right: 2px solid #b00; } + +p.image-attachment { + position: relative; + padding: 1em; + border-top: 1px solid #ccc; +} + +p.image-attachment a.image-link { + float: left; + display: block; + margin-right: 2em; + min-width: 160px; + min-height: 60px; + text-align: center; +} + +p.image-attachment .image-filename { + display: block; + line-height: 1.6em; +} + +p.image-attachment .attachment-links { + display: none; +} + diff --git a/skins/larry/styles.css b/skins/larry/styles.css index f7adeba38..cfbf9ac5f 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -177,7 +177,8 @@ input.mainaction { /** link buttons **/ -a.button { +a.button, +.buttongroup { display: inline-block; margin: 0 2px; padding: 2px 5px; @@ -198,6 +199,11 @@ a.button { text-decoration: none; } +.buttongroup { + padding: 0; + white-space: nowrap; +} + a.button:focus, input.button:focus { border-color: #4fadd5; @@ -231,6 +237,29 @@ a.button.disabled span.inner { filter: alpha(opacity=40); } +.buttongroup a.button { + margin: 0; + border-width: 0 1px 0 0; + border-radius: 0; + background: none; + box-shadow: none; + -o-box-shadow: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; +} + +.buttongroup a.button.first, +.buttongroup a.button:first-child { + border-radius: 4px 0 0 4px; + border-left: 0; +} + +.buttongroup a.button.last, +.buttongroup a.button:last-child { + border-radius: 0 4px 4px 0; + border-right: 0; +} + a.button.pressed, a.button:active, input.button:active { @@ -266,6 +295,21 @@ input.button:active { background: linear-gradient(top, #bababa 0%, #d8d8d8 100%); } +.buttongroup a.button.selected, +.buttongroup a.button.selected:hover { + background: #8a8a8a; + background: -moz-linear-gradient(top, #909090 0%, #858585 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#909090), color-stop(100%,#858585)); + background: -o-linear-gradient(top, #909090 0%, #858585 100%); + background: -ms-linear-gradient(top, #909090 0%, #858585 100%); + background: linear-gradient(top, #909090 0%, #858585 100%); + -webkit-box-shadow: inset 0 1px 2px 0 #555; + -moz-box-shadow: inset 0 1px 2px 0 #555; + box-shadow: inset 0 1px 2px 0 #555; + border-right-color: #555; + border-left-color: #555; +} + .pagenav a.button { padding: 1px 3px; height: 16px; @@ -273,6 +317,12 @@ input.button:active { margin-bottom: 1px; } +.pagenav .buttongroup a.button, +.pagenav .buttongroup a.button:hover { + padding: 1px 5px; + margin-bottom: 0; +} + .pagenav a.button span.inner { display: inline-block; width: 16px; @@ -318,6 +368,20 @@ input.button:active { background-position: -29px -271px; } +.pagenav a.changeformat.html span.inner { + background-position: -7px -1859px; +} +.pagenav a.changeformat.html.selected span.inner { + background-position: -29px -1859px; +} + +.pagenav a.changeformat.text span.inner { + background-position: -7px -1874px; +} +.pagenav a.changeformat.text.selected span.inner { + background-position: -29px -1874px; +} + .pagenav .countdisplay { display: inline-block; padding: 3px 1em 0 1em; @@ -986,6 +1050,10 @@ ul.listing li { background-color: #d9ecf4; } +ul.listing li ul { + border-top: 1px solid #bbd3da; +} + ul.listing li.droptarget, table.listing tr.droptarget td { background-color: #e8e798; @@ -1002,6 +1070,32 @@ table.layout td { vertical-align: top; } +ul.treelist li { + position: relative; +} + +ul.treelist li div.treetoggle { + position: absolute; + top: 13px; + left: 19px; + width: 13px; + height: 13px; + background: url(images/listicons.png) -3px -144px no-repeat; + cursor: pointer; +} + +ul.treelist li div.treetoggle.expanded { + background-position: -3px -168px; +} + +ul.treelist li.selected > div.collapsed { + background-position: -23px -144px; +} + +ul.treelist li.selected > div.expanded { + background-position: -23px -168px; +} + .listbox .boxfooter { position: absolute; bottom: 0; @@ -1246,6 +1340,10 @@ body.iframe { margin: 38px 0 10px 0; } +body.iframe.error { + background: #ededed; +} + body.iframe.floatingbuttons { margin-bottom: 40px; } @@ -2185,7 +2283,7 @@ ul.toolbarmenu li span.conversation { display: block; color: #333; font-weight: bold; - padding: 8px 4px 3px 30px; + padding: 8px 15px 3px 30px; text-shadow: 0px 1px 1px #fff; text-decoration: none; white-space: nowrap; @@ -2193,6 +2291,17 @@ ul.toolbarmenu li span.conversation { text-overflow: ellipsis; } +.attachmentslist li a.drop { + background: url(images/buttons.png) no-repeat scroll center -1570px; + width: 14px; + height: 20px; + cursor: pointer; + position: absolute; + right: 0; + top: 0; + padding: 0; +} + #compose-attachments ul li { padding-right: 28px; } diff --git a/skins/larry/svggradients.css b/skins/larry/svggradients.css index 2172ac31a..c40d44f4b 100644 --- a/skins/larry/svggradients.css +++ b/skins/larry/svggradients.css @@ -29,7 +29,8 @@ input.button.mainaction:active { background-image: url(svggradient.php?c=2a2e31;505050); } -a.button { +a.button, +.buttongroup { background-image: url(svggradient.php?c=f9f9f9;e6e6e6); } @@ -47,6 +48,10 @@ input.button:active { background-image: url(svggradient.php?c=bababa;d8d8d8); } +.buttongroup a.button.selected { + background-image: url(svggradient.php?c=909090;858585); +} + #message.statusbar { background-image: url(svggradient.php?c=eaeaea;c8c8c8); } diff --git a/skins/larry/templates/addressbook.html b/skins/larry/templates/addressbook.html index 390f8d83b..401640f1f 100644 --- a/skins/larry/templates/addressbook.html +++ b/skins/larry/templates/addressbook.html @@ -30,7 +30,7 @@ <div id="directorylistbox" class="uibox listbox"> <h2 id="directorylist-header" class="boxtitle"><roundcube:label name="groups" /></h2> <div id="directorylist-content" class="scroller withfooter"> - <roundcube:object name="directorylist" id="directorylist" class="listing" /> + <roundcube:object name="directorylist" id="directorylist" class="treelist listing" /> </div> <div id="directorylist-footer" class="boxfooter"> <roundcube:button command="group-create" type="link" title="newcontactgroup" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button name="groupoptions" id="groupoptionslink" type="link" title="moreactions" class="listbutton groupactions" onclick="UI.show_popup('groupoptions');return false" innerClass="inner" content="⚙" /> diff --git a/skins/larry/templates/error.html b/skins/larry/templates/error.html index cd0fc9656..a65733eb0 100644 --- a/skins/larry/templates/error.html +++ b/skins/larry/templates/error.html @@ -4,9 +4,12 @@ <title><roundcube:object name="pagetitle" /></title> <roundcube:include file="/includes/links.html" /> </head> -<body> - +<roundcube:if condition="!env:framed" /> +<body class="error"> <roundcube:include file="/includes/header.html" /> +<roundcube:else /> +<body class="error iframe"> +<roundcube:endif /> <div class="uibox centerbox errorbox"> $__page_content diff --git a/skins/larry/templates/importcontacts.html b/skins/larry/templates/importcontacts.html index 89aea0a2e..d3d0f2b93 100644 --- a/skins/larry/templates/importcontacts.html +++ b/skins/larry/templates/importcontacts.html @@ -14,20 +14,19 @@ <roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" /> </div> -<div class="offset uibox contentbox"> +<div id="pluginbody" class="offset uibox contentbox"> <h2 class="boxtitle"><roundcube:label name="importcontacts" /></h2> -<div class="boxcontent readtext"> +<div id="import-box" class="boxcontent"> <roundcube:object name="importstep" /> - <br/> - <p class="formbuttons"> <roundcube:object name="importnav" class="button" /> </p> - </div> +<roundcube:object name="message" id="message" class="statusbar" /> + </div> <roundcube:include file="/includes/footer.html" /> diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html index e145ddff8..575cb792a 100644 --- a/skins/larry/templates/mail.html +++ b/skins/larry/templates/mail.html @@ -30,7 +30,7 @@ <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="listing" folder_filter="mail" unreadwrap="%s" /> +<roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" /> </div> <div id="folderlist-footer" class="boxfooter"> <roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="listbutton groupactions" onclick="UI.show_popup('mailboxmenu');return false" innerClass="inner" content="⚙" /> @@ -148,7 +148,8 @@ <div id="mailboxmenu" class="popupmenu"> <ul class="toolbarmenu" id="mailboxoptionsmenu"> <li><roundcube:button command="expunge" type="link" label="compact" classAct="active" /></li> - <li class="separator_below"><roundcube:button command="purge" type="link" label="empty" classAct="active" /></li> + <li><roundcube:button command="purge" type="link" label="empty" classAct="active" /></li> + <li><roundcube:button name="messageimport" type="link" class="active" label="importmessages" onclick="UI.show_uploadform()" /></li> <li><roundcube:button command="folders" task="settings" type="link" label="managefolders" classAct="active" /></li> <roundcube:container name="mailboxoptions" id="mailboxoptionsmenu" /> </ul> @@ -226,6 +227,14 @@ </div> </div> +<div id="upload-dialog" class="propform popupdialog" title="<roundcube:label name='importmessages' />"> + <roundcube:object name="messageimportform" id="uploadform" attachmentFieldSize="40" buttons="no" /> + <div class="formbuttons"> + <roundcube:button command="import-messages" type="input" class="button mainaction" label="upload" /> + <roundcube:button name="close" type="input" class="button" label="cancel" onclick="UI.show_uploadform()" /> + </div> +</div> + <roundcube:include file="/includes/footer.html" /> </body> diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html index ae77c0dc0..7ac7e5b55 100644 --- a/skins/larry/templates/message.html +++ b/skins/larry/templates/message.html @@ -28,7 +28,7 @@ <!-- folders list --> <div id="mailboxcontainer" class="uibox listbox"> <div class="scroller"> -<roundcube:object name="mailboxlist" id="mailboxlist" class="listing" folder_filter="mail" unreadwrap="%s" /> +<roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" /> </div> </div> @@ -44,7 +44,9 @@ <span class="moreheaderstoggle"></span> <h2 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h2> +<div class="message-headers"> <roundcube:object name="messageHeaders" class="headers-table" addicon="/images/addcontact.png" exclude="subject" max="20" /> +</div> <roundcube:object name="messageFullHeaders" id="full-headers" /> <!-- record navigation --> @@ -54,6 +56,21 @@ <roundcube:button command="nextmessage" type="link" class="button nextpage disabled" classAct="button nextpage" classSel="button nextpage pressed" innerClass="inner" title="nextmessage" content="&gt;" /> </div> +<roundcube:if condition="env:optional_format=='text'" /> +<div class="pagenav" id="formatcontrols"> + <span class="buttongroup"> + <roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html selected" innerClass="inner" title="changeformathtml" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text" classSel="button last changeformat text pressed" innerClass="inner" title="changeformattext" /> + </span> +</div> +<roundcube:elseif condition="env:optional_format=='html'" /> +<div class="pagenav" id="formatcontrols"> + <span class="buttongroup"> + <roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html" classSel="button first changeformat html pressed" innerClass="inner" title="changeformathtml" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text selected" innerClass="inner" title="changeformattext" /> + </span> +</div> +<roundcube:endif /> + + <div id="contactphoto"><roundcube:object name="contactphoto" /></div> </div> @@ -73,6 +90,14 @@ </div><!-- end mainscreen --> +<div id="attachmentmenu" class="popupmenu"> + <ul class="toolbarmenu"> + <li><roundcube:button command="open-attachment" id="attachmenuopen" type="link" label="open" class="icon" classAct="icon active" innerclass="icon extwin" /></li> + <li><roundcube:button command="download-attachment" id="attachmenudownload" type="link" label="download" class="icon" classAct="icon active" innerclass="icon download" /></li> + <roundcube:container name="attachmentmenu" id="attachmentmenu" /> + </ul> +</div> + <roundcube:include file="/includes/footer.html" /> </body> diff --git a/skins/larry/templates/messageerror.html b/skins/larry/templates/messageerror.html index 3c3c9acdb..a735d47f2 100644 --- a/skins/larry/templates/messageerror.html +++ b/skins/larry/templates/messageerror.html @@ -28,7 +28,7 @@ <!-- folders list --> <div id="mailboxcontainer" class="uibox listbox"> <div class="scroller"> - <roundcube:object name="mailboxlist" id="mailboxlist" class="listing" folder_filter="mail" unreadwrap="%s" /> + <roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" /> </div> </div> diff --git a/skins/larry/templates/messagepreview.html b/skins/larry/templates/messagepreview.html index aef282ac9..f69f65125 100644 --- a/skins/larry/templates/messagepreview.html +++ b/skins/larry/templates/messagepreview.html @@ -30,6 +30,17 @@ <!-- record navigation --> <div id="countcontrols" class="pagenav"> +<roundcube:if condition="env:optional_format=='text'" /> + <span class="buttongroup"> + <roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html selected" innerClass="inner" title="changeformathtml" content="HTML" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text" classSel="button changeformat text pressed" innerClass="inner" title="changeformattext" content="Text" /> + </span> + +<roundcube:elseif condition="env:optional_format=='html'" /> + <span class="buttongroup"> + <roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html" classSel="button changeformat html pressed" innerClass="inner" title="changeformathtml" content="HTML" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text selected" innerClass="inner" title="changeformattext" content="Text" /> + </span> + +<roundcube:endif /> <roundcube:if condition="env:mailbox != config:drafts_mbox"> <roundcube:button command="reply" type="link" class="button reply" classSel="button reply pressed" innerClass="inner" title="replytomessage" content="<-" /> <roundcube:button command="reply-all" type="link" class="button replyall" classSel="button replyall pressed" innerClass="inner" title="replytoallmessage" content="<<-" /> @@ -51,6 +62,14 @@ </div> </div> +<div id="attachmentmenu" class="popupmenu"> + <ul class="toolbarmenu"> + <li><roundcube:button command="open-attachment" id="attachmenuopen" type="link" label="open" class="icon" classAct="icon active" innerclass="icon extwin" /></li> + <li><roundcube:button command="download-attachment" id="attachmenudownload" type="link" label="download" class="icon" classAct="icon active" innerclass="icon download" /></li> + <roundcube:container name="attachmentmenu" id="attachmentmenu" /> + </ul> +</div> + <roundcube:include file="/includes/footer.html" /> </body> diff --git a/skins/larry/ui.js b/skins/larry/ui.js index d2faa3611..ec4d03d00 100644 --- a/skins/larry/ui.js +++ b/skins/larry/ui.js @@ -1,7 +1,7 @@ /** * Roundcube functions for default skin interface * - * Copyright (c) 2011, The Roundcube Dev Team + * Copyright (c) 2013, The Roundcube Dev Team * * The contents are subject to the Creative Commons Attribution-ShareAlike * License. It is allowed to copy, distribute, transmit and to adapt the work @@ -17,6 +17,7 @@ function rcube_mail_ui() var popupconfig = { forwardmenu: { editable:1 }, searchmenu: { editable:1, callback:searchmenu }, + attachmentmenu: { }, listoptions: { editable:1 }, dragmessagemenu: { sticky:1 }, groupmenu: { above:1 }, @@ -37,10 +38,12 @@ function rcube_mail_ui() this.init_tabs = init_tabs; this.show_about = show_about; this.show_popup = show_popup; + this.add_popup = add_popup; this.set_searchmod = set_searchmod; this.show_uploadform = show_uploadform; this.show_header_row = show_header_row; this.hide_header_row = hide_header_row; + this.update_quota = update_quota; // set minimal mode on small screens (don't wait for document.ready) @@ -81,8 +84,8 @@ function rcube_mail_ui() /*** mail task ***/ if (rcmail.env.task == 'mail') { - rcmail.addEventListener('menu-open', show_listoptions); - rcmail.addEventListener('menu-save', save_listoptions); + 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') }); var dragmenu = $('#dragmessagemenu'); @@ -92,9 +95,15 @@ 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(); }); - $('#previewheaderstoggle').click(function(e){ toggle_preview_headers(this); return false }); + $('#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); })); + }); } else if (rcmail.env.action == 'compose') { rcmail.addEventListener('aftertoggle-editor', function(){ window.setTimeout(function(){ layout_composeview() }, 200); }); @@ -103,10 +112,14 @@ function rcube_mail_ui() layout_composeview(); // Show input elements with non-empty value - var field, fields = ['cc', 'bcc', 'replyto', 'followupto']; - for (var f=0; f < fields.length; f++) { - if ((field = $('#_'+fields[f])) && field.length && field.val() != '') - show_header_row(fields[f], true); + var f, v, field, fields = ['cc', 'bcc', 'replyto', 'followupto']; + for (f=0; f < fields.length; f++) { + v = fields[f]; field = $('#_'+v); + if (field.length) { + field.on('change', {v: v}, function(e) { if (this.value) show_header_row(e.data.v, true); }); + if (field.val() != '') + show_header_row(v, true); + } } $('#composeoptionstoggle').click(function(){ @@ -117,7 +130,8 @@ function rcube_mail_ui() }).css('cursor', 'pointer'); // toggle compose options if opened in new window and they were visible before - if (window.opener && opener.rcmail && opener.rcmail.env.action == 'compose' && $('#composeoptionstoggle', opener.document).hasClass('remove')) + var opener_rc = rcmail.opener(); + if (opener_rc && opener_rc.env.action == 'compose' && $('#composeoptionstoggle', opener.document).hasClass('remove')) $('#composeoptionstoggle').click(); new rcube_splitter({ id:'composesplitterv', p1:'#composeview-left', p2:'#composeview-right', @@ -137,6 +151,8 @@ function rcube_mail_ui() 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); } if ($('#mailview-left').length) { @@ -227,7 +243,8 @@ function rcube_mail_ui() parent.css('position', 'relative'); // re-set original select width to fix click action and options width in some browsers - select.width(overlay.width()); + if (!bw.mz) + select.width(overlay.width()); }); $(document.body) @@ -243,8 +260,13 @@ function rcube_mail_ui() $('iframe').load(function(e){ // this = iframe - var doc = this.contentDocument ? this.contentDocument : this.contentWindow ? this.contentWindow.document : null; - $(doc).mouseup(body_mouseup); + try { + var doc = this.contentDocument ? this.contentDocument : this.contentWindow ? this.contentWindow.document : null; + $(doc).mouseup(body_mouseup); + } + catch (e) { + // catch possible "Permission denied" error in IE + }; }) .contents().mouseup(body_mouseup); @@ -280,28 +302,36 @@ function rcube_mail_ui() /** * Update UI on window resize */ - function resize() + function resize(e) { - if (rcmail.env.task == 'mail') { - if (rcmail.env.action == 'show' || rcmail.env.action == 'preview') - layout_messageview(); - else if (rcmail.env.action == 'compose') - layout_composeview(); - } + // resize in intervals to prevent lags and double onresize calls in Chrome (#1489005) + var interval = e ? 10 : 0; + + if (rcmail.resize_timeout) + window.clearTimeout(rcmail.resize_timeout); - // make iframe footer buttons float if scrolling is active - $('body.iframe .footerleft').each(function(){ - var footer = $(this), - body = $(document.body), - floating = footer.hasClass('floating'), - overflow = body.outerHeight(true) > $(window).height(); - - if (overflow != floating) { - var action = overflow ? 'addClass' : 'removeClass'; - footer[action]('floating'); - body[action]('floatingbuttons'); + rcmail.resize_timeout = window.setTimeout(function() { + if (rcmail.env.task == 'mail') { + if (rcmail.env.action == 'show' || rcmail.env.action == 'preview') + layout_messageview(); + else if (rcmail.env.action == 'compose') + layout_composeview(); } - }); + + // make iframe footer buttons float if scrolling is active + $('body.iframe .footerleft').each(function(){ + var footer = $(this), + body = $(document.body), + floating = footer.hasClass('floating'), + overflow = body.outerHeight(true) > $(window).height(); + + if (overflow != floating) { + var action = overflow ? 'addClass' : 'removeClass'; + footer[action]('floating'); + body[action]('floatingbuttons'); + } + }); + }, interval); } /** @@ -414,6 +444,30 @@ function rcube_mail_ui() } + function enable_command(p) + { + if (p.command == 'reply-list') { + var label = rcmail.gettext(p.status ? 'replylist' : 'replyall'); + if (rcmail.env.action == 'preview') + $('a.button.replyall').attr('title', label); + else + $('a.button.reply-all').text(label).attr('title', label); + } + } + + + /** + * Register a popup menu + */ + function add_popup(popup, config) + { + var obj = popups[popup] = $('#'+popup); + obj.appendTo(document.body); // move it to top for proper absolute positioning + + if (obj.length) + popupconfig[popup] = $.extend(popupconfig[popup] || {}, config || {}); + } + /** * Trigger for popup menus */ @@ -421,7 +475,7 @@ function rcube_mail_ui() { // auto-register menu object if (config || !popupconfig[popup]) - popupconfig[popup] = $.extend(popupconfig[popup] || {}, config); + add_popup(popup, config); var visible = show_popupmenu(popup, show), config = popupconfig[popup]; @@ -436,7 +490,7 @@ function rcube_mail_ui() { var obj = popups[popup], config = popupconfig[popup], - ref = $('#'+popup+'link'), + ref = $(config.link ? config.link : '#'+popup+'link'), above = config.above; if (!obj) { @@ -452,7 +506,7 @@ function rcube_mail_ui() else if (config.toggle && show && obj.is(':visible')) show = false; - if (show && ref) { + if (show && ref.length) { var parent = ref.parent(), win = $(window), pos; @@ -546,7 +600,7 @@ function rcube_mail_ui() /** * Switch between short and full headers display in message preview */ - function toggle_preview_headers(button) + function toggle_preview_headers() { $('#preview-shortheaders').toggle(); var full = $('#preview-allheaders').toggle(), @@ -575,6 +629,19 @@ function rcube_mail_ui() /**** popup callbacks ****/ + function menu_open(p) + { + if (p && p.props && p.props.menu == 'attachmentmenu') + show_popupmenu('attachmentmenu'); + else + show_listoptions(); + } + + function menu_save(prop) + { + save_listoptions(); + } + function searchmenu(show) { if (show && rcmail.env.search_mods) { @@ -605,6 +672,21 @@ function rcube_mail_ui() } } + function attachmentmenu(elem) + { + var id = elem.parentNode.id.replace(/^attach/, ''); + + $('#attachmenuopen').unbind('click').attr('onclick', '').click(function(e) { + return rcmail.command('open-attachment', id, this); + }); + + $('#attachmenudownload').unbind('click').attr('onclick', '').click(function() { + rcmail.command('download-attachment', id, this); + }); + + popupconfig.attachmentmenu.link = elem; + rcmail.command('menu-open', {menu: 'attachmentmenu', id: id}); + } function spellmenu(show) { @@ -659,8 +741,6 @@ function rcube_mail_ui() $('input[name="sort_col"][value="'+rcmail.env.sort_col+'"]').prop('checked', true); $('input[name="sort_ord"][value="DESC"]').prop('checked', rcmail.env.sort_order == 'DESC'); $('input[name="sort_ord"][value="ASC"]').prop('checked', rcmail.env.sort_order != 'DESC'); - $('input[name="view"][value="thread"]').prop('checked', rcmail.env.threading ? true : false); - $('input[name="view"][value="list"]').prop('checked', rcmail.env.threading ? false : true); // set checkboxes $('input[name="list_col[]"]').each(function() { @@ -675,7 +755,8 @@ function rcube_mail_ui() close: function() { $dialog.dialog('destroy').hide(); }, - width: 650 + minWidth: 500, + width: $dialog.width()+25 }).show(); } @@ -689,11 +770,10 @@ function rcube_mail_ui() var sort = $('input[name="sort_col"]:checked').val(), ord = $('input[name="sort_ord"]:checked').val(), - thread = $('input[name="view"]:checked').val(), cols = $('input[name="list_col[]"]:checked') .map(function(){ return this.value; }).get(); - rcmail.set_list_options(cols, sort, ord, thread == 'thread' ? 1 : 0); + rcmail.set_list_options(cols, sort, ord, rcmail.env.threading); } @@ -940,11 +1020,11 @@ function rcube_scroller(list, top, bottom) this.delay = 500; this.top - .mouseenter(function() { ref.ts = window.setTimeout(function() { ref.scroll('down'); }, ref.delay); }) + .mouseenter(function() { if (rcmail.drag_active) ref.ts = window.setTimeout(function() { ref.scroll('down'); }, ref.delay); }) .mouseout(function() { if (ref.ts) window.clearTimeout(ref.ts); }); this.bottom - .mouseenter(function() { ref.ts = window.setTimeout(function() { ref.scroll('up'); }, ref.delay); }) + .mouseenter(function() { if (rcmail.drag_active) ref.ts = window.setTimeout(function() { ref.scroll('up'); }, ref.delay); }) .mouseout(function() { if (ref.ts) window.clearTimeout(ref.ts); }); this.scroll = function(dir) |
