Permalink
Browse files

Cleaning up PIG explorer.

  • Loading branch information...
1 parent 41c25d0 commit 63145b5f5e626ef1873bcdd48b4b03174e52fdb0 @peterdotjs peterdotjs committed Mar 4, 2016
Showing with 62 additions and 13 deletions.
  1. +5 −4 PIG/index.html
  2. +5 −4 Parse-Dashboard/index.html
  3. +27 −2 parse-interface-guide/PIG.react.js
  4. +25 −3 parse-interface-guide/PIG.scss
View
@@ -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>
@@ -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>
@@ -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 (
@@ -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;
}

0 comments on commit 63145b5

Please sign in to comment.