LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

update: standardize icon naming

Browse source
This commit is contained in:
Sean Yesmunt 2019-01-22 15:36:28 -05:00
parent 1a59755667
commit 7aa29417b8
27 changed files with 55 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/renderer/component/address/index.js
View file

@ -1,12 +0,0 @@
// @flow
import { connect } from 'react-redux';
import { doToast } from 'lbry-redux';
import Address from './view';
export default connect(
null,
{
doToast,
}
)(Address);

54
src/renderer/component/address/view.jsx
View file

@ -1,54 +0,0 @@
// @flow
import * as ICONS from 'constants/icons';
import * as React from 'react';
import { clipboard } from 'electron';
import { FormRow } from 'component/common/form';
import Button from 'component/button';
type Props = {
address: string,
doToast: ({ message: string }) => void,
};
export default class Address extends React.PureComponent<Props> {
constructor() {
super();
this.input = null;
}
input: ?HTMLInputElement;
render() {
const { address, doToast } = this.props;
return (
<FormRow verticallyCentered stretch>
<input
className="input-copyable form-field__input"
readOnly
value={address || ''}
ref={input => {
this.input = input;
}}
onFocus={() => {
if (this.input) {
this.input.select();
}
}}
/>
<Button
noPadding
button="secondary"
icon={ICONS.CLIPBOARD}
onClick={() => {
clipboard.writeText(address);
doToast({
message: __('Address copied'),
});
}}
/>
</FormRow>
);
}
}

2
src/renderer/component/common/icon-custom.jsx
View file

@ -37,7 +37,7 @@ export const customIcons = {
<polyline strokeLinejoin="round" points="13 4 21 12 13 20" />
</g>
),
[ICONS.EYE]: buildIcon(
[ICONS.VIEW]: buildIcon(
<g fill="none" fillRule="evenodd">
<path
d="M2, 12 C2, 12 5, 5 12, 5 C19, 5 22, 12 22, 12 C22, 12 19, 19 12, 19 C5, 19 2, 12 2, 12 Z"

5
src/renderer/component/copyableText/view.jsx
View file

@ -7,6 +7,7 @@ import Button from 'component/button';
type Props = {
copyable: string,
snackMessage: ?string,
doToast: ({ message: string }) => void,
};
@ -20,7 +21,7 @@ export default class CopyableText extends React.PureComponent<Props> {
input: ?HTMLInputElement;
render() {
const { copyable, doToast } = this.props;
const { copyable, doToast, snackMessage } = this.props;
return (
<FormRow verticallyCentered stretch>
@ -45,7 +46,7 @@ export default class CopyableText extends React.PureComponent<Props> {
onClick={() => {
clipboard.writeText(copyable);
doToast({
message: __('Text copied'),
message: snackMessage || __('Text copied'),
});
}}
/>

2
src/renderer/component/externalLink/view.jsx
View file

@ -34,7 +34,7 @@ class ExternalLink extends React.PureComponent<Props> {
element = (
<Button
button="link"
iconRight={ICONS.EXTERNAL_LINK}
iconRight={ICONS.EXTERNAL}
title={title || href}
label={children}
className="btn--external-link"

4
src/renderer/component/fileActions/view.jsx
View file

@ -20,7 +20,7 @@ type Props = {
class FileActions extends React.PureComponent<Props> {
render() {
const { fileInfo, uri, openModal, claimIsMine, claimId } = this.props;
const showDelete = (claimIsMine || (fileInfo && Object.keys(fileInfo).length > 0)) ;
const showDelete = claimIsMine || (fileInfo && Object.keys(fileInfo).length > 0);
return (
<React.Fragment>
@ -28,7 +28,7 @@ class FileActions extends React.PureComponent<Props> {
<Tooltip onComponent body={__('Delete this file')}>
<Button
button="alt"
icon={ICONS.TRASH}
icon={ICONS.DELETE}
description={__('Delete')}
onClick={() => openModal(MODALS.CONFIRM_FILE_REMOVE, { uri })}
/>

2
src/renderer/component/fileCard/view.jsx
View file

@ -132,7 +132,7 @@ class FileCard extends React.PureComponent<Props> {
<div className="media__properties">
<FilePrice hideFree uri={uri} />
{isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
{isSubscribed && <Icon icon={icons.HEART} />}
{isSubscribed && <Icon icon={icons.SUBSCRIPTION} />}
{fileInfo && <Icon icon={icons.LOCAL} />}
{isNew && <span className="badge badge--alert">{__('NEW')}</span>}
</div>

2
src/renderer/component/fileDownloadLink/view.jsx
View file

@ -97,7 +97,7 @@ class FileDownloadLink extends React.PureComponent<Props> {
} else if (fileInfo && fileInfo.download_path) {
return (
<ToolTip onComponent body={__('Open file')}>
<Button button="alt" iconColor="green" icon={ICONS.LOCAL} onClick={() => openFile()} />
<Button button="alt" iconColor="green" icon={ICONS.EXTERNAL} onClick={() => openFile()} />
</ToolTip>
);
}

2
src/renderer/component/fileTile/view.jsx
View file

@ -70,7 +70,7 @@ class FileTile extends React.PureComponent<Props> {
<div className={classnames('media__properties', { card__subtitle: size === 'large' })}>
<FilePrice hideFree uri={uri} />
{isNew && <span className="badge badge--alert icon">{__('NEW')}</span>}
{isSubscribed && <Icon icon={ICONS.HEART} />}
{isSubscribed && <Icon icon={ICONS.SUBSCRIPTION} />}
{isRewardContent && <Icon iconColor="red" icon={ICONS.FEATURED} />}
{isDownloaded && <Icon icon={ICONS.LOCAL} />}
</div>

2
src/renderer/component/fileViewer/internal/play-button.jsx
View file

@ -17,7 +17,7 @@ class VideoPlayButton extends React.PureComponent<Props> {
const disabled = isLoading || fileInfo === undefined;
const doesPlayback = ['audio', 'video'].indexOf(mediaType) !== -1;
const label = doesPlayback ? __('Play') : __('View');
const icon = doesPlayback ? ICONS.PLAY : ICONS.EYE;
const icon = doesPlayback ? ICONS.PLAY : ICONS.VIEW;
return (
<Button
disabled={disabled}

4
src/renderer/component/inviteList/view.jsx
View file

@ -47,14 +47,14 @@ class InviteList extends React.PureComponent<Props> {
<td>{invitee.email}</td>
<td className="text-center">
{invitee.invite_accepted ? (
<Icon icon={ICONS.CHECK} />
<Icon icon={ICONS.COMPLETED} />
) : (
<span className="empty">{__('unused')}</span>
)}
</td>
<td className="text-center">
{invitee.invite_reward_claimed ? (
<Icon icon={ICONS.CHECK} />
<Icon icon={ICONS.COMPLETED} />
) : invitee.invite_reward_claimable ? (
<RewardLink label={__('claim')} reward_type={rewards.TYPE_REFERRAL} />
) : (

2
src/renderer/component/rewardTile/view.jsx
View file

@ -41,7 +41,7 @@ const RewardTile = (props: Props) => {
{reward.reward_type !== rewards.TYPE_REFERRAL &&
(claimed ? (
<span>
<Icon icon={ICONS.CHECK} /> {__('Reward claimed.')}
<Icon icon={ICONS.COMPLETED} /> {__('Reward claimed.')}
</span>
) : (
<RewardLink button reward_type={reward.reward_type} />

17
src/renderer/component/shapeShift/internal/active-shift.jsx
View file

@ -3,7 +3,7 @@ import * as React from 'react';
import QRCode from 'component/common/qr-code';
import { FormRow } from 'component/common/form';
import * as statuses from 'constants/shape_shift';
import Address from 'component/address';
import CopyableText from 'component/copyableText';
import Button from 'component/button';
import type { Dispatch, ThunkAction } from 'types/redux';
import type { Action } from 'redux/actions/shape_shift';
@ -96,7 +96,7 @@ class ActiveShapeShift extends React.PureComponent<Props> {
{shiftDepositAddress && (
<FormRow verticallyCentered padded>
<QRCode value={shiftDepositAddress} paddingRight />
<Address address={shiftDepositAddress} showCopyButton padded />
<CopyableText copyable={shiftDepositAddress} />
</FormRow>
)}
</div>
@ -134,12 +134,13 @@ class ActiveShapeShift extends React.PureComponent<Props> {
/>
)}
</div>
{shiftState === statuses.NO_DEPOSITS && shiftReturnAddress && (
<div className="help">
{__("If the transaction doesn't go through, ShapeShift will return your")}{' '}
{shiftCoinType} {__('back to')} {shiftReturnAddress}
</div>
)}
{shiftState === statuses.NO_DEPOSITS &&
shiftReturnAddress && (
<div className="help">
{__("If the transaction doesn't go through, ShapeShift will return your")}{' '}
{shiftCoinType} {__('back to')} {shiftReturnAddress}
</div>
)}
</div>
);
}

2
src/renderer/component/socialShare/view.jsx
View file

@ -82,7 +82,7 @@ class SocialShare extends React.PureComponent<Props> {
</ToolTip>
<ToolTip onComponent body={__('View on Spee.ch')}>
<Button
icon={ICONS.GLOBE}
icon={ICONS.WEB}
iconColor="blue"
button="alt"
label={__('')}

2
src/renderer/component/subscribeButton/view.jsx
View file

@ -43,7 +43,7 @@ export default (props: Props) => {
return (
<Button
iconColor="red"
icon={isSubscribed ? undefined : ICONS.HEART}
icon={isSubscribed ? undefined : ICONS.SUBSCRIPTION}
button={buttonStyle || 'alt'}
label={subscriptionLabel}
onClick={e => {

2
src/renderer/component/subscribeMarkAsRead/view.jsx
View file

@ -33,7 +33,7 @@ export default class MarkAsRead extends PureComponent<Props> {
<Button
noPadding
button="inverse"
icon={ICONS.CHECK_SIMPLE}
icon={ICONS.COMPLETE}
label={label}
onClick={this.handleClick}
/>

2
src/renderer/component/transactionList/internal/transaction-list-item.jsx
View file

@ -29,7 +29,7 @@ class TransactionListItem extends React.PureComponent<Props> {
if (type === txnTypes.TIP) {
return <Button icon={ICONS.UNLOCK} onClick={this.abandonClaim} title={__('Unlock Tip')} />;
}
return <Button icon={ICONS.TRASH} onClick={this.abandonClaim} title={__('Abandon Claim')} />;
return <Button icon={ICONS.DELETE} onClick={this.abandonClaim} title={__('Abandon Claim')} />;
}
abandonClaim() {

2
src/renderer/component/transactionListRecent/view.jsx
View file

@ -59,7 +59,7 @@ class TransactionListRecent extends React.PureComponent<Props> {
button="primary"
navigate="/history"
label={__('Full History')}
icon={icons.CLOCK}
icon={icons.HISTORY}
/>
</div>
</div>

2
src/renderer/component/userVerify/view.jsx
View file

@ -118,7 +118,7 @@ class UserVerify extends React.PureComponent<Props> {
<Button
href="https://chat.lbry.io"
button="primary"
icon={icons.MESSAGE}
icon={icons.CHAT}
label={__('Join LBRY Chat')}
/>
</div>

3
src/renderer/component/viewOnWebButton/index.js
View file

@ -1,3 +0,0 @@
import ViewOnWebButton from './view';
export default ViewOnWebButton;

30
src/renderer/component/viewOnWebButton/view.jsx
View file

@ -1,30 +0,0 @@
// @flow
import * as ICONS from 'constants/icons';
import React from 'react';
import Button from 'component/button';
type Props = {
claimId: ?string,
claimName: ?string,
};
export default (props: Props) => {
const { claimId, claimName } = props;
if (claimId && claimName) {
const speechURL = claimName.startsWith('@')
? `${claimName}:${claimId}`
: `${claimId}/${claimName}`;
return (
<Button
icon={ICONS.GLOBE}
button="alt"
label={__('Share')}
href={`https://spee.ch/${speechURL}`}
/>
);
}
return null;
};

4
src/renderer/component/walletAddress/view.jsx
View file

@ -2,7 +2,7 @@
import * as icons from 'constants/icons';
import React from 'react';
import Button from 'component/button';
import Address from 'component/address';
import CopyableText from 'component/copyableText';
import QRCode from 'component/common/qr-code';
type Props = {
@ -58,7 +58,7 @@ class WalletAddress extends React.PureComponent<Props, State> {
</header>
<div className="card__content">
<Address address={receiveAddress} showCopyButton />
<CopyableText copyable={receiveAddress} snackMessage={__('Address copied.')} />
</div>
<div className="card__content">

2
src/renderer/component/wunderbar/view.jsx
View file

@ -45,7 +45,7 @@ class WunderBar extends React.PureComponent<Props> {
case 'file':
return ICONS.LOCAL;
case 'channel':
return ICONS.AT_SIGN;
return ICONS.CHANNEL;
default:
return ICONS.SEARCH;
}

36
src/renderer/constants/icons.js
View file

@ -1,4 +1,8 @@
// React Feather
// React Feather icons
// https://github.com/carmelopullara/react-feather
// Note: Icons should be named for their purpose, rather than the actual icon.
// The goal being to reduce multiple uses of the same icon for different purposes.
//
export const FEATURED = 'Award';
export const LOCAL = 'Folder';
export const ALERT = 'AlertCircle';
@ -9,30 +13,28 @@ export const DOWNLOAD = 'Download';
export const UPLOAD = 'UploadCloud';
export const CLOSE = 'X';
export const EDIT = 'Edit3';
export const TRASH = 'Trash';
export const DELETE = 'Trash';
export const REPORT = 'Flag';
export const OPEN = 'BookOpen';
export const HELP = 'HelpCircle';
export const MESSAGE = 'MessageCircle';
export const SEND = 'Send';
export const CHAT = 'MessageCircle';
export const SEARCH = 'Search';
export const COMPASS = 'Compass';
export const AT_SIGN = 'AtSign';
export const CHANNEL = 'AtSign';
export const REFRESH = 'RefreshCw';
export const CLOCK = 'Clock';
export const HISTORY = 'Clock';
export const HOME = 'Home';
export const PHONE = 'Phone';
export const CHECK = 'CheckCircle';
export const HEART = 'Heart';
export const COMPLETE = 'Check';
export const COMPLETED = 'CheckCircle';
export const SUBSCRIPTION = 'Heart';
export const UNLOCK = 'Unlock';
export const CHECK_SIMPLE = 'Check';
export const GLOBE = 'Globe';
export const EXTERNAL_LINK = 'ExternalLink';
export const GIFT = 'Gift';
export const EYE = 'Eye';
export const WEB = 'Globe';
export const SHARE = 'Share2';
export const EXTERNAL = 'ExternalLink';
export const TIP = 'Gift';
export const VIEW = 'Eye';
export const PLAY = 'Play';
export const FACEBOOK = 'Facebook';
export const TWITTER = 'Twitter';
export const CREDIT_CARD = 'CreditCard';
export const WALLET = 'CreditCard';
export const SETTINGS = 'Settings';
export const USERS = 'Users';
export const INVITE = 'Users';

2
src/renderer/page/channel/view.jsx
View file

@ -95,7 +95,7 @@ class ChannelPage extends React.PureComponent<Props> {
<SubscribeButton uri={`lbry://${permanentUrl}`} channelName={name} />
<Button
button="alt"
icon={icons.GLOBE}
icon={icons.SHARE}
label={__('Share Channel')}
onClick={() =>
openModal(MODALS.SOCIAL_SHARE, { uri, speechShareable: true, isChannel: true })

4
src/renderer/page/file/view.jsx
View file

@ -216,14 +216,14 @@ class FilePage extends React.Component<Props> {
{!claimIsMine && (
<Button
button="alt"
icon={icons.GIFT}
icon={icons.TIP}
label={__('Send a tip')}
onClick={() => openModal(MODALS.SEND_TIP, { uri })}
/>
)}
<Button
button="alt"
icon={icons.GLOBE}
icon={icons.SHARE}
label={__('Share')}
onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, speechShareable })}
/>

2
src/renderer/page/help/view.jsx
View file

@ -151,7 +151,7 @@ class HelpPage extends React.PureComponent<Props, State> {
<Button
button="primary"
label={__('Join Our Chat')}
icon={icons.MESSAGE}
icon={icons.CHAT}
href="https://chat.lbry.io"
/>
</div>