large claim-grid header text + optional icon
This commit is contained in:
parent
1a3e1ba003
commit
c1e6e90896
8 changed files with 37 additions and 18 deletions
|
@ -63,7 +63,7 @@ import { toCapitalCase } from 'util/string';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Icon from 'component/common/icon';
|
import Icon from 'component/common/icon';
|
||||||
|
|
||||||
type RowDataItem = {
|
export type RowDataItem = {
|
||||||
title: string,
|
title: string,
|
||||||
link?: string,
|
link?: string,
|
||||||
help?: any,
|
help?: any,
|
||||||
|
|
|
@ -63,15 +63,17 @@ class IconComponent extends React.PureComponent<Props> {
|
||||||
color = this.getIconColor(iconColor);
|
color = this.getIconColor(iconColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
const iconSize = size || 16;
|
|
||||||
|
|
||||||
let tooltipText;
|
let tooltipText;
|
||||||
if (tooltip) {
|
if (tooltip) {
|
||||||
tooltipText = customTooltipText || this.getTooltip(icon);
|
tooltipText = customTooltipText || this.getTooltip(icon);
|
||||||
}
|
}
|
||||||
|
|
||||||
const component = (
|
const component = (
|
||||||
<Icon size={sectionIcon ? 20 : iconSize} className={classnames(`icon icon--${icon}`, className)} color={color} />
|
<Icon
|
||||||
|
size={size || (sectionIcon ? 20 : 16)}
|
||||||
|
className={classnames(`icon icon--${icon}`, className)}
|
||||||
|
color={color}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
const inner = sectionIcon ? <span className={`icon__wrapper icon__wrapper--${icon}`}>{component}</span> : component;
|
const inner = sectionIcon ? <span className={`icon__wrapper icon__wrapper--${icon}`}>{component}</span> : component;
|
||||||
|
|
|
@ -138,6 +138,7 @@ function FileDrop(props: Props) {
|
||||||
setFiles([]);
|
setFiles([]);
|
||||||
} else if (files.length === 1) {
|
} else if (files.length === 1) {
|
||||||
// Handle single file selection
|
// Handle single file selection
|
||||||
|
// $FlowFixMe
|
||||||
setTarget(files[0]);
|
setTarget(files[0]);
|
||||||
handleFileSelected(files[0]);
|
handleFileSelected(files[0]);
|
||||||
}
|
}
|
||||||
|
|
|
@ -44,6 +44,7 @@ const ModalFileSelection = (props: Props) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleFileChange = (file?: WebFile) => {
|
const handleFileChange = (file?: WebFile) => {
|
||||||
|
// $FlowFixMe
|
||||||
setSelectedFile(file);
|
setSelectedFile(file);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -15,7 +15,7 @@ type Props = {
|
||||||
blockedChannels: Array<string>,
|
blockedChannels: Array<string>,
|
||||||
};
|
};
|
||||||
|
|
||||||
type RowDataItem = {
|
type ChannelsFollowingItem = {
|
||||||
title: string,
|
title: string,
|
||||||
link?: string,
|
link?: string,
|
||||||
help?: any,
|
help?: any,
|
||||||
|
@ -24,7 +24,7 @@ type RowDataItem = {
|
||||||
|
|
||||||
function ChannelsFollowingDiscover(props: Props) {
|
function ChannelsFollowingDiscover(props: Props) {
|
||||||
const { followedTags, subscribedChannels, blockedChannels } = props;
|
const { followedTags, subscribedChannels, blockedChannels } = props;
|
||||||
let rowData: Array<RowDataItem> = [];
|
let rowData: Array<ChannelsFollowingItem> = [];
|
||||||
const notChannels = subscribedChannels
|
const notChannels = subscribedChannels
|
||||||
.map(({ uri }) => uri)
|
.map(({ uri }) => uri)
|
||||||
.concat(blockedChannels)
|
.concat(blockedChannels)
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
import type { RowDataItem } from 'homepage';
|
||||||
import * as ICONS from 'constants/icons';
|
import * as ICONS from 'constants/icons';
|
||||||
import * as PAGES from 'constants/pages';
|
import * as PAGES from 'constants/pages';
|
||||||
import { SITE_NAME } from 'config';
|
import { SITE_NAME } from 'config';
|
||||||
|
@ -14,13 +15,6 @@ type Props = {
|
||||||
subscribedChannels: Array<Subscription>,
|
subscribedChannels: Array<Subscription>,
|
||||||
};
|
};
|
||||||
|
|
||||||
type RowDataItem = {
|
|
||||||
title: string,
|
|
||||||
link?: string,
|
|
||||||
help?: any,
|
|
||||||
options?: {},
|
|
||||||
};
|
|
||||||
|
|
||||||
function HomePage(props: Props) {
|
function HomePage(props: Props) {
|
||||||
const { followedTags, subscribedChannels, authenticated } = props;
|
const { followedTags, subscribedChannels, authenticated } = props;
|
||||||
const showPersonalizedChannels = (authenticated || !IS_WEB) && subscribedChannels && subscribedChannels.length > 0;
|
const showPersonalizedChannels = (authenticated || !IS_WEB) && subscribedChannels && subscribedChannels.length > 0;
|
||||||
|
@ -52,9 +46,10 @@ function HomePage(props: Props) {
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{rowData.map(({ title, link, help, options = {} }) => (
|
{rowData.map(({ title, link, icon, help, options = {} }) => (
|
||||||
<div key={title} className="claim-grid__wrapper">
|
<div key={title} className="claim-grid__wrapper">
|
||||||
<h1 className="section__actions">
|
<h1 className="claim-grid__header">
|
||||||
|
{icon}
|
||||||
<span className="claim-grid__title">{title}</span>
|
<span className="claim-grid__title">{title}</span>
|
||||||
{help}
|
{help}
|
||||||
</h1>
|
</h1>
|
||||||
|
|
|
@ -301,11 +301,23 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.claim-grid__title {
|
.claim-grid__header {
|
||||||
|
@extend .section__actions;
|
||||||
margin-bottom: var(--spacing-m);
|
margin-bottom: var(--spacing-m);
|
||||||
|
|
||||||
|
.icon__wrapper {
|
||||||
|
height: 2rem;
|
||||||
|
width: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.claim-grid__title {
|
||||||
|
margin-bottom: var(--spacing-m);
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: var(--font-large);
|
||||||
|
|
||||||
&:not(:first-of-type) {
|
&:not(:first-of-type) {
|
||||||
margin-top: var(--spacing-xl);
|
margin-top: var(--spacing-m);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,16 +1,21 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
import type { Node } from 'react';
|
||||||
import * as PAGES from 'constants/pages';
|
import * as PAGES from 'constants/pages';
|
||||||
|
import * as ICONS from 'constants/icons';
|
||||||
import * as CS from 'constants/claim_search';
|
import * as CS from 'constants/claim_search';
|
||||||
|
import React from 'react';
|
||||||
import { parseURI } from 'lbry-redux';
|
import { parseURI } from 'lbry-redux';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import { toCapitalCase } from 'util/string';
|
import { toCapitalCase } from 'util/string';
|
||||||
import { useIsLargeScreen } from 'effects/use-screensize';
|
import { useIsLargeScreen } from 'effects/use-screensize';
|
||||||
|
import Icon from 'component/common/icon';
|
||||||
|
|
||||||
type RowDataItem = {
|
export type RowDataItem = {
|
||||||
title: string,
|
title: string,
|
||||||
link?: string,
|
link?: string,
|
||||||
help?: any,
|
help?: any,
|
||||||
options?: {},
|
options?: {},
|
||||||
|
icon?: Node,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function GetHomePageRowData(
|
export default function GetHomePageRowData(
|
||||||
|
@ -151,6 +156,7 @@ export default function GetHomePageRowData(
|
||||||
const RECENT_FROM_FOLLOWING = {
|
const RECENT_FROM_FOLLOWING = {
|
||||||
title: __('Recent From Following'),
|
title: __('Recent From Following'),
|
||||||
link: `/$/${PAGES.CHANNELS_FOLLOWING}`,
|
link: `/$/${PAGES.CHANNELS_FOLLOWING}`,
|
||||||
|
icon: <Icon sectionIcon icon={ICONS.SUBSCRIBE} size={14} />,
|
||||||
options: {
|
options: {
|
||||||
orderBy: ['release_time'],
|
orderBy: ['release_time'],
|
||||||
releaseTime:
|
releaseTime:
|
||||||
|
@ -228,6 +234,8 @@ export default function GetHomePageRowData(
|
||||||
const TRENDING_FOR_TAGS = {
|
const TRENDING_FOR_TAGS = {
|
||||||
title: __('Trending For Your Tags'),
|
title: __('Trending For Your Tags'),
|
||||||
link: `/$/${PAGES.TAGS_FOLLOWING}`,
|
link: `/$/${PAGES.TAGS_FOLLOWING}`,
|
||||||
|
icon: <Icon sectionIcon icon={ICONS.TAG} size={14} />,
|
||||||
|
|
||||||
options: {
|
options: {
|
||||||
pageSize: getPageSize(4),
|
pageSize: getPageSize(4),
|
||||||
tags: followedTags.map(tag => tag.name),
|
tags: followedTags.map(tag => tag.name),
|
||||||
|
|
Loading…
Reference in a new issue