large claim-grid header text + optional icon

This commit is contained in:
Sean Yesmunt 2020-09-15 14:28:04 -04:00
parent 1a3e1ba003
commit c1e6e90896
8 changed files with 37 additions and 18 deletions

View file

@ -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,

View file

@ -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;

View file

@ -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]);
} }

View file

@ -44,6 +44,7 @@ const ModalFileSelection = (props: Props) => {
} }
const handleFileChange = (file?: WebFile) => { const handleFileChange = (file?: WebFile) => {
// $FlowFixMe
setSelectedFile(file); setSelectedFile(file);
}; };

View 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)

View file

@ -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>

View file

@ -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);
} }
} }

View file

@ -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),