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.
This commit is contained in:
DC
2016-09-02 02:30:37 -07:00
parent b93f41f564
commit 6fe03aa325
9 changed files with 98 additions and 48 deletions

View File

@@ -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)
}