Cleaning up PIG explorer.

peterdotjs · peterdotjs · commit 63145b5f5e62 · 2016-03-04T08:07:45.000-08:00
diff --git a/PIG/index.html b/PIG/index.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html>
-	<body>
-		<div id="browser_mount"></div>
-		<script src="/bundles/PIG.bundle.js"></script>
-	</body>
+  <title>PIG Component Explorer</title>
+  <body>
+    <div id="browser_mount"></div>
+    <script src="/bundles/PIG.bundle.js"></script>
+  </body>
 </html>
diff --git a/Parse-Dashboard/index.html b/Parse-Dashboard/index.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html>
-	<body>
-		<div id="browser_mount"></div>
-		<script src="/bundles/dashboard.bundle.js"></script>
-	</body>
+  <title>Parse Dashboard</title>
+  <body>
+    <div id="browser_mount"></div>
+    <script src="/bundles/dashboard.bundle.js"></script>
+  </body>
 </html>
diff --git a/parse-interface-guide/PIG.react.js b/parse-interface-guide/PIG.react.js
@@ -7,6 +7,7 @@
  */
 import * as ComponentsMap from 'parse-interface-guide/ComponentsMap';
 import { Link }           from 'react-router';
+import Icon               from 'components/Icon/Icon.react';
 import PropsTable         from 'parse-interface-guide/PropsTable.react';
 import React              from 'react';
 import styles             from 'parse-interface-guide/PIG.scss';
@@ -19,19 +20,43 @@ let PIGRow = ({ title, children }) => <div>
 </div>;
 
 export default class PIG extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      query: ''
+    };
+  }
+
   renderSidebar() {
     let components = Object.keys(ComponentsMap);
     return (
       <div className={styles.sidebar}>
-        {components.map((name) => <Link activeClassName={styles.active} key={name} to={`/${name}`}>{name}</Link>)}
+        <div className={styles.iconWrap}>
+          <Icon name='infinity' width={50} height={50} fill='#000000' />
+          <span className={styles.iconLabel}>PIG Explorer</span>
+        </div>
+        <input
+          type='text'
+          placeholder='Filter components...'
+          className={styles.searchField}
+          onChange={(e) => {
+            let query = e.target.value.trim();
+            this.setState({query});
+          }}/>
+        {components.map((name) => {
+          return name.toLowerCase().indexOf(this.state.query.toLowerCase()) !== -1
+            ? <Link activeClassName={styles.active} key={name} to={`/${name}`}>{name}</Link>
+            : null;
+        })}
       </div>
     );
   }
 
   renderContent() {
     let componentInfo = ComponentsMap[this.props.params.component];
     if (!componentInfo) {
-      return <div>Unknown component</div>;
+      componentInfo = ComponentsMap[Object.keys(ComponentsMap)[0]];
     }
     let demos = componentInfo.demos || [];
     return (
diff --git a/parse-interface-guide/PIG.scss b/parse-interface-guide/PIG.scss
@@ -11,7 +11,7 @@
 .sidebar {
   position: fixed;
   background: white;
-  width: 200px;
+  width: 300px;
   padding: 10px;
   border-right: 1px solid #b0b8bf;
   top: 0;
@@ -27,12 +27,34 @@
 
   .active {
     color: #1F62B1;
+    font-weight: bold;
   }
 }
 
+.iconWrap {
+  margin: 10px 0 20px 15px;
+}
+
+.iconLabel {
+  vertical-align: top;
+  position: relative;
+  top: 14px;
+  left: 16px;
+  font-size: 25px;
+}
+
+.searchField {
+  width: 230px;
+  height: 44px;
+  font-size: 20px;
+  padding: 0 10px;
+  border-radius: 5px;
+  margin: 0 0 30px 10px;
+}
+
 .content {
-  margin-left: 200px;
-  padding: 10px;
+  margin-left: 300px;
+  padding: 20px 10px 10px 10px;
   min-height: 100vh;
 }
 
