Better style for preview header toggle

Thomas Bruederli

2012-06-28 305ba1d5c4a571c10b7e0862a905c92e0db1831b

Better style for preview header toggle

 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;
}

 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,

 skins/larry/svggradient.php

@@ -20,6 +20,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);
@@ -34,7 +35,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>

 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 ***/


 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">