From b540ed15a30cd9379df7feb62b0ae81a8a111e9c Mon Sep 17 00:00:00 2001
From: thomascube <thomas@roundcube.net>
Date: Wed, 14 Dec 2011 18:13:38 -0500
Subject: [PATCH] Larry is growing up
---
skins/larry/templates/folderedit.html | 27 ++++
skins/larry/templates/mail.html | 13 +
skins/larry/settings.css | 13 ++
skins/larry/templates/folders.html | 43 +++++++
skins/larry/styles.css | 66 ++++++++--
skins/larry/images/splitter.png | 0
skins/larry/mail.css | 59 ++++++++-
program/steps/settings/edit_identity.inc | 2
skins/larry/templates/identityedit.html | 2
skins/larry/templates/messagepreview.html | 40 ++++++
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 bf64d42..f0c4776 100644
--- a/program/steps/settings/edit_identity.inc
+++ b/program/steps/settings/edit_identity.inc
@@ -111,7 +111,7 @@
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
new file mode 100644
index 0000000..40ab487
--- /dev/null
+++ b/skins/larry/images/splitter.png
Binary files differ
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index 34fe36b..04266bc 100644
--- a/skins/larry/mail.css
+++ b/skins/larry/mail.css
@@ -624,6 +624,20 @@
/**** 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 @@
#messageheader,
#partheader {
+ position: relative;
padding: 3px 0;
background: #fff;
background: -moz-linear-gradient(top, #fff 0%, #e9e9e9 100%);
@@ -649,6 +664,15 @@
font-size: 15px;
margin: 0 15em 0 0;
padding: 4px 8px 2px 8px;
+ white-space: nowrap;
+ overflow: hidden;
+ 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;
@@ -694,6 +718,21 @@
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 @@
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 @@
padding: 8px;
}
-
#messagebody {
margin: 8px;
}
@@ -738,7 +778,9 @@
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,16 +802,11 @@
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,
@@ -812,7 +849,7 @@
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 ccb96c0..5f27ae7 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 0b9e1b4..3746ee3 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -213,25 +213,45 @@
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 @@
#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 @@
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 @@
.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;
@@ -549,6 +572,10 @@
cursor: default;
padding: 7px 8px 5px 8px;
white-space: nowrap;
+}
+
+.listing tbody td {
+ display: table-cell;
}
.listbox .listitem.selected,
@@ -570,7 +597,8 @@
background-color: #d9ecf4;
}
-ul.listing li.droptarget {
+ul.listing li.droptarget,
+table.listing tr.droptarget td {
background-color: #c7e3ef;
}
@@ -611,11 +639,11 @@
}
.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 {
@@ -639,6 +667,10 @@
body.iframe {
background: #fff;
margin: 38px 0 20px 0;
+}
+
+body.iframe.fullheight {
+ margin: 0;
}
.contentbox .boxtitle,
@@ -687,7 +719,13 @@
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 @@
#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 0000000..cfc8bc3
--- /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 0000000..385d268
--- /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 bfdf61d..1470982 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 cbaf740..88b7c58 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 0000000..2ea007f
--- /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 36a6893..f2e230f 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -37,7 +37,7 @@
// 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 @@
$('#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 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) });
}
--
Gitblit v1.9.1