#43 show and hide explorer

Author: rvennam987

ui-react/src/BlockExplorer/Block.css

@@ -1,4 +1,4 @@
-.blockExplorer {
+.BlockExplorerDetailView {
   padding-left: 30px;
   border-left-style: dotted;
   border-color: #4D4E56;
@@ -13,16 +13,12 @@
   display: flex;
   flex-direction: column;
   padding-top: 10px;
-
   animation-name: slideDown;
   -webkit-animation-name: slideDown;
-
   animation-duration: 1s;
   -webkit-animation-duration: 1s;
-
   animation-timing-function: ease;
   -webkit-animation-timing-function: ease;
-
   visibility: visible !important;
 
 }
@@ -137,3 +133,42 @@
     width: 2px;
     background: white;
 }
+
+.blockSmall {
+  width: 21px;
+  height: 21px;
+  border-radius: 5px;
+  border: 1px solid #393941;
+  background: linear-gradient(135deg, #1c1c23 0%, #393941 50%, #1c1c23 100%);
+  cursor: pointer;
+  animation-name: slideDown;
+  -webkit-animation-name: slideDown;
+  animation-duration: 1s;
+  -webkit-animation-duration: 1s;
+  animation-timing-function: ease;
+  -webkit-animation-timing-function: ease;
+  visibility: visible !important;
+}
+
+.blockSmallLink {
+  height: 10px;
+  width: 2px;
+  background: white;
+  margin: auto;
+}
+
+.minimizeSign {
+  height: 2px;
+  width: 10px;
+  background: #393941;
+  cursor: pointer;
+}
+
+.minimizeButton {
+  cursor: pointer;
+  padding:10px;
+  border: solid;
+  border-width: 1px;
+  width: 12px;
+  border-color: #393941;
+}

ui-react/src/BlockExplorer/BlockExplorer.js

@@ -1,13 +1,15 @@
 import React, { Component } from 'react';
 import './Block.css';
-import Block from './Block';
+import BlockExplorerPreview from './BlockExplorerPreview';
+import BlockExplorerDetailView from './BlockExplorerDetailView';
 
 class BlockExplorer extends Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      blocks: []
+      blocks: [],
+      preview: true
     };
     this.getBlocks = this.getBlocks.bind(this);
     this.getBlocks();
@@ -25,10 +27,18 @@ class BlockExplorer extends Component {
 
   render() {
     return (
-      <div className="blockExplorer">
-        {this.state.blocks.map(block => (
-          <Block block={block} key={block.id} />
-        ))}
+      <div>
+        { this.state.preview ?
+          <BlockExplorerPreview
+            blocks={this.state.blocks}
+            onExpand={() => this.setState({ preview: false })}
+          />
+          :
+          <BlockExplorerDetailView
+            blocks={this.state.blocks}
+            onMin={() => this.setState({ preview: true })}
+          />
+        }
       </div>
     );
   }

ui-react/src/BlockExplorer/BlockExplorerDetailView.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import './Block.css';
+import Block from './Block';
+
+class BlockExplorerDetailView extends Component {
+
+
+  render() {
+    return (
+      <div className="BlockExplorerDetailView">
+        <div className="minimizeButton" role="presentation" onClick={this.props.onMin}>
+          <div className="minimizeSign" />
+        </div>
+        {this.props.blocks.map(block => (
+          <Block block={block} key={block.id} />
+        ))}
+      </div>
+    );
+  }
+}
+
+BlockExplorerDetailView.propTypes = {
+  blocks: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  onMin: PropTypes.func.isRequired
+};
+
+export default BlockExplorerDetailView;

ui-react/src/BlockExplorer/BlockExplorerPreview.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import './Block.css';
+
+class BlockExplorerPreview extends Component {
+
+
+  render() {
+    return (
+      <div role="presentation" onClick={this.props.onExpand}>
+        {this.props.blocks.map(() => (
+          <div>
+            <div className="blockSmallLink" />
+            <div className="blockSmall" />
+          </div>
+        ))}
+      </div>
+    );
+  }
+}
+
+BlockExplorerPreview.propTypes = {
+  blocks: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  onExpand: PropTypes.func.isRequired
+};
+
+export default BlockExplorerPreview;