improvements, icon bar for boards

webapp/app.jsx

@@ -66,8 +66,8 @@ var Homepage = React.createClass({
 var NotFound = React.createClass({
   render () {
     return (<div className="text-center">
-      <h1><Icon name="ban"/></h1>
+      <h1><Icon name="ban" className="light"/></h1>
-      <p>Sorry, there's nothing here!</p>
+      <h3>Sorry, there's nothing here!</h3>
     </div>)
   }
 })
@@ -93,7 +93,10 @@ ReactDOM.render(
       </Route>
       <Route path="edit">
         <Route path="profile" component={ProfileEditor} />
-        <Route path="board(/:boardname)" component={BoardEditor} />
+        <Route path="board" component={BoardEditor}>
+          <Route path=":boardname" component={BoardEditor}>
+          </Route>
+        </Route>
       </Route>
       <Route path="post/:posthash" component={PostPage} />
       <Route path="board/:boardname" component={Board} />

webapp/pages/board-editor.jsx

@@ -97,7 +97,9 @@ module.exports = function (boardsAPI) {
         } else {
           return (
             <div className="editor">
-              <h2><Icon name="inbox" className="light" /> Board Settings</h2>
+              <h2><Icon name="inbox" className="light" />
+                {this.props.params.boardname ? ' Board Settings' : ' New Board'}
+              </h2>
               <p>This App uses IPFS to store your Boards. When you are offline,
               other users or servers that viewed your content will serve it to
               others.</p>

webapp/pages/board.jsx

@@ -3,13 +3,16 @@ var Markdown = require('markdown.jsx')
 var UserID = require('userID.jsx')
 var PostList = require('postlist.jsx')
 var GetIPFS = require('getipfs.jsx')
+var Link = require('react-router').Link
+var Icon = require('icon.jsx')
+var {Loading} = require('status-components.jsx')
 
 module.exports = function (boardsAPI) {
   return React.createClass({
-    getInitialState: function () {
+    getInitialState () {
-      return { name: this.props.params.boardname, api: false, whitelist: [] }
+      return { loading: true, whitelist: [] }
     },
-    componentDidMount: function () {
+    componentDidMount () {
       boardsAPI.use(boards => {
         /*
         When a component inside the component being rendered by the router also needs
@@ -33,17 +36,17 @@ module.exports = function (boardsAPI) {
           })
           ee.on('settings for ' + this.props.params.boardname + '@' + this.props.params.userid, (res) => {
             if (!this.isMounted()) return true
-            if (res) this.setState({ name: res.fullname, description: res.description })
+            if (res) this.setState({ loading: false, name: res.fullname, description: res.description })
           })
         } else {
-          this.setState({ description: 'All the messages posted in __#' + this.props.params.boardname + '__' })
+          this.setState({ loading: false, description: 'All the messages posted in __#' + this.props.params.boardname + '__' })
         }
         if (boards.isInit || this.state.api) {
           this.init(boards)
         }
       })
     },
-    init: function (boards) {
+    init (boards) {
       if (!this.state.init) {
         if (this.props.params.userid) {
           boards.getBoardSettings(this.props.params.userid, this.props.params.boardname)
@@ -51,18 +54,29 @@ module.exports = function (boardsAPI) {
         this.setState({ init: true, api: true, boards: boards })
       }
     },
-    render: function () {
+    toolbox () {
+      return <div className="iconbar text-center">
+        <Link to={'/edit/board/' + this.props.params.boardname} ><Icon name="edit" className="fa-2x light" /></Link>
+        <Link to={'/edit/board/' + this.props.params.boardname + '/post'} ><Icon name="plus" className="fa-2x light" /></Link>
+      </div>
+    },
+    render () {
       if (this.state.api) {
-        return (<div className="board">
+        if (this.state.loading) {
-          <h2>{this.state.name}</h2>
+          return <Loading title="Downloading Board data" />
-          <Markdown source={this.state.description} skipHtml={true} />
+        } else {
-          {this.props.params.userid ? <h5><UserID id={this.props.params.userid} api={this.state.boards} /></h5> : <p></p>}
+          return (<div className="board">
-          <div className="whitelist">
+            <h2>{this.state.name}</h2>
-            {this.state.whitelist.map(i => <UserID id={i} key={i} api={this.state.boards} />)}
+            <Markdown source={this.state.description} skipHtml={true} />
-          </div>
+            {this.props.params.userid ? <h5><UserID id={this.props.params.userid} api={this.state.boards} /></h5> : <p></p>}
-          <hr />
+            <div className="whitelist">
-          <PostList board={this.props.params.boardname} admin={this.props.params.userid} api={this.state.boards} />
+              {this.state.whitelist.map(i => <UserID id={i} key={i} api={this.state.boards} />)}
-        </div>)
+            </div>
+            <hr />
+            {this.toolbox()}
+            <PostList board={this.props.params.boardname} admin={this.props.params.userid} api={this.state.boards} />
+          </div>)
+        }
       } else return <GetIPFS api={this.state.boards} />
     }
   })

webapp/style.css

@@ -142,7 +142,7 @@ a:hover {
   margin-top: -5.2rem;
 }
 
-.navbar .iconbar .fa {
+.iconbar .fa {
   margin-left: .5rem;
 }