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

View file

@ -223,7 +223,6 @@ class CategoryList extends React.PureComponent<Props, State> {
{category &&
category.match(/^community/i) && (
<ToolTip
direction="bottom"
label={__("What's this?")}
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!'

View file

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

View file

@ -3,7 +3,7 @@ import * as React from 'react';
import classnames from 'classnames';
type Props = {
body: ?string,
body: string,
label?: string,
children: ?React.Node,
icon: ?boolean,
@ -12,7 +12,7 @@ type Props = {
class ToolTip extends React.PureComponent<Props> {
static defaultProps = {
direction: 'top',
direction: 'bottom',
};
render() {
@ -32,10 +32,7 @@ class ToolTip extends React.PureComponent<Props> {
})}
>
{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>
);
}

View file

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

View file

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

View file

@ -76,6 +76,7 @@ class FileDownloadLink extends React.PureComponent<Props> {
button="alt"
label={__('Download')}
icon={icons.DOWNLOAD}
iconColor="purple"
onClick={() => {
purchaseUri(uri);
}}
@ -83,7 +84,13 @@ class FileDownloadLink extends React.PureComponent<Props> {
);
} else if (fileInfo && fileInfo.download_path) {
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 ? (
<Button
iconColor="red"
icon={isSubscribed ? undefined : icons.HEART}
button={isSubscribed ? 'alt' : 'secondary'}
button="alt"
label={subscriptionLabel}
onClick={() => {
if (!subscriptions.length) {

View file

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

View file

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