improve thumbnail preview styling

This commit is contained in:
Sean Yesmunt 2018-07-18 11:46:21 -04:00
parent 45de83fdf3
commit 6df4032c90
4 changed files with 63 additions and 53 deletions

View file

@ -9,7 +9,7 @@ type Props = {
type: string, type: string,
currentPath: ?string, currentPath: ?string,
onFileChosen: (string, string) => void, onFileChosen: (string, string) => void,
fileLabel: ?string, fileLabel?: string,
directoryLabel?: string, directoryLabel?: string,
}; };
@ -56,7 +56,7 @@ class FileSelector extends React.PureComponent<Props> {
type === 'file' ? fileLabel || __('Choose File') : directoryLabel || __('Choose Directory'); type === 'file' ? fileLabel || __('Choose File') : directoryLabel || __('Choose Directory');
return ( return (
<FormRow verticallyCentered padded> <FormRow verticallyCentered>
<Button button="primary" onClick={() => this.handleButtonClick()} label={label} /> <Button button="primary" onClick={() => this.handleButtonClick()} label={label} />
<input <input
webkitdirectory="true" webkitdirectory="true"

View file

@ -73,7 +73,7 @@ class PublishForm extends React.PureComponent<Props> {
} }
componentWillMount() { componentWillMount() {
const { isStillEditing, thumbnail } = this.props; const { thumbnail } = this.props;
if (!thumbnail) { if (!thumbnail) {
this.props.resetThumbnailStatus(); this.props.resetThumbnailStatus();
} }
@ -356,14 +356,17 @@ class PublishForm extends React.PureComponent<Props> {
/> />
</div> </div>
)} )}
<FileSelector currentPath={filePath} onFileChosen={this.handleFileChange} /> <div className="card__content">
{!!isStillEditing && ( <FileSelector currentPath={filePath} onFileChosen={this.handleFileChange} />
<p className="card__content card__subtitle"> {!!isStillEditing &&
{__("If you don't choose a file, the file from your existing claim")} name && (
{` "${name}" `} <p className="card__content card__subtitle">
{__('will be used.')} {__("If you don't choose a file, the file from your existing claim")}
</p> {` "${name}" `}
)} {__('will be used.')}
</p>
)}
</div>
</section> </section>
<div className={classnames({ 'card--disabled': formDisabled })}> <div className={classnames({ 'card--disabled': formDisabled })}>
<section className="card card--section"> <section className="card card--section">
@ -400,10 +403,9 @@ class PublishForm extends React.PureComponent<Props> {
__('Enter a URL for your thumbnail.') __('Enter a URL for your thumbnail.')
) : ( ) : (
<React.Fragment> <React.Fragment>
{__( {__('Upload your thumbnail (.png/.jpg/.jpeg/.gif) to')}{' '}
'Upload your thumbnail (.png/.jpg/.jpeg/.gif) to spee.ch, or enter the URL manually. Learn more about spee.ch ' <Button button="link" label={__('spee.ch')} href="https://spee.ch/about" />.{' '}
)} {__('Recommended size: 800x450 (16:9)')}
<Button button="link" label={__('here')} href="https://spee.ch/about" />.
</React.Fragment> </React.Fragment>
)} )}
</div> </div>

View file

@ -1,7 +1,7 @@
// @flow // @flow
import { THUMBNAIL_STATUSES, MODALS } from 'lbry-redux'; import { THUMBNAIL_STATUSES, MODALS } from 'lbry-redux';
import React from 'react'; import * as React from 'react';
import { FormField, FormRow } from 'component/common/form'; import { FormField } from 'component/common/form';
import FileSelector from 'component/common/file-selector'; import FileSelector from 'component/common/file-selector';
import Button from 'component/button'; import Button from 'component/button';
import Native from 'native'; import Native from 'native';
@ -17,28 +17,28 @@ type Props = {
}; };
type State = { type State = {
thumbnailValid: boolean, thumbnailError: boolean,
} };
class SelectThumbnail extends React.PureComponent<Props, State> { class SelectThumbnail extends React.PureComponent<Props, State> {
constructor() { constructor() {
super(); super();
this.state = { this.state = {
thumbnailValid: false, thumbnailError: false,
}; };
(this: any).handleThumbnailChange = this.handleThumbnailChange.bind(this); (this: any).handleThumbnailChange = this.handleThumbnailChange.bind(this);
} }
handleThumbnailChange(e) { handleThumbnailChange(e: SyntheticInputEvent<*>) {
const { updatePublishForm } = this.props; const { updatePublishForm } = this.props;
const newThumbnail = e.target.value.replace(' ', ''); const newThumbnail = e.target.value.replace(' ', '');
updatePublishForm({ thumbnail: newThumbnail }); updatePublishForm({ thumbnail: newThumbnail });
this.setState({ thumbnailValid: true }) this.setState({ thumbnailError: false });
} }
render() { render() {
const { const {
thumbnail, thumbnail,
@ -49,43 +49,46 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
thumbnailPath, thumbnailPath,
resetThumbnailStatus, resetThumbnailStatus,
} = this.props; } = this.props;
const { thumbnailError } = this.state;
const { thumbnailValid } = this.state; const thumbnailSrc =
!thumbnail || thumbnailError ? Native.imagePath('thumbnail.png') : thumbnail;
return ( return (
<div className="card__content"> <div className="card__content">
{status === THUMBNAIL_STATUSES.API_DOWN || status === THUMBNAIL_STATUSES.MANUAL ? ( {status === THUMBNAIL_STATUSES.API_DOWN || status === THUMBNAIL_STATUSES.MANUAL ? (
<div className="column"> <div className="column">
<img
src={thumbnailSrc}
className="column__item thumbnail-preview"
alt={__('Thumbnail Preview')}
onError={() => {
this.setState({ thumbnailError: true });
}}
/>
<div className="column__item"> <div className="column__item">
<FormField <FormField
stretch className="input--thumbnail"
type="text" type="text"
name="content_thumbnail" name="content_thumbnail"
label={'URL'} label="URL"
placeholder="http://spee.ch/mylogo" placeholder="http://spee.ch/mylogo"
value={thumbnail} value={thumbnail}
disabled={formDisabled} disabled={formDisabled}
onChange={this.handleThumbnailChange} onChange={this.handleThumbnailChange}
/> />
<div className="card__actions"> <div className="card__actions">
<Button <Button
button="link" button="link"
label={__('Use thumbnail upload tool')} label={__('Use thumbnail upload tool')}
onClick={() => updatePublishForm({ uploadThumbnailStatus: THUMBNAIL_STATUSES.READY })} onClick={() =>
updatePublishForm({ uploadThumbnailStatus: THUMBNAIL_STATUSES.READY })
}
/> />
</div> </div>
</div> </div>
<img
src={(!thumbnail || !thumbnailValid) ? Native.imagePath('thumbnail.png') : thumbnail}
className="column__item thumbnail-preview"
alt="Thumbnail Preview"
onError={() => {
this.setState({ thumbnailValid: false })
}}
/>
</div> </div>
) : ( ) : (
<div className="form-row--padded"> <React.Fragment>
{status === THUMBNAIL_STATUSES.READY && ( {status === THUMBNAIL_STATUSES.READY && (
<FileSelector <FileSelector
currentPath={thumbnailPath} currentPath={thumbnailPath}
@ -98,20 +101,25 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
<img <img
className="column__item thumbnail-preview" className="column__item thumbnail-preview"
src={thumbnail} src={thumbnail}
/> alt={__('Thumbnail Preview')}
/>
<div className="column__item"> <div className="column__item">
<p> <p>
Upload complete.{' '} Upload complete.{' '}
<Button button="link" href={thumbnail} label={__('View it on spee.ch')} /> <Button button="link" href={thumbnail} label={__('View it on spee.ch')} />
</p> </p>
<Button button="link" label={__('New thumbnail')} onClick={resetThumbnailStatus} /> <Button
button="link"
label={__('New thumbnail')}
onClick={resetThumbnailStatus}
/>
</div> </div>
</div> </div>
)} )}
</div> </React.Fragment>
)} )}
<div className="card__actions"> {status === THUMBNAIL_STATUSES.READY && (
{status === THUMBNAIL_STATUSES.READY && ( <div className="card__actions">
<Button <Button
button="link" button="link"
label={__('Or enter a URL manually')} label={__('Or enter a URL manually')}
@ -119,8 +127,8 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
updatePublishForm({ uploadThumbnailStatus: THUMBNAIL_STATUSES.MANUAL }) updatePublishForm({ uploadThumbnailStatus: THUMBNAIL_STATUSES.MANUAL })
} }
/> />
)} </div>
</div> )}
{status === THUMBNAIL_STATUSES.IN_PROGRESS && <p>{__('Uploading thumbnail')}...</p>} {status === THUMBNAIL_STATUSES.IN_PROGRESS && <p>{__('Uploading thumbnail')}...</p>}
</div> </div>

View file

@ -67,8 +67,8 @@
width: 35px; width: 35px;
} }
input.paginate-channel { input.input--thumbnail {
width: 35px; width: 370px;
} }
&.form-field--auto-height { &.form-field--auto-height {