diff options
-rw-r--r-- | program/steps/settings/edit_identity.inc | 2 | ||||
-rw-r--r-- | skins/larry/images/splitter.png | bin | 0 -> 1050 bytes | |||
-rw-r--r-- | skins/larry/mail.css | 59 | ||||
-rw-r--r-- | skins/larry/settings.css | 13 | ||||
-rw-r--r-- | skins/larry/styles.css | 66 | ||||
-rw-r--r-- | skins/larry/templates/folderedit.html | 27 | ||||
-rw-r--r-- | skins/larry/templates/folders.html | 43 | ||||
-rw-r--r-- | skins/larry/templates/identityedit.html | 2 | ||||
-rw-r--r-- | skins/larry/templates/mail.html | 13 | ||||
-rw-r--r-- | skins/larry/templates/messagepreview.html | 40 | ||||
-rw-r--r-- | skins/larry/ui.js | 38 |
11 files changed, 267 insertions, 36 deletions
diff --git a/program/steps/settings/edit_identity.inc b/program/steps/settings/edit_identity.inc index bf64d4265..f0c477673 100644 --- a/program/steps/settings/edit_identity.inc +++ b/program/steps/settings/edit_identity.inc @@ -111,7 +111,7 @@ function rcube_identity_form($attrib) array('name' => '_iid', 'value' => $IDENTITY_RECORD['identity_id'])); unset($plugin); - unset($attrib['form']); + unset($attrib['form'], $attrib['id']); // return the complete edit form as table $out = "$form_start\n"; diff --git a/skins/larry/images/splitter.png b/skins/larry/images/splitter.png Binary files differnew file mode 100644 index 000000000..40ab4875d --- /dev/null +++ b/skins/larry/images/splitter.png diff --git a/skins/larry/mail.css b/skins/larry/mail.css index 34fe36b38..04266bc49 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -624,6 +624,20 @@ html.chrome #messagelist tr td.threads { /**** message view ****/ +#mailpreviewframe { + display: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + bottom: 28px; +} + +#messagecontframe { + border: 0; + border-radius: 4px 4px 0 0; +} + #messagecontent { position: absolute; top: 140px; @@ -636,6 +650,7 @@ html.chrome #messagelist tr td.threads { #messageheader, #partheader { + position: relative; padding: 3px 0; background: #fff; background: -moz-linear-gradient(top, #fff 0%, #e9e9e9 100%); @@ -654,6 +669,15 @@ h2.subject { text-overflow: ellipsis; } +h3.subject { + font-size: 14px; + margin: 0 8em 0 0; + padding: 8px 8px 4px 8px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + .headers-table td { color: #666; padding: 2px 8px; @@ -694,6 +718,21 @@ h2.subject { height: 13px; } +#messagepreviewheader { + margin: 0 8px; + padding-bottom: 8px; + border-bottom: 2px solid #f0f0f0; +} + +#messagepreviewheader .headers-table { + margin: 0 -8px; +} + +#messagepreviewheader h3.subject { + padding-left: 0; +} + +#messagepreviewheader #countcontrols, #messageheader #countcontrols { position: absolute; top: 8px; @@ -709,11 +748,13 @@ h2.subject { white-space: nowrap; } -#messagecontent .leftcol { +#messagecontent .leftcol, +#messagepreview .leftcol { margin-right: 250px; } -#messagecontent .rightcol { +#messagecontent .rightcol, +#messagepreview .rightcol { float: right; /* position: absolute; @@ -728,7 +769,6 @@ h2.subject { padding: 8px; } - #messagebody { margin: 8px; } @@ -738,7 +778,9 @@ h2.subject { margin: 8px; } -#message-objects div.notice { +#message-objects div.notice, +#message-buttons div.notice { + display: block; color: #960; border: 1px solid #ffdf0e; background-color: #fef893; @@ -760,18 +802,13 @@ h2.subject { div.message-part, div.message-htmlpart { padding: 10px 2px; - border-top: 1px solid #ccc; + border-top: 2px solid #f0f0f0; } #messagebody div:first-child { border-top: 0; } -div.message-part a, -div.message-htmlpart a { - color: #0000CC; -} - div.message-part pre, div.message-htmlpart pre, div.message-part div.pre { @@ -812,7 +849,7 @@ div.message-part blockquote blockquote blockquote { color: #fff; background: #fff; border: 0; - border-bottom: 2px dotted #ccc; + border-bottom: 2px solid #f0f0f0; } #messagebody > p > img { diff --git a/skins/larry/settings.css b/skins/larry/settings.css index ccb96c0ca..5f27ae7ac 100644 --- a/skins/larry/settings.css +++ b/skins/larry/settings.css @@ -145,6 +145,7 @@ background-position: 6px -550px; } +#folderslist, #identitieslist { position: absolute; top: 0; @@ -153,6 +154,7 @@ bottom: 0; } +#folder-details, #identity-details { position: absolute; top: 0; @@ -161,3 +163,14 @@ bottom: 0; } +#subscription-table tr.root td { + font-size: 5%; + height: 5px; + padding: 2px; +} + +#subscription-table td.subscribed { + padding: 3px 12px 3px 3px; + text-align: right; +} + diff --git a/skins/larry/styles.css b/skins/larry/styles.css index 0b9e1b49c..3746ee3c2 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -213,25 +213,45 @@ input.button:active { background: linear-gradient(top, #bababa 0%, #d8d8d8 100%); } +.pagenav a.button { + padding: 1px 3px; +} + .pagenav a.button span.inner { display: inline-block; - width: 12px; - height: 12px; + width: 16px; + height: 13px; text-indent: 1000px; overflow: hidden; - background: url(images/buttons.png) -8px -211px no-repeat; + background: url(images/buttons.png) -6px -211px no-repeat; } .pagenav a.prevpage span.inner { - background-position: -8px -226px; + background-position: -7px -226px; } .pagenav a.nextpage span.inner { - background-position: -30px -226px; + background-position: -28px -226px; } .pagenav a.lastpage span.inner { - background-position: -30px -211px; + background-position: -28px -211px; +} + +.pagenav a.pageup span.inner { + background-position: -7px -256px; +} + +.pagenav a.pagedown span.inner { + background-position: -29px -256px; +} + +.pagenav a.viewsource span.inner { + background-position: -7px -271px; +} + +.pagenav a.extwin span.inner { + background-position: -29px -271px; } .pagenav .countdisplay { @@ -270,7 +290,7 @@ a.iconbutton.reset { #message-objects div.notice { color: #555; font-weight: bold; - padding: 6px 40px 6px 25px; + padding: 6px 30px 6px 25px; display: inline-block; white-space: nowrap; background: url(images/messages.png) 0 5px no-repeat; @@ -311,6 +331,9 @@ a.iconbutton.reset { background: -o-linear-gradient(top, #eaeaea 0%, #c8c8c8 100%); background: -ms-linear-gradient(top, #eaeaea 0%, #c8c8c8 100%); background: linear-gradient(top, #eaeaea 0%, #c8c8c8 100%); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } @@ -530,8 +553,8 @@ a.iconbutton.reset { .listbox .tablink, .listing tbody td, .listing li { - font-size: 11px; display: block; + font-size: 11px; border-top: 1px solid #fff; border-bottom: 1px solid #bbd3da; cursor: default; @@ -551,6 +574,10 @@ a.iconbutton.reset { white-space: nowrap; } +.listing tbody td { + display: table-cell; +} + .listbox .listitem.selected, .listbox .tablink.selected, .listing tbody tr.selected td, @@ -570,7 +597,8 @@ ul.listing li { background-color: #d9ecf4; } -ul.listing li.droptarget { +ul.listing li.droptarget, +table.listing tr.droptarget td { background-color: #c7e3ef; } @@ -611,11 +639,11 @@ table.listing { } .boxfooter .listbutton.add .inner { - background-position: 8px -1210px; + background-position: 10px -1210px; } .boxfooter .listbutton.groupactions .inner { - background-position: 4px -1292px; + background-position: 5px -1292px; } .centerbox { @@ -641,6 +669,10 @@ body.iframe { margin: 38px 0 20px 0; } +body.iframe.fullheight { + margin: 0; +} + .contentbox .boxtitle, body.iframe .boxtitle { color: #777; @@ -687,7 +719,13 @@ body.iframe .boxtitle { display: block; font-size: 14px; font-weight: bold; - margin-bottom: 10px; + padding-bottom: 10px; + margin-bottom: 0; +} + +.propform fieldset fieldset legend { + color: #666; + font-size: 12px; } table.propform { @@ -1004,9 +1042,9 @@ ul.toolbarmenu li label { #rcmdraglayer { - min-width: 300px; + min-width: 260px; width: auto !important; - width: 300px; + width: 260px; padding: 6px 8px; background: #444; border: 1px solid #555; diff --git a/skins/larry/templates/folderedit.html b/skins/larry/templates/folderedit.html new file mode 100644 index 000000000..cfc8bc3d4 --- /dev/null +++ b/skins/larry/templates/folderedit.html @@ -0,0 +1,27 @@ +<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:label name="folderproperties" /></h1> + +<div class="boxcontent"> +<roundcube:object name="folderdetails" class="propform" /> +</div> + +<div id="formfooter"> +<div class="footerleft formbuttons"> + <roundcube:button command="save" type="input" class="button mainaction" label="save" /> + <roundcube:if condition="!strlen(request:_mbox)" /> + <input type="button" value="<roundcube:label name="cancel" />" class="button" onclick="history.back()" /> + <roundcube:endif /> +</div> +</div> + +<roundcube:include file="/includes/footer.html" /> + +</body> +</html> diff --git a/skins/larry/templates/folders.html b/skins/larry/templates/folders.html new file mode 100644 index 000000000..385d2686f --- /dev/null +++ b/skins/larry/templates/folders.html @@ -0,0 +1,43 @@ +<roundcube:object name="doctype" value="html5" /> +<html> +<head> +<title><roundcube:object name="pagetitle" /></title> +<roundcube:include file="/includes/links.html" /> +</head> +<body> + +<roundcube:include file="/includes/header.html" /> + +<div id="mainscreen" class="offset"> + +<roundcube:include file="/includes/settingstabs.html" /> + +<div id="folderslist" class="uibox listbox"> +<h2 class="boxtitle"><span style="float:right"><roundcube:label name="subscribed" /></span><roundcube:label name="folders" /></h2> +<div class="scroller withfooter"> +<roundcube:object name="foldersubscription" form="subscriptionform" id="subscription-table" class="listing" noheader="true" /> +</div> +<div class="boxfooter"> + <roundcube:button command="create-folder" type="link" title="createfolder" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="listbutton groupactions" onclick="UI.show_popup('mailboxmenu');return false" innerClass="inner" content="⚙" /> +</div> +</div> + +<div id="folder-details" class="uibox contentbox"> + <roundcube:object name="folderframe" id="preferences-frame" style="width:100%; height:96%" src="/watermark.html" /> + <roundcube:object name="message" id="message" class="statusbar" /> +</div> + +</div> + +<div id="mailboxmenu" class="popupmenu"> + <ul class="toolbarmenu" id="mailboxoptionsmenu"> + <li><roundcube:button command="delete-folder" label="delete" classAct="active" /></li> + <li><roundcube:button command="purge" type="link" label="empty" classAct="active" /></li> + <roundcube:container name="mailboxoptions" id="mailboxoptionsmenu" /> + </ul> +</div> + +<roundcube:include file="/includes/footer.html" /> + +</body> +</html> diff --git a/skins/larry/templates/identityedit.html b/skins/larry/templates/identityedit.html index bfdf61d81..147098286 100644 --- a/skins/larry/templates/identityedit.html +++ b/skins/larry/templates/identityedit.html @@ -30,7 +30,7 @@ <p class="formbuttons"> <roundcube:button command="save" type="input" class="button mainaction" label="save" /> - <roundcube:button command="delete" type="input" class="button" label="delete" condition="env:action=='edit-identity'" style="margin-left:0.5em" /> + <roundcube:button command="delete" type="input" class="button" label="delete" condition="env:action=='edit-identity'" /> </p> </div> diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html index cbaf740f8..88b7c5840 100644 --- a/skins/larry/templates/mail.html +++ b/skins/larry/templates/mail.html @@ -3,6 +3,14 @@ <head> <title><roundcube:object name="pagetitle" /></title> <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-38 : 300" />px; } + #mailview-bottom { top: <roundcube:exp expression="!empty(cookie:mailviewsplitter) ? cookie:mailviewsplitter+5 : 320" />px; height: auto; } + #mailpreviewframe { display: block; } +<roundcube:endif /> +</style> + </head> <body> @@ -74,8 +82,9 @@ </div><!-- end mailview-top --> <div id="mailview-bottom" class="uibox"> -<div id="mailpreviewframe"> +<div id="mailpreviewframe"> +<roundcube:object name="messagecontentframe" id="messagecontframe" style="width:100%; height:100%" src="/watermark.html" /> </div> <roundcube:object name="message" id="message" class="statusbar" /> @@ -105,7 +114,7 @@ </div> <div id="mailboxmenu" class="popupmenu"> - <ul class="toolbarmenu"> + <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="folders" task="settings" type="link" label="managefolders" classAct="active" /></li> diff --git a/skins/larry/templates/messagepreview.html b/skins/larry/templates/messagepreview.html new file mode 100644 index 000000000..2ea007f2c --- /dev/null +++ b/skins/larry/templates/messagepreview.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="iframe fullheight"> + +<div id="messagepreviewheader"> +<h3 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h3> +<roundcube:object name="messageHeaders" class="headers-table" addicon="/images/addcontact.png" exclude="subject,replyto" /> +<roundcube:object name="messageFullHeaders" id="full-headers" /> + +<!-- record navigation --> +<div id="countcontrols" class="pagenav"> + <roundcube:button command="permaurl" type="link" class="button extwin" classSel="button extwin pressed" innerClass="inner" title="openinextwin" content="[]" target="_blank" /> + <roundcube:button command="viewsource" type="link" class="button viewsource" classSel="button extwin pressed" innerClass="inner" title="viewsource" content="<>" /> +<!-- + + <roundcube:button command="previousmessage" type="link" class="button pageup disabled" classAct="button pageup" classSel="button pageup pressed" innerClass="inner" title="previousmessage" content="&lt;" /> + <roundcube:button command="nextmessage" type="link" class="button pagedown disabled" classAct="button pagedown" classSel="button pagedown pressed" innerClass="inner" title="nextmessage" content="&gt;" /> +--> +</div> + +</div> + +<div id="messagepreview"> +<div class="rightcol"> +<roundcube:object name="messageAttachments" id="attachment-list" /> +</div> +<div class="leftcol"> +<roundcube:object name="messageObjects" id="message-objects" /> +<roundcube:object name="messageBody" id="messagebody" /> +</div> +</div> + +<roundcube:include file="/includes/footer.html" /> + +</body> +</html> diff --git a/skins/larry/ui.js b/skins/larry/ui.js index 36a68938e..f2e230fc3 100644 --- a/skins/larry/ui.js +++ b/skins/larry/ui.js @@ -37,7 +37,7 @@ function rcube_mail_ui() // rcmail.addEventListener('aftersend-attachment', 'uploadmenu', rcmail_ui); // rcmail.addEventListener('aftertoggle-editor', 'resize_compose_body_ev', rcmail_ui); rcmail.gui_object('message_dragmenu', 'dragmessagemenu'); - $('#mailpreviewtoggle').click(function(e){ toggle_preview_pane(e); return false }); + $('#mailpreviewtoggle').addClass($('#mailpreviewframe').is(':visible') ? 'enabled' : 'closed').click(function(e){ toggle_preview_pane(e); return false }); $('#maillistmode').addClass(rcmail.env.threading ? '' : 'selected').click(function(e){ switch_view_mode('list'); return false }); $('#mailthreadmode').addClass(rcmail.env.threading ? 'selected' : '').click(function(e){ switch_view_mode('thread'); return false }); @@ -101,8 +101,8 @@ function rcube_mail_ui() $('#message-objects div a').addClass('button'); if (!$('#attachment-list li').length) { - $('#messagecontent div.rightcol').hide(); - $('#messagecontent .leftcol').css('margin-right', '0'); + $('div.rightcol').hide(); + $('div.leftcol').css('margin-right', '0'); } } @@ -189,12 +189,36 @@ function rcube_mail_ui() function toggle_preview_pane(e) { - var button = $(e.target); - var visible = !button.hasClass('enabled'); - + var button = $(e.target), + frame = $('#mailpreviewframe'), + visible = !frame.is(':visible'), + splitter = parseInt(bw.get_cookie('mailviewsplitter') || 320), + topstyles, bottomstyles, uid; + + frame.toggle(); button.removeClass().addClass(visible ? 'enabled' : 'closed'); -// rcmail.command('save-pref', { name:'preview_pane', value:(visible?1:0) }); + if (visible) { + topstyles = { height:(splitter-38)+'px', bottom:'auto' }; + bottomstyles = { top:(splitter+5)+'px', height:'auto' }; + rcmail.env.contentframe = 'messagecontframe'; + if (uid = rcmail.message_list.get_single_selection()) + rcmail.show_message(uid, false, true); + } + else { + topstyles = { height:'auto', bottom:'28px' }; + bottomstyles = { top:'auto', height:'26px' }; + rcmail.env.contentframe = null; + rcmail.show_contentframe(false); + } + + $('#mailview-top').css(topstyles); + $('#mailview-bottom').css(bottomstyles); + + if (visible && uid && rcmail.message_list) + rcmail.message_list.scrollto(uid); + + rcmail.command('save-pref', { name:'preview_pane', value:(visible?1:0) }); } |