diff --git a/README.md b/README.md index f3b47dff5..996971d55 100644 --- a/README.md +++ b/README.md @@ -36,6 +36,10 @@ $ npm i $ npm start ``` +This launches the app and runs it in your menu bar. Click the IPFS icon to open a console. For example (in OSX): + +![](https://ipfs.io/ipfs/QmU5AghSAezpYFNyuYZ7gX1zcHCheQndPtBMj1MHr5QpWL/cap.png) + # packaging will be written to ./dist diff --git a/app/init.js b/app/init.js index 2a1d5495b..9e7975fb7 100644 --- a/app/init.js +++ b/app/init.js @@ -163,5 +163,3 @@ var altMenu = require('./controls/alt-menu') require('./controls/open-browser') require('./controls/open-console') require('./controls/open-settings') - - diff --git a/app/js/alt-menubar.jsx b/app/js/alt-menubar.jsx index 62d2f0955..26d00cc4c 100644 --- a/app/js/alt-menubar.jsx +++ b/app/js/alt-menubar.jsx @@ -130,10 +130,11 @@ var Menu = React.createClass({ {(_.map(self.state.stats, function (value, name) { return ( - {name} - {value} + {name} + {value} - )}))} + ) + }))} diff --git a/app/js/components/files.jsx b/app/js/components/files.jsx new file mode 100644 index 000000000..49b788c47 --- /dev/null +++ b/app/js/components/files.jsx @@ -0,0 +1,44 @@ +var React = require('react') +var _ = require('lodash') + +module.exports = React.createClass({ + displayName: 'Files', + + propTypes: { + values: React.PropTypes.object + }, + + getDefaultProps: function () { + return { + values: [] + } + }, + + _renderFile (value, name) { + if (value.uploaded) { + var nameTrimmed = value.Name.slice(0, 10) + '...' + var hashTrimmed = value.Hash.slice(0, 6) + '...' + return ( +
{nameTrimmed} + {hashTrimmed}
+ ) + } + + return ( +
+
+ Uploading {value.Name} +
+
+ ) + }, + + render () { + var self = this + + return ( +
+ {_.map(self.props.values, self._renderFile)} +
+ ) + } +}) diff --git a/app/js/components/open-links.jsx b/app/js/components/open-links.jsx new file mode 100644 index 000000000..e76f90749 --- /dev/null +++ b/app/js/components/open-links.jsx @@ -0,0 +1,38 @@ +var React = require('react') + +module.exports = React.createClass({ + displayName: 'OpenLinks', + + propTypes: { + onConsoleClick: React.PropTypes.func, + onBrowserClick: React.PropTypes.func + }, + + getDefaultProps: function () { + return { + onConsoleClick: function () {}, + onBrowserClick: function () {} + } + }, + + render () { + var self = this + + return ( +
+
+ + Open Console + + + Open in Browser + +
+
+ ) + } +}) diff --git a/app/js/components/quit.jsx b/app/js/components/quit.jsx new file mode 100644 index 000000000..e93686096 --- /dev/null +++ b/app/js/components/quit.jsx @@ -0,0 +1,30 @@ +var React = require('react') + +module.exports = React.createClass({ + displayName: 'Quit', + + propTypes: { + onClick: React.PropTypes.func + }, + + getDefaultProps: function () { + return { + onClick: function () {} + } + }, + + render () { + var self = this + + return ( +
+
+ + Quit + +
+
+ ) + } +}) diff --git a/app/js/components/settings.jsx b/app/js/components/settings.jsx new file mode 100644 index 000000000..4d9c43586 --- /dev/null +++ b/app/js/components/settings.jsx @@ -0,0 +1,30 @@ +var React = require('react') + +module.exports = React.createClass({ + displayName: 'Settings', + + propTypes: { + onClick: React.PropTypes.func + }, + + getDefaultProps: function () { + return { + onClick: function () {} + } + }, + + render () { + var self = this + + return ( +
+
+ + Settings + +
+
+ ) + } +}) diff --git a/app/js/components/stats.jsx b/app/js/components/stats.jsx new file mode 100644 index 000000000..19a11a47f --- /dev/null +++ b/app/js/components/stats.jsx @@ -0,0 +1,41 @@ +var React = require('react') +var _ = require('lodash') + +module.exports = React.createClass({ + displayName: 'Stats', + + propTypes: { + values: React.PropTypes.object + }, + + getDefaultProps: function () { + return { + values: [] + } + }, + + _renderStat (value, name) { + return ( + + {name} + {value} + + ) + }, + + render () { + var self = this + + return ( +
+
+
+ + {_.map(self.props.values, self._renderStat)} +
+
+
+
+ ) + } +}) diff --git a/app/js/components/status.jsx b/app/js/components/status.jsx new file mode 100644 index 000000000..40372d089 --- /dev/null +++ b/app/js/components/status.jsx @@ -0,0 +1,25 @@ +var React = require('react') + +module.exports = React.createClass({ + displayName: 'Status', + + propTypes: { + status: React.PropTypes.string + }, + + getDefaultProps: function () { + return { + state: '' + } + }, + + render () { + var self = this + + return ( +
+ { self.props.status } +
+ ) + } +}) diff --git a/app/js/components/version.jsx b/app/js/components/version.jsx new file mode 100644 index 000000000..9a59ff96f --- /dev/null +++ b/app/js/components/version.jsx @@ -0,0 +1,27 @@ +var React = require('react') + +module.exports = React.createClass({ + displayName: 'Version', + + propTypes: { + value: React.PropTypes.string + }, + + getDefaultProps: function () { + return { + value: '' + } + }, + + render () { + var self = this + + return ( +
+
+ {self.props.value} +
+
+ ) + } +}) diff --git a/app/js/help.js b/app/js/help.js index 1e244754f..f75300f22 100644 --- a/app/js/help.js +++ b/app/js/help.js @@ -2,9 +2,9 @@ var ipc = require('ipc') -function initialize () { - ipc.emit('initialize-node') -} +// function initialize () { +// ipc.emit('initialize-node') +// } ipc.on('err', function (err) { if (err) { diff --git a/app/js/menubar-toggle.jsx b/app/js/menubar-toggle.jsx index 00b135ebf..a20751ce5 100644 --- a/app/js/menubar-toggle.jsx +++ b/app/js/menubar-toggle.jsx @@ -2,7 +2,7 @@ var React = require('react') var $ = require('jquery-bf') -var bf = require('bootstrap-toggle-bf') +require('bootstrap-toggle-bf') var Toggle = React.createClass({ // -- Initialize @@ -17,7 +17,7 @@ var Toggle = React.createClass({ var input = $(React.findDOMNode(this)).find('input') input.bootstrapToggle() - + input.change(function () { self.props.toggle($(this).prop('checked')) }) diff --git a/app/js/menubar.jsx b/app/js/menubar.jsx index cc701f033..888a6cb69 100644 --- a/app/js/menubar.jsx +++ b/app/js/menubar.jsx @@ -1,10 +1,17 @@ var React = require('react') -var Toggle = require('./menubar-toggle.jsx') -var _ = require('lodash') var $ = require('jquery-bf') var ipc = window.require('remote').require('ipc') +var Toggle = require('./menubar-toggle.jsx') +var Status = require('./components/status.jsx') +var OpenLinks = require('./components/open-links.jsx') +var Stats = require('./components/stats.jsx') +var Settings = require('./components/settings.jsx') +var Version = require('./components/version.jsx') +var Quit = require('./components/quit.jsx') +var Files = require('./components/files.jsx') + var Menu = React.createClass({ // -- Initialize Component @@ -104,98 +111,31 @@ var Menu = React.createClass({ ? '../../node_modules/ipfs-logo/ipfs-logo-128-black.png' : '../../node_modules/ipfs-logo/ipfs-logo-128-ice.png') - var status =
{ self.state.status }
+ var toggles = null - var toggles = [ - (self.state.status !== 'uninitialized') && - - ] + if (self.state.status !== 'uninitialized') { + toggles = + } // var uninitialized = (this.state.status === 'uninitialized') var open = (this.state.status === 'running') ? ( -
-
- - Open Console - - - Open in Browser - -
-
+ ) : null var stats = (this.state.status === 'running') ? ( -
-
-
- - {(_.map(self.state.stats, function (value, name) { - return ( - - - - - )}))} -
{name}{value}
-
-
-
+ ) : null - var version = this.state.version ? ( -
-
- {this.state.version} -
-
) : null - - var settings = ( -
- -
) - - var quit = ( -
- -
) - - var files = this.state.files && this.state.files.length > 0 ? ( -
- {(_.map(self.state.files, function (value, name) { - if (value.uploaded) { - var nameTrimmed = value.Name.slice(0, 10) + '...' - var hashTrimmed = value.Hash.slice(0, 6) + '...' - return ( -
{nameTrimmed} + {hashTrimmed}
- ) - } else { - return ( -
-
- Uploading {value.Name} -
-
- ) - } - }))} -
- ) : null + var version = this.state.version ? : null + + var files = null + if (this.state.files && this.state.files.length > 0) { + files = + } return (
@@ -205,13 +145,13 @@ var Menu = React.createClass({
- { status } + { toggles } { open } { stats } - { settings } + { version } - { quit } + { files } diff --git a/app/js/settings.jsx b/app/js/settings.jsx index 4a7d9aa48..4f33dfea9 100644 --- a/app/js/settings.jsx +++ b/app/js/settings.jsx @@ -1,6 +1,5 @@ var React = require('react/addons') var $ = require('jquery-bf') -var ipc = window.require('remote').require('ipc') var Settings = React.createClass({ diff --git a/app/views/menubar.html b/app/views/menubar.html index a93b9e476..7e1731a56 100644 --- a/app/views/menubar.html +++ b/app/views/menubar.html @@ -4,8 +4,8 @@ - +