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.
2016-09-02 02:30:37 -07:00
parent b93f41f564
commit 6fe03aa325
9 changed files with 98 additions and 48 deletions
--- a/src/renderer/components/modal-ok-cancel.js
+++ 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 (
+      <div className='float-right'>
+        <FlatButton
+          className='control'
+          style={cancelStyle}
+          label={cancelText}
+          onClick={onCancel} />
+        <RaisedButton
+          className='control'
+          primary
+          label={okText}
+          onClick={onOK} />
+      </div>
+    )
+  }
+}
--- 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 <script>
    return (
      <div className='open-torrent-address-modal'>
        <p><label>Enter torrent address or magnet link</label></p>
-        <p>
-          <input id='add-torrent-url' type='text' onKeyPress={handleKeyPress} />
-        </p>
-        <p className='float-right'>
-          <button className='button button-flat' onClick={dispatcher('exitModal')}>Cancel</button>
-          <button className='button button-raised' onClick={handleOK}>OK</button>
-        </p>
-        <script>document.querySelector('#add-torrent-url').focus()</script>
+        <div>
+          <TextField
+            className='control'
+            ref={(c) => { this.torrentURL = c }}
+            fullWidth
+            onKeyDown={handleKeyDown.bind(this)} />
+        </div>
+        <ModalOKCancel
+          cancelText='CANCEL'
+          onCancel={dispatcher('exitModal')}
+          okText='OK'
+          onOK={handleOK.bind(this)} />
      </div>
    )
  }
+
+  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)
 }
--- 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 = {
--- 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 (
      <div>
        <p><strong>{message}</strong></p>
-        <p className='float-right'>
-          <button className='button button-flat' onClick={dispatcher('exitModal')}>Cancel</button>
-          <button className='button button-raised' onClick={handleRemove}>{buttonText}</button>
-        </p>
+        <ModalOKCancel
+          cancelText='CANCEL'
+          onCancel={dispatcher('exitModal')}
+          okText={buttonText}
+          onOK={handleRemove} />
      </div>
    )

--- 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
-      ? (<button className='button-raised' onClick={onPlay}>Play in {playerName}</button>)
-      : (<button className='button-raised' onClick={() => this.onInstall()}>Install VLC</button>)
-    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 (
      <div>
        <p><strong>Sorry, we can't play that file.</strong></p>
        <p>{message}</p>
-        <p className='float-right'>
-          <button className='button-flat' onClick={dispatcher('backToList')}>Cancel</button>
-          {actionButton}
-        </p>
-        <p className='error-text'>{playerMessage}</p>
+        <ModalOKCancel
+          cancelText='CANCEL'
+          onCancel={dispatcher('backToList')}
+          okText={actionText}
+          onOK={onAction} />
+        <p className='error-text'>{errorMessage}</p>
      </div>
    )
  }
--- 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.
        </p>
-        <p className='float-right'>
-          <button className='button button-flat' onClick={handleSkip}>Skip This Release</button>
-          <button className='button button-raised' onClick={handleShow}>Show Download Page</button>
-        </p>
+        <ModalOKCancel
+          cancelText='SKIP THIS RELEASE'
+          onCancel={handleSkip}
+          okText='SHOW DOWNLOAD PAGE'
+          onOK={handleShow} />
      </div>
    )

--- 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 (
-      <div key='modal' className='modal'>
-        <div key='modal-background' className='modal-background' />
-        <div key='modal-content' className='modal-content'>
-          <ModalContents state={state} />
+      <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
+        <div key='modal' className='modal'>
+          <div key='modal-background' className='modal-background' />
+          <div key='modal-content' className='modal-content'>
+            <ModalContents state={state} />
+          </div>
        </div>
-      </div>
+      </MuiThemeProvider>
    )
  }

--- 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 {
        </ShowMore>
        <div className='float-right'>
          <FlatButton
+            className='control'
            label='Cancel'
            style={{
              marginRight: 10
            }}
            onClick={dispatcher('cancel')} />
          <RaisedButton
+            className='control'
            label='Create Torrent'
            primary
            onClick={this.handleSubmit} />
@@ -138,7 +140,7 @@ class CreateTorrentPage extends React.Component {
        <div key='private' className='torrent-attribute'>
          <label>Private:</label>
          <Checkbox
-            className='torrent-is-private'
+            className='torrent-is-private control'
            style={{display: ''}}
            checked={this.state.isPrivate}
            onCheck={this.setIsPrivate} />
@@ -146,7 +148,7 @@ class CreateTorrentPage extends React.Component {
        <div key='trackers' className='torrent-attribute'>
          <label>Trackers:</label>
          <TextField
-            className='torrent-trackers'
+            className='torrent-trackers control'
            style={textFieldStyle}
            textareaStyle={textareaStyle}
            multiLine
@@ -158,7 +160,7 @@ class CreateTorrentPage extends React.Component {
        <div key='comment' className='torrent-attribute'>
          <label>Comment:</label>
          <TextField
-            className='torrent-comment'
+            className='torrent-comment control'
            style={textFieldStyle}
            textareaStyle={textareaStyle}
            hintText='Optionally describe your torrent...'
--- a/static/main.css
+++ b/static/main.css
@@ -265,14 +265,9 @@ table {
  font-weight: bold;
 }

-.open-torrent-address-modal input {
-  width: 100%;
-}
-
 .create-torrent {
  padding: 10px 25px;
  overflow: hidden;
-  font: 16px/24px BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
 }

 .create-torrent .torrent-attribute {
@@ -323,6 +318,15 @@ i:not(.disabled):hover { /* Show they're clickable without pointer: cursor */
  text-align: center;
 }

+/*
+ * INPUTS
+ */
+input,
+textarea,
+.control {
+  font-size: 14px !important;
+}
+
 /*
 * TORRENT LIST
 */