From 7d7bab0440c798aa2bb33a0af6ba855f07c8fe3e Mon Sep 17 00:00:00 2001
From: Henric Trotzig <henric.trotzig@brigade.com>
Date: Wed, 31 Aug 2016 23:06:27 -0700
Subject: [PATCH] On hover, show what's before and what's after

I asked my team about how they would make happo diffs better. One
interesting suggestion was to include a label for which image is the
before and after. It's easy to forget which one is the old and new one I
guess.

I'm making the label appear on hover only. It's located in the lower
right corner.
---
 lib/happo/public/HappoDiffs.jsx   | 39 +++++++++++++++++++++++++++----
 lib/happo/public/happo-styles.css | 23 ++++++++++++++++++
 2 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/lib/happo/public/HappoDiffs.jsx b/lib/happo/public/HappoDiffs.jsx
index ffa1a85..9b75507 100644
--- a/lib/happo/public/HappoDiffs.jsx
+++ b/lib/happo/public/HappoDiffs.jsx
@@ -178,14 +178,43 @@ Swiper.propTypes = {
   current: PropTypes.string.isRequired,
 };
 
+function SideBySide({ previous, current }) {
+  return (
+    <div className='SideBySide'>
+      <div className='SideBySide__image'>
+        <img
+          role='presentation'
+          src={previous}
+        />
+        <div className='SideBySide__caption'>
+          Before
+        </div>
+      </div>
+      {' '}
+      <div className='SideBySide__image'>
+        <img
+          role='presentation'
+          src={current}
+        />
+        <div className='SideBySide__caption'>
+          After
+        </div>
+      </div>
+    </div>
+  );
+}
+SideBySide.propTypes = {
+  previous: PropTypes.string.isRequired,
+  current: PropTypes.string.isRequired,
+};
+
 function SelectedView({ image, selectedView }) {
   if (selectedView === VIEWS.SIDE_BY_SIDE) {
     return (
-      <div>
-        <img role='presentation' src={image.previous} />
-        {' '}
-        <img role='presentation' src={image.current} />
-      </div>
+      <SideBySide
+        previous={image.previous}
+        current={image.current}
+      />
     );
   }
 
diff --git a/lib/happo/public/happo-styles.css b/lib/happo/public/happo-styles.css
index 2833318..58986f1 100644
--- a/lib/happo/public/happo-styles.css
+++ b/lib/happo/public/happo-styles.css
@@ -107,3 +107,26 @@ body {
 .Swiper__image {
   pointer-events: none;
 }
+
+.SideBySide__image {
+  display: inline-block;
+  line-height: 0;
+  position: relative;
+}
+
+.SideBySide__caption {
+  background-color: #666666;
+  bottom: 0;
+  color: #ffffff;
+  font-size: 10px;
+  line-height: 1;
+  opacity: 0;
+  padding: 3px 6px;
+  position: absolute;
+  right: 0;
+  transition: opacity .2s;
+}
+
+.SideBySide__image:hover .SideBySide__caption {
+  opacity: 1;
+}