From: Chuck Hagenbuch <chuck@horde.org>
Date: Sun, 14 Nov 2010 04:26:10 +0000 (-0500)
Subject: First try at CSS-layout diffs instead of table. Some nice gradient touches; a few... 
X-Git-Url: https://git.internetallee.de/?a=commitdiff_plain;h=67b9597b6f7c008a764f166ad12f9113fcf48238;p=horde.git

First try at CSS-layout diffs instead of table. Some nice gradient touches; a few rough edges.
---

diff --git a/chora/app/views/diff/added.html.php b/chora/app/views/diff/added.html.php
index d88932298..368fcb907 100644
--- a/chora/app/views/diff/added.html.php
+++ b/chora/app/views/diff/added.html.php
@@ -1,4 +1,4 @@
-<tr>
- <td class="diff-added-empty"></td>
- <td class="diff-added"><div class="diff"><pre><?php foreach ($lines as $l) echo $this->escape($l) . '<br>' ?></pre></div></td>
-</tr>
+<div class="diff-container">
+ <div class="diff-left diff-added-empty">&nbsp;</div>
+ <div class="diff-right diff-added"><pre><?php foreach ($lines as $l) echo $this->escape($l) . '<br>' ?></pre></div>
+</div>
diff --git a/chora/app/views/diff/change.html.php b/chora/app/views/diff/change.html.php
index d54ba5d7c..c73cab465 100644
--- a/chora/app/views/diff/change.html.php
+++ b/chora/app/views/diff/change.html.php
@@ -1,20 +1,17 @@
-<tr>
+<div class="diff-container">
 <?php if (!empty($left)): ?>
- <td class="diff-modified">
-  <div class="diff"><pre><?php echo $left ?></pre></div>
- </td>
+ <div class="diff-left diff-modified"><pre><?php echo $left ?></pre></div>
 <?php elseif ($row < $oldsize): ?>
- <td class="diff-modified"></td>
+ <div class="diff-left diff-modified">&nbsp;</div>
 <?php else: ?>
- <td class="diff-unmodified"></td>
+ <div class="diff-left diff-unmodified">&nbsp;</div>
 <?php endif; ?>
+
 <?php if (!empty($right)): ?>
- <td class="diff-modified">
-  <div class="diff"><pre><?php echo $right ?></pre></div>
- </td>
+ <div class="diff-right diff-modified"><pre><?php echo $right ?></pre></div>
 <?php elseif ($row < $newsize): ?>
- <td class="diff-modified"></td>
+ <div class="diff-right diff-modified">&nbsp;</div>
 <?php else: ?>
- <td class="diff-unmodified"></td>
+ <div class="diff-right diff-unmodified">&nbsp;</div>
 <?php endif; ?>
-</tr>
+</div>
diff --git a/chora/app/views/diff/context.html.php b/chora/app/views/diff/context.html.php
index 465893293..cd92d044c 100644
--- a/chora/app/views/diff/context.html.php
+++ b/chora/app/views/diff/context.html.php
@@ -1,4 +1,4 @@
-<tr class="diff-unmodified">
- <td><div class="diff"><pre><?php echo $context ?></pre></div></td>
- <td><div class="diff"><pre><?php echo $context ?></pre></div></td>
-</tr>
+<div class="diff-container">
+ <div class="diff-left diff-unmodified"><pre><?php echo $context ?></pre></div>
+ <div class="diff-right diff-unmodified"><pre><?php echo $context ?></pre></div>
+</div>
diff --git a/chora/app/views/diff/diff.html.php b/chora/app/views/diff/diff.html.php
index 64c042528..4d73155c3 100644
--- a/chora/app/views/diff/diff.html.php
+++ b/chora/app/views/diff/diff.html.php
@@ -1,10 +1,9 @@
-<table cellspacing="0" class="diff">
+<div class="diff">
 <?php foreach ($diff as $section): ?>
-<tbody>
-<tr>
- <th><?php printf(_("Line %s"), $section['oldline']) ?></th>
- <th><?php printf(_("Line %s"), $section['newline']) ?></th>
-</tr>
+<div class="diff-container diff-section">
+ <div class="diff-left"><h3><?php printf(_("Line %s"), $section['oldline']) ?></h3></div>
+ <div class="diff-right"><h3><?php printf(_("Line %s"), $section['newline']) ?></h3></div>
+</div>
 <?php
 foreach ($section['contents'] as $change) {
     if ($this->hasContext() && $change['type'] != 'empty') {
@@ -18,7 +17,7 @@ foreach ($section['contents'] as $change) {
 if ($this->hasContext()) {
     echo $this->diffContext();
 }
+
+endforeach;
 ?>
-</tbody>
-<?php endforeach ?>
-</table>
+</div>
diff --git a/chora/app/views/diff/removed.html.php b/chora/app/views/diff/removed.html.php
index ca3d2a6b8..c62e95fca 100644
--- a/chora/app/views/diff/removed.html.php
+++ b/chora/app/views/diff/removed.html.php
@@ -1,4 +1,4 @@
-<tr>
- <td class="diff-removed"><div class="diff"><pre><?php foreach ($lines as $l) echo $this->escape($l) . '<br>' ?></pre></div></td>
- <td class="diff-removed-empty"></td>
-</tr>
+<div class="diff-container">
+ <div class="diff-left diff-removed"><pre><?php foreach ($lines as $l) echo $this->escape($l) . '<br>' ?></pre></div>
+ <div class="diff-right diff-removed-empty">&nbsp;</div>
+</div>
diff --git a/chora/themes/screen.css b/chora/themes/screen.css
index bb7408c7a..6fb17aa4c 100644
--- a/chora/themes/screen.css
+++ b/chora/themes/screen.css
@@ -224,43 +224,62 @@ table.annotate .logentry {
 }
 
 /* Diff styles. */
-table.diff {
-    width: 100%;
+div.diff {
     font-size: 100%;
-    margin: 0 0 8px 0;
+    color: #111;
 }
-table.diff th {
-    font-size: 80%;
+div.diff-section {
+    margin-top: 1em;
+}
+div.diff-container:after {
+    content: ".";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
+}
+div.diff-container h3 {
     font-weight: bold;
 }
 
-div.diff {
-    overflow: auto;
+div.diff-left {
+    float: left;
+    width: 50%;
+    overflow-y: auto;
+}
+div.diff-right {
+    float: right;
+    width: 50%;
+    overflow-y: auto;
 }
 
 .diff-unmodified {
     background: #fff;
-    color: #666;
+    color: #999;
 }
 .diff-added {
-    background: #afa;
+    background: #cfc;
 }
 .diff-added-empty {
-    background: #cfc;
+    background: #efe;
+    background: -webkit-gradient(linear, left top, right top, from(#efe), to(#cfc));
+    background: -moz-linear-gradient(left top, #efe, #cfc);
 }
 .diff-modified {
-    background: #cdf;
+    background: #def;
 }
 .diff-removed {
-    background: #f99;
+    background: #fcc;
 }
 .diff-removed-empty {
-    background: #fcc;
+    background: #fee;
+    background: -webkit-gradient(linear, left top, right top, from(#fcc), to(#fee));
+    background: -moz-linear-gradient(left top, #fcc, #fee);
 }
 
 .diff-caption {
     text-align: left;
-    margin: 0 0 8px 0;
+    margin-top: 1em;
     font-size: 90%;
     font-weight: bold;
     padding: 5px;