fixed spacing around publish button
This commit is contained in:
bill bittner
parent
c10412947e
commit
44557befbb
3 changed files with 72 additions and 109 deletions
|
|
@ -1,70 +0,0 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import ChannelLoginForm from '../containers/ChannelLoginForm.jsx';
|
||||
import ChannelCreateForm from '../containers/ChannelCreateForm.jsx';
|
||||
|
||||
const LOGIN = 'Existing';
|
||||
const CREATE = 'New';
|
||||
|
||||
class ChannelSelector extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
selectedOption: LOGIN,
|
||||
};
|
||||
this.handleSelection = this.handleSelection.bind(this);
|
||||
this.selectOption = this.selectOption.bind(this);
|
||||
}
|
||||
componentWillMount () {
|
||||
console.log('ChannelSelector will mount');
|
||||
if (this.props.loggedInChannelName) {
|
||||
this.selectOption(this.props.loggedInChannelName);
|
||||
}
|
||||
}
|
||||
componentWillReceiveProps ({ loggedInChannelName }) {
|
||||
if (loggedInChannelName) {
|
||||
this.selectOption(loggedInChannelName);
|
||||
}
|
||||
}
|
||||
handleSelection (event) {
|
||||
const selectedOption = event.target.selectedOptions[0].value;
|
||||
this.selectOption(selectedOption);
|
||||
}
|
||||
selectOption (option) {
|
||||
this.setState({selectedOption: option});
|
||||
}
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
{ this.props.publishInChannel && (
|
||||
<div>
|
||||
<p id="input-error-channel-select" className="info-message-placeholder info-message--failure">{this.props.channelError}</p>
|
||||
<div className="column column--3">
|
||||
<label className="label" htmlFor="channel-name-select">Channel:</label>
|
||||
</div><div className="column column--7">
|
||||
<select type="text" id="channel-name-select" className="select select--arrow" value={this.state.selectedOption} onChange={this.handleSelection}>
|
||||
{ this.props.loggedInChannelName && <option value={this.props.loggedInChannelName} id="publish-channel-select-channel-option">{this.props.loggedInChannelName}</option> }
|
||||
<option value={LOGIN}>Existing</option>
|
||||
<option value={CREATE}>New</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{ (this.state.selectedOption === LOGIN) && <ChannelLoginForm /> }
|
||||
|
||||
{ (this.state.selectedOption === CREATE) && <ChannelCreateForm /> }
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
loggedInChannelName: state.loggedInChannel.name,
|
||||
publishInChannel : state.publishInChannel,
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps, null)(ChannelSelector);
|
||||
|
|
@ -1,11 +1,31 @@
|
|||
import React from 'react';
|
||||
import { setPublishInChannel } from '../actions/index';
|
||||
import { connect } from 'react-redux';
|
||||
import {setPublishInChannel} from '../actions';
|
||||
import {connect} from 'react-redux';
|
||||
import ChannelLoginForm from '../containers/ChannelLoginForm.jsx';
|
||||
import ChannelCreateForm from '../containers/ChannelCreateForm.jsx';
|
||||
const LOGIN = 'Existing';
|
||||
const CREATE = 'New';
|
||||
|
||||
class channelSelect extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
selectedOption: LOGIN,
|
||||
};
|
||||
this.toggleAnonymousPublish = this.toggleAnonymousPublish.bind(this);
|
||||
this.handleSelection = this.handleSelection.bind(this);
|
||||
this.selectOption = this.selectOption.bind(this);
|
||||
}
|
||||
componentWillMount () {
|
||||
console.log('ChannelSelector will mount');
|
||||
if (this.props.loggedInChannelName) {
|
||||
this.selectOption(this.props.loggedInChannelName);
|
||||
}
|
||||
}
|
||||
componentWillReceiveProps ({ loggedInChannelName }) {
|
||||
if (loggedInChannelName) {
|
||||
this.selectOption(loggedInChannelName);
|
||||
}
|
||||
}
|
||||
toggleAnonymousPublish (event) {
|
||||
const value = event.target.value;
|
||||
|
|
@ -15,25 +35,51 @@ class channelSelect extends React.Component {
|
|||
this.props.onPublishInChannelChange(true);
|
||||
}
|
||||
}
|
||||
handleSelection (event) {
|
||||
const selectedOption = event.target.selectedOptions[0].value;
|
||||
this.selectOption(selectedOption);
|
||||
}
|
||||
selectOption (option) {
|
||||
this.setState({selectedOption: option});
|
||||
}
|
||||
render () {
|
||||
return (
|
||||
<form>
|
||||
<div className="column column--3 column--med-10">
|
||||
<input type="radio" name="anonymous-or-channel" id="anonymous-radio" className="input-radio" value="anonymous" checked={!this.props.publishInChannel} onChange={this.toggleAnonymousPublish}/>
|
||||
<label className="label label--pointer" htmlFor="anonymous-radio">Anonymous</label>
|
||||
</div>
|
||||
<div className="column column--7 column--med-10">
|
||||
<input type="radio" name="anonymous-or-channel" id="channel-radio" className="input-radio" value="in a channel" checked={this.props.publishInChannel} onChange={this.toggleAnonymousPublish}/>
|
||||
<label className="label label--pointer" htmlFor="channel-radio">In a channel</label>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<form>
|
||||
<div className="column column--3 column--med-10">
|
||||
<input type="radio" name="anonymous-or-channel" id="anonymous-radio" className="input-radio" value="anonymous" checked={!this.props.publishInChannel} onChange={this.toggleAnonymousPublish}/>
|
||||
<label className="label label--pointer" htmlFor="anonymous-radio">Anonymous</label>
|
||||
</div>
|
||||
<div className="column column--7 column--med-10">
|
||||
<input type="radio" name="anonymous-or-channel" id="channel-radio" className="input-radio" value="in a channel" checked={this.props.publishInChannel} onChange={this.toggleAnonymousPublish}/>
|
||||
<label className="label label--pointer" htmlFor="channel-radio">In a channel</label>
|
||||
</div>
|
||||
</form>
|
||||
{ this.props.publishInChannel && (
|
||||
<div>
|
||||
<p id="input-error-channel-select" className="info-message-placeholder info-message--failure">{this.props.channelError}</p>
|
||||
<div className="column column--3">
|
||||
<label className="label" htmlFor="channel-name-select">Channel:</label>
|
||||
</div><div className="column column--7">
|
||||
<select type="text" id="channel-name-select" className="select select--arrow" value={this.state.selectedOption} onChange={this.handleSelection}>
|
||||
{ this.props.loggedInChannelName && <option value={this.props.loggedInChannelName} id="publish-channel-select-channel-option">{this.props.loggedInChannelName}</option> }
|
||||
<option value={LOGIN}>Existing</option>
|
||||
<option value={CREATE}>New</option>
|
||||
</select>
|
||||
</div>
|
||||
{ (this.state.selectedOption === LOGIN) && <ChannelLoginForm /> }
|
||||
{ (this.state.selectedOption === CREATE) && <ChannelCreateForm /> }
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
publishInChannel: state.publishInChannel,
|
||||
loggedInChannelName: state.loggedInChannel.name,
|
||||
publishInChannel : state.publishInChannel,
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { getCookie } from '../utils/cookies.js';
|
||||
import {connect} from 'react-redux';
|
||||
import {selectFile, clearFile, updateLoggedInChannel, updatePublishStatus, updateError} from '../actions';
|
||||
import {getCookie} from '../utils/cookies.js';
|
||||
import Dropzone from './Dropzone.jsx';
|
||||
import PublishTitleInput from './PublishTitleInput.jsx';
|
||||
import ChannelSelector from '../components/ChannelSelector.jsx';
|
||||
import PublishUrlInput from './PublishUrlInput.jsx';
|
||||
import PublishThumbnailInput from './PublishThumbnailInput.jsx';
|
||||
import PublishMetadataInputs from './PublishMetadataInputs.jsx';
|
||||
import AnonymousOrChannelSelect from './ChannelSelect.jsx';
|
||||
import {selectFile, clearFile, updateLoggedInChannel, updatePublishStatus, updateError} from '../actions';
|
||||
import ChannelSelect from './ChannelSelect.jsx';
|
||||
import * as publishStates from '../constants/publishing_states';
|
||||
|
||||
class PublishForm extends React.Component {
|
||||
|
|
@ -132,55 +131,43 @@ class PublishForm extends React.Component {
|
|||
return (
|
||||
<div className="row row--no-bottom">
|
||||
<div className="column column--10">
|
||||
|
||||
<PublishTitleInput />
|
||||
|
||||
</div>
|
||||
<div className="column column--5 column--sml-10" >
|
||||
|
||||
<div className="row row--padded">
|
||||
<Dropzone />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="column column--5 column--sml-10 align-content-top">
|
||||
<div id="publish-active-area" className="row row--padded">
|
||||
|
||||
<div className="row row--padded row--no-top row--wide">
|
||||
<PublishUrlInput />
|
||||
</div>
|
||||
|
||||
<div className="row row--padded row--no-top row--no-bottom row--wide">
|
||||
<AnonymousOrChannelSelect />
|
||||
</div>
|
||||
|
||||
<div className="row row--padded row--no-top row--wide">
|
||||
<ChannelSelector />
|
||||
<ChannelSelect />
|
||||
</div>
|
||||
|
||||
{ (this.props.file.type === 'video/mp4') && (
|
||||
<div className="row row--padded row--wide row--no-top">
|
||||
<div className="row row--padded row--no-top row--wide ">
|
||||
<PublishThumbnailInput />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="row row--padded row--no-top row--no-bottom row--wide">
|
||||
<PublishMetadataInputs />
|
||||
</div>
|
||||
|
||||
<div className="row row--padded row--no-top row--wide align-content-center">
|
||||
<p className="info-message-placeholder info-message--failure">{this.props.publishSubmitError}</p>
|
||||
{ this.props.publishSubmitError && (
|
||||
<div className="row align-content-center">
|
||||
<p className="info-message-placeholder info-message--failure">{this.props.publishSubmitError}</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="row row--wide align-content-center">
|
||||
<button id="publish-submit" className="button--primary button--large" onClick={this.publish}>Publish</button>
|
||||
</div>
|
||||
|
||||
<div className="row row--short align-content-center">
|
||||
<div className="row row--padded row--no-bottom align-content-center">
|
||||
<button className="button--cancel" onClick={this.props.onFileClear}>Cancel</button>
|
||||
</div>
|
||||
|
||||
<div className="row row--short align-content-center">
|
||||
<p className="fine-print">By clicking 'Upload', you affirm that you have the rights to publish this content to the LBRY network, and that you understand the properties of publishing it to a decentralized, user-controlled network. <a className="link--primary" target="_blank" href="https://lbry.io/learn">Read more.</a></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue