From e5bad75ef2f23388a243855e8971f25c00ed570b Mon Sep 17 00:00:00 2001
From: colinmorris <colin.morris2@gmail.com>
Date: Sat, 25 Feb 2017 12:10:14 -0800
Subject: [PATCH] better resizing with react-resizable

---
 package.json    |  1 +
 src/About.css   |  3 +++
 src/Songsim.css | 34 ++++------------------------------
 src/Songsim.js  | 10 +++++++---
 src/index.css   |  2 ++
 src/index.js    |  1 +
 6 files changed, 18 insertions(+), 33 deletions(-)

diff --git a/package.json b/package.json
index b0e8a47..d19a2f0 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "gh-pages": "^0.12.0",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
+    "react-resizable": "^1.6.0",
     "react-router": "^3.0.2"
   },
   "scripts": {
diff --git a/src/About.css b/src/About.css
index 8b300f8..acec67d 100644
--- a/src/About.css
+++ b/src/About.css
@@ -3,4 +3,7 @@
     background-color: white;
     padding: 10px;
     border-radius: 10px;
+    border-style: solid;
+    background-color: rgb(252, 253, 255);
+    border-color: rgb(220, 240, 255);
 }
diff --git a/src/Songsim.css b/src/Songsim.css
index 249d7b8..6cb9a2c 100644
--- a/src/Songsim.css
+++ b/src/Songsim.css
@@ -3,38 +3,12 @@
     margin: 10px;
 }
 
-.matrixPane {
-    overflow: auto;
-    resize: both;
+.react-resizable-handle {
+    bottom: -20px !important;
+    right: -20px !important;
+    background-size: 10px !important;
 }
 
 .lyricsPane {
 }
 
-.matrixPane {
-    /*
-    border-style: solid;
-    */
-    width: 300px;
-}
-
-/* TODO: Gonna probably need a solution outside of vanilla CSS. The resize
- * property doesn't allow resizing to a smaller value than the initial width.
- */
-@media (max-width: 800px) {
-    .matrixPane {
-        border-color: red;
-    }
-}
-
-@media (max-width: 1100px) {
-    .matrixPane {
-        border-color: green;
-    }
-}
-
-@media (min-width: 1100px) {
-    .matrixPane {
-        border-color: aqua;
-    }
-}
diff --git a/src/Songsim.js b/src/Songsim.js
index 38ab59b..8d22614 100644
--- a/src/Songsim.js
+++ b/src/Songsim.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import {Link} from 'react-router';
+import { ResizableBox } from 'react-resizable';
 
 import './Songsim.css';
 
@@ -211,7 +212,7 @@ class Songsim extends Component {
     // TODO: this method is getting pretty huge
     var rowcols = this.focal_rowcols;
     var rows = rowcols[0], cols = rowcols[1];
-    var radios = Object.keys(MODE).map(this.renderRadio)
+    var radios = Object.keys(MODE).map(this.renderRadio);
     var matrix;
     if (!this.state.verse) {
       matrix = <DummyMatrix />;
@@ -241,13 +242,16 @@ class Songsim extends Component {
           <p>Custom: {JSON.stringify(this.state.verse.isCustom())}</p>
         </div>);
     }
+    var defaultMatrixSize = 400; // TODO: have this flow from above (and calculate from screen.height or something)
     return (
         <div>
 
         <div className="mainContainer">
-        <div className="matrixPane">
+        <ResizableBox width={defaultMatrixSize} height={defaultMatrixSize}
+          lockAspectRatio={true}
+          >
             {matrix}
-        </div>
+        </ResizableBox>
 
         <div className="lyricsPane">
             <LyricsPane verse={this.state.verse || CustomVerse.BlankVerse()} 
diff --git a/src/index.css b/src/index.css
index da21598..21d26aa 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,5 +2,7 @@ body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
+  /*
   background-color: rgb(240, 240, 240) !important;
+  */
 }
diff --git a/src/index.js b/src/index.js
index 6e0752f..2578267 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,6 +5,7 @@ import About from './About.js';
 import {Router, Route, hashHistory} from 'react-router';
 import './index.css';
 
+import 'react-resizable/css/styles.css';
 import 'bootstrap/dist/css/bootstrap.css';
 //import 'bootstrap/dist/css/bootstrap-theme.css';