Changeset be72a0f9 in github

Timestamp:

Jun 28, 2012 1:37:54 PM (11 months ago)

Author:

Thomas Bruederli <thomas@…>

Children:

e154154

Parents:

d901205

Message:

Better style for preview header toggle

Location:

skins/larry

Files:

• iehacks.css (modified) (1 diff)
• mail.css (modified) (2 diffs)
• svggradient.php (modified) (2 diffs)
• svggradients.css (modified) (1 diff)
• templates/messagepreview.html (modified) (1 diff)

skins/larry/iehacks.css

@@ -144 +144 @@
 }
 
+#previewheaderstoggle {
+        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb', endColorstr='#e9e9e9', GradientType=1);
+}
+
 #composeoptionsbox {
         border-top: 1px solid #999;

skins/larry/mail.css

@@ -716 +716 @@
 }
 
+#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;
-}
-
-#previewheaderstoggle.iconlink.add {
-        background-position: -32px -227px;
-}
-
-#previewheaderstoggle.iconlink.remove {
-        background-position: -32px -242px;
+        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 {
+        display: inline-block;
+        position: absolute;
+        top: 8px;
+        left: 0;
+        width: 18px;
+        height: 16px;
+        background: url(images/buttons.png) -27px -242px no-repeat;
+}
+
+#previewheaderstoggle.remove .iconlink {
+        top: auto;
+        bottom: 5px;
+        background-position: -5px -242px;
 }
 
@@ -775 +793 @@
 
 #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;
 }
 

skins/larry/svggradient.php

@@ -19 +19 @@
 $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) {
@@ -33 +34 @@
 <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>

skins/larry/svggradients.css

@@ -138 +138 @@
 }
 
+#previewheaderstoggle {
+        background-image: url(svggradient.php?c=fbfbfb;e9e9e9&h=1);
+}
+
 
 /*** jqueryui theme ***/

skins/larry/templates/messagepreview.html

@@ -10 +10 @@
 <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>