diff options
| author | Tom <tw201207@gmail.com> | 2014-11-11 07:52:15 +0100 |
|---|---|---|
| committer | Tom <tw201207@gmail.com> | 2014-11-11 08:00:30 +0100 |
| commit | 7dd99fe7474604f314c01bcd4123eb7cbacfb583 (patch) | |
| tree | 84f3b0da388cdc79c2b31e6fab5619fc1617e455 /src/main/resources | |
| parent | 8cd4feca58b55f311a543c744777e930c4f4b34a (diff) | |
| download | gitblit-7dd99fe7474604f314c01bcd4123eb7cbacfb583.tar.gz gitblit-7dd99fe7474604f314c01bcd4123eb7cbacfb583.zip | |
Image diffs
Ticket 88: https://dev.gitblit.com/tickets/gitblit.git/88
Based on Lea Verou's pure CSS slider:
http://lea.verou.me/2014/07/image-comparison-slider-with-pure-css/
* Add a callback interface, pass it through DiffUtils to the
GitBlitDiffFormatter. Is needed because the rendering needs access
to the repositoryName and other things that are known only at higher
levels.
* New class ImageDiffHandler responsible for rendering an image diff.
Called for all binary diffs, doesn't do anything if it's not an
image. HTML is generated via JSoup: no worries about forgetting to
close a tag, not about HTML escaping, nor about XSS.
* The 3 diff pages set up such an ImageDIffHandler and pass it along.
* CSS changes: from Lea Verou, with some minor improvements.
I think in the long run there'll be no way around rewriting the
HTML diff formatter from scratch, not using the standard JGit
DiffFormatter at all.
Diffstat (limited to 'src/main/resources')
| -rw-r--r-- | src/main/resources/gitblit.css | 60 |
1 files changed, 60 insertions, 0 deletions
diff --git a/src/main/resources/gitblit.css b/src/main/resources/gitblit.css index 1064231c..f6d6b24d 100644 --- a/src/main/resources/gitblit.css +++ b/src/main/resources/gitblit.css @@ -1438,6 +1438,66 @@ div.diff > table { color: #555;
}
+/* Image diffs.
+ Kudos to Lea Verou: http://lea.verou.me/2014/07/image-comparison-slider-with-pure-css/
+ Slightly modified by Tom to allow moving the slider fully at the left edge of the images. */
+div.imgdiff {
+ margin: 5px 2px;
+ position: relative;
+ display: inline-block;
+ line-height: 0;
+ padding-left: 18px;
+}
+
+/* Note: width defines the initial position of the slider. Would have liked to have it
+ at 50% initially, but that fails on webkit, which refuses to go below the specified
+ width. (min-width won't help.) This is known behavior of webkit, see
+ https://codereview.chromium.org/239983004 and https://bugs.webkit.org/show_bug.cgi?id=72948
+ There is a hack (setting width to 1px in :hover) to work around this, but that causes
+ ugly screen flicker and makes for a dreadful UI. We're better off setting the slider
+ to the far left initially. */
+div.imgdiff-left {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: 18px;
+ max-width: 100%;
+ overflow: hidden;
+ resize: horizontal;
+ /* Some border that should be visible on most images, combined of a dark color (red)
+ and white in case the image was all red itself or used other colors that would make
+ a thin red line hard to make out. */
+ border-right: 1px solid red;
+ box-shadow: 1px 0px 0px 0px white;
+}
+
+div.imgdiff-left:before {
+ content: '';
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ width: 13px;
+ height: 13px;
+ background: linear-gradient(-45deg, red 50%, transparent 0);
+ background-clip: content-box;
+ cursor: ew-resize;
+}
+
+img.imgdiff-left {
+ margin-left: 18px; /* Compensate for padding on outer div. */
+}
+
+img.imagediff {
+ user-select: none;
+}
+
+.diff-img {
+ margin: 2px 2px;
+}
+
+/* End image diffs */
+
td.changeType {
width: 15px;
}
|