diff --git a/src/renderer/components/Heading.js b/src/renderer/components/Heading.js index ba2f4f26..2a68fb91 100644 --- a/src/renderer/components/Heading.js +++ b/src/renderer/components/Heading.js @@ -17,15 +17,14 @@ class Heading extends React.Component { render () { const HeadingTag = 'h' + this.props.level + const style = { + color: colors.grey100, + fontSize: 20, + marginBottom: 15, + marginTop: 30 + } return ( - + {this.props.children} ) diff --git a/src/renderer/components/path-selector.js b/src/renderer/components/path-selector.js index 2eb643fb..1427ea4c 100644 --- a/src/renderer/components/path-selector.js +++ b/src/renderer/components/path-selector.js @@ -7,6 +7,9 @@ const remote = electron.remote const RaisedButton = require('material-ui/RaisedButton').default const TextField = require('material-ui/TextField').default +// Lets you pick a file or directory. +// Uses the system Open File dialog. +// You can't edit the text field directly. class PathSelector extends React.Component { static get propTypes () { return { @@ -43,48 +46,39 @@ class PathSelector extends React.Component { render () { const id = this.props.title.replace(' ', '-').toLowerCase() + const wrapperStyle = { + alignItems: 'center', + display: 'flex', + width: '100%' + } + const labelStyle = { + flex: '0 auto', + marginRight: 10, + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap' + } + const textareaStyle = { + color: colors.grey50 + } + const textFieldStyle = { + flex: '1', + fontSize: 14 + } + const text = this.props.displayValue || this.props.value + const buttonStyle = { + marginLeft: 10 + } + return ( -
-
+
+
{this.props.title}:
- - + +
) } diff --git a/src/renderer/pages/create-torrent-page.js b/src/renderer/pages/create-torrent-page.js index 0886c445..17a37adf 100644 --- a/src/renderer/pages/create-torrent-page.js +++ b/src/renderer/pages/create-torrent-page.js @@ -14,6 +14,8 @@ const CreateTorrentErrorPage = require('../components/create-torrent-error-page' const Heading = require('../components/heading') const ShowMore = require('../components/show-more') +// Shows a basic UI to create a torrent, from an already-selected file or folder. +// Includes a "Show Advanced..." button and more advanced UI. class CreateTorrentPage extends React.Component { constructor (props) { super(props) @@ -92,7 +94,7 @@ class CreateTorrentPage extends React.Component { marginBottom: 10 }} hideLabel='Hide advanced settings...' - showLabel='Show advanced settings...' > + showLabel='Show advanced settings...'> {this.renderAdvanced()}
@@ -101,18 +103,20 @@ class CreateTorrentPage extends React.Component { style={{ marginRight: 10 }} - onClick={dispatcher('cancel')} - /> + onClick={dispatcher('cancel')} /> + onClick={this.handleSubmit} />
) } + // Renders everything after clicking Show Advanced...: + // * Is Private? (private torrents, not announced to DHT) + // * Announce list (trackers) + // * Comment renderAdvanced () { // Create file list var maxFileElems = 100 diff --git a/src/renderer/pages/player-page.js b/src/renderer/pages/player-page.js index 222191b5..26effa7b 100644 --- a/src/renderer/pages/player-page.js +++ b/src/renderer/pages/player-page.js @@ -392,16 +392,14 @@ function renderPlayerControls (state) {
+ style={playbackCursorStyle} />
+ onDrag={handleScrub} />
, + style={volumeStyle} />
)) diff --git a/src/renderer/pages/preferences-page.js b/src/renderer/pages/preferences-page.js index e26b0eb8..2bd2a9f8 100644 --- a/src/renderer/pages/preferences-page.js +++ b/src/renderer/pages/preferences-page.js @@ -33,8 +33,7 @@ class PreferencesPage extends React.Component { }} onChange={this.handleDownloadPathChange} title='Download location' - value={this.props.state.unsaved.prefs.downloadPath} - /> + value={this.props.state.unsaved.prefs.downloadPath} /> ) } @@ -50,8 +49,7 @@ class PreferencesPage extends React.Component { className='control' checked={!this.props.state.unsaved.prefs.openExternalPlayer} label={'Play torrent media files using WebTorrent'} - onCheck={this.handleOpenExternalPlayerChange} - /> + onCheck={this.handleOpenExternalPlayerChange} /> ) } @@ -81,8 +79,7 @@ class PreferencesPage extends React.Component { displayValue={playerName} onChange={this.handleExternalPlayerPathChange} title='External player' - value={this.props.state.unsaved.prefs.externalPlayerPath} - /> + value={this.props.state.unsaved.prefs.externalPlayerPath} /> ) } @@ -110,8 +107,7 @@ class PreferencesPage extends React.Component { + label='Make WebTorrent the default' /> ) } @@ -127,7 +123,7 @@ class PreferencesPage extends React.Component { marginRight: 25 } return ( -
+
{this.downloadPathSelector()} diff --git a/src/renderer/pages/torrent-list-page.js b/src/renderer/pages/torrent-list-page.js index 608de522..61e4cdb0 100644 --- a/src/renderer/pages/torrent-list-page.js +++ b/src/renderer/pages/torrent-list-page.js @@ -198,8 +198,7 @@ module.exports = class TorrentList extends React.Component { key='download-button' className={'button-round icon download ' + torrentSummary.status} title={downloadTooltip} - onClick={dispatcher('toggleTorrent', infoHash)} - > + onClick={dispatcher('toggleTorrent', infoHash)}> {downloadIcon} ) @@ -221,8 +220,7 @@ module.exports = class TorrentList extends React.Component { key='play-button' title={playTooltip} className={'button-round icon play ' + playClass} - onClick={dispatcher('playFile', infoHash)} - > + onClick={dispatcher('playFile', infoHash)}> {playIcon} )