create torrent page progress

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