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:
@@ -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)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user