diff --git a/src/main/index.js b/src/main/index.js index 7cbbeb15..335a5b4d 100644 --- a/src/main/index.js +++ b/src/main/index.js @@ -68,6 +68,8 @@ function init () { app.on('ready', function () { isReady = true + // require('electron').BrowserWindow.addDevToolsExtension('/Users/feross/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/0.15.3_0/') + windows.main.init() windows.webtorrent.init() menu.init() diff --git a/src/renderer/components/Heading.js b/src/renderer/components/Heading.js new file mode 100644 index 00000000..ba2f4f26 --- /dev/null +++ b/src/renderer/components/Heading.js @@ -0,0 +1,35 @@ +const React = require('react') + +const colors = require('material-ui/styles/colors') + +class Heading extends React.Component { + static get propTypes () { + return { + level: React.PropTypes.number + } + } + + static get defaultProps () { + return { + level: 1 + } + } + + render () { + const HeadingTag = 'h' + this.props.level + return ( + + {this.props.children} + + ) + } +} + +module.exports = Heading diff --git a/src/renderer/components/PageHeading.js b/src/renderer/components/PageHeading.js deleted file mode 100644 index c6a640f4..00000000 --- a/src/renderer/components/PageHeading.js +++ /dev/null @@ -1,22 +0,0 @@ -const React = require('react') - -const colors = require('material-ui/styles/colors') - -class PageHeading extends React.Component { - render () { - return ( -

- {this.props.children} -

- ) - } -} - -module.exports = PageHeading diff --git a/src/renderer/components/PathSelector.js b/src/renderer/components/PathSelector.js index 5069eed1..2eb643fb 100644 --- a/src/renderer/components/PathSelector.js +++ b/src/renderer/components/PathSelector.js @@ -1,3 +1,4 @@ +const colors = require('material-ui/styles/colors') const electron = require('electron') const React = require('react') @@ -15,7 +16,7 @@ class PathSelector extends React.Component { id: React.PropTypes.string, onChange: React.PropTypes.func, title: React.PropTypes.string.isRequired, - value: React.PropTypes.string.isRequired + value: React.PropTypes.string } } @@ -67,6 +68,9 @@ class PathSelector extends React.Component { className='control' disabled id={id} + inputStyle={{ + color: colors.grey50 + }} style={{ flex: '1', fontSize: 14 diff --git a/src/renderer/components/ShowMore.js b/src/renderer/components/ShowMore.js new file mode 100644 index 00000000..68bcf9cf --- /dev/null +++ b/src/renderer/components/ShowMore.js @@ -0,0 +1,53 @@ +const React = require('react') + +const FlatButton = require('material-ui/FlatButton').default + +class ShowMore extends React.Component { + static get propTypes () { + return { + defaultExpanded: React.PropTypes.bool, + hideLabel: React.PropTypes.string, + showLabel: React.PropTypes.string + } + } + + static get defaultProps () { + return { + hideLabel: 'Hide more...', + showLabel: 'Show more...' + } + } + + constructor (props) { + super(props) + + this.state = { + expanded: !!this.props.defaultExpanded + } + + this.handleClick = this.handleClick.bind(this) + } + + handleClick () { + this.setState({ + expanded: !this.state.expanded + }) + } + + render () { + const label = this.state.expanded + ? this.props.hideLabel + : this.props.showLabel + return ( +
+ {this.state.expanded ? this.props.children : null} + +
+ ) + } +} + +module.exports = ShowMore diff --git a/src/renderer/controllers/torrent-list-controller.js b/src/renderer/controllers/torrent-list-controller.js index 2f40d008..c155fbcf 100644 --- a/src/renderer/controllers/torrent-list-controller.js +++ b/src/renderer/controllers/torrent-list-controller.js @@ -64,13 +64,6 @@ module.exports = class TorrentListController { findFilesRecursive(files, (allFiles) => this.showCreateTorrent(allFiles)) } - // Switches between the advanced and simple Create Torrent UI - toggleCreateTorrentAdvanced () { - var info = this.state.location.current() - if (info.url !== 'create-torrent') return - info.showAdvanced = !info.showAdvanced - } - // Creates a new torrent and start seeeding createTorrent (options) { var state = this.state diff --git a/src/renderer/main.js b/src/renderer/main.js index c8b29d6e..aa76ea60 100644 --- a/src/renderer/main.js +++ b/src/renderer/main.js @@ -175,7 +175,6 @@ const dispatchHandlers = { 'addTorrent': (torrentId) => controllers.torrentList.addTorrent(torrentId), 'showCreateTorrent': (paths) => controllers.torrentList.showCreateTorrent(paths), - 'toggleCreateTorrentAdvanced': () => controllers.torrentList.toggleCreateTorrentAdvanced(), 'createTorrent': (options) => controllers.torrentList.createTorrent(options), 'toggleTorrent': (infoHash) => controllers.torrentList.toggleTorrent(infoHash), 'toggleTorrentFile': (infoHash, index) => controllers.torrentList.toggleTorrentFile(infoHash, index), diff --git a/src/renderer/pages/App.js b/src/renderer/pages/App.js index 82af92ab..46e65552 100644 --- a/src/renderer/pages/App.js +++ b/src/renderer/pages/App.js @@ -21,7 +21,9 @@ const Modals = { } const MUI_THEME = getMuiTheme(Object.assign(darkBaseTheme, { - fontFamily: 'BlinkMacSystemFont, \'Helvetica Neue\', Helvetica, sans-serif' + fontFamily: process.platform === 'win32' + ? '\'Segoe UI\', sans-serif' + : 'BlinkMacSystemFont, \'Helvetica Neue\', Helvetica, sans-serif' })) class App extends React.Component { diff --git a/src/renderer/pages/CreateTorrentPage.js b/src/renderer/pages/CreateTorrentPage.js index 8f8c1743..e6464526 100644 --- a/src/renderer/pages/CreateTorrentPage.js +++ b/src/renderer/pages/CreateTorrentPage.js @@ -1,35 +1,20 @@ -const React = require('react') const createTorrent = require('create-torrent') const path = require('path') const prettyBytes = require('prettier-bytes') +const React = require('react') const {dispatch, dispatcher} = require('../lib/dispatcher') + +const TextField = require('material-ui/TextField').default + const CreateTorrentErrorPage = require('../components/create-torrent-error-page') +const Heading = require('../components/Heading') +const ShowMore = require('../components/ShowMore') class CreateTorrentPage extends React.Component { - handleSubmit () { - var announceList = document.querySelector('.torrent-trackers').value - .split('\n') - .map((s) => s.trim()) - .filter((s) => s !== '') - var isPrivate = document.querySelector('.torrent-is-private').checked - var comment = document.querySelector('.torrent-comment').value.trim() - var options = { - // We can't let the user choose their own name if we want WebTorrent - // to use the files in place rather than creating a new folder. - // If we ever want to add support for that: - // name: document.querySelector('.torrent-name').value - name: defaultName, - path: basePath, - files: files, - announce: announceList, - private: isPrivate, - comment: comment - } - dispatch('createTorrent', options) - } + constructor (props) { + super(props) - render () { var state = this.props.state var info = state.location.current() @@ -76,40 +61,79 @@ class CreateTorrentPage extends React.Component { fileElems.push(
+ {maxFileElems - files.length} more
) } var trackers = createTorrent.announceList.join('\n') - var collapsedClass = info.showAdvanced ? 'expanded' : 'collapsed' + this.state = { + basePath, + defaultName, + fileElems, + torrentInfo, + trackers + } + } + + handleSubmit () { + var announceList = document.querySelector('.torrent-trackers').value + .split('\n') + .map((s) => s.trim()) + .filter((s) => s !== '') + var isPrivate = document.querySelector('.torrent-is-private').checked + var comment = document.querySelector('.torrent-comment').value.trim() + var options = { + // We can't let the user choose their own name if we want WebTorrent + // to use the files in place rather than creating a new folder. + // If we ever want to add support for that: + // name: document.querySelector('.torrent-name').value + name: this.state.defaultName, + path: this.state.basePath, + files: this.state.files, + announce: announceList, + private: isPrivate, + comment: comment + } + dispatch('createTorrent', options) + } + + render () { return (
- Create torrent {defaultName} -
- {torrentInfo} + + Create torrent "{this.state.defaultName}" + +
+ {this.state.torrentInfo}
-
+
-
{pathPrefix}
+
{this.state.pathPrefix}
-
- {info.showAdvanced ? 'Basic' : 'Advanced'} -
-
-
- -