use color prop for icon color instead of relying on type of icon and tooltip cleanup
This commit is contained in:
parent
2f4395a9e3
commit
e56c21fd22
10 changed files with 42 additions and 20 deletions
|
@ -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>
|
||||
);
|
||||
|
||||
|
|
|
@ -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!'
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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 })}
|
||||
/>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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()}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -14,6 +14,10 @@
|
|||
.file-list__header {
|
||||
margin-top: $spacing-vertical * 4/3;
|
||||
font-size: 18px;
|
||||
|
||||
.tooltip {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.file-tile {
|
||||
|
|
Loading…
Reference in a new issue