Implement color indication of selected ShapeOptions

dali-lab · Mar 5, 2017 · bb3fc1d · bb3fc1d
1 parent 3803f66
commit bb3fc1d
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 10 deletions.
diff --git a/app/components/ShapeBar.js b/app/components/ShapeBar.js
@@ -6,20 +6,20 @@ var electron = require('electron');
 import ShapeOption from './ShapeOption';
 
 export default class ShapeBar extends Component {
-  // Props: onShapeOptionClick, shape
+  // Props: onShapeOptionClick, shape, strSize
   constructor(props) {
     super(props);
   };
 
   render() {
     return (
       <div style={{position: 'absolute', backgroundColor: 'red', width: '100%', height: '10%', margin: 0, padding: 0}}>
-        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} option='Rect'/>
-        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} option='Circle'/>
-        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} option='Small'/>
-        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} option='Medium'/>
-        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} option='Big'/>
-        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} option='Fricken Huge'/>
+        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} strSize={this.props.strSize} option='Rect'/>
+        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} strSize={this.props.strSize} option='Circle'/>
+        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} strSize={this.props.strSize} option='Small'/>
+        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} strSize={this.props.strSize} option='Medium'/>
+        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} strSize={this.props.strSize} option='Big'/>
+        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} strSize={this.props.strSize} option='Fricken Huge'/>
       </div>);
   }
 }
diff --git a/app/components/ShapeOption.js b/app/components/ShapeOption.js
@@ -6,15 +6,22 @@ var electron = require('electron');
 const {Raphael,Paper,Set,Circle,Ellipse,Image,Rect,Text,Path,Line} = require('react-raphael');
 
 export default class Canvas extends Component {
-  // Props: onClick, shape, and option
+  // Props: onClick, shape, size, and option
   constructor(props) {
     super(props);
   };
 
   render() {
+    // If this ShapeOption is currently set, render it with a different color
+    let buttonColor = 'grey';
+
+    if (this.props.option == this.props.shape
+        || this.props.option == this.props.strSize)
+      buttonColor = 'aquamarine';
+
     return (
       <div onClick={this.props.onClick.bind(null, this)}
-          style={{position: 'relative', float: 'left', backgroundColor: 'grey', width: '10%', height: '90%', marginLeft: '5%', marginTop: '0.5%'}}>
+          style={{position: 'relative', float: 'left', backgroundColor: buttonColor, width: '10%', height: '90%', marginLeft: '5%', marginTop: '0.5%'}}>
         <p>{this.props.option}</p>
       </div>);
   }

diff --git a/app/containers/App.js b/app/containers/App.js
@@ -16,6 +16,7 @@ export default class App extends Component {
 
     this.state = {
       shape: 'Rect',
+      strSize: 'Small',
       size: 30,
     };
 
@@ -34,41 +35,47 @@ export default class App extends Component {
       case 'Rect':
         this.setState({
           shape: 'Rect',
+          strSize: this.state.strSize,
           size: this.state.size,
         });
         break;
 
       case 'Circle':
         this.setState({
           shape: 'Circle',
+          strSize: this.state.strSize,
           size: this.state.size,
         });
         break;
 
       case 'Small':
         this.setState({
           shape: this.state.shape,
+          strSize: component.props.option,
           size: 30,
         });
         break;
 
       case 'Medium':
         this.setState({
           shape: this.state.shape,
+          strSize: component.props.option,
           size: 60,
         });
         break;
 
       case 'Big':
         this.setState({
           shape: this.state.shape,
+          strSize: component.props.option,
           size: 90,
         });
         break;
 
       case 'Fricken Huge':
         this.setState({
           shape: this.state.shape,
+          strSize: component.props.option,
           size: 120,
         });
         break;
@@ -83,7 +90,7 @@ export default class App extends Component {
   render() {
     return (
       <div style={{position: 'absolute', width: '100%', height: '100%', margin: 0, padding: 0}}>
-        <ShapeBar onShapeOptionClick={this.onShapeOptionClick} shape={this.state.shape}/>
+        <ShapeBar onShapeOptionClick={this.onShapeOptionClick} shape={this.state.shape} strSize={this.state.strSize}/>
         <Canvas shape={this.state.shape} size={this.state.size}/>
       </div>);
   }