publish and form tweaks
This commit is contained in:
Jeremy Kauffman
Alex Liebowitz
parent
2b07c982e6
commit
21b5890448
7 changed files with 141 additions and 132 deletions
|
|
@ -1,8 +1,6 @@
|
|||
// Generic menu styles
|
||||
var menuStyle = {
|
||||
border: '1px solid #aaa',
|
||||
padding: '4px',
|
||||
whiteSpace: 'nowrap',
|
||||
whiteSpace: 'nowrap'
|
||||
};
|
||||
|
||||
var Menu = React.createClass({
|
||||
|
|
|
|||
|
|
@ -24,9 +24,11 @@ var MyFilesRowMoreMenu = React.createClass({
|
|||
return (
|
||||
<div style={moreMenuStyle}>
|
||||
<Menu {...this.props}>
|
||||
<MenuItem onClick={this.onRevealClicked} label="Reveal file" /> {/* @TODO: Switch to OS specific wording */}
|
||||
<MenuItem onClick={this.onRemoveClicked} label="Remove from LBRY" />
|
||||
<MenuItem onClick={this.onDeleteClicked} label="Remove and delete file" />
|
||||
<section className="card">
|
||||
<MenuItem onClick={this.onRevealClicked} label="Reveal file" /> {/* @TODO: Switch to OS specific wording */}
|
||||
<MenuItem onClick={this.onRemoveClicked} label="Remove from LBRY" />
|
||||
<MenuItem onClick={this.onDeleteClicked} label="Remove and delete file" />
|
||||
</section>
|
||||
</Menu>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -92,35 +94,37 @@ var MyFilesRow = React.createClass({
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="row-fluid">
|
||||
<div className="span3">
|
||||
{this.props.imgUrl ? <img src={this.props.imgUrl} alt={'Photo for ' + this.props.title} style={artStyle} /> : null}
|
||||
</div>
|
||||
<div className="span6">
|
||||
<h2>{this.props.pending ? this.props.title : <a href={'/?show=' + this.props.lbryUri}>{this.props.title}</a>}</h2>
|
||||
{this.props.pending ? <em>This file is pending confirmation</em>
|
||||
: (
|
||||
<div>
|
||||
<div className={this.props.completed ? 'hidden' : ''} style={curProgressBarStyle}></div>
|
||||
{ ' ' }
|
||||
{this.props.completed ? 'Download complete' : (parseInt(this.props.ratioLoaded * 100) + '%')}
|
||||
<div>{ pauseLink }</div>
|
||||
<div>{ watchButton }</div>
|
||||
<section className="card">
|
||||
<div className="row-fluid">
|
||||
<div className="span3">
|
||||
{this.props.imgUrl ? <img src={this.props.imgUrl} alt={'Photo for ' + this.props.title} style={artStyle} /> : null}
|
||||
</div>
|
||||
<div className="span8">
|
||||
<h3>{this.props.pending ? this.props.title : <a href={'/?show=' + this.props.lbryUri}>{this.props.title}</a>}</h3>
|
||||
{this.props.pending ? <em>This file is pending confirmation</em>
|
||||
: (
|
||||
<div>
|
||||
<div className={this.props.completed ? 'hidden' : ''} style={curProgressBarStyle}></div>
|
||||
{ ' ' }
|
||||
{this.props.completed ? 'Download complete' : (parseInt(this.props.ratioLoaded * 100) + '%')}
|
||||
<div>{ pauseLink }</div>
|
||||
<div>{ watchButton }</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<div className="span1" style={moreButtonColumnStyle}>
|
||||
{this.props.pending ? null :
|
||||
<div style={moreButtonContainerStyle}>
|
||||
<Link style={moreButtonStyle} ref="moreButton" icon="icon-ellipsis-h" title="More Options" />
|
||||
<MyFilesRowMoreMenu toggleButton={this.refs.moreButton} title={this.props.title}
|
||||
lbryUri={this.props.lbryUri} fileName={this.props.fileName}
|
||||
path={this.props.path}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className="span1" style={moreButtonColumnStyle}>
|
||||
{this.props.pending ? null :
|
||||
<div style={moreButtonContainerStyle}>
|
||||
<Link style={moreButtonStyle} ref="moreButton" icon="icon-ellipsis-h" title="More Options" />
|
||||
<MyFilesRowMoreMenu toggleButton={this.refs.moreButton} title={this.props.title}
|
||||
lbryUri={this.props.lbryUri} fileName={this.props.fileName}
|
||||
path={this.props.path}/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
@ -195,9 +199,7 @@ var MyFilesPage = React.createClass({
|
|||
}
|
||||
return (
|
||||
<main className="page">
|
||||
<section>
|
||||
{content}
|
||||
</section>
|
||||
{content}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -263,20 +263,22 @@ var PublishPage = React.createClass({
|
|||
},
|
||||
render: function() {
|
||||
return (
|
||||
<main className="page" ref="page">
|
||||
<section className="section-block">
|
||||
<main ref="page">
|
||||
<section className="card">
|
||||
<h4>LBRY Name</h4>
|
||||
lbry://<FormField type="text" ref="name" onChange={this.handleNameChange} />
|
||||
{
|
||||
(!this.state.name ? '' :
|
||||
(! this.state.nameResolved ? <em> This name is available</em>
|
||||
: (this.state.nameIsMine ? <em> You already control this name. You can use this page to update your claim.</em>
|
||||
: <em> This name is currently claimed for <strong>{lbry.formatCredits(this.state.claimValue)}</strong> credits.</em>)))
|
||||
}
|
||||
<div className="help">What LBRY name would you like to claim for this file?</div>
|
||||
<div className="form-row">
|
||||
lbry://<FormField type="text" ref="name" onChange={this.handleNameChange} />
|
||||
{
|
||||
(!this.state.name ? '' :
|
||||
(! this.state.nameResolved ? <em> This name is available</em>
|
||||
: (this.state.nameIsMine ? <em> You already control this name. You can use this page to update your claim.</em>
|
||||
: <em> This name is currently claimed for <strong>{lbry.formatCredits(this.state.claimValue)}</strong> credits.</em>)))
|
||||
}
|
||||
<div className="help">What LBRY name would you like to claim for this file?</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section-block">
|
||||
<section className="card">
|
||||
<h4>Choose File</h4>
|
||||
<form>
|
||||
<FormField name="file" ref="file" type="file" onChange={this.handleFileChange} />
|
||||
|
|
@ -290,19 +292,21 @@ var PublishPage = React.createClass({
|
|||
{ this.state.nameIsMine ? <div className="help">If you don't choose a file, the file from your existing claim will be used.</div> : null }
|
||||
</section>
|
||||
|
||||
<section className="section-block">
|
||||
<section className="card">
|
||||
<h4>Bid Amount</h4>
|
||||
Credits <FormField ref="bid" style={publishNumberStyle} type="text" onChange={this.handleBidChange} value={this.state.bid} placeholder={this.state.nameResolved ? lbry.formatCredits(this.state.claimValue + 10) : 100} />
|
||||
<div className="help">How much would you like to bid for this name?
|
||||
{ !this.state.nameResolved ? <span> Since this name is not currently resolved, you may bid as low as you want, but higher bids help prevent others from claiming your name.</span>
|
||||
: (this.state.nameIsMine ? <span> Your current bid is <strong>{lbry.formatCredits(this.state.claimValue)}</strong> credits.</span>
|
||||
: <span> You must bid over <strong>{lbry.formatCredits(this.state.claimValue)}</strong> credits to claim this name.</span>) }
|
||||
<div className="form-row">
|
||||
Credits <FormField ref="bid" style={publishNumberStyle} type="text" onChange={this.handleBidChange} value={this.state.bid} placeholder={this.state.nameResolved ? lbry.formatCredits(this.state.claimValue + 10) : 100} />
|
||||
<div className="help">How much would you like to bid for this name?
|
||||
{ !this.state.nameResolved ? <span> Since this name is not currently resolved, you may bid as low as you want, but higher bids help prevent others from claiming your name.</span>
|
||||
: (this.state.nameIsMine ? <span> Your current bid is <strong>{lbry.formatCredits(this.state.claimValue)}</strong> credits.</span>
|
||||
: <span> You must bid over <strong>{lbry.formatCredits(this.state.claimValue)}</strong> credits to claim this name.</span>) }
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section-block">
|
||||
<section className="card">
|
||||
<h4>Fee</h4>
|
||||
<div className="spacer-bottom--sm">
|
||||
<div className="form-row">
|
||||
<label>
|
||||
<FormField type="radio" onChange={ () => { this.handleFeePrefChange(false) } } checked={!this.state.isFee} /> No fee
|
||||
</label>
|
||||
|
|
@ -315,20 +319,27 @@ var PublishPage = React.createClass({
|
|||
</FormField>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="help">
|
||||
<p>How much would you like to charge for this file?</p>
|
||||
If you choose to price this content in dollars, the number of credits charged will be adjusted based on the value of LBRY credits at the time of purchase.
|
||||
<div className="help">
|
||||
<p>How much would you like to charge for this file?</p>
|
||||
If you choose to price this content in dollars, the number of credits charged will be adjusted based on the value of LBRY credits at the time of purchase.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section className="section-block">
|
||||
<section className="card">
|
||||
<h4>Your Content</h4>
|
||||
|
||||
<label htmlFor="title">Title</label><FormField type="text" ref="meta_title" name="title" placeholder="My Show, Episode 1" style={publishFieldStyle} />
|
||||
<label htmlFor="author">Author</label><FormField type="text" ref="meta_author" name="author" placeholder="My Company, Inc." style={publishFieldStyle} />
|
||||
<div className="form-row">
|
||||
<label htmlFor="title">Title</label><FormField type="text" ref="meta_title" name="title" placeholder="My Show, Episode 1" style={publishFieldStyle} />
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<label htmlFor="author">Author</label><FormField type="text" ref="meta_author" name="author" placeholder="My Company, Inc." style={publishFieldStyle} />
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<label htmlFor="license">License info</label><FormField type="text" ref="meta_license" name="license" defaultValue="Creative Commons Attribution 3.0 United States" style={publishFieldStyle} />
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<label htmlFor="language">Language</label> <FormField type="select" defaultValue="en" ref="meta_language" name="language">
|
||||
<option value="en">English</option>
|
||||
<option value="zh">Chinese</option>
|
||||
|
|
@ -338,24 +349,30 @@ var PublishPage = React.createClass({
|
|||
<option value="ru">Russian</option>
|
||||
<option value="es">Spanish</option>
|
||||
</FormField>
|
||||
|
||||
<label htmlFor="description">Description</label> <FormField type="textarea" ref="meta_description" name="description" placeholder="Description of your content" style={publishFieldStyle} />
|
||||
|
||||
<div><label><FormField type="checkbox" ref="meta_nsfw" name="nsfw" placeholder="Description of your content" /> Not Safe For Work</label></div>
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<label htmlFor="description">Description</label> <FormField type="textarea" ref="meta_description" name="description" placeholder="Description of your content" style={publishFieldStyle} />
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<label><FormField type="checkbox" ref="meta_nsfw" name="nsfw" placeholder="Description of your content" /> Not Safe For Work</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section className="section-block">
|
||||
<section className="card">
|
||||
<h4>Additional Content Information (Optional)</h4>
|
||||
<label htmlFor="meta_thumbnail">Thumbnail URL</label> <FormField type="text" ref="meta_thumbnail" name="thumbnail" placeholder="http://mycompany.com/images/ep_1.jpg" style={publishFieldStyle} />
|
||||
<label htmlFor="meta_license_url">License URL</label> <FormField type="text" ref="meta_license_url" name="license_url" defaultValue="https://creativecommons.org/licenses/by/3.0/us/legalcode" style={publishFieldStyle} />
|
||||
<div className="form-row">
|
||||
<label htmlFor="meta_thumbnail">Thumbnail URL</label> <FormField type="text" ref="meta_thumbnail" name="thumbnail" placeholder="http://mycompany.com/images/ep_1.jpg" style={publishFieldStyle} />
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<label htmlFor="meta_license_url">License URL</label> <FormField type="text" ref="meta_license_url" name="license_url" defaultValue="https://creativecommons.org/licenses/by/3.0/us/legalcode" style={publishFieldStyle} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="footer-buttons">
|
||||
<Link button="alt" href="/" label="Cancel"/>
|
||||
{ ' ' }
|
||||
<div className="card-series-submit">
|
||||
<Link button="primary" label={!this.state.submitting ? 'Publish' : 'Publishing...'} onClick={this.handleSubmit} disabled={this.state.submitting} />
|
||||
<Link button="cancel" href="/" label="Cancel"/>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -90,22 +90,26 @@ var SettingsPage = React.createClass({
|
|||
</section>
|
||||
<section className="card">
|
||||
<h3>Bandwidth Limits</h3>
|
||||
<h4>Max Upload</h4>
|
||||
<label style={settingsRadioOptionStyles}>
|
||||
<input type="radio" name="max_upload_pref" onChange={this.onMaxUploadPrefChange.bind(this, false)} defaultChecked={!this.state.isMaxUpload}/> Unlimited
|
||||
</label>
|
||||
<label style={settingsRadioOptionStyles}>
|
||||
<input type="radio" name="max_upload_pref" onChange={this.onMaxUploadPrefChange.bind(this, true)} defaultChecked={this.state.isMaxUpload}/> { this.state.isMaxUpload ? 'Up to' : 'Choose limit...' }
|
||||
<span className={ this.state.isMaxUpload ? '' : 'hidden'}> <input type="number" min="0" step=".5" defaultValue={this.state.settings.max_upload} style={settingsNumberFieldStyles} onChange={this.onMaxUploadFieldChange}/> MB/s</span>
|
||||
</label>
|
||||
<h4>Max Download</h4>
|
||||
<label style={settingsRadioOptionStyles}>
|
||||
<input type="radio" name="max_download_pref" onChange={this.onMaxDownloadPrefChange.bind(this, false)} defaultChecked={!this.state.isMaxDownload}/> Unlimited
|
||||
</label>
|
||||
<label style={settingsRadioOptionStyles}>
|
||||
<input type="radio" name="max_download_pref" onChange={this.onMaxDownloadPrefChange.bind(this, true)} defaultChecked={this.state.isMaxDownload}/> { this.state.isMaxDownload ? 'Up to' : 'Choose limit...' }
|
||||
<span className={ this.state.isMaxDownload ? '' : 'hidden'}> <input type="number" min="0" step=".5" defaultValue={this.state.settings.max_download} style={settingsNumberFieldStyles} onChange={this.onMaxDownloadFieldChange}/> MB/s</span>
|
||||
</label>
|
||||
<div className="form-row">
|
||||
<h4>Max Upload</h4>
|
||||
<label style={settingsRadioOptionStyles}>
|
||||
<input type="radio" name="max_upload_pref" onChange={this.onMaxUploadPrefChange.bind(this, false)} defaultChecked={!this.state.isMaxUpload}/> Unlimited
|
||||
</label>
|
||||
<label style={settingsRadioOptionStyles}>
|
||||
<input type="radio" name="max_upload_pref" onChange={this.onMaxUploadPrefChange.bind(this, true)} defaultChecked={this.state.isMaxUpload}/> { this.state.isMaxUpload ? 'Up to' : 'Choose limit...' }
|
||||
<span className={ this.state.isMaxUpload ? '' : 'hidden'}> <input type="number" min="0" step=".5" defaultValue={this.state.settings.max_upload} style={settingsNumberFieldStyles} onChange={this.onMaxUploadFieldChange}/> MB/s</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<h4>Max Download</h4>
|
||||
<label style={settingsRadioOptionStyles}>
|
||||
<input type="radio" name="max_download_pref" onChange={this.onMaxDownloadPrefChange.bind(this, false)} defaultChecked={!this.state.isMaxDownload}/> Unlimited
|
||||
</label>
|
||||
<label style={settingsRadioOptionStyles}>
|
||||
<input type="radio" name="max_download_pref" onChange={this.onMaxDownloadPrefChange.bind(this, true)} defaultChecked={this.state.isMaxDownload}/> { this.state.isMaxDownload ? 'Up to' : 'Choose limit...' }
|
||||
<span className={ this.state.isMaxDownload ? '' : 'hidden'}> <input type="number" min="0" step=".5" defaultValue={this.state.settings.max_download} style={settingsNumberFieldStyles} onChange={this.onMaxDownloadFieldChange}/> MB/s</span>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
<section className="card">
|
||||
<h3>Share Diagnostic Data</h3>
|
||||
|
|
|
|||
|
|
@ -82,19 +82,24 @@ var SendToAddressSection = React.createClass({
|
|||
return (
|
||||
<section className="card">
|
||||
<h3>Send Credits</h3>
|
||||
<section>
|
||||
<div className="form-row">
|
||||
<label htmlFor="amount">Amount <input id="amount" type="text" size="10" onChange={this.setAmount}></input></label>
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<label htmlFor="address">Recipient address <input id="address" type="text" size="60" onChange={this.setAddress}></input></label>
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<Link button="primary" label="Send" onClick={this.sendToAddress} disabled={!(parseFloat(this.state.amount) > 0.0) || this.state.address == ""} />
|
||||
</section>
|
||||
</div>
|
||||
{
|
||||
this.state.results ?
|
||||
<section>
|
||||
<div className="form-row">
|
||||
<h4>Results</h4>
|
||||
{this.state.results}
|
||||
</section>
|
||||
</div>
|
||||
: ''
|
||||
}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -148,7 +148,14 @@ $header-icon-size: 1.5em;
|
|||
background: $color-bg;
|
||||
box-shadow: $default-box-shadow;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.card-series-submit
|
||||
{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 800px;
|
||||
padding: $spacing-vertical / 2;
|
||||
}
|
||||
|
||||
.full-screen
|
||||
|
|
|
|||
|
|
@ -19,13 +19,6 @@ section
|
|||
}
|
||||
}
|
||||
|
||||
.section-block {
|
||||
background-color: rgba(0,0,0,.05);
|
||||
padding: $spacing-vertical;
|
||||
border-radius: 2px;
|
||||
margin-bottom: $spacing-vertical;
|
||||
}
|
||||
|
||||
main h1 {
|
||||
font-size: 2.0em;
|
||||
margin-bottom: $spacing-vertical;
|
||||
|
|
@ -78,17 +71,7 @@ textarea {
|
|||
opacity: 0.7;
|
||||
}
|
||||
|
||||
input[type="search"]
|
||||
{
|
||||
border: 0 none;
|
||||
border: 2px solid rgba(160,160,160,.5);
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
line-height: $spacing-vertical * 1.5;
|
||||
margin-bottom: $spacing-vertical/2;
|
||||
}
|
||||
|
||||
input[type="text"], textarea
|
||||
input[type="text"], input[type="search"], textarea
|
||||
{
|
||||
@include placeholder {
|
||||
color: lighten($color-text-dark, 60%);
|
||||
|
|
@ -97,12 +80,9 @@ input[type="text"], textarea
|
|||
border: 2px solid rgba(160,160,160,.5);
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
line-height: $spacing-vertical;
|
||||
margin-bottom: $spacing-vertical/2;
|
||||
}
|
||||
|
||||
select {
|
||||
margin-bottom: $spacing-vertical/2;
|
||||
height: $spacing-vertical * 1.5;
|
||||
line-height: $spacing-vertical - 4;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.busy-indicator
|
||||
|
|
@ -135,7 +115,6 @@ select {
|
|||
border: 0 none;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
box-shadow: $default-box-shadow;
|
||||
text-transform: uppercase;
|
||||
+ .button-block
|
||||
{
|
||||
|
|
@ -159,11 +138,12 @@ select {
|
|||
{
|
||||
color: white;
|
||||
background-color: $color-primary;
|
||||
|
||||
box-shadow: $default-box-shadow;
|
||||
}
|
||||
.button-alt
|
||||
{
|
||||
background-color: rgba(0,0,0,.15);
|
||||
box-shadow: $default-box-shadow;
|
||||
}
|
||||
.button-text
|
||||
{
|
||||
|
|
@ -195,28 +175,24 @@ select {
|
|||
}
|
||||
}
|
||||
|
||||
.footer-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.icon:only-child {
|
||||
position: relative;
|
||||
top: 0.16em;
|
||||
}
|
||||
|
||||
.fade-in-link {
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.help {
|
||||
font-size: .85em;
|
||||
color: $color-help;
|
||||
}
|
||||
|
||||
.spacer-bottom--sm {
|
||||
margin-bottom: $spacing-vertical/2;
|
||||
.form-row
|
||||
{
|
||||
+ .form-row
|
||||
{
|
||||
margin-top: $spacing-vertical / 2;
|
||||
}
|
||||
.help
|
||||
{
|
||||
margin-top: $spacing-vertical / 2;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue