From 2474b42198df59b75f7432ee79d4eca5b29b2edd Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Sun, 15 Apr 2018 00:27:30 -0400
Subject: [PATCH] Port lightbox icon buttons

---
 stylesheets/_lightbox.scss | 35 ++++++++++++++++++++++++
 ts/components/Lightbox.md  |  5 ++++
 ts/components/Lightbox.tsx | 56 ++++++++++++++++++++++++++++++--------
 3 files changed, 84 insertions(+), 12 deletions(-)
 create mode 100644 ts/components/Lightbox.md

diff --git a/stylesheets/_lightbox.scss b/stylesheets/_lightbox.scss
index bc34689b7..30ea3de96 100644
--- a/stylesheets/_lightbox.scss
+++ b/stylesheets/_lightbox.scss
@@ -7,3 +7,38 @@
   height: 100%;
   z-index: $z-index-modal;
 }
+
+.iconButton {
+  background: transparent;
+  width: 50px;
+  height: 50px;
+  margin-bottom: 10px;
+
+  display: inline-block;
+  cursor: pointer;
+  border-radius: 50%;
+  padding: 3px;
+
+  &:before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  &:hover {
+    background: $grey;
+  }
+
+  &.save {
+    &:before {
+      @include color-svg('../images/save.svg', white);
+    }
+  }
+
+  &.close {
+    &:before {
+      @include color-svg('../images/x.svg', white);
+    }
+  }
+}
diff --git a/ts/components/Lightbox.md b/ts/components/Lightbox.md
new file mode 100644
index 000000000..f99785e28
--- /dev/null
+++ b/ts/components/Lightbox.md
@@ -0,0 +1,5 @@
+```js
+<div style={{position: 'relative', width: '100%', height: 500}}>
+  <Lightbox imageURL="https://placekitten.com/800/600"/>
+</div>
+```
diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx
index ef3760edd..166c18b83 100644
--- a/ts/components/Lightbox.tsx
+++ b/ts/components/Lightbox.tsx
@@ -3,6 +3,7 @@
  */
 import React from 'react';
 
+import classNames from 'classnames';
 
 interface Props {
   imageURL?: string;
@@ -12,28 +13,59 @@ interface Props {
 
 const styles = {
   container: {
-    backgroundColor: 'rgba(0, 0, 0, 0.8)',
-    padding: 20,
-    width: '100%',
-    height: '100%',
-  },
+    display: 'flex',
+    flexDirection: 'row',
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.9)',
+    padding: 40,
+  } as React.CSSProperties,
+  objectContainer: {
+    display: 'inline-flex',
+    justifyContent: 'center',
+  } as React.CSSProperties,
   image: {
+    flexGrow: 1,
+    flexShrink: 0,
     maxWidth: '100%',
     maxHeight: '100%',
-    objectFit: 'cover',
-  }
+    objectFit: 'contain',
+  } as React.CSSProperties,
+  controls: {
+    flexShrink: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    marginLeft: 10,
+  } as React.CSSProperties
 };
 
+interface IconButtonProps {
+  type: 'save' | 'close';
+  onClick?: () => void;
+}
+const IconButton = ({ onClick, type }: IconButtonProps) => (
+  <a
+    href="#"
+    onClick={onClick}
+    className={classNames('iconButton', type)}
+  />
+);
+
 export class Lightbox extends React.Component<Props, {}> {
   public render() {
     const { imageURL } = this.props;
     return (
       <div style={styles.container}>
-        <img
-          style={styles.image}
-          src={imageURL}
-         />
-        <button onClick={this.props.close}>Close</button>
+        <div style={styles.objectContainer}>
+          {<img style={styles.image} src={imageURL} />}
+        </div>
+        <div style={styles.controls}>
+          <IconButton type="close" onClick={this.props.close} />
+          <IconButton type="save" />
+        </div>
       </div>
     );
   }