summaryrefslogtreecommitdiff
path: root/skins/larry
diff options
context:
space:
mode:
Diffstat (limited to 'skins/larry')
-rw-r--r--skins/larry/ie7hacks.css10
-rw-r--r--skins/larry/iehacks.css4
-rw-r--r--skins/larry/images/contactpic_32px.pngbin3422 -> 333 bytes
-rw-r--r--skins/larry/images/contactpic_48px.pngbin3812 -> 409 bytes
-rw-r--r--skins/larry/mail.css147
-rw-r--r--skins/larry/svggradients.css4
-rw-r--r--skins/larry/templates/message.html56
-rw-r--r--skins/larry/templates/messageerror.html16
-rw-r--r--skins/larry/templates/messagepreview.html13
-rw-r--r--skins/larry/ui.js35
10 files changed, 153 insertions, 132 deletions
diff --git a/skins/larry/ie7hacks.css b/skins/larry/ie7hacks.css
index 935a504fe..893ffdfef 100644
--- a/skins/larry/ie7hacks.css
+++ b/skins/larry/ie7hacks.css
@@ -29,7 +29,7 @@ a.deletebutton,
.boxfooter .listbutton .inner,
.attachmentslist li a.delete,
.attachmentslist li a.cancelupload,
-#messageheader .iconlink {
+.previewheader .iconlink {
/* workaround for text-indent which also offsets the background image */
text-indent: 0;
font-size: 0;
@@ -45,7 +45,7 @@ a.deletebutton,
.pagenav a.button,
.pagenav a.button span.inner,
-#messageheader .iconlink,
+.previewheader .iconlink,
#uploadform a.iconlink {
display: inline;
}
@@ -58,6 +58,10 @@ a.deletebutton,
right: -2px;
}
+#login-form .box-inner form {
+ margin: 0;
+}
+
#login-form #message div {
float: left;
display: block;
@@ -67,7 +71,7 @@ a.deletebutton,
text-align: left;
}
-#messageheader .iconlink {
+#messageheader.previewheader .iconlink {
color: #fff;
height: 14px;
}
diff --git a/skins/larry/iehacks.css b/skins/larry/iehacks.css
index bba93dc33..93f483c11 100644
--- a/skins/larry/iehacks.css
+++ b/skins/larry/iehacks.css
@@ -143,8 +143,8 @@ ul.toolbarmenu li a.active:hover,
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#005d76', endColorstr='#004558', GradientType=0);
}
-#partheader, #composeheaders {
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e9e9e9', GradientType=0);
+#messageheader, #partheader, #composeheaders {
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0f0f0', GradientType=0);
}
#previewheaderstoggle {
diff --git a/skins/larry/images/contactpic_32px.png b/skins/larry/images/contactpic_32px.png
index 25a81418d..233bb1496 100644
--- a/skins/larry/images/contactpic_32px.png
+++ b/skins/larry/images/contactpic_32px.png
Binary files differ
diff --git a/skins/larry/images/contactpic_48px.png b/skins/larry/images/contactpic_48px.png
index 9cd3bceaf..e536ddf0e 100644
--- a/skins/larry/images/contactpic_48px.png
+++ b/skins/larry/images/contactpic_48px.png
Binary files differ
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index 04f56e134..a2756638d 100644
--- a/skins/larry/mail.css
+++ b/skins/larry/mail.css
@@ -38,6 +38,10 @@
bottom: 28px;
}
+#mailview-top.fullheight {
+ border-radius: 4px 4px 0 0;
+}
+
#mailview-bottom {
position: absolute;
left: 0;
@@ -46,10 +50,6 @@
height: 26px;
}
-#mailview-top.fullheight {
- border-radius: 4px 4px 0 0;
-}
-
#folderlist-header {
width: 100%;
height: 12px;
@@ -675,24 +675,33 @@ a.iconbutton.threadmode.selected {
#messagecontent {
position: absolute;
- top: 0;
+ top: 110px;
left: 0;
width: 100%;
- bottom: 28px;
+ bottom: 27px;
overflow: auto;
- border-radius: 4px 4px 0 0;
}
+#messageheader,
#partheader,
#composeheaders {
position: relative;
padding: 3px 0;
background: #f9f9f9;
- background: -moz-linear-gradient(top, #fff 0%, #e9e9e9 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#e9e9e9));
- background: -o-linear-gradient(top, #fff 0%, #e9e9e9 100%);
- background: -ms-linear-gradient(top, #fff 0%, #e9e9e9 100%);
- background: linear-gradient(top, #fff 0%, #e9e9e9 100%);
+ background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#f0f0f0));
+ background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%);
+ background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%);
+ background: linear-gradient(top, #fff 0%, #f0f0f0 100%);
+ border-bottom: 1px solid #dfdfdf;
+}
+
+#mailview-right #messageheader {
+ border-radius: 4px 4px 0 0;
+ padding-left: 78px;
+ /* avoid headers eating up all the vertical space */
+ max-height: 50%;
+ overflow: auto;
}
h2.subject {
@@ -704,9 +713,13 @@ h2.subject {
text-overflow: ellipsis;
}
+#mailview-right #messageheader h2.subject {
+ margin-left: -56px;
+}
+
h3.subject {
font-size: 14px;
- margin: 0 13em 0 0;
+ margin: 0 8em 0 0;
padding: 8px 8px 4px 8px;
white-space: nowrap;
overflow: hidden;
@@ -718,16 +731,23 @@ h3.subject {
padding: 2px 8px;
}
-.headers-table td.header {
+.headers-table td.header,
+.ui-dialog-content.popup span.adr {
font-weight: bold;
}
-.headers-table td.header a {
+.headers-table td.header-title {
+ white-space: nowrap;
+}
+
+.headers-table td.header a,
+.ui-dialog-content.popup span.adr a {
color: #666;
text-decoration: none;
}
-.headers-table td.header a:hover {
+.headers-table td.header a:hover,
+.ui-dialog-content.popup span.adr a:hover {
text-decoration: underline;
}
@@ -737,8 +757,15 @@ h3.subject {
font-weight: bold;
}
-.headers-table td.header span {
+.headers-table td.header span,
+.ui-dialog-content.popup span.adr {
+ white-space: nowrap;
+}
+
+.headers-table td.header a.morelink {
+ color: #0069a6;
white-space: nowrap;
+ font-weight: normal;
}
.rcmaddcontact {
@@ -796,29 +823,40 @@ h3.subject {
#previewheaderstoggle.remove .iconlink {
top: auto;
- bottom: 15px;
+ bottom: 5px;
background-position: -5px -242px;
}
-#previewheaderstoggle .iconlink.allheaders {
- display: none;
+#full-headers {
+ position: relative;
}
-#previewheaderstoggle.remove .iconlink.allheaders {
- top: auto;
- bottom: 2px;
- display: inline-block;
- background-position: -27px -242px;
+div.more-headers {
+ position: absolute;
+ top: -12px;
+ right: 10px;
+ width: 12px;
+ height: 10px;
+ cursor: pointer;
+ background: url(images/buttons.png) center -1619px no-repeat;
+}
+
+div.hide-headers {
+ background-position: center -1629px;
}
#all-headers {
position: relative;
- margin: 2px 0;
+ margin: 4px 10px;
padding: 0;
height: 180px;
- background-color: #f0f0f0;
- overflow: hidden;
+ border: 1px solid #ccc;
border-radius: 4px;
+ background: #fdfdfd;
+ -moz-box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1);
+ -webkit-box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1);
+ -o-box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1);
+ box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1);
}
#headers-source {
@@ -828,31 +866,28 @@ h3.subject {
left: 0;
right: 0;
bottom: 0;
- padding: 2px;
+ padding: 3px 6px;
overflow: auto;
text-align: left;
- color: #666;
+ color: #333;
+}
+
+#messageheader.previewheader #all-headers {
+ margin-left: 0;
}
-#messageheader {
+#messageheader.previewheader {
position: relative;
height: auto;
min-height: 52px;
- margin: 0 8px 0 0;
- padding: 0 0 0 72px;
- border-bottom: 2px solid #f0f0f0;
-}
-
-#messagecontent #messageheader {
- padding: 0 0 0 90px;
- min-height: 68px;
+ padding: 0 0 3px 72px;
}
-#messageheader h3.subject {
+#messageheader.previewheader h3.subject {
padding: 8px 8px 2px 0;
}
-#messageheader #contactphoto {
+#messageheader.previewheader #contactphoto {
display: block;
position: absolute;
top: 11px;
@@ -864,22 +899,26 @@ h3.subject {
border-radius: 3px;
}
-#messageheader #contactphoto img {
+#messageheader.previewheader #contactphoto img {
width: 32px;
height: auto;
border-radius: 3px;
}
-#messagecontent #messageheader #contactphoto {
- top: 11px;
- left: 31px;
+#messageheader #contactphoto {
+ display: block;
+ position: absolute;
+ top: 34px;
+ left: 30px;
width: 48px;
height: 48px;
- background: url(images/contactpic_48px.png) center center no-repeat #fff;
+ overflow: hidden;
border-radius: 4px;
+ border: 1px solid #e6e6e6;
+ background: url(images/contactpic_48px.png) center center no-repeat #fff;
}
-#messagecontent #messageheader #contactphoto img {
+#messageheader #contactphoto img {
width: 48px;
height: auto;
border-radius: 4px;
@@ -888,16 +927,25 @@ h3.subject {
#messageheader #countcontrols {
position: absolute;
top: 8px;
- right: 0;
+ right: 8px;
+ width: 20em;
text-align: right;
white-space: nowrap;
}
+#messageheader .pagenav .countdisplay {
+ min-width: 0;
+ padding-right: 0.5em;
+ white-space: nowrap;
+}
+
+#messagecontent .leftcol,
#messagepreview .leftcol {
margin-right: 252px;
overflow-x: auto;
}
+#messagecontent .rightcol,
#messagepreview .rightcol {
float: right;
/*
@@ -1110,6 +1158,7 @@ div.message-part blockquote blockquote blockquote {
-webkit-box-shadow: 0 2px 3px 0 #999;
-moz-box-shadow: 0 2px 3px 0 #999;
box-shadow: 0 2px 3px 0 #999;
+ border-bottom: 0;
}
#composebuttons {
@@ -1168,6 +1217,8 @@ div.message-part blockquote blockquote blockquote {
.compose-headers td input {
width: 100%;
resize: none;
+ font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
+ font-size: 11px;
}
#compose-cc, #compose-bcc, #compose-replyto, #compose-followupto {
diff --git a/skins/larry/svggradients.css b/skins/larry/svggradients.css
index 4f1dd8a05..5b3fedbfc 100644
--- a/skins/larry/svggradients.css
+++ b/skins/larry/svggradients.css
@@ -133,8 +133,8 @@ ul.toolbarmenu li a.active:hover,
background-image: url(svggradient.php?c=005d76;004558);
}
-#partheader, #composeheaders {
- background-image: url(svggradient.php?c=ffffff;e9e9e9);
+#messageheader, #partheader, #composeheaders {
+ background-image: url(svggradient.php?c=ffffff;f0f0f0);
}
#previewheaderstoggle {
diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html
index 89b7bd808..e99f2066a 100644
--- a/skins/larry/templates/message.html
+++ b/skins/larry/templates/message.html
@@ -24,38 +24,21 @@
<!-- folders list -->
<div id="mailboxcontainer" class="uibox listbox">
- <div class="scroller">
- <roundcube:object name="mailboxlist" id="mailboxlist" class="listing" folder_filter="mail" unreadwrap="%s" />
- </div>
+<div class="scroller">
+<roundcube:object name="mailboxlist" id="mailboxlist" class="listing" folder_filter="mail" unreadwrap="%s" />
+</div>
</div>
-</div><!-- end mailview-left -->
-
-<div id="mailview-right" class="uibox" style="top: 42px">
+</div>
-<div id="messagecontent">
+<div id="mailview-right" class="offset uibox">
<div id="messageheader">
-<h3 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h3>
-
-<a href="#details" id="previewheaderstoggle"><span class="iconlink"></span><span id="headerstoggleall" class="iconlink allheaders"></span></a>
-
-<div id="contactphoto"><roundcube:object name="contactphoto" /></div>
+<span id="previewheaderstoggle"></span>
-<table class="headers-table" id="preview-shortheaders"><tbody><tr>
-<roundcube:if condition="env:mailbox == config:drafts_mbox || env:mailbox == config:sent_mbox">
- <td class="header-title"><roundcube:label name="to" /></td>
- <td class="header from"><roundcube:object name="messageHeaders" valueOf="to" addicon="/images/addcontact.png" /></td>
-<roundcube:else />
- <td class="header-title"><roundcube:label name="from" /></td>
- <td class="header from"><roundcube:object name="messageHeaders" valueOf="from" addicon="/images/addcontact.png" /></td>
-<roundcube:endif />
- <td class="header-title"><roundcube:label name="date" /></td>
- <td class="header from"><roundcube:object name="messageHeaders" valueOf="date" /></td>
-</tr></tbody></table>
-
-<roundcube:object name="messageHeaders" id="preview-allheaders" class="headers-table" addicon="/images/addcontact.png" exclude="subject,replyto" />
-<roundcube:object name="messageFullHeaders" no-switch="true" />
+<h2 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h2>
+<roundcube:object name="messageHeaders" class="headers-table" addicon="/images/addcontact.png" exclude="subject" max="20" />
+<roundcube:object name="messageFullHeaders" id="full-headers" />
<!-- record navigation -->
<div id="countcontrols" class="pagenav">
@@ -64,19 +47,18 @@
<roundcube:button command="nextmessage" type="link" class="button nextpage disabled" classAct="button nextpage" classSel="button nextpage pressed" innerClass="inner" title="nextmessage" content="&amp;gt;" />
</div>
-</div><!-- end messageheader -->
-
-<div id="messagepreview">
- <div class="rightcol">
- <roundcube:object name="messageAttachments" id="attachment-list" class="attachmentslist" />
- </div>
- <div class="leftcol">
- <roundcube:object name="messageObjects" id="message-objects" />
- <roundcube:object name="messageBody" id="messagebody" />
- </div>
+<div id="contactphoto"><roundcube:object name="contactphoto" /></div>
</div>
-</div><!-- end messagecontent -->
+<div id="messagecontent">
+<div class="rightcol">
+<roundcube:object name="messageAttachments" id="attachment-list" class="attachmentslist" />
+</div>
+<div class="leftcol">
+<roundcube:object name="messageObjects" id="message-objects" />
+<roundcube:object name="messageBody" id="messagebody" />
+</div>
+</div>
<roundcube:object name="message" id="message" class="statusbar" />
diff --git a/skins/larry/templates/messageerror.html b/skins/larry/templates/messageerror.html
index 2f5243200..3c3c9acdb 100644
--- a/skins/larry/templates/messageerror.html
+++ b/skins/larry/templates/messageerror.html
@@ -16,6 +16,13 @@
<div id="mainscreen">
+<!-- toolbar -->
+<div id="messagetoolbar" class="fullwidth">
+ <div id="mailtoolbar" class="toolbar">
+ <roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" />
+ </div>
+</div>
+
<div id="mailview-left">
<!-- folders list -->
@@ -27,14 +34,7 @@
</div>
-<!-- toolbar -->
-<div id="messagetoolbar" class="fullwidth">
- <div id="mailtoolbar" class="toolbar">
- <roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="back" />
- </div>
-</div>
-
-<div id="mailview-right" class="uibox" style="top: 42px">
+<div id="mailview-right" class="offset uibox">
<div id="messagecontent" class="watermark"></div>
diff --git a/skins/larry/templates/messagepreview.html b/skins/larry/templates/messagepreview.html
index 74c414b0d..de02b050b 100644
--- a/skins/larry/templates/messagepreview.html
+++ b/skins/larry/templates/messagepreview.html
@@ -6,26 +6,27 @@
</head>
<body class="iframe fullheight">
-<div id="messageheader">
+<div id="messageheader" class="previewheader">
<h3 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h3>
-<a href="#details" id="previewheaderstoggle"><span class="iconlink"></span><span id="headerstoggleall" class="iconlink allheaders"></a>
+<a href="#details" id="previewheaderstoggle"><span class="iconlink" title="<roundcube:label name='togglemoreheaders' />"></span></a>
<div id="contactphoto"><roundcube:object name="contactphoto" /></div>
<table class="headers-table" id="preview-shortheaders"><tbody><tr>
<roundcube:if condition="env:mailbox == config:drafts_mbox || env:mailbox == config:sent_mbox">
<td class="header-title"><roundcube:label name="to" /></td>
- <td class="header from"><roundcube:object name="messageHeaders" valueOf="to" addicon="/images/addcontact.png" /></td>
+ <td class="header from"><roundcube:object name="messageHeaders" valueOf="to" max="3" addicon="/images/addcontact.png" /></td>
<roundcube:else />
<td class="header-title"><roundcube:label name="from" /></td>
<td class="header from"><roundcube:object name="messageHeaders" valueOf="from" addicon="/images/addcontact.png" /></td>
<roundcube:endif />
<td class="header-title"><roundcube:label name="date" /></td>
- <td class="header from"><roundcube:object name="messageHeaders" valueOf="date" /></td>
+ <td class="header date"><span><roundcube:object name="messageHeaders" valueOf="date" /></span></td>
</tr></tbody></table>
-<roundcube:object name="messageHeaders" id="preview-allheaders" class="headers-table" addicon="/images/addcontact.png" exclude="subject,replyto" />
-<roundcube:object name="messageFullHeaders" no-switch="true" />
+<roundcube:object name="messageHeaders" id="preview-allheaders" class="headers-table" addicon="/images/addcontact.png" max="10" exclude="subject,replyto" />
+
+<roundcube:object name="messageFullHeaders" id="full-headers" />
<!-- record navigation -->
<div id="countcontrols" class="pagenav">
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index c221b8681..9b5d8309c 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -73,9 +73,9 @@ function rcube_mail_ui()
}
if (rcmail.env.action == 'show' || rcmail.env.action == 'preview') {
- layout_messageview();
- $('#previewheaderstoggle').click(function(e){ toggle_preview_headers(this); return false; });
- $('#headerstoggleall').click(function(e){ toggle_all_headers(this); return false; });
+ rcmail.addEventListener('aftershow-headers', function() { layout_messageview(); });
+ rcmail.addEventListener('afterhide-headers', function() { layout_messageview(); });
+ $('#previewheaderstoggle').click(function(e){ toggle_preview_headers(this); return false });
}
else if (rcmail.env.action == 'compose') {
rcmail.addEventListener('aftertoggle-editor', function(){ window.setTimeout(function(){ layout_composeview() }, 200); });
@@ -320,6 +320,7 @@ function rcube_mail_ui()
*/
function layout_messageview()
{
+ $('#messagecontent').css('top', ($('#messageheader').outerHeight() + 1) + 'px');
$('#message-objects div a').addClass('button');
if (!$('#attachment-list li').length) {
@@ -512,31 +513,13 @@ function rcube_mail_ui()
{
$('#preview-shortheaders').toggle();
var full = $('#preview-allheaders').toggle(),
- button = $('#previewheaderstoggle');
-
- if (!$('#headerstoggleall').length)
- $('#all-headers').toggle();
+ button = $('a#previewheaderstoggle');
// add toggle button to full headers table
- if (full.is(':visible')) {
- button.attr('href', '#hide').removeClass('add').addClass('remove');
- }
- else {
- button.attr('href', '#details').removeClass('remove').addClass('add');
- }
- }
-
-
- /**
- * Show/hide all message headers
- */
- function toggle_all_headers(button)
- {
- rcmail.command('show-headers', '', button);
- $(button).remove();
- $('#previewheaderstoggle span').css({bottom: '5px'});
-
- return false;
+ if (full.is(':visible'))
+ button.attr('href', '#hide').removeClass('add').addClass('remove')
+ else
+ button.attr('href', '#details').removeClass('remove').addClass('add')
}