From 6fe03aa32587015fbe37b502e616ef6b4927c9e2 Mon Sep 17 00:00:00 2001 From: DC Date: Fri, 2 Sep 2016 02:30:37 -0700 Subject: [PATCH] Material UI: upgrade modals Also clean up the Create Torrent page, delete some redundant CSS, prevent click-and-drag inside a TextField from moving the whole window, and make all label and input fonts a consistent 14px size. --- src/renderer/components/modal-ok-cancel.js | 24 +++++++++++++ .../components/open-torrent-address-modal.js | 34 ++++++++++++------- src/renderer/components/path-selector.js | 3 +- .../components/remove-torrent-modal.js | 12 ++++--- .../components/unsupported-media-modal.js | 24 +++++++------ .../components/update-available-modal.js | 10 +++--- src/renderer/pages/App.js | 17 ++++++---- src/renderer/pages/create-torrent-page.js | 8 +++-- static/main.css | 14 +++++--- 9 files changed, 98 insertions(+), 48 deletions(-) create mode 100644 src/renderer/components/modal-ok-cancel.js diff --git a/src/renderer/components/modal-ok-cancel.js b/src/renderer/components/modal-ok-cancel.js new file mode 100644 index 00000000..f5342bae --- /dev/null +++ b/src/renderer/components/modal-ok-cancel.js @@ -0,0 +1,24 @@ +const React = require('react') +const FlatButton = require('material-ui/FlatButton').default +const RaisedButton = require('material-ui/RaisedButton').default + +module.exports = class ModalOKCancel extends React.Component { + render () { + const cancelStyle = { marginRight: 10, color: 'black' } + const {cancelText, onCancel, okText, onOK} = this.props + return ( +
+ + +
+ ) + } +} diff --git a/src/renderer/components/open-torrent-address-modal.js b/src/renderer/components/open-torrent-address-modal.js index cd106bcb..966fc8fc 100644 --- a/src/renderer/components/open-torrent-address-modal.js +++ b/src/renderer/components/open-torrent-address-modal.js @@ -1,32 +1,40 @@ const React = require('react') +const TextField = require('material-ui/TextField').default +const ModalOKCancel = require('./modal-ok-cancel') const {dispatch, dispatcher} = require('../lib/dispatcher') module.exports = class OpenTorrentAddressModal extends React.Component { render () { - // TODO: dcposch remove janky inline +
+ { this.torrentURL = c }} + fullWidth + onKeyDown={handleKeyDown.bind(this)} /> +
+ ) } + + componentDidMount () { + this.torrentURL.input.focus() + } } -function handleKeyPress (e) { - if (e.which === 13) handleOK() /* hit Enter to submit */ +function handleKeyDown (e) { + if (e.which === 13) this.handleOK() /* hit Enter to submit */ } function handleOK () { dispatch('exitModal') - // TODO: dcposch use React refs instead - dispatch('addTorrent', document.querySelector('#add-torrent-url').value) + dispatch('addTorrent', this.torrentURL.input.value) } diff --git a/src/renderer/components/path-selector.js b/src/renderer/components/path-selector.js index cdeb124e..ca377c65 100644 --- a/src/renderer/components/path-selector.js +++ b/src/renderer/components/path-selector.js @@ -62,8 +62,7 @@ class PathSelector extends React.Component { color: colors.grey50 } const textFieldStyle = { - flex: '1', - fontSize: 14 + flex: '1' } const text = this.props.displayValue || this.props.value const buttonStyle = { diff --git a/src/renderer/components/remove-torrent-modal.js b/src/renderer/components/remove-torrent-modal.js index 0ce4e731..a885dd0b 100644 --- a/src/renderer/components/remove-torrent-modal.js +++ b/src/renderer/components/remove-torrent-modal.js @@ -1,5 +1,6 @@ const React = require('react') +const ModalOKCancel = require('./modal-ok-cancel') const {dispatch, dispatcher} = require('../lib/dispatcher') module.exports = class RemoveTorrentModal extends React.Component { @@ -8,15 +9,16 @@ module.exports = class RemoveTorrentModal extends React.Component { const message = state.modal.deleteData ? 'Are you sure you want to remove this torrent from the list and delete the data file?' : 'Are you sure you want to remove this torrent from the list?' - const buttonText = state.modal.deleteData ? 'Remove Data' : 'Remove' + const buttonText = state.modal.deleteData ? 'REMOVE DATA' : 'REMOVE' return (

{message}

-

- - -

+
) diff --git a/src/renderer/components/unsupported-media-modal.js b/src/renderer/components/unsupported-media-modal.js index 4d64598d..f2c29580 100644 --- a/src/renderer/components/unsupported-media-modal.js +++ b/src/renderer/components/unsupported-media-modal.js @@ -2,6 +2,7 @@ const React = require('react') const electron = require('electron') const path = require('path') +const ModalOKCancel = require('./modal-ok-cancel') const {dispatcher} = require('../lib/dispatcher') module.exports = class UnsupportedMediaModal extends React.Component { @@ -15,22 +16,25 @@ module.exports = class UnsupportedMediaModal extends React.Component { const playerName = playerPath ? path.basename(playerPath).split('.')[0] : 'VLC' - const onPlay = dispatcher('openExternalPlayer') - const actionButton = state.modal.externalPlayerInstalled - ? () - : () - const playerMessage = state.modal.externalPlayerNotFound + const onAction = state.modal.externalPlayerInstalled + ? dispatcher('openExternalPlayer') + : () => this.onInstall() + const actionText = state.modal.externalPlayerInstalled + ? 'PLAY IN ' + playerName.toUpperCase() + : 'INSTALL VLC' + const errorMessage = state.modal.externalPlayerNotFound ? 'Couldn\'t run external player. Please make sure it\'s installed.' : '' return (

Sorry, we can't play that file.

{message}

-

- - {actionButton} -

-

{playerMessage}

+ +

{errorMessage}

) } diff --git a/src/renderer/components/update-available-modal.js b/src/renderer/components/update-available-modal.js index 6d6990c6..03c84605 100644 --- a/src/renderer/components/update-available-modal.js +++ b/src/renderer/components/update-available-modal.js @@ -1,6 +1,7 @@ const React = require('react') const electron = require('electron') +const ModalOKCancel = require('./modal-ok-cancel') const {dispatch} = require('../lib/dispatcher') module.exports = class UpdateAvailableModal extends React.Component { @@ -13,10 +14,11 @@ module.exports = class UpdateAvailableModal extends React.Component { We have an auto-updater for Windows and Mac. We don't have one for Linux yet, so you'll have to download the new version manually.

-

- - -

+ ) diff --git a/src/renderer/pages/App.js b/src/renderer/pages/App.js index 03586141..d892d898 100644 --- a/src/renderer/pages/App.js +++ b/src/renderer/pages/App.js @@ -2,6 +2,7 @@ const colors = require('material-ui/styles/colors') const React = require('react') const darkBaseTheme = require('material-ui/styles/baseThemes/darkBaseTheme').default +const lightBaseTheme = require('material-ui/styles/baseThemes/lightBaseTheme').default const getMuiTheme = require('material-ui/styles/getMuiTheme').default const MuiThemeProvider = require('material-ui/styles/MuiThemeProvider').default @@ -21,9 +22,11 @@ const Modals = { 'unsupported-media-modal': require('../components/unsupported-media-modal') } -darkBaseTheme.fontFamily = process.platform === 'win32' +const fontFamily = process.platform === 'win32' ? '"Segoe UI", sans-serif' : 'BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif' +lightBaseTheme.fontFamily = fontFamily +darkBaseTheme.fontFamily = fontFamily darkBaseTheme.palette.primary1Color = colors.cyan500 darkBaseTheme.palette.primary2Color = colors.cyan500 darkBaseTheme.palette.primary3Color = colors.grey600 @@ -92,12 +95,14 @@ class App extends React.Component { if (!state.modal) return const ModalContents = Modals[state.modal.id] return ( -
-
-
- + +
+
+
+ +
-
+ ) } diff --git a/src/renderer/pages/create-torrent-page.js b/src/renderer/pages/create-torrent-page.js index 1115052a..687ddfb9 100644 --- a/src/renderer/pages/create-torrent-page.js +++ b/src/renderer/pages/create-torrent-page.js @@ -99,12 +99,14 @@ class CreateTorrentPage extends React.Component {
@@ -138,7 +140,7 @@ class CreateTorrentPage extends React.Component {
@@ -146,7 +148,7 @@ class CreateTorrentPage extends React.Component {