From b540ed15a30cd9379df7feb62b0ae81a8a111e9c Mon Sep 17 00:00:00 2001
From: thomascube <thomas@roundcube.net>
Date: Wed, 14 Dec 2011 23:13:38 +0000
Subject: Larry is growing up

---
 skins/larry/images/splitter.png           | Bin 0 -> 1050 bytes
 skins/larry/mail.css                      |  59 +++++++++++++++++++++-----
 skins/larry/settings.css                  |  13 ++++++
 skins/larry/styles.css                    |  66 +++++++++++++++++++++++-------
 skins/larry/templates/folderedit.html     |  27 ++++++++++++
 skins/larry/templates/folders.html        |  43 +++++++++++++++++++
 skins/larry/templates/identityedit.html   |   2 +-
 skins/larry/templates/mail.html           |  13 +++++-
 skins/larry/templates/messagepreview.html |  40 ++++++++++++++++++
 skins/larry/ui.js                         |  38 +++++++++++++----
 10 files changed, 266 insertions(+), 35 deletions(-)
 create mode 100644 skins/larry/images/splitter.png
 create mode 100644 skins/larry/templates/folderedit.html
 create mode 100644 skins/larry/templates/folders.html
 create mode 100644 skins/larry/templates/messagepreview.html

(limited to 'skins/larry')

diff --git a/skins/larry/images/splitter.png b/skins/larry/images/splitter.png
new file mode 100644
index 000000000..40ab4875d
Binary files /dev/null and b/skins/larry/images/splitter.png differ
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()" />&nbsp;
+	<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="&#9881;" />
+</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="&lt;&gt;" />
+<!--
+	&nbsp;
+	<roundcube:button command="previousmessage" type="link" class="button pageup disabled" classAct="button pageup" classSel="button pageup pressed" innerClass="inner" title="previousmessage" content="&amp;lt;" />
+	<roundcube:button command="nextmessage" type="link" class="button pagedown disabled" classAct="button pagedown" classSel="button pagedown pressed" innerClass="inner" title="nextmessage" content="&amp;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) });
   }
 
 
-- 
cgit v1.2.3