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
|
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>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -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!'
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 })}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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()}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in a new issue