create torrent page progress

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()

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 (
+      <HeadingTag
+        style={{
+          color: colors.grey100,
+          fontSize: 20,
+          marginBottom: 15,
+          marginTop: 30
+        }}
+      >
+        {this.props.children}
+      </HeadingTag>
+    )
+  }
+}
+
+module.exports = Heading

src/renderer/components/PageHeading.js

@@ -1,22 +0,0 @@
-const React = require('react')
-
-const colors = require('material-ui/styles/colors')
-
-class PageHeading extends React.Component {
-  render () {
-    return (
-      <h2
-        style={{
-          color: colors.grey100,
-          fontSize: 20,
-          marginBottom: 15,
-          marginTop: 30
-        }}
-      >
-        {this.props.children}
-      </h2>
-    )
-  }
-}
-
-module.exports = PageHeading

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

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 (
+      <div>
+        {this.state.expanded ? this.props.children : null}
+        <FlatButton
+          onClick={this.handleClick}
+          label={label}
+        />
+      </div>
+    )
+  }
+}
+
+module.exports = ShowMore

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

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),

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 {

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(<div key='more'>+ {maxFileElems - files.length} more</div>)
     }
     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 (
       <div className='create-torrent'>
-        <PageHeading>Create torrent {defaultName}</PageHeading>
-        <div key='info' className='torrent-info'>
-          {torrentInfo}
+        <Heading level={1}>
+          Create torrent "{this.state.defaultName}"
+        </Heading>
+        <div className='torrent-info'>
+          {this.state.torrentInfo}
         </div>
-        <div key='path-prefix' className='torrent-attribute'>
+        <div className='torrent-attribute'>
           <label>Path:</label>
-          <div className='torrent-attribute'>{pathPrefix}</div>
+          <div className='torrent-attribute'>{this.state.pathPrefix}</div>
         </div>
-        <div key='toggle' className={'expand-collapse ' + collapsedClass}
-          onClick={dispatcher('toggleCreateTorrentAdvanced')}>
-          {info.showAdvanced ? 'Basic' : 'Advanced'}
-        </div>
-        <div key='advanced' className={'create-torrent-advanced ' + collapsedClass}>
-          <div key='comment' className='torrent-attribute'>
-            <label>Comment:</label>
-            <textarea className='torrent-attribute torrent-comment' />
+        <ShowMore
+          hideLabel='Hide advanced settings...'
+          showLabel='Show advanced settings...'
+        >
+          <div key='advanced' className='create-torrent-advanced'>
+            <div key='private' className='torrent-attribute'>
+              <label>Private:</label>
+              <input type='checkbox' className='torrent-is-private' value='torrent-is-private' />
+            </div>
+            <Heading level={2}>Trackers:</Heading>
+            <TextField
+              className='torrent-trackers'
+              hintText='Tracker'
+              multiLine
+              rows={2}
+              rowsMax={10}
+              defaultValue={this.state.trackers}
+            />
+            <div key='comment' className='torrent-attribute'>
+              <label>Comment:</label>
+              <textarea className='torrent-attribute torrent-comment' />
+            </div>
+            <div key='files' className='torrent-attribute'>
+              <label>Files:</label>
+              <div>{this.state.fileElems}</div>
+            </div>
           </div>
-          <div key='trackers' className='torrent-attribute'>
-            <label>Trackers:</label>
-            <textarea className='torrent-attribute torrent-trackers' defaultValue={trackers} />
-          </div>
-          <div key='private' className='torrent-attribute'>
-            <label>Private:</label>
-            <input type='checkbox' className='torrent-is-private' value='torrent-is-private' />
-          </div>
-          <div key='files' className='torrent-attribute'>
-            <label>Files:</label>
-            <div>{fileElems}</div>
-          </div>
-        </div>
+        </ShowMore>
         <div key='buttons' className='float-right'>
           <button key='cancel' className='button-flat light' onClick={dispatcher('cancel')}>Cancel</button>
           <button key='create' className='button-raised' onClick={this.handleSubmit}>Create Torrent</button>

src/renderer/pages/PreferencesPage.js

@@ -1,18 +1,17 @@
-const React = require('react')
+const colors = require('material-ui/styles/colors')
 const path = require('path')
+const React = require('react')
 
 const Checkbox = require('material-ui/Checkbox').default
-const colors = require('material-ui/styles/colors')
-const RaisedButton = require('material-ui/RaisedButton').default
-
-const PageHeading = require('../components/PageHeading')
+const Heading = require('../components/Heading')
 const PathSelector = require('../components/PathSelector')
+const RaisedButton = require('material-ui/RaisedButton').default
 
 const {dispatch} = require('../lib/dispatcher')
 
 class PreferencesPage extends React.Component {
-  constructor () {
-    super()
+  constructor (props) {
+    super(props)
 
     this.handleDownloadPathChange =
       this.handleDownloadPathChange.bind(this)
@@ -154,7 +153,7 @@ class PreferencesSection extends React.Component {
           marginTop: 25
         }}
       >
-        <PageHeading>{this.props.title}</PageHeading>
+        <Heading level={2}>{this.props.title}</Heading>
         {this.props.children}
       </div>
     )

static/main.css

@@ -334,17 +334,8 @@ table {
   padding: 4px 6px;
 }
 
-.create-torrent textarea.torrent-trackers {
-  height: 200px;
-}
-
-.create-torrent input.torrent-is-private {
-  margin: 0;
-}
-
 /*
  * BUTTONS
- * See https://www.google.com/design/spec/components/buttons.html
  */
 
 a,
@@ -367,10 +358,6 @@ i:not(.disabled):hover { /* Show they're clickable without pointer: cursor */
   text-align: center;
 }
 
-/*
- * OTHER FORM ELEMENT DEFAULTS
- */
-
 /*
  * TORRENT LIST
  */