From be72a0f931373fcb4cbb3203307f4460e9759592 Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Thu, 28 Jun 2012 13:37:54 -0400
Subject: [PATCH] Better style for preview header toggle
---
skins/larry/svggradients.css | 4 ++
skins/larry/iehacks.css | 4 ++
skins/larry/mail.css | 54 +++++++++++++++++---------
skins/larry/svggradient.php | 3 +
skins/larry/templates/messagepreview.html | 2
5 files changed, 46 insertions(+), 21 deletions(-)
diff --git a/skins/larry/iehacks.css b/skins/larry/iehacks.css
index 38d68ac..9d0d782 100644
--- a/skins/larry/iehacks.css
+++ b/skins/larry/iehacks.css
@@ -143,6 +143,10 @@
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e9e9e9', GradientType=0);
}
+#previewheaderstoggle {
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb', endColorstr='#e9e9e9', GradientType=1);
+}
+
#composeoptionsbox {
border-top: 1px solid #999;
}
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index 4d53d92..ff389fa 100644
--- a/skins/larry/mail.css
+++ b/skins/larry/mail.css
@@ -715,29 +715,47 @@
display: none;
}
+#preview-allheaders td.header-title,
#preview-shortheaders td.header-title {
- padding-right: 0;
+ padding-left: 0;
}
#preview-shortheaders td.header {
- padding-right: 12px;
+ padding-right: 18px;
}
#previewheaderstoggle {
- width: 16px;
- height: 16px;
- padding: 0;
- margin-top: 5px;
- position: absolute;
- outline: none;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ width: 18px;
+ padding: 0;
+ outline: none;
+ background: #f2f2f2;
+ background: -moz-linear-gradient(left, #fbfbfb 0, #e9e9e9 100%);
+ background: -webkit-gradient(linear, left top, right top, color-stop(0,#fbfbfb), color-stop(100%,#e9e9e9));
+ background: -o-linear-gradient(left, #fbfbfb 0, #e9e9e9 100%);
+ background: -ms-linear-gradient(left, #fbfbfb 0, #e9e9e9 100%);
+ background: linear-gradient(left, #fbfbfb 0, #e9e9e9 100%);
+ border-right: 1px solid #dfdfdf;
}
-#previewheaderstoggle.iconlink.add {
- background-position: -32px -227px;
+#previewheaderstoggle .iconlink {
+ display: inline-block;
+ position: absolute;
+ top: 8px;
+ left: 0;
+ width: 18px;
+ height: 16px;
+ background: url(images/buttons.png) -27px -242px no-repeat;
}
-#previewheaderstoggle.iconlink.remove {
- background-position: -32px -242px;
+#previewheaderstoggle.remove .iconlink {
+ top: auto;
+ bottom: 5px;
+ background-position: -5px -242px;
}
div.more-headers {
@@ -774,17 +792,15 @@
}
#messagepreviewheader {
- margin: 0 8px;
- padding-bottom: 8px;
+ position: relative;
+ height: auto;
+ margin: 0 8px 0 0;
+ padding: 0 0 6px 26px;
border-bottom: 2px solid #f0f0f0;
}
-#messagepreviewheader .headers-table {
- margin-left: 8px;
-}
-
#messagepreviewheader h3.subject {
- padding-left: 0;
+ padding: 8px 8px 2px 0;
}
#messagepreviewheader #countcontrols,
diff --git a/skins/larry/svggradient.php b/skins/larry/svggradient.php
index 75705ed..c54bdec 100644
--- a/skins/larry/svggradient.php
+++ b/skins/larry/svggradient.php
@@ -18,6 +18,7 @@
$svg_stops = '';
$color_stops = explode(';', preg_replace('/[^a-f0-9,;%]/i', '', $_GET['c']));
+$gradient_coords = !empty($_GET['h']) ? 'x1="0%" y1="0%" x2="100%" y2="0%"' : 'x1="0%" y1="0%" x2="0%" y2="100%"';
$last = count($color_stops) - 1;
foreach ($color_stops as $i => $stop) {
list($color, $offset) = explode(',', $stop);
@@ -32,7 +33,7 @@
?>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.0" width="100%" height="100%">
<defs>
- <linearGradient id="LG1" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad">
+ <linearGradient id="LG1" <?php echo $gradient_coords; ?> spreadMethod="pad">
<?php echo $svg_stops; ?>
</linearGradient>
</defs>
diff --git a/skins/larry/svggradients.css b/skins/larry/svggradients.css
index ba596e3..7e64bed 100644
--- a/skins/larry/svggradients.css
+++ b/skins/larry/svggradients.css
@@ -137,6 +137,10 @@
background-image: url(svggradient.php?c=ffffff;e9e9e9);
}
+#previewheaderstoggle {
+ background-image: url(svggradient.php?c=fbfbfb;e9e9e9&h=1);
+}
+
/*** jqueryui theme ***/
diff --git a/skins/larry/templates/messagepreview.html b/skins/larry/templates/messagepreview.html
index cd9c234..fbca971 100644
--- a/skins/larry/templates/messagepreview.html
+++ b/skins/larry/templates/messagepreview.html
@@ -9,7 +9,7 @@
<div id="messagepreviewheader">
<h3 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h3>
-<a href="#details" id="previewheaderstoggle" class="iconlink add"></a>
+<a href="#details" id="previewheaderstoggle"><span class="iconlink"></span></a>
<table class="headers-table" id="preview-shortheaders"><tbody><tr>
<roundcube:if condition="env:mailbox == config:drafts_mbox || env:mailbox == config:sent_mbox">
--
Gitblit v1.9.1