diff --git a/webapp/app.jsx b/webapp/app.jsx index ea31e16..08b12bd 100644 --- a/webapp/app.jsx +++ b/webapp/app.jsx @@ -66,8 +66,8 @@ var Homepage = React.createClass({ var NotFound = React.createClass({ render () { return (
-

-

Sorry, there's nothing here!

+

+

Sorry, there's nothing here!

) } }) @@ -93,7 +93,10 @@ ReactDOM.render( - + + + + diff --git a/webapp/pages/board-editor.jsx b/webapp/pages/board-editor.jsx index 58be557..efcbccc 100644 --- a/webapp/pages/board-editor.jsx +++ b/webapp/pages/board-editor.jsx @@ -97,7 +97,9 @@ module.exports = function (boardsAPI) { } else { return (
-

Board Settings

+

+ {this.props.params.boardname ? ' Board Settings' : ' New Board'} +

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.

diff --git a/webapp/pages/board.jsx b/webapp/pages/board.jsx index ca7f4ec..b91d2b9 100644 --- a/webapp/pages/board.jsx +++ b/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 () { - return { name: this.props.params.boardname, api: false, whitelist: [] } + getInitialState () { + 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
+ + +
+ }, + render () { if (this.state.api) { - return (
-

{this.state.name}

- - {this.props.params.userid ?
:

} -
- {this.state.whitelist.map(i => )} -
-
- -
) + if (this.state.loading) { + return + } else { + return (
+

{this.state.name}

+ + {this.props.params.userid ?
:

} +
+ {this.state.whitelist.map(i => )} +
+
+ {this.toolbox()} + +
) + } } else return } }) diff --git a/webapp/style.css b/webapp/style.css index 080e2e8..68a7ab1 100644 --- a/webapp/style.css +++ b/webapp/style.css @@ -142,7 +142,7 @@ a:hover { margin-top: -5.2rem; } -.navbar .iconbar .fa { +.iconbar .fa { margin-left: .5rem; }