Merge pull request #98 from Gossamer-React/fix-layering

fixed tree position and highlighted buttons on click.

Author: nianliu18

build/webpack-bundle.js

@@ -8,6 +8,69 @@ body{
   background: linear-gradient(to right, #eef2f3, #8e9eab); W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+;   */
 }
 
+@media screen and (max-width: 600px) {
+  .reactTab {
+    display: grid;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      'sp-box'
+      'diff'
+      'tree';
+  }
+  .state-prop-display {
+    grid-area: sp-box;
+    background-color: #333;
+    color: white;
+    overflow-y: scroll;
+    border: 1px solid black; 
+    border-radius: 5px;
+    padding: 5px 5px; 
+    margin-right: 10px;
+  }
+
+  #treeWrapper{
+    grid-area: tree;
+    background-color: rgba(214, 214, 214, 0.4);
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-radius: 5px; 
+    padding: 10px;
+    margin-left: 10px;
+  }
+
+  #stateDiff-container {
+    grid-area: diff;
+    overflow-y: scroll;
+    background-color: rgba(214, 214, 214, 0.4);
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+    padding: 10px; 
+    margin-top: 10px;
+    margin-right: 10px;
+  }
+  
+  #state-header{
+    display: flex;
+    /* justify-content: space-between; */
+    margin-bottom: 5px;
+  }
+  
+  .stateDiff-div {
+    overflow-x: scroll;
+    padding: 15px;
+    background:rgba(255,255,255,0.5);
+    margin: 8px 0px;
+  }
+  
+  .state-span{
+    margin: 6px;
+    font-size: 1.2em;
+    font-weight: 500;
+    letter-spacing: 0.8px;
+    line-height: 15px;
+  }
+}
+
 #app-container{
   display: flex;
   padding: 10px 25px;
@@ -40,6 +103,7 @@ body{
   margin-right: 10px;
 }
 
+
 #treeWrapper{
   grid-area: tree;
   height: 700px;
@@ -66,6 +130,10 @@ body{
   justify-content: center;
 }
 
+.toggleOn {
+  background-color: rgba(214, 214, 214, 0.8);
+  color: white;
+}
 
 /* For window  */
 #window{

build/webpack-bundle.js.map

@@ -9,8 +9,8 @@ class TreeDiagram extends React.Component {
     this.state = {
       transition: null,
       orientation: 'vertical',
-      foreignObjectWrapper: {y: -5, x: 10},
-      nodeSize: {x: 75, y: 75},
+      foreignObjectWrapper: {x: 8, y: 4},
+      nodeSize: {x: 95, y: 85},
     };
     this.handleFlip = this.handleFlip.bind(this);
   }
@@ -29,17 +29,27 @@ class TreeDiagram extends React.Component {
   }
 
   handleFlip() {
+    const dimensions = this.treeContainer.getBoundingClientRect();
     if(this.state.orientation === 'vertical') {
       this.setState({
         orientation: 'horizontal',
-        foreignObjectWrapper: {y: 10, x: 10},
-        nodeSize:{y:85, x:90}
+        foreignObjectWrapper: {x: 5, y: 8},
+        nodeSize: {x: 110, y:110},
+        translate: {
+          x: dimensions.width / 8,
+          y: dimensions.height / 2
+        }
       })
     } else {
       this.setState({
         orientation: 'vertical',
-        foreignObjectWrapper: {y: -5, x: 10}
-      })
+        foreignObjectWrapper: {x: 8, y: 4},
+        nodeSize: {x: 85, y: 85},
+        translate: {
+          x: dimensions.width / 2,
+          y: dimensions.height / 8
+        }
+      });
     }
   }  
 
@@ -73,18 +83,18 @@ class TreeDiagram extends React.Component {
       }
     };
 
+
     return (
       <div id="treeWrapper" ref={tc => (this.treeContainer = tc)}>
         <button onClick={() => {this.handleFlip()}}> {this.state.orientation[0].toUpperCase() + this.state.orientation.slice(1)} </button>
-        <button onClick={() => { this.props.handleFilter(filterComponents.reduxComponents) }}>Filter Redux</button>
-        <button onClick={() => { this.props.handleFilter(filterComponents.reactRouterComponents) }}>Filter React-Router</button>
-        <button onClick={() => { this.props.handleFilter(filterComponents.apolloComponents) }}>Filter Apollo-GraphQL</button>
+        <button onClick={(e) => { this.props.handleFilter(e, filterComponents.reduxComponents) }}>Filter Redux</button>
+        <button onClick={(e) => { this.props.handleFilter(e, filterComponents.reactRouterComponents) }}>Filter React-Router</button>
+        <button onClick={(e) => { this.props.handleFilter(e, filterComponents.apolloComponents) }}>Filter Apollo-GraphQL</button>
 
-        {/* when appState has a length we populate tree */}
         {this.props.appState.length !== 0 ? (
           <Tree
             data={this.props.appState}
-            nodeSize={{ x: 75, y: 75 }}
+            nodeSize={this.state.nodeSize}
             orientation={this.state.orientation}
             styles={styles}
             translate={this.state.translate}

public/app.css

@@ -26,9 +26,7 @@ class App extends Component {
       componentsToFilter: [],
     };
 
-    this.handleMouseOver = this.handleMouseOver.bind(this);
-
-    chrome.devtools.panels.create('Lucid', null, 'devtools.html');
+    chrome.devtools.panels.create("Lucid", null, "devtools.html");
   }
 
   componentDidMount() {
@@ -55,10 +53,9 @@ class App extends Component {
           let diff = recurseDiff(oldstate, this.state.appReactDOM);
           appState.setState({ stateDiff: diff });
         }
-
+      
         //if there is an active setTimeout, clear it
         clearTimeout(timeout);
-
         timeout = setTimeout(() => {
           appState.setState({ appState: req.msg });
         }, 1000);
@@ -100,14 +97,14 @@ class App extends Component {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ query: introspectionQuery })
       })
-        .then(res => res.json())
-        .then(json =>
-          this.setState({
-            schema: JSON.stringify(json.data)
-          })
+      .then(res => res.json())
+      .then(json =>
+        this.setState({
+          schema: JSON.stringify(json.data)
+        })
         );
+      }
     }
-  }
 
   //* invoke schema fetch only after a log object from a previous response is available
   componentDidUpdate(prevProps, prevState) {
@@ -124,7 +121,6 @@ class App extends Component {
     }
   }
 
-
   // * Handles the tab click for tree and req/res window
   handleWindowChange(target) {
     console.log(target);
@@ -140,7 +136,12 @@ class App extends Component {
   }
 
   // * Handles the filter for the component tree
-  handleFilter(arr) {
+  handleFilter(e, arr) {
+    if(e.target.classList.contains('toggleOn')) {
+      e.target.classList.remove('toggleOn')
+    } else {
+      e.target.classList.add('toggleOn');
+    }
     let result = [];
     if (!this.state.componentsToFilter.includes(arr[0])) {
       let componentsArr = this.state.componentsToFilter.concat(arr);
@@ -222,7 +223,7 @@ class App extends Component {
               ) : (
                   <div class='reactTab'>
                     <StateContainer clearLog={this.handleClearLog.bind(this)} stateDiffs={this.state.stateDiff} />
-                    <TreeDiagram appState={this.state.appFilteredDOM.length === 0 ? this.state.appState : this.state.appFilteredDOM} handleMouseOver={this.handleMouseOver} handleFilter={this.handleFilter.bind(this)} />
+                    <TreeDiagram appState={this.state.appFilteredDOM.length === 0 ? this.state.appState : this.state.appFilteredDOM} handleMouseOver={this.handleMouseOver.bind(this)} handleFilter={this.handleFilter.bind(this)} />
                     <StatePropsBox nodeData={this.state.nodeData} />
                   </div>
                 )}