Merge pull request #9 from colebillys19/color-picker-rithm

Updated User's Control of Caption (color picker compatibility & text placement)

package.json

@@ -6,6 +6,7 @@
     "classnames": "^2.2.6",
     "downloadjs": "^1.4.7",
     "react": "^16.7.0",
+    "react-color": "^2.17.3",
     "react-dom": "^16.7.0",
     "react-redux": "^6.0.0",
     "react-scripts": "2.1.2",

src/actions/index.js

@@ -95,6 +95,15 @@ export const updateGIFFileName = name => {
   };
 };
 
+export const updateTextPosition = textOpts => {
+  let { textAlign, textBaseline } = textOpts;
+
+  return {
+    type: types.UPDATE_TEXT_POSITION,
+    payload: { textAlign, textBaseline }
+  };
+};
+
 export const addGIF = imageData => ({
   type: types.ADD_GIF,
   payload: { imageData }
@@ -163,6 +172,7 @@ export const clearError = () => ({ type: types.CLEAR_ERROR });
 
 export const reset = () => {
   clearTimer();
+  localStorage.removeItem('selectValue');
   return { type: types.RESET };
 };
 

src/components/ColorPicker.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import { SketchPicker } from 'react-color';
+
+class ColorPicker extends Component {
+  constructor(props) {
+    super(props);
+    this.handleInputUpdate = this.handleInputUpdate.bind(this);
+  }
+
+  handleInputUpdate(color) {
+    this.props.updateTextColor(color.hex);
+  }
+
+  render() {
+    return (
+      <div>
+        <SketchPicker
+          className="ColorPicker-sketchPicker"
+          onChange={this.handleInputUpdate}
+          color={this.props.textColor}
+        />
+      </div>
+    );
+  }
+}
+
+export default ColorPicker;

src/components/GenerateGifForm.css

@@ -1,3 +1,7 @@
+.GenerateGifForm-form {
+  display: inline-block;
+}
+
 .GenerateGifForm-input {
   display: block;
   height: 20px;
@@ -25,10 +29,21 @@
   border-radius: 5px;
   color: #fff;
   cursor: pointer;
-  outline: none !important;
   animation: fade-in 0.5s;
 }
 
+.GenerateGifForm-container {
+  min-height: 100vh;
+}
+
+.GenerateGifForm-select {
+  width: 210px;
+  margin: 15px auto 0;
+  border: none;
+  height: 33px;
+  font-size: 1em;
+}
+
 .GenerateGifForm-button:hover {
   background: #484848;
 }
@@ -41,3 +56,27 @@
   border-color: #e79600;
   background: #484848;
 }
+
+.ColorPicker:hover {
+  cursor: pointer;
+}
+
+.ColorPicker {
+  display: block;
+  width: 210px;
+  margin: 15px auto 0;
+  color: #fff;
+  font-size: 1em;
+  padding: 1px;
+  border-radius: 5px;
+  text-align: center;
+  border: none;
+}
+
+.ColorPicker-sketchPicker {
+  display: inline-block;
+  margin: 15px auto 0;
+  font-size: 1em;
+  padding: 5px;
+  text-align: center;
+}

src/components/GenerateGifForm.js

@@ -1,11 +1,23 @@
 import React, { Component } from 'react';
 import './GenerateGifForm.css';
+import ColorPicker from './ColorPicker';
 
 class GenerateGifForm extends Component {
   constructor(props) {
     super(props);
-    this.handleInputUpdate = this.handleInputUpdate.bind(this);
+    this.state = {
+      showColorPicker: this.props.showColorPicker
+    };
     this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleInputUpdate = this.handleInputUpdate.bind(this);
+    this.renderColorPicker = this.renderColorPicker.bind(this);
+    this.closeColorPicker = this.closeColorPicker.bind(this);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.showColorPicker !== prevProps.showColorPicker) {
+      this.setState({ showColorPicker: this.props.showColorPicker });
+    }
   }
 
   handleSubmit(evt) {
@@ -21,38 +33,85 @@ class GenerateGifForm extends Component {
       case 'fontColor':
         this.props.updateTextColor(evt.target.value);
         break;
+
       case 'name':
         this.props.updateGIFFileName(evt.target.value);
         break;
+
+      case 'placement':
+        const [textBaseline, textAlign] = evt.target.value.split('-');
+        this.props.updateTextPosition({ textAlign, textBaseline });
+        localStorage.setItem('selectValue', evt.target.value);
+        break;
+
       default:
         break;
     }
   }
 
+  renderColorPicker() {
+    this.setState({ showColorPicker: !this.state.showColorPicker });
+    this.props.updateColorPicker(!this.state.showColorPicker);
+  }
+
+  closeColorPicker() {
+    this.setState({ showColorPicker: false });
+  }
+
   render() {
+    let currentValue = localStorage.getItem('selectValue') || 'DEFAULT';
+    let colorPicker = (
+      <ColorPicker
+        updateTextColor={this.props.updateTextColor}
+        textColor={this.props.fontColor}
+        closeColorPicker={this.closeColorPicker}
+        showColorPicker={this.state.showColorPicker}
+      />
+    );
+
+    let colorPickerBg = { backgroundColor: this.props.fontColor };
     return (
-      <form onSubmit={this.handleSubmit}>
+      <form className="GenerateGifForm-form" onSubmit={this.handleSubmit}>
         <input
           className="GenerateGifForm-input"
           name="name"
           onChange={this.handleInputUpdate}
-          placeholder="pick a name for your GIF"
+          placeholder="Add a File Name"
           value={this.props.gifFileName}
         />
         <input
           className="GenerateGifForm-input"
           name="caption"
           onChange={this.handleInputUpdate}
-          placeholder="add caption"
+          placeholder="Add a Caption"
           value={this.props.caption}
         />
-        <input
-          className="GenerateGifForm-input"
-          name="fontColor"
-          type="color"
+        <select
+          type="select"
+          className="GenerateGifForm-select"
+          name="placement"
+          id="GenerateGifForm-select"
           onChange={this.handleInputUpdate}
-          value={this.props.fontColor}
-        />
+          defaultValue={currentValue}
+        >
+          <option disabled value="DEFAULT">
+            Pick a Text Position
+          </option>
+          <option value="top-left">Top Left</option>
+          <option value="top-center">Top Center</option>
+          <option value="top-right"> Top Right</option>
+          <option value="bottom-left">Bottom Left</option>
+          <option value="bottom-center">Bottom Center</option>
+          <option value="bottom-right">Bottom Right</option>
+        </select>
+        <div
+          style={colorPickerBg}
+          onClick={this.renderColorPicker}
+          className="ColorPicker"
+        >
+          <p>Pick a Caption Color</p>
+        </div>
+        {this.state.showColorPicker ? colorPicker : null}
         <button
           className="GenerateGifForm-button"
           aria-label="generate gif"

src/components/Preview.css

@@ -7,12 +7,15 @@
   background: #2e2e2e;
   transform: translateX(-100%);
   transition: 0.2s transform;
+  margin-bottom: 0;
+  overflow: scroll;
 }
 
 .Preview-expanded {
   z-index: 1;
   transform: translateX(0);
   transition: 0.2s transform;
+  min-height: 100vh;
 }
 
 .Preview-scrubber {
@@ -30,16 +33,18 @@
   text-align: center;
   color: #fff;
   font-weight: bold;
+  width: 200px;
+  margin: 0 auto;
 }
 
 .Preview-create {
+  width: 200px;
   text-align: center;
-  margin-top: 20px;
+  margin: 20px auto 0;
 }
 
 .Preview-progress-outer {
   width: 210px;
-  height: 15px;
   margin: 15px auto 0;
 }