use color prop for icon color instead of relying on type of icon and tooltip cleanup

This commit is contained in:
Sean Yesmunt 2018-05-22 23:48:22 -04:00
parent 2f4395a9e3
commit e56c21fd22
10 changed files with 42 additions and 20 deletions

View file

@ -22,6 +22,7 @@ type Props = {
button: ?string, // primary, secondary, alt, link button: ?string, // primary, secondary, alt, link
noPadding: ?boolean, // to remove padding and allow circular buttons noPadding: ?boolean, // to remove padding and allow circular buttons
uppercase: ?boolean, uppercase: ?boolean,
iconColor: ?string,
}; };
class Button extends React.PureComponent<Props> { class Button extends React.PureComponent<Props> {
@ -48,6 +49,7 @@ class Button extends React.PureComponent<Props> {
type, type,
noPadding, noPadding,
uppercase, uppercase,
iconColor,
...otherProps ...otherProps
} = this.props; } = this.props;
@ -82,10 +84,10 @@ class Button extends React.PureComponent<Props> {
const content = ( const content = (
<span className="btn__content"> <span className="btn__content">
{icon && <Icon icon={icon} />} {icon && <Icon icon={icon} iconColor={iconColor} />}
{label && <span className="btn__label">{label}</span>} {label && <span className="btn__label">{label}</span>}
{children && children} {children && children}
{iconRight && <Icon icon={iconRight} />} {iconRight && <Icon icon={iconRight} iconColor={iconColor} />}
</span> </span>
); );

View file

@ -223,7 +223,6 @@ class CategoryList extends React.PureComponent<Props, State> {
{category && {category &&
category.match(/^community/i) && ( category.match(/^community/i) && (
<ToolTip <ToolTip
direction="bottom"
label={__("What's this?")} label={__("What's this?")}
body={__( body={__(
'Community Content is a public space where anyone can share content with the rest of the LBRY community. Bid on the names "one," "two," "three," "four" and "five" to put your content here!' 'Community Content is a public space where anyone can share content with the rest of the LBRY community. Bid on the names "one," "two," "three," "four" and "five" to put your content here!'

View file

@ -9,7 +9,8 @@ const PURPLE_COLOR = '#8165b0';
type Props = { type Props = {
icon: string, icon: string,
tooltip: ?string, // tooltip direction tooltip?: string, // tooltip direction
iconColor?: string,
}; };
class IconComponent extends React.PureComponent<Props> { class IconComponent extends React.PureComponent<Props> {
@ -23,8 +24,20 @@ class IconComponent extends React.PureComponent<Props> {
return null; return null;
} }
}; };
getIconColor = (color: string) => {
switch (color) {
case 'red':
return RED_COLOR;
case 'purple':
return PURPLE_COLOR;
default:
return null;
}
};
render() { render() {
const { icon, tooltip } = this.props; const { icon, tooltip, iconColor } = this.props;
const Icon = FeatherIcons[icon]; const Icon = FeatherIcons[icon];
if (!Icon) { if (!Icon) {
@ -32,10 +45,8 @@ class IconComponent extends React.PureComponent<Props> {
} }
let color; let color;
if (icon === icons.TRASH || icon === icons.FEATURED) { if (iconColor) {
color = RED_COLOR; color = this.getIconColor(iconColor);
} else if (icon === icons.OPEN) {
color = PURPLE_COLOR;
} }
let size = 14; let size = 14;

View file

@ -3,7 +3,7 @@ import * as React from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
type Props = { type Props = {
body: ?string, body: string,
label?: string, label?: string,
children: ?React.Node, children: ?React.Node,
icon: ?boolean, icon: ?boolean,
@ -12,7 +12,7 @@ type Props = {
class ToolTip extends React.PureComponent<Props> { class ToolTip extends React.PureComponent<Props> {
static defaultProps = { static defaultProps = {
direction: 'top', direction: 'bottom',
}; };
render() { render() {
@ -32,10 +32,7 @@ class ToolTip extends React.PureComponent<Props> {
})} })}
> >
{tooltipContent} {tooltipContent}
{body && (
// body may be undefined for some icons until we add messages for them
<span className="tooltip__body">{body}</span> <span className="tooltip__body">{body}</span>
)}
</span> </span>
); );
} }

View file

@ -30,6 +30,7 @@ class FileActions extends React.PureComponent<Props> {
<Button <Button
button="alt" button="alt"
icon={icons.TRASH} icon={icons.TRASH}
iconColor="red"
label={__('Delete')} label={__('Delete')}
onClick={() => openModal({ id: MODALS.CONFIRM_FILE_REMOVE }, { uri })} onClick={() => openModal({ id: MODALS.CONFIRM_FILE_REMOVE }, { uri })}
/> />

View file

@ -105,7 +105,7 @@ class FileCard extends React.PureComponent<Props> {
<React.Fragment> <React.Fragment>
<UriIndicator uri={uri} link /> <UriIndicator uri={uri} link />
<div> <div>
{isRewardContent && <Icon icon={icons.FEATURED} />} {isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
{fileInfo && <Icon icon={icons.LOCAL} />} {fileInfo && <Icon icon={icons.LOCAL} />}
</div> </div>
</React.Fragment> </React.Fragment>

View file

@ -76,6 +76,7 @@ class FileDownloadLink extends React.PureComponent<Props> {
button="alt" button="alt"
label={__('Download')} label={__('Download')}
icon={icons.DOWNLOAD} icon={icons.DOWNLOAD}
iconColor="purple"
onClick={() => { onClick={() => {
purchaseUri(uri); purchaseUri(uri);
}} }}
@ -83,7 +84,13 @@ class FileDownloadLink extends React.PureComponent<Props> {
); );
} else if (fileInfo && fileInfo.download_path) { } else if (fileInfo && fileInfo.download_path) {
return ( return (
<Button button="alt" label={__('Open File')} icon={icons.OPEN} onClick={() => openFile()} /> <Button
button="alt"
iconColor="purple"
label={__('Open File')}
icon={icons.OPEN}
onClick={() => openFile()}
/>
); );
} }

View file

@ -37,8 +37,9 @@ export default (props: Props) => {
return channelName && uri ? ( return channelName && uri ? (
<Button <Button
iconColor="red"
icon={isSubscribed ? undefined : icons.HEART} icon={isSubscribed ? undefined : icons.HEART}
button={isSubscribed ? 'alt' : 'secondary'} button="alt"
label={subscriptionLabel} label={subscriptionLabel}
onClick={() => { onClick={() => {
if (!subscriptions.length) { if (!subscriptions.length) {

View file

@ -41,7 +41,7 @@ type Props = {
openModal: ({ id: string }, { uri: string }) => void, openModal: ({ id: string }, { uri: string }) => void,
fetchFileInfo: string => void, fetchFileInfo: string => void,
fetchCostInfo: string => void, fetchCostInfo: string => void,
prepareEdit: ({}) => void, prepareEdit: ({}, string) => void,
setClientSetting: (string, boolean | string) => void, setClientSetting: (string, boolean | string) => void,
checkSubscription: ({ channelName: string, uri: string }) => void, checkSubscription: ({ channelName: string, uri: string }) => void,
subscriptions: Array<Subscription>, subscriptions: Array<Subscription>,
@ -158,7 +158,7 @@ class FilePage extends React.Component<Props> {
<h1 className="card__title card__title--file">{title}</h1> <h1 className="card__title card__title--file">{title}</h1>
<div className="card__title-identity-icons"> <div className="card__title-identity-icons">
<FilePrice uri={normalizeURI(uri)} /> <FilePrice uri={normalizeURI(uri)} />
{isRewardContent && <Icon tooltip="bottom" icon={icons.FEATURED} />} {isRewardContent && <Icon iconColor="red" tooltip="bottom" icon={icons.FEATURED} />}
</div> </div>
</div> </div>
<span className="card__subtitle card__subtitle--file"> <span className="card__subtitle card__subtitle--file">

View file

@ -14,6 +14,10 @@
.file-list__header { .file-list__header {
margin-top: $spacing-vertical * 4/3; margin-top: $spacing-vertical * 4/3;
font-size: 18px; font-size: 18px;
.tooltip {
margin-left: 5px;
}
} }
.file-tile { .file-tile {