Merged with master

ZachLamb · Oct 27, 2016 · e4307cf · e4307cf
2 parents 8d27ae9 + eb988aa
commit e4307cf
Show file tree

Hide file tree

Showing 18 changed files with 348 additions and 127 deletions.
diff --git a/firebase/gridProjectDataRules.json b/firebase/gridProjectDataRules.json
@@ -9,15 +9,16 @@
         },
         "grids" : {
             "$grid" : {
-                ".read" : "auth != null && data.child('users').child(auth.uid).exists()",
-                ".write" : "auth != null && data.child('users').child(auth.uid).exists()",
+                ".read" : "auth != null && (data.child('users').child(auth.uid).exists() || !data.exists())",
+                ".write" : "auth != null && (data.child('users').child(auth.uid).exists() || !data.exists())",
     			".validate" : "newData.hasChildren()",
                 "numCols" : {
                   ".validate" : "newData.val() > 0"
                 },
                 "numRows" : {
                   ".validate" : "newData.val() > 0"
                 },
+                "name" : {},
                 "users" : {},
                 "$row" : {
                     ".validate" : "$row.matches(/^(r)[0-9]+$/) && newData.hasChildren()",

diff --git a/firebase/gridProjectSchema.json b/firebase/gridProjectSchema.json
@@ -1,22 +1,22 @@
 {
-    "grids" : {
-        "grid0" : {
-            "numCols" : 3,
-            "numRows" : 3,
-            "users" : {
-                "sa" : true
-            },
-            "owner" : "sa",
-            "r0" : {
-                "c0" : "rgb(0, 0, 0)"
-            }
+    "grids" : [ {
+        "name" : "grid0",
+        "numCols" : 3,
+        "numRows" : 3,
+        "users" : {
+            "sa" : true
+        },
+        "owner" : "sa",
+        "r0" : {
+            "c0" : "rgb(0, 0, 0)"
         }
-    },
+    } ],
     "users" : {
         "sa" : {
             "admin" : true,
             "email": "[email protected]",
-            "grids" : [ "grid0" ]
+            "grids" : {
+                "gridHash": "grid0"
         }
     }
 }
diff --git a/package.json b/package.json
@@ -18,8 +18,10 @@
   "dependencies": {
     "bootstrap": "^4.0.0-alpha.3",
     "firebase": "^3.4.1",
+    "lodash": "^4.16.4",
     "node-sass": "^3.9.2",
     "react": "15.3.0",
+    "react-bootstrap": "^0.30.5",
     "react-dom": "15.3.0",
     "sass-loader": "^4.0.1"
   },

diff --git a/src/_base.scss b/src/_base.scss
@@ -1,11 +1,13 @@
+.button {
+    margin: 3px 2px;
+}
 .cell {
     border: 1px solid rgba(0, 0, 0, 0.3);
     display: inline-block;
-    height: 4vw;
-    margin: 0 3px;
-    width: 4vw;
+    height: 2.6vw;
+    margin: 0;
+    width: 2.6vw;
 }
-
 .topBuffer {
   margin-top: 20px;
 }
@@ -15,11 +17,9 @@
     display: inline-block;
     margin: 20px auto;
 }
-
 .matrixColumn {
     display: inline-block;
-    margin: 0;
-    padding: 0;
+    font-size: 0;
 }
 
 /* Palette Styles */
@@ -37,11 +37,23 @@
     width: 4.5vw;
 }
 
+/* Modal Styles */
+.sharedWith {
+    font-size: 12px;
+    margin-top: 7px;
+}
+.modalButton {
+    margin: 0 5px;
+}
+.userList {
+    color: $blue;
+}
+
 /* Media Queries */
 @media( max-width: 970px ){
     .cell {
-        height: 30px;
-        width: 30px;
+        height: 20px;
+        width: 20px;
     }
     .palette {
         margin: 10px auto;

diff --git a/src/_colors.scss b/src/_colors.scss
@@ -4,12 +4,27 @@
 .redPaint {
     background-color: $red;
 }
+.pinkPaint {
+	background-color: $pink;
+}
+.orangePaint {
+	background-color: $orange;
+}
+.yellowPaint {
+	background-color: $yellow;
+}
 .greenPaint {
     background-color: $green;
 }
 .bluePaint {
     background-color: $blue;
 }
+.tealPaint {
+	background-color: $teal;
+}
+.purplePaint {
+	background-color: $purple;
+}
 .blackPaint {
     background-color: $black;
 }

diff --git a/src/_variables.scss b/src/_variables.scss
@@ -1,5 +1,12 @@
-$red: #FF0000;
-$green: #00CC00;
-$blue: #0000FF;
+$red: #AD1A24;
+$pink: #C83875;
+$orange: #D57017;
+$yellow: #EEAF29;
+$green: #6AA62B;
+$blue: #0075B4;
+$teal: #249A9E;
+$purple: #7B539C;
 $white: #FFFFFF;
-$black: #000000;
+$black: #000000;
+
+/* Reference: https://brand.linkedin.com/visual-identity/color-palettes */
diff --git a/src/components/GridSelection.jsx b/src/components/GridSelection.jsx
@@ -6,8 +6,8 @@ export default class GridSelector extends React.Component {
     var buttons = [];
     for (let gridName in this.props.possibleGrids) {
         buttons.push(
-          <button className="btn btn-default" onClick={() => {
-            this.props.gridSelector(this.props.possibleGrids[gridName]);
+          <button className="btn btn-default" key={gridName} onClick={() => {
+            this.props.gridSelector(gridName);
           }}>
             {this.props.possibleGrids[gridName]}
           </button>)

diff --git a/src/components/app.jsx b/src/components/app.jsx
@@ -9,6 +9,8 @@ import GridSelector from './GridSelection.jsx';
 import ShareComponent from './shareComponent.jsx';
 import NavBar from './navbar.jsx';
 import DeleteGrid from './deleteGrid.jsx';
+import ResetGridColor from './resetGridColor.jsx';
+import NewGrid from './newGrid.jsx';
 
 import styles from '../main.scss';
 import 'bootstrap/dist/css/bootstrap.min.css';
@@ -25,7 +27,7 @@ export default class App extends React.Component {
       numRows: 0,
       numCols: 0
     }
-    this.onUpdate = this.onUpdate.bind(this);
+    this.onSelectColor = this.onSelectColor.bind(this);
     this.changeGrid = this.changeGrid.bind(this);
     this.getAvailableGrids = this.getAvailableGrids.bind(this);
   }
@@ -41,7 +43,7 @@ export default class App extends React.Component {
      });
   }
 
-  onUpdate( val ){
+  onSelectColor( val ){
     this.setState({ selectedColor: val });
   }
   changeGrid(newGrid) {
@@ -62,50 +64,53 @@ export default class App extends React.Component {
   }
 
   render() {
-    console.log(this.state.gridId);
     return (
       <div>
-        <NavBar/>
+        <NavBar changeGrid={this.changeGrid}/>
         <div className="container">
-          <div className="row">
-            <div className={styles.topBuffer}></div>
+          <div className={ "row " + styles.topBuffer }>
             <div className="col-sm-2">
-              <GridSelector gridSelector={this.changeGrid}
-                            possibleGrids={this.state.possibleGrids}
+              <GridSelector gridSelector={ this.changeGrid }
+                            possibleGrids={ this.state.possibleGrids }
               />
             </div>
             <div className="col-sm-2">
-              <Randomize gridId={this.state.gridId}/>
-            </div>
-            <div className="col-sm-2">
-              <button className="button" className="btn btn-default" onClick={this.resetGridColors}>Reset</button>
+              <Randomize gridId={this.state.gridId}
+                        numCols={this.state.numCols}
+                        numRows={this.state.numRows} />
             </div>
-          </div>
+          </div> {/* row */}
+
           <div className="row">
             <div className="col-xs-12 col-sm-12 col-md-10">
                 <Matrix color={ this.state.selectedColor }
-                        gridID={ this.state.gridId }
+                        gridId={ this.state.gridId }
                         numCols={this.state.numCols }
-                        numRows={ this.state.numRows }
+                        numRows={this.state.numRows }
                 />
             </div>
             <div className="col-xs-12 col-sm-12 col-md-2">
-                <Palette onUpdate={ this.onUpdate }/>
-            </div>
-            <div className="row">
-              <div className="cols-sm-offset-3 col-sm-3">
-                <ShareComponent gridID={ this.state.gridId }/>
-              </div>
-              <div className="cols-sm-offset-2 col-sm-2">
-                <MatrixSize gridId={ this.state.gridId } updateGrid={this.changeGrid}/>
-              </div>
-              <div className="col-sm-5">
-               <DeleteGrid gridId={ this.state.gridId }
-                           gridRemoval={this.changeGrid}/>
-              </div>
+              <Palette onSelectColor={ this.onSelectColor }/>
             </div>
           </div>
-        </div>
+
+          <div className="row">
+            <div className="cols-md-offset-3 col-md-2 col-sm-4">
+              <ShareComponent gridId={ this.state.gridId }/>
+            </div>
+            <div className="cols-md-offset-3 col-md-2 col-sm-4">
+              <DeleteGrid gridId={this.state.gridId} gridRemoval={this.changeGrid}/>
+              <ResetGridColor gridId={ this.state.gridId }
+                              numCols={ this.state.numCols }
+                              numRows={ this.state.numRows }
+              />
+            </div>
+            <div className="col-md-3 col-sm-4">
+              <MatrixSize gridId={ this.state.gridId } updateGrid={ this.changeGrid }/>
+            </div>
+          </div> {/* row */}
+
+        </div> {/* container */}
       </div>
     )
   }

diff --git a/src/components/cell.jsx b/src/components/cell.jsx
@@ -13,7 +13,7 @@ export default class Cell extends React.Component {
   }
 
   componentDidMount() {
-      this.cellRef = firebase.database().ref('grids/' + this.props.gridID
+      this.cellRef = firebase.database().ref('grids/' + this.props.gridId
                                              + '/r' + this.props.row
                                              + '/c' + this.props.col);
       this.cellRef.on('value', snap => {
@@ -48,7 +48,7 @@ export default class Cell extends React.Component {
 Cell.propTypes = {
     row: React.PropTypes.number,
     col: React.PropTypes.number,
-    gridID: React.PropTypes.string,
+    gridId: React.PropTypes.string,
     color: React.PropTypes.string
 
 }
diff --git a/src/components/deleteGrid.jsx b/src/components/deleteGrid.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import * as firebase from 'firebase';
-import 'bootstrap/dist/css/bootstrap.min.css';
+import styles from '../main.scss';
 
 import {manageLogin} from '../util/login.js'
 
@@ -11,7 +11,7 @@ export default class DeleteGrid extends React.Component {
     this.deleteUserGrid = this.deleteUserGrid.bind( this );
   }
 
-  handleClick(event){
+  handleClick(){
     manageLogin(this.deleteUserGrid);
   }
 

diff --git a/src/components/matrix.jsx b/src/components/matrix.jsx
@@ -18,15 +18,17 @@ export default class Matrix extends React.Component {
  }
 
   componentWillReceiveProps(nextProps) {
-      if (this.props.gridID !== nextProps.gridID) {
+      if (this.props.gridId !== nextProps.gridId
+          || this.props.numCols !== nextProps.numCols
+          || this.props.numRows !== nextProps.numRows) {
           this.updateGridSize(nextProps);
       }
   }
 
   updateGridSize(nextProps) {
      this.setState({numRows: 0, numCols: 0});
-     this.rowRef = firebase.database().ref('grids/' + nextProps.gridID + '/numRows');
-     this.colRef = firebase.database().ref('grids/' + nextProps.gridID + '/numCols');
+     this.rowRef = firebase.database().ref('grids/' + nextProps.gridId + '/numRows');
+     this.colRef = firebase.database().ref('grids/' + nextProps.gridId + '/numCols');
      try {
         this.rowRef.once('value', snap => {
             if (snap.val() !== null) {
@@ -54,7 +56,7 @@ export default class Matrix extends React.Component {
       let column = []
       for(var j = 0;j < this.state.numRows;j++){
         column.push(<Cell row={j} col={i} key={'r' + j + 'c' + i}
-                     gridID={this.props.gridID} color={this.props.color} />)
+                     gridId={this.props.gridId} color={this.props.color} />)
       }
       matrix.push(<div key={i} className={styles.matrixColumn}>{column}</div>)
     }
@@ -65,8 +67,8 @@ export default class Matrix extends React.Component {
 }
 
 Matrix.propTypes = {
-    gridID: React.PropTypes.string,
+    gridId: React.PropTypes.string,
     color: React.PropTypes.string,
-    numCols: React.PropTypes.string,
-    numRows: React.PropTypes.string
+    numCols: React.PropTypes.number,
+    numRows: React.PropTypes.number
 }
diff --git a/src/components/matrixSize.jsx b/src/components/matrixSize.jsx
@@ -17,8 +17,8 @@ export default class MatrixSize extends React.Component {
       this.setState({ numCols: event.target.value });
   }
   handleClick(){
-  firebase.database().ref('grids/' + this.state.gridId + '/numRows' ).set(this.state.numRows);
-  firebase.database().ref('grids/' + this.state.gridId + '/numCols' ).set(this.state.numCols);
+  firebase.database().ref('grids/' + this.state.gridId + '/numRows' ).set(parseInt(this.state.numRows));
+  firebase.database().ref('grids/' + this.state.gridId + '/numCols' ).set(parseInt(this.state.numCols));
 
    this.props.updateGrid(this.state.gridId);
   }

diff --git a/src/components/navbar.jsx b/src/components/navbar.jsx
@@ -1,17 +1,19 @@
 import React from 'react';
+import NewGrid from './newGrid.jsx';
+
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 export default class NavBar extends React.Component {
   render(){
     return(
-      <nav className="navbar navbar-light bg-faded">
+      <nav className="navbar navbar-dark bg-info">
         <a className="navbar-brand" href="#">React Color</a>
         <ul className="nav navbar-nav">
           <li className="nav-item active">
             <a className="nav-link" href="#">Dashboard <span className="sr-only">(current)</span></a>
           </li>
           <li className="nav-item">
-            <a className="nav-link" href="#">New Grid</a>
+            <NewGrid changeGrid={this.props.changeGrid}/>
           </li>
           <li className="nav-item">
             <a className="nav-link" href="#">Login</a>