commit
81754ebe30
|
@ -34,7 +34,7 @@
|
||||||
"postinstall": "electron-builder install-app-deps && node build/downloadDaemon.js"
|
"postinstall": "electron-builder install-app-deps && node build/downloadDaemon.js"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@lbry/components": "^2.2.0",
|
"@lbry/components": "^2.2.1",
|
||||||
"@types/three": "^0.93.1",
|
"@types/three": "^0.93.1",
|
||||||
"bluebird": "^3.5.1",
|
"bluebird": "^3.5.1",
|
||||||
"breakdance": "^3.0.1",
|
"breakdance": "^3.0.1",
|
||||||
|
|
|
@ -45,8 +45,7 @@ class ChannelTile extends React.PureComponent<Props> {
|
||||||
subscriptionUri = `lbry://${claim.permanent_url}`;
|
subscriptionUri = `lbry://${claim.permanent_url}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
const onClick = () =>
|
const onClick = () => navigate('/show', { uri });
|
||||||
channelName ? navigate('/show', { uri, page: 1 }) : navigate('/show', { uri });
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section
|
<section
|
||||||
|
|
|
@ -28,7 +28,7 @@ type Props = {
|
||||||
inputProps?: {
|
inputProps?: {
|
||||||
disabled?: boolean,
|
disabled?: boolean,
|
||||||
},
|
},
|
||||||
inputButton: ?React.Node,
|
inputButton?: React.Node,
|
||||||
blockWrap: boolean,
|
blockWrap: boolean,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -38,6 +38,8 @@ export class FormField extends React.PureComponent<Props> {
|
||||||
blockWrap: true,
|
blockWrap: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
input: { current: React.ElementRef<any> };
|
||||||
|
|
||||||
constructor(props: Props) {
|
constructor(props: Props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.input = React.createRef();
|
this.input = React.createRef();
|
||||||
|
@ -92,6 +94,7 @@ export class FormField extends React.PureComponent<Props> {
|
||||||
} else if (type === 'checkbox') {
|
} else if (type === 'checkbox') {
|
||||||
// web components treat props weird
|
// web components treat props weird
|
||||||
// we need to fully remove it for proper component:attribute css styling
|
// we need to fully remove it for proper component:attribute css styling
|
||||||
|
// $FlowFixMe
|
||||||
const elementProps = inputProps.disabled ? { disabled: true } : {};
|
const elementProps = inputProps.disabled ? { disabled: true } : {};
|
||||||
input = (
|
input = (
|
||||||
<Wrapper>
|
<Wrapper>
|
||||||
|
@ -165,10 +168,18 @@ export class FormField extends React.PureComponent<Props> {
|
||||||
input = (
|
input = (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<fieldset-section>
|
<fieldset-section>
|
||||||
<label htmlFor={name}>{label}</label>
|
{(label || errorMessage) && (
|
||||||
|
<label htmlFor={name}>
|
||||||
|
{errorMessage ? <span className="error-text">{errorMessage}</span> : label}
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
{prefix && (
|
||||||
|
<label className="form-field--inline-prefix" htmlFor={name}>
|
||||||
|
{prefix}
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
{inner}
|
{inner}
|
||||||
</fieldset-section>
|
</fieldset-section>
|
||||||
{errorMessage && <div className="error-text">{errorMessage}</div>}
|
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -36,11 +36,7 @@ class FileActions extends React.PureComponent<Props> {
|
||||||
)}
|
)}
|
||||||
{!claimIsMine && (
|
{!claimIsMine && (
|
||||||
<Tooltip onComponent body={__('Report content')}>
|
<Tooltip onComponent body={__('Report content')}>
|
||||||
<Button
|
<Button icon={ICONS.REPORT} href={`https://lbry.io/dmca?claim_id=${claimId}`} />
|
||||||
button="alt"
|
|
||||||
icon={ICONS.REPORT}
|
|
||||||
href={`https://lbry.io/dmca?claim_id=${claimId}`}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
)}
|
)}
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
|
|
|
@ -162,8 +162,7 @@ class FileList extends React.PureComponent<Props> {
|
||||||
{!hideFilter && (
|
{!hideFilter && (
|
||||||
<Form>
|
<Form>
|
||||||
<FormField
|
<FormField
|
||||||
prefix={__('Sort by')}
|
label={__('Sort by')}
|
||||||
affixClass="form-field--align-center"
|
|
||||||
type="select"
|
type="select"
|
||||||
value={sortBy}
|
value={sortBy}
|
||||||
onChange={this.handleSortChanged}
|
onChange={this.handleSortChanged}
|
||||||
|
|
|
@ -42,7 +42,6 @@ class FormInviteNew extends React.PureComponent<FormProps, FormState> {
|
||||||
return (
|
return (
|
||||||
<Form onSubmit={this.handleSubmit}>
|
<Form onSubmit={this.handleSubmit}>
|
||||||
<FormField
|
<FormField
|
||||||
stretch
|
|
||||||
type="text"
|
type="text"
|
||||||
label="Email"
|
label="Email"
|
||||||
placeholder="youremail@example.org"
|
placeholder="youremail@example.org"
|
||||||
|
|
|
@ -43,6 +43,7 @@ class LicenseType extends React.PureComponent<Props> {
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<FormField
|
<FormField
|
||||||
|
name="license"
|
||||||
label={__('License (Optional)')}
|
label={__('License (Optional)')}
|
||||||
type="select"
|
type="select"
|
||||||
value={licenseType}
|
value={licenseType}
|
||||||
|
|
|
@ -46,8 +46,7 @@ class NameHelpText extends React.PureComponent<Props> {
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
{nameHelpText || (
|
{nameHelpText || (
|
||||||
<span>
|
<span>
|
||||||
{__('Create a URL for this content.')}{' '}
|
{__('Create a URL for this content. Simpler names are easier to find and remember.')}
|
||||||
{uri && `${__('The uri for this name is')} ${uri}`}
|
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
|
|
|
@ -440,7 +440,6 @@ class PublishForm extends React.PureComponent<Props> {
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div className="card__content">
|
<div className="card__content">
|
||||||
<fieldset-section>
|
|
||||||
<FormField
|
<FormField
|
||||||
type="radio"
|
type="radio"
|
||||||
name="content_free"
|
name="content_free"
|
||||||
|
@ -449,8 +448,7 @@ class PublishForm extends React.PureComponent<Props> {
|
||||||
disabled={formDisabled}
|
disabled={formDisabled}
|
||||||
onChange={() => updatePublishForm({ contentIsFree: true })}
|
onChange={() => updatePublishForm({ contentIsFree: true })}
|
||||||
/>
|
/>
|
||||||
</fieldset-section>
|
|
||||||
<fieldset-section>
|
|
||||||
<FormField
|
<FormField
|
||||||
type="radio"
|
type="radio"
|
||||||
name="content_cost"
|
name="content_cost"
|
||||||
|
@ -459,7 +457,6 @@ class PublishForm extends React.PureComponent<Props> {
|
||||||
disabled={formDisabled}
|
disabled={formDisabled}
|
||||||
onChange={() => updatePublishForm({ contentIsFree: false })}
|
onChange={() => updatePublishForm({ contentIsFree: false })}
|
||||||
/>
|
/>
|
||||||
</fieldset-section>
|
|
||||||
{!contentIsFree && (
|
{!contentIsFree && (
|
||||||
<FormFieldPrice
|
<FormFieldPrice
|
||||||
name="content_cost_amount"
|
name="content_cost_amount"
|
||||||
|
@ -504,28 +501,31 @@ class PublishForm extends React.PureComponent<Props> {
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div className="card__content">
|
<div className="card__content">
|
||||||
<FormField
|
<fieldset-group class="fieldset-group--smushed fieldset-group--disabled-prefix">
|
||||||
label={__('Name')}
|
<fieldset-section>
|
||||||
prefix={`lbry://${
|
<label>{__('Name')}</label>
|
||||||
|
<span className="form-field__prefix">{`lbry://${
|
||||||
!channel || channel === CHANNEL_ANONYMOUS || channel === CHANNEL_NEW
|
!channel || channel === CHANNEL_ANONYMOUS || channel === CHANNEL_NEW
|
||||||
? ''
|
? ''
|
||||||
: `${channel}/`
|
: `${channel}/`
|
||||||
}`}
|
}`}</span>
|
||||||
|
</fieldset-section>
|
||||||
|
<FormField
|
||||||
type="text"
|
type="text"
|
||||||
name="content_name"
|
name="content_name"
|
||||||
placeholder="myname"
|
|
||||||
value={name}
|
value={name}
|
||||||
onChange={event => this.handleNameChange(event.target.value)}
|
onChange={event => this.handleNameChange(event.target.value)}
|
||||||
error={nameError}
|
error={nameError}
|
||||||
helper={
|
/>
|
||||||
|
</fieldset-group>
|
||||||
|
<div className="form-field__help">
|
||||||
<NameHelpText
|
<NameHelpText
|
||||||
isStillEditing={isStillEditing}
|
isStillEditing={isStillEditing}
|
||||||
uri={uri}
|
uri={uri}
|
||||||
myClaimForUri={myClaimForUri}
|
myClaimForUri={myClaimForUri}
|
||||||
onEditMyClaim={this.editExistingClaim}
|
onEditMyClaim={this.editExistingClaim}
|
||||||
/>
|
/>
|
||||||
}
|
</div>
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={classnames('card__content', { 'card--disabled': !name })}>
|
<div className={classnames('card__content', { 'card--disabled': !name })}>
|
||||||
|
@ -534,7 +534,7 @@ class PublishForm extends React.PureComponent<Props> {
|
||||||
type="number"
|
type="number"
|
||||||
name="content_bid"
|
name="content_bid"
|
||||||
step="any"
|
step="any"
|
||||||
label={__('Deposit')}
|
label={__('Deposit (LBC)')}
|
||||||
postfix="LBC"
|
postfix="LBC"
|
||||||
value={bid}
|
value={bid}
|
||||||
error={bidError}
|
error={bidError}
|
||||||
|
|
|
@ -58,6 +58,7 @@ const SearchOptions = (props: Props) => {
|
||||||
].map(({ option, label }) => (
|
].map(({ option, label }) => (
|
||||||
<FormField
|
<FormField
|
||||||
key={option}
|
key={option}
|
||||||
|
name={option}
|
||||||
type="radio"
|
type="radio"
|
||||||
blockWrap={false}
|
blockWrap={false}
|
||||||
label={label}
|
label={label}
|
||||||
|
@ -93,6 +94,7 @@ const SearchOptions = (props: Props) => {
|
||||||
].map(({ option, label }) => (
|
].map(({ option, label }) => (
|
||||||
<FormField
|
<FormField
|
||||||
key={option}
|
key={option}
|
||||||
|
name={option}
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
blockWrap={false}
|
blockWrap={false}
|
||||||
disabled={options[SEARCH_OPTIONS.CLAIM_TYPE] === SEARCH_OPTIONS.INCLUDE_CHANNELS}
|
disabled={options[SEARCH_OPTIONS.CLAIM_TYPE] === SEARCH_OPTIONS.INCLUDE_CHANNELS}
|
||||||
|
@ -107,6 +109,7 @@ const SearchOptions = (props: Props) => {
|
||||||
<legend className="search__legend--3">{__('Other Options')}</legend>
|
<legend className="search__legend--3">{__('Other Options')}</legend>
|
||||||
<FormField
|
<FormField
|
||||||
type="number"
|
type="number"
|
||||||
|
name="result-count"
|
||||||
value={resultCount}
|
value={resultCount}
|
||||||
onChange={e => setSearchOption(SEARCH_OPTIONS.RESULT_COUNT, e.target.value)}
|
onChange={e => setSearchOption(SEARCH_OPTIONS.RESULT_COUNT, e.target.value)}
|
||||||
blockWrap={false}
|
blockWrap={false}
|
||||||
|
|
|
@ -158,7 +158,7 @@ class ChannelSection extends React.PureComponent<Props, State> {
|
||||||
) : (
|
) : (
|
||||||
<fieldset-section>
|
<fieldset-section>
|
||||||
<FormField
|
<FormField
|
||||||
key="channel"
|
name="channel"
|
||||||
type="select"
|
type="select"
|
||||||
onChange={this.handleChannelChange}
|
onChange={this.handleChannelChange}
|
||||||
value={channel}
|
value={channel}
|
||||||
|
@ -177,8 +177,8 @@ class ChannelSection extends React.PureComponent<Props, State> {
|
||||||
<div className="card__content">
|
<div className="card__content">
|
||||||
<FormField
|
<FormField
|
||||||
label={__('Name')}
|
label={__('Name')}
|
||||||
|
name="channel-input"
|
||||||
type="text"
|
type="text"
|
||||||
prefix="@"
|
|
||||||
placeholder={__('myChannelName')}
|
placeholder={__('myChannelName')}
|
||||||
error={newChannelNameError}
|
error={newChannelNameError}
|
||||||
value={newChannelName}
|
value={newChannelName}
|
||||||
|
@ -187,8 +187,8 @@ class ChannelSection extends React.PureComponent<Props, State> {
|
||||||
|
|
||||||
<FormField
|
<FormField
|
||||||
className="form-field--price-amount"
|
className="form-field--price-amount"
|
||||||
label={__('Deposit')}
|
name="channel-deposit"
|
||||||
postfix="LBC"
|
label={__('Deposit (LBC)')}
|
||||||
step="any"
|
step="any"
|
||||||
min="0"
|
min="0"
|
||||||
type="number"
|
type="number"
|
||||||
|
|
|
@ -83,10 +83,10 @@ class TransactionList extends React.PureComponent<Props> {
|
||||||
<Form>
|
<Form>
|
||||||
<FormField
|
<FormField
|
||||||
type="select"
|
type="select"
|
||||||
|
name="file-sort"
|
||||||
value={filterSetting || TRANSACTIONS.ALL}
|
value={filterSetting || TRANSACTIONS.ALL}
|
||||||
onChange={this.handleFilterChanged}
|
onChange={this.handleFilterChanged}
|
||||||
affixClass="form-field--align-center"
|
label={__('Show')}
|
||||||
prefix={__('Show')}
|
|
||||||
postfix={
|
postfix={
|
||||||
<Button
|
<Button
|
||||||
button="link"
|
button="link"
|
||||||
|
|
|
@ -94,9 +94,8 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { history, page } = this.props;
|
const { history, page, pageCount } = this.props;
|
||||||
const { itemsSelected } = this.state;
|
const { itemsSelected } = this.state;
|
||||||
const pageCount = 20;
|
|
||||||
const allSelected = Object.keys(itemsSelected).length === history.length;
|
const allSelected = Object.keys(itemsSelected).length === history.length;
|
||||||
const selectHandler = allSelected ? this.unselectAll : this.selectAll;
|
const selectHandler = allSelected ? this.unselectAll : this.selectAll;
|
||||||
|
|
||||||
|
@ -117,7 +116,7 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{!!history.length && (
|
{!!history.length && (
|
||||||
<section className="item-list">
|
<section className="card__content item-list">
|
||||||
{history.map(item => (
|
{history.map(item => (
|
||||||
<UserHistoryItem
|
<UserHistoryItem
|
||||||
key={item.uri}
|
key={item.uri}
|
||||||
|
@ -131,7 +130,7 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
|
||||||
))}
|
))}
|
||||||
</section>
|
</section>
|
||||||
)}
|
)}
|
||||||
{pageCount > -1 && (
|
{pageCount > 1 && (
|
||||||
<Form>
|
<Form>
|
||||||
<fieldset-group class="fieldset-group--smushed fieldgroup--paginate">
|
<fieldset-group class="fieldset-group--smushed fieldgroup--paginate">
|
||||||
<fieldset-section>
|
<fieldset-section>
|
||||||
|
@ -153,10 +152,11 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
|
||||||
/>
|
/>
|
||||||
</fieldset-section>
|
</fieldset-section>
|
||||||
<FormField
|
<FormField
|
||||||
|
type="text"
|
||||||
|
name="paginate-input"
|
||||||
|
label={__('Go to page:')}
|
||||||
className="paginate-channel"
|
className="paginate-channel"
|
||||||
onKeyUp={e => this.paginate(e)}
|
onKeyUp={e => this.paginate(e)}
|
||||||
label={__('Go to page:')}
|
|
||||||
type="text"
|
|
||||||
/>
|
/>
|
||||||
</fieldset-group>
|
</fieldset-group>
|
||||||
</Form>
|
</Form>
|
||||||
|
|
|
@ -44,7 +44,7 @@ class UserHistoryItem extends React.PureComponent<Props> {
|
||||||
'item-list__item--selected': selected,
|
'item-list__item--selected': selected,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
<FormField checked={selected} type="checkbox" onClick={onSelect} />
|
<FormField checked={selected} type="checkbox" onChange={onSelect} />
|
||||||
<span className="time time--ago">{moment(lastViewed).from(moment())}</span>
|
<span className="time time--ago">{moment(lastViewed).from(moment())}</span>
|
||||||
<span className="item-list__item--cutoff">{title}</span>
|
<span className="item-list__item--cutoff">{title}</span>
|
||||||
<Button
|
<Button
|
||||||
|
|
|
@ -75,16 +75,16 @@ class WalletSendTip extends React.PureComponent<Props, State> {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<Form>
|
<Form className="card__content">
|
||||||
<FormField
|
<FormField
|
||||||
autoFocus
|
autoFocus
|
||||||
|
name="tip-input"
|
||||||
label={
|
label={
|
||||||
(tipAmount &&
|
(tipAmount &&
|
||||||
tipAmount !== 0 &&
|
tipAmount !== 0 &&
|
||||||
`Tip ${tipAmount.toFixed(8).replace(/\.?0+$/, '')} LBC`) ||
|
`Tip ${tipAmount.toFixed(8).replace(/\.?0+$/, '')} LBC`) ||
|
||||||
__('Amount')
|
__('Amount')
|
||||||
}
|
}
|
||||||
postfix={__('LBC')}
|
|
||||||
className="form-field--price-amount"
|
className="form-field--price-amount"
|
||||||
error={tipError}
|
error={tipError}
|
||||||
min="0"
|
min="0"
|
||||||
|
|
|
@ -75,6 +75,7 @@ class ModalRemoveFile extends React.PureComponent<Props, State> {
|
||||||
</section>
|
</section>
|
||||||
<section className="card__content">
|
<section className="card__content">
|
||||||
<FormField
|
<FormField
|
||||||
|
name="file_delete"
|
||||||
label={__('Also delete this file from my computer')}
|
label={__('Also delete this file from my computer')}
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={deleteChecked}
|
checked={deleteChecked}
|
||||||
|
@ -83,6 +84,7 @@ class ModalRemoveFile extends React.PureComponent<Props, State> {
|
||||||
|
|
||||||
{claimIsMine && (
|
{claimIsMine && (
|
||||||
<FormField
|
<FormField
|
||||||
|
name="claim_abandon"
|
||||||
label={__('Abandon the claim for this URI')}
|
label={__('Abandon the claim for this URI')}
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={abandonClaimChecked}
|
checked={abandonClaimChecked}
|
||||||
|
|
|
@ -57,6 +57,7 @@ class ModalRewardCode extends React.PureComponent<Props, State> {
|
||||||
<FormField
|
<FormField
|
||||||
autoFocus
|
autoFocus
|
||||||
type="text"
|
type="text"
|
||||||
|
name="reward-code"
|
||||||
inputButton={
|
inputButton={
|
||||||
<Submit
|
<Submit
|
||||||
disabled={!rewardCode || rewardIsPending}
|
disabled={!rewardCode || rewardIsPending}
|
||||||
|
|
|
@ -4,7 +4,7 @@ import * as icons from 'constants/icons';
|
||||||
import * as MODALS from 'constants/modal_types';
|
import * as MODALS from 'constants/modal_types';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import BusyIndicator from 'component/common/busy-indicator';
|
import BusyIndicator from 'component/common/busy-indicator';
|
||||||
import { FormField } from 'component/common/form';
|
import { FormField, Form } from 'component/common/form';
|
||||||
import ReactPaginate from 'react-paginate';
|
import ReactPaginate from 'react-paginate';
|
||||||
import SubscribeButton from 'component/subscribeButton';
|
import SubscribeButton from 'component/subscribeButton';
|
||||||
import Page from 'component/page';
|
import Page from 'component/page';
|
||||||
|
@ -86,7 +86,7 @@ class ChannelPage extends React.PureComponent<Props> {
|
||||||
return (
|
return (
|
||||||
<Page notContained>
|
<Page notContained>
|
||||||
<header className="channel-info">
|
<header className="channel-info">
|
||||||
<h1 className="media__title">
|
<h1 className="media__title media__title--large">
|
||||||
{name}
|
{name}
|
||||||
{fetching && <BusyIndicator />}
|
{fetching && <BusyIndicator />}
|
||||||
</h1>
|
</h1>
|
||||||
|
@ -108,7 +108,9 @@ class ChannelPage extends React.PureComponent<Props> {
|
||||||
|
|
||||||
{(!fetching || (claimsInChannel && claimsInChannel.length)) &&
|
{(!fetching || (claimsInChannel && claimsInChannel.length)) &&
|
||||||
totalPages > 1 && (
|
totalPages > 1 && (
|
||||||
<React.Fragment>
|
<Form>
|
||||||
|
<fieldset-group class="fieldset-group--smushed fieldgroup--paginate">
|
||||||
|
<fieldset-section>
|
||||||
<ReactPaginate
|
<ReactPaginate
|
||||||
pageCount={totalPages}
|
pageCount={totalPages}
|
||||||
pageRangeDisplayed={2}
|
pageRangeDisplayed={2}
|
||||||
|
@ -125,14 +127,17 @@ class ChannelPage extends React.PureComponent<Props> {
|
||||||
initialPage={currentPage}
|
initialPage={currentPage}
|
||||||
containerClassName="pagination"
|
containerClassName="pagination"
|
||||||
/>
|
/>
|
||||||
|
</fieldset-section>
|
||||||
|
|
||||||
<FormField
|
<FormField
|
||||||
className="paginate-channel"
|
className="paginate-channel"
|
||||||
onKeyUp={e => this.paginate(e, totalPages)}
|
onKeyUp={e => this.paginate(e, totalPages)}
|
||||||
prefix={__('Go to page:')}
|
label={__('Go to page:')}
|
||||||
type="text"
|
type="text"
|
||||||
|
name="paginate-file"
|
||||||
/>
|
/>
|
||||||
</React.Fragment>
|
</fieldset-group>
|
||||||
|
</Form>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!channelIsMine && <HiddenNsfwClaims className="card__content help" uri={uri} />}
|
{!channelIsMine && <HiddenNsfwClaims className="card__content help" uri={uri} />}
|
||||||
|
|
|
@ -173,13 +173,11 @@ class HelpPage extends React.PureComponent<Props, State> {
|
||||||
<Button
|
<Button
|
||||||
button="primary"
|
button="primary"
|
||||||
label={__('Open Log')}
|
label={__('Open Log')}
|
||||||
icon={icons.REPORT}
|
|
||||||
onClick={() => this.openLogFile(dataDirectory)}
|
onClick={() => this.openLogFile(dataDirectory)}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
button="primary"
|
button="primary"
|
||||||
label={__('Open Log Folder')}
|
label={__('Open Log Folder')}
|
||||||
icon={icons.REPORT}
|
|
||||||
onClick={() => shell.openItem(dataDirectory)}
|
onClick={() => shell.openItem(dataDirectory)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -164,7 +164,9 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
<FileSelector
|
<FileSelector
|
||||||
type="openDirectory"
|
type="openDirectory"
|
||||||
currentPath={daemonSettings.download_dir}
|
currentPath={daemonSettings.download_dir}
|
||||||
onFileChosen={this.onDownloadDirChange}
|
onFileChosen={(newDirectory: string) => {
|
||||||
|
setDaemonSetting('download_dir', newDirectory);
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</Form>
|
</Form>
|
||||||
</div>
|
</div>
|
||||||
|
@ -181,7 +183,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<Form className="card__content">
|
<Form className="card__content">
|
||||||
<fieldset-section>
|
|
||||||
<FormField
|
<FormField
|
||||||
type="radio"
|
type="radio"
|
||||||
name="no_max_purchase_no_limit"
|
name="no_max_purchase_no_limit"
|
||||||
|
@ -191,8 +192,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
this.onKeyFeeDisableChange(true);
|
this.onKeyFeeDisableChange(true);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</fieldset-section>
|
|
||||||
<fieldset-section>
|
|
||||||
<FormField
|
<FormField
|
||||||
type="radio"
|
type="radio"
|
||||||
name="max_purchase_limit"
|
name="max_purchase_limit"
|
||||||
|
@ -203,7 +202,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
}}
|
}}
|
||||||
label={__('Choose limit')}
|
label={__('Choose limit')}
|
||||||
/>
|
/>
|
||||||
</fieldset-section>
|
|
||||||
|
|
||||||
{!disableMaxKeyFee && (
|
{!disableMaxKeyFee && (
|
||||||
<FormFieldPrice
|
<FormFieldPrice
|
||||||
|
@ -229,7 +227,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<Form className="card__content">
|
<Form className="card__content">
|
||||||
<fieldset-section>
|
|
||||||
<FormField
|
<FormField
|
||||||
type="radio"
|
type="radio"
|
||||||
name="confirm_all_purchases"
|
name="confirm_all_purchases"
|
||||||
|
@ -239,8 +236,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
this.onInstantPurchaseEnabledChange(false);
|
this.onInstantPurchaseEnabledChange(false);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</fieldset-section>
|
|
||||||
<fieldset-section>
|
|
||||||
<FormField
|
<FormField
|
||||||
type="radio"
|
type="radio"
|
||||||
name="instant_purchases"
|
name="instant_purchases"
|
||||||
|
@ -250,7 +245,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
this.onInstantPurchaseEnabledChange(true);
|
this.onInstantPurchaseEnabledChange(true);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</fieldset-section>
|
|
||||||
{instantPurchaseEnabled && (
|
{instantPurchaseEnabled && (
|
||||||
<FormFieldPrice
|
<FormFieldPrice
|
||||||
name="confirmation_price"
|
name="confirmation_price"
|
||||||
|
@ -430,7 +425,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
|
||||||
button="primary"
|
button="primary"
|
||||||
label={this.state.clearingCache ? __('Clearing') : __('Clear Cache')}
|
label={this.state.clearingCache ? __('Clearing') : __('Clear Cache')}
|
||||||
icon={ICONS.ALERT}
|
icon={ICONS.ALERT}
|
||||||
// onClick={this.clearCache}
|
onClick={this.clearCache}
|
||||||
disabled={this.state.clearingCache}
|
disabled={this.state.clearingCache}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -8,11 +8,12 @@
|
||||||
width: 1.2rem;
|
width: 1.2rem;
|
||||||
height: 1.2rem;
|
height: 1.2rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 2px;
|
top: 1px;
|
||||||
stroke-opacity: 0.7;
|
color: $lbry-gray-5;
|
||||||
|
|
||||||
// Buttons that don't have a label
|
// Buttons that don't have a label
|
||||||
&:only-child {
|
&:only-child {
|
||||||
|
color: inherit;
|
||||||
stroke-opacity: 1;
|
stroke-opacity: 1;
|
||||||
width: 1.4rem;
|
width: 1.4rem;
|
||||||
height: 1.4rem;
|
height: 1.4rem;
|
||||||
|
@ -38,6 +39,19 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button--primary {
|
||||||
|
height: var(--spacing-l);
|
||||||
|
|
||||||
|
svg {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg + .button__label {
|
||||||
|
position: relative;
|
||||||
|
top: -0.05em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.button--inverse {
|
.button--inverse {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
transition: background-color 0.2s;
|
transition: background-color 0.2s;
|
||||||
|
@ -67,10 +81,16 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.button--link:not(:hover):not(:disabled) {
|
.button--link:not(:disabled) {
|
||||||
html[data-mode='dark'] & {
|
html[data-mode='dark'] & {
|
||||||
|
&:not(:hover) {
|
||||||
color: $lbry-teal-4;
|
color: $lbry-teal-4;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $lbry-teal-3;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.button--load-screen {
|
.button--load-screen {
|
||||||
|
@ -97,11 +117,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.button--uri-indicator {
|
.button--uri-indicator {
|
||||||
width: 100%;
|
max-width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
|
||||||
transition: color 0.2s;
|
transition: color 0.2s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
.channel-info {
|
.channel-info {
|
||||||
.media__title {
|
.media__title {
|
||||||
|
display: block;
|
||||||
user-select: text;
|
user-select: text;
|
||||||
margin-bottom: var(--spacing-vertical-medium);
|
margin-bottom: var(--spacing-vertical-medium);
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,10 +3,35 @@
|
||||||
// lbry/components overrides and minor styles
|
// lbry/components overrides and minor styles
|
||||||
|
|
||||||
input[type='number'] {
|
input[type='number'] {
|
||||||
padding: var(--spacing-s);
|
|
||||||
width: 8em;
|
width: 8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input[type='text'],
|
||||||
|
input[type='number'],
|
||||||
|
select {
|
||||||
|
padding-bottom: 0.2em;
|
||||||
|
|
||||||
|
[data-mode='dark'] & {
|
||||||
|
&::placeholder {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset-section {
|
||||||
|
label {
|
||||||
|
width: auto;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
checkbox-element,
|
||||||
|
radio-element {
|
||||||
|
label {
|
||||||
|
font-size: medium;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
checkbox-element {
|
checkbox-element {
|
||||||
&[disabled='true'] {
|
&[disabled='true'] {
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
|
@ -33,9 +58,14 @@ radio-element {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset-group.fieldset-group--smushed {
|
fieldset-group {
|
||||||
|
&.fieldset-group--smushed {
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
|
||||||
fieldset-section {
|
fieldset-section {
|
||||||
|
@ -60,21 +90,94 @@ fieldset-group.fieldset-group--smushed {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// This is a special case where the prefix appears "inside" the input
|
||||||
|
// It would be way simpler to just use position: absolute and give it a width
|
||||||
|
// but the width can change when we use it for the name prefix
|
||||||
|
// lbry:// {input}, lbry://@short {input}, @lbry://longername {input}
|
||||||
|
// The spacing/alignment isn't very robust and will probably need to be changed
|
||||||
|
// if we use this in more places
|
||||||
|
&.fieldset-group--disabled-prefix {
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
fieldset-section:first-child .form-field__prefix,
|
||||||
|
fieldset-section:last-child input {
|
||||||
|
border-color: $lbry-black;
|
||||||
|
|
||||||
|
[data-mode='dark'] {
|
||||||
|
border-color: $lbry-gray-4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset-section:first-child {
|
||||||
|
.form-field__prefix {
|
||||||
|
padding: 0.15em var(--spacing-s);
|
||||||
|
padding-right: 0;
|
||||||
|
border: 1px solid;
|
||||||
|
border-right: 0;
|
||||||
|
color: $lbry-gray-4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset-section:last-child {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
input {
|
||||||
|
border-left: 0;
|
||||||
|
padding-left: var(--spacing-xs);
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-image-slice: 1;
|
||||||
|
border-image-source: linear-gradient(to right, $lbry-black, $lbry-teal-5 5%);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-mode='dark'] & {
|
||||||
|
&:focus {
|
||||||
|
border-image-source: linear-gradient(to right, $lbry-gray-4, $lbry-teal-5 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// form buttons are black by default
|
// form buttons are black by default
|
||||||
form {
|
form {
|
||||||
[data-mode='dark'] & {
|
// [data-mode='dark'] & {
|
||||||
.button--primary:not(:hover) {
|
.button--primary:not(:hover) {
|
||||||
background-color: $lbry-teal-5;
|
background-color: $lbry-teal-5;
|
||||||
border-color: $lbry-teal-5;
|
border-color: $lbry-teal-5;
|
||||||
}
|
|
||||||
|
|
||||||
legend {
|
&:hover {
|
||||||
background-color: $lbry-cyan-5;
|
background-color: $lbry-teal-3;
|
||||||
|
border-color: $lbry-teal-3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset-section {
|
fieldset-section {
|
||||||
|
input-submit {
|
||||||
|
input,
|
||||||
|
select {
|
||||||
|
&:first-child:not(:focus) {
|
||||||
|
border-right-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button__content {
|
||||||
|
position: relative;
|
||||||
|
top: -0.1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
max-width: 12em;
|
||||||
|
background-color: $lbry-white;
|
||||||
|
|
||||||
|
[data-mode='dark'] & {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
input,
|
input,
|
||||||
textarea,
|
textarea,
|
||||||
|
@ -85,25 +188,7 @@ fieldset-section {
|
||||||
input:not(:focus):not(.form-field--copyable),
|
input:not(:focus):not(.form-field--copyable),
|
||||||
textarea:not(:focus),
|
textarea:not(:focus),
|
||||||
select:not(:focus) {
|
select:not(:focus) {
|
||||||
border-color: $lbry-white;
|
border-color: $lbry-gray-4;
|
||||||
}
|
|
||||||
|
|
||||||
input-submit {
|
|
||||||
input,
|
|
||||||
select {
|
|
||||||
&:first-child:not(:focus) {
|
|
||||||
border-right-color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
max-width: 12em;
|
|
||||||
background-color: $lbry-white;
|
|
||||||
|
|
||||||
[data-mode='dark'] & {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -116,6 +201,7 @@ fieldset-section {
|
||||||
padding: 0.2rem 0.75rem;
|
padding: 0.2rem 0.75rem;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
user-select: text;
|
user-select: text;
|
||||||
|
cursor: default;
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
html[data-mode='dark'] & {
|
||||||
background-color: rgba($lbry-white, 0.3);
|
background-color: rgba($lbry-white, 0.3);
|
||||||
|
@ -129,9 +215,20 @@ label + .react-toggle,
|
||||||
margin-left: var(--spacing-vertical-small);
|
margin-left: var(--spacing-vertical-small);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.form-field--inline-prefix {
|
||||||
|
position: absolute;
|
||||||
|
top: 9.5em;
|
||||||
|
left: 2.75em;
|
||||||
|
width: auto;
|
||||||
|
|
||||||
|
& + input {
|
||||||
|
padding-left: 4em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.form-field__help {
|
.form-field__help {
|
||||||
@extend .help;
|
@extend .help;
|
||||||
margin-top: var(--spacing-vertical-small);
|
margin-top: var(--spacing-vertical-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-field--price-amount {
|
.form-field--price-amount {
|
||||||
|
|
|
@ -111,6 +111,7 @@
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
// Publish button
|
||||||
.header__navigation-item--right-action {
|
.header__navigation-item--right-action {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
@ -127,7 +128,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
top: 0;
|
top: 0.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
|
|
|
@ -6,6 +6,10 @@
|
||||||
.media__title {
|
.media__title {
|
||||||
margin-bottom: var(--spacing-vertical-small);
|
margin-bottom: var(--spacing-vertical-small);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.media__properties {
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// M E D I A
|
// M E D I A
|
||||||
|
|
|
@ -143,7 +143,7 @@ code {
|
||||||
background-color: $lbry-yellow-3;
|
background-color: $lbry-yellow-3;
|
||||||
color: $lbry-black;
|
color: $lbry-black;
|
||||||
|
|
||||||
.button--link {
|
.button--link:not(:disabled) {
|
||||||
// The normal colors we use for .button--link are too light for the warning background
|
// The normal colors we use for .button--link are too light for the warning background
|
||||||
// This just darkens them a bit and adds an border-bottom so they are easier to see.
|
// This just darkens them a bit and adds an border-bottom so they are easier to see.
|
||||||
$altered-color: mix($lbry-teal-5, $lbry-black, 80%);
|
$altered-color: mix($lbry-teal-5, $lbry-black, 80%);
|
||||||
|
@ -204,6 +204,10 @@ code {
|
||||||
|
|
||||||
.error-text {
|
.error-text {
|
||||||
color: $lbry-red-5;
|
color: $lbry-red-5;
|
||||||
|
|
||||||
|
[data-mode='dark'] & {
|
||||||
|
color: $lbry-red-3;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.thumbnail-preview {
|
.thumbnail-preview {
|
||||||
|
|
12
yarn.lock
12
yarn.lock
|
@ -111,10 +111,10 @@
|
||||||
version "0.7.1"
|
version "0.7.1"
|
||||||
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f"
|
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f"
|
||||||
|
|
||||||
"@lbry/components@^2.2.0":
|
"@lbry/components@^2.2.1":
|
||||||
version "2.2.0"
|
version "2.2.1"
|
||||||
resolved "https://registry.yarnpkg.com/@lbry/components/-/components-2.2.0.tgz#ce9e7667f28be832014d8f29d12796ce514ce039"
|
resolved "https://registry.yarnpkg.com/@lbry/components/-/components-2.2.1.tgz#3fc67e807796e9dc8cd1d5cd86a719849c4710d5"
|
||||||
integrity sha512-AHzc3OZw6gtKESXm0IrGNMFLoJI2JJVDokRzoyHPOdYgLqqADqekC44u8dytGdPHixBo1kZKaoS2FTTXyZpqpw==
|
integrity sha512-k8bdSjr0Hq3+ZlvAKRuPea4LTEvXx4zF7+IOb1RmFWfMIk8jBNZi02LmvLoj4VuCa3mKoVfECeaYyXg6vwmY3w==
|
||||||
|
|
||||||
"@mapbox/hast-util-table-cell-style@^0.1.3":
|
"@mapbox/hast-util-table-cell-style@^0.1.3":
|
||||||
version "0.1.3"
|
version "0.1.3"
|
||||||
|
@ -5660,9 +5660,9 @@ lazy-val@^1.0.3:
|
||||||
tar-stream "^1.6.2"
|
tar-stream "^1.6.2"
|
||||||
zstd-codec "^0.1.1"
|
zstd-codec "^0.1.1"
|
||||||
|
|
||||||
lbry-redux@lbryio/lbry-redux#2b725cb31729234ba73117e2a74688b8bba26e7c:
|
lbry-redux@lbryio/lbry-redux#3ab065b11a52d3e2e6a50a25459f9ff0aac03b13:
|
||||||
version "0.0.1"
|
version "0.0.1"
|
||||||
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/2b725cb31729234ba73117e2a74688b8bba26e7c"
|
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/3ab065b11a52d3e2e6a50a25459f9ff0aac03b13"
|
||||||
dependencies:
|
dependencies:
|
||||||
proxy-polyfill "0.1.6"
|
proxy-polyfill "0.1.6"
|
||||||
reselect "^3.0.0"
|
reselect "^3.0.0"
|
||||||
|
|
Loading…
Reference in a new issue