feat: show guided tooltip to invite page on first run
This commit is contained in:
parent
919bd4c934
commit
21661fce85
17 changed files with 346 additions and 250 deletions
|
@ -9,6 +9,7 @@ type Props = {
|
|||
icon?: boolean,
|
||||
direction: string,
|
||||
onComponent?: boolean, // extra padding to account for button/form field size
|
||||
alwaysVisible?: boolean, // should tooltip stay open, guide callbacks will close it manually
|
||||
};
|
||||
|
||||
type State = {
|
||||
|
@ -18,6 +19,7 @@ type State = {
|
|||
class ToolTip extends React.PureComponent<Props, State> {
|
||||
static defaultProps = {
|
||||
direction: 'bottom',
|
||||
alwaysVisible: false,
|
||||
};
|
||||
|
||||
constructor(props: Props) {
|
||||
|
@ -88,7 +90,7 @@ class ToolTip extends React.PureComponent<Props, State> {
|
|||
|
||||
render() {
|
||||
const { direction } = this.state;
|
||||
const { children, label, body, icon, onComponent } = this.props;
|
||||
const { children, label, body, icon, onComponent, alwaysVisible } = this.props;
|
||||
|
||||
const tooltipContent = children || label;
|
||||
const bodyLength = body.length;
|
||||
|
@ -106,6 +108,7 @@ class ToolTip extends React.PureComponent<Props, State> {
|
|||
'tooltip--bottom': direction === 'bottom',
|
||||
'tooltip--left': direction === 'left',
|
||||
'tooltip--on-component': onComponent,
|
||||
'tooltip--always-visible': alwaysVisible,
|
||||
})}
|
||||
>
|
||||
{tooltipContent}
|
||||
|
@ -113,7 +116,7 @@ class ToolTip extends React.PureComponent<Props, State> {
|
|||
ref={ref => {
|
||||
this.tooltip = ref;
|
||||
}}
|
||||
className={classnames('tooltip__body', {
|
||||
className={classnames('card tooltip__body', {
|
||||
'tooltip__body--short': isShortDescription,
|
||||
})}
|
||||
>
|
||||
|
|
36
src/renderer/component/common/yrbl.jsx
Normal file
36
src/renderer/component/common/yrbl.jsx
Normal file
|
@ -0,0 +1,36 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import Native from 'native';
|
||||
|
||||
type Props = {
|
||||
title: string,
|
||||
subtitle: string,
|
||||
type: string,
|
||||
};
|
||||
|
||||
const yrblTypes = {
|
||||
happy: 'gerbil-happy.png',
|
||||
sad: 'gerbil-sad.png',
|
||||
};
|
||||
|
||||
export default class extends React.PureComponent<Props> {
|
||||
static defaultProps = {
|
||||
type: 'happy',
|
||||
};
|
||||
|
||||
render() {
|
||||
const { title, subtitle, type } = this.props;
|
||||
|
||||
const image = yrblTypes[type];
|
||||
|
||||
return (
|
||||
<div className="yrbl-wrap">
|
||||
<img alt="Friendly gerbil" className="yrbl" src={Native.imagePath(image)} />
|
||||
<div className="card__content">
|
||||
<h2 className="card__title">{title}</h2>
|
||||
<p className="card__subtitle">{subtitle}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -3,6 +3,7 @@ import * as ICONS from 'constants/icons';
|
|||
import React from 'react';
|
||||
import Icon from 'component/common/icon';
|
||||
import RewardLink from 'component/rewardLink';
|
||||
import Yrbl from 'component/common/yrbl';
|
||||
import { rewards } from 'lbryinc';
|
||||
|
||||
type Props = {
|
||||
|
@ -22,6 +23,18 @@ class InviteList extends React.PureComponent<Props> {
|
|||
return null;
|
||||
}
|
||||
|
||||
if (!invitees.length) {
|
||||
return (
|
||||
<Yrbl
|
||||
type="happy"
|
||||
title={__('Power To The People')}
|
||||
subtitle={__(
|
||||
'LBRY is powered by the users. More users, more power… and with great power comes great responsibility.'
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="card card--section">
|
||||
<header className="card__header">
|
||||
|
@ -29,43 +42,37 @@ class InviteList extends React.PureComponent<Props> {
|
|||
</header>
|
||||
|
||||
<div className="card__content">
|
||||
{invitees.length === 0 && (
|
||||
<span className="empty">{__("You haven't invited anyone.")} </span>
|
||||
)}
|
||||
{invitees.length > 0 && (
|
||||
<table className="table table--stretch">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{__('Invitee Email')}</th>
|
||||
<th className="text-center">{__('Invite Status')}</th>
|
||||
<th className="text-center">{__('Reward')}</th>
|
||||
<table className="table table--stretch">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{__('Invitee Email')}</th>
|
||||
<th className="text-center">{__('Invite Status')}</th>
|
||||
<th className="text-center">{__('Reward')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{invitees.map(invitee => (
|
||||
<tr key={invitee.email}>
|
||||
<td>{invitee.email}</td>
|
||||
<td className="text-center">
|
||||
{invitee.invite_accepted ? (
|
||||
<Icon icon={ICONS.COMPLETED} />
|
||||
) : (
|
||||
<span className="empty">{__('unused')}</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-center">
|
||||
{invitee.invite_reward_claimed && <Icon icon={ICONS.COMPLETED} />}
|
||||
{!invitee.invite_reward_claimed && invitee.invite_reward_claimable ? (
|
||||
<RewardLink label={__('claim')} reward_type={rewards.TYPE_REFERRAL} />
|
||||
) : (
|
||||
<span className="empty">{__('unclaimable')}</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{invitees.map(invitee => (
|
||||
<tr key={invitee.email}>
|
||||
<td>{invitee.email}</td>
|
||||
<td className="text-center">
|
||||
{invitee.invite_accepted ? (
|
||||
<Icon icon={ICONS.COMPLETED} />
|
||||
) : (
|
||||
<span className="empty">{__('unused')}</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-center">
|
||||
{invitee.invite_reward_claimed ? (
|
||||
<Icon icon={ICONS.COMPLETED} />
|
||||
) : invitee.invite_reward_claimable ? (
|
||||
<RewardLink label={__('claim')} reward_type={rewards.TYPE_REFERRAL} />
|
||||
) : (
|
||||
<span className="empty">{__('unclaimable')}</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div className="help">
|
||||
{__(
|
||||
|
|
|
@ -1,12 +1,20 @@
|
|||
// I'll come back to this
|
||||
/* eslint-disable */
|
||||
// @flow
|
||||
/* eslint-disable react/no-multi-comp */
|
||||
import React from 'react';
|
||||
import BusyIndicator from 'component/common/busy-indicator';
|
||||
import CreditAmount from 'component/common/credit-amount';
|
||||
import Button from 'component/button';
|
||||
import { Form, FormRow, FormField, Submit } from 'component/common/form';
|
||||
|
||||
class FormInviteNew extends React.PureComponent {
|
||||
type FormProps = {
|
||||
inviteNew: string => void,
|
||||
errorMessage: ?string,
|
||||
isPending: boolean,
|
||||
};
|
||||
|
||||
type FormState = {
|
||||
email: string,
|
||||
};
|
||||
|
||||
class FormInviteNew extends React.PureComponent<FormProps, FormState> {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
|
@ -14,7 +22,7 @@ class FormInviteNew extends React.PureComponent {
|
|||
email: '',
|
||||
};
|
||||
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
(this: any).handleSubmit = this.handleSubmit.bind(this);
|
||||
}
|
||||
|
||||
handleEmailChanged(event) {
|
||||
|
@ -56,16 +64,16 @@ class FormInviteNew extends React.PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
class InviteNew extends React.PureComponent {
|
||||
type Props = {
|
||||
errorMessage: ?string,
|
||||
inviteNew: string => void,
|
||||
isPending: boolean,
|
||||
rewardAmount: number,
|
||||
};
|
||||
|
||||
class InviteNew extends React.PureComponent<Props> {
|
||||
render() {
|
||||
const {
|
||||
errorMessage,
|
||||
invitesRemaining,
|
||||
inviteNew,
|
||||
inviteStatusIsPending,
|
||||
isPending,
|
||||
rewardAmount,
|
||||
} = this.props;
|
||||
const { errorMessage, inviteNew, isPending, rewardAmount } = this.props;
|
||||
|
||||
return (
|
||||
<section className="card card--section">
|
||||
|
@ -73,18 +81,10 @@ class InviteNew extends React.PureComponent {
|
|||
<h2 className="card__title">{__('Invite a Friend')}</h2>
|
||||
|
||||
<p className="card__subtitle">
|
||||
{__("Or an enemy. Or your cousin Jerry, who you're kind of unsure about.")}
|
||||
{__('When your friends start using LBRY, the network gets stronger!')}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/*
|
||||
<div className="card__content">
|
||||
{invitesRemaining > 0 &&
|
||||
<p>{__("You have %s invites remaining.", invitesRemaining)}</p>}
|
||||
{invitesRemaining <= 0 &&
|
||||
<p className="empty">{__("You have no invites.")}</p>}
|
||||
</div> */}
|
||||
|
||||
<div className="card__content">
|
||||
<FormInviteNew
|
||||
errorMessage={errorMessage}
|
||||
|
@ -106,4 +106,4 @@ class InviteNew extends React.PureComponent {
|
|||
}
|
||||
|
||||
export default InviteNew;
|
||||
/* eslint-enable */
|
||||
/* eslint-enable react/no-multi-comp */
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { connect } from 'react-redux';
|
||||
import { selectCurrentPage, selectCurrentParams } from 'lbry-redux';
|
||||
import { selectCurrentPage, selectCurrentParams, doToast } from 'lbry-redux';
|
||||
import { doOpenModal } from 'redux/actions/app';
|
||||
import Router from './view';
|
||||
|
||||
|
@ -10,5 +10,5 @@ const select = state => ({
|
|||
|
||||
export default connect(
|
||||
select,
|
||||
{ doOpenModal }
|
||||
{ doOpenModal, doToast }
|
||||
)(Router);
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
import * as React from 'react';
|
||||
import Button from 'component/button';
|
||||
import classnames from 'classnames';
|
||||
import Tooltip from 'component/common/tooltip';
|
||||
|
||||
type SideBarLink = {
|
||||
label: string,
|
||||
|
@ -9,6 +10,7 @@ type SideBarLink = {
|
|||
active: boolean,
|
||||
icon: ?string,
|
||||
subLinks: Array<SideBarLink>,
|
||||
guide: ?string,
|
||||
};
|
||||
|
||||
type Props = {
|
||||
|
@ -19,71 +21,86 @@ type Props = {
|
|||
unreadSubscriptionTotal: number,
|
||||
};
|
||||
|
||||
const SideBar = (props: Props) => {
|
||||
const { navLinks, unreadSubscriptionTotal } = props;
|
||||
class SideBar extends React.PureComponent<Props> {
|
||||
renderNavLink(navLink: SideBarLink) {
|
||||
const { label, path, active, subLinks = [], icon, guide } = navLink;
|
||||
|
||||
return (
|
||||
<nav className="navigation">
|
||||
<div className="navigation__links">
|
||||
{navLinks.primary.map(({ label, path, active, icon }) => (
|
||||
<Button
|
||||
icon={icon}
|
||||
className={classnames('navigation__link', {
|
||||
'navigation__link--active': active,
|
||||
})}
|
||||
key={path}
|
||||
label={
|
||||
path === '/subscriptions' && unreadSubscriptionTotal
|
||||
? `${label} (${unreadSubscriptionTotal})`
|
||||
: label
|
||||
}
|
||||
navigate={path}
|
||||
/>
|
||||
))}
|
||||
const inner = (
|
||||
<li
|
||||
className={classnames('navigation__link', {
|
||||
'navigation__link--active': active,
|
||||
})}
|
||||
key={label}
|
||||
>
|
||||
<Button icon={icon} label={label} navigate={path} />
|
||||
|
||||
<ul>
|
||||
<li className="navigation__link navigation__link--title">Account</li>
|
||||
{
|
||||
// The sublinks should be animated on open close
|
||||
// Removing it because the current implementation with CSSTransitionGroup
|
||||
// was really slow and looked pretty bad. Possible fix is upgrading to v2
|
||||
// Not sure if that has better performance
|
||||
}
|
||||
{!!subLinks.length &&
|
||||
active && (
|
||||
<ul key="0" className="navigation__link-items">
|
||||
{subLinks.map(({ active: subLinkActive, label: subLabel, path: subPath }) => (
|
||||
<li
|
||||
className={classnames('navigation__link-item', {
|
||||
'navigation__link-item--active': subLinkActive,
|
||||
})}
|
||||
key={subPath}
|
||||
>
|
||||
{subPath ? (
|
||||
<Button label={subLabel} navigate={subPath} />
|
||||
) : (
|
||||
<span>{subLabel}</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
|
||||
{navLinks.secondary.map(({ label, path, active, subLinks = [], icon }) => (
|
||||
<li
|
||||
return guide ? (
|
||||
<Tooltip key={guide} alwaysVisible direction="right" body={guide}>
|
||||
{inner}
|
||||
</Tooltip>
|
||||
) : (
|
||||
inner
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { navLinks, unreadSubscriptionTotal } = this.props;
|
||||
|
||||
return (
|
||||
<nav className="navigation">
|
||||
<div className="navigation__links">
|
||||
{navLinks.primary.map(({ label, path, active, icon }) => (
|
||||
<Button
|
||||
icon={icon}
|
||||
className={classnames('navigation__link', {
|
||||
'navigation__link--active': active,
|
||||
})}
|
||||
key={label}
|
||||
>
|
||||
<Button icon={icon} label={label} navigate={path} />
|
||||
|
||||
{
|
||||
// The sublinks should be animated on open close
|
||||
// Removing it because the current implementation with CSSTransitionGroup
|
||||
// was really slow and looked pretty bad. Possible fix is upgrading to v2
|
||||
// Not sure if that has better performance
|
||||
key={path}
|
||||
label={
|
||||
path === '/subscriptions' && unreadSubscriptionTotal
|
||||
? `${label} (${unreadSubscriptionTotal})`
|
||||
: label
|
||||
}
|
||||
{!!subLinks.length &&
|
||||
active && (
|
||||
<ul key="0" className="navigation__link-items">
|
||||
{subLinks.map(({ active: subLinkActive, label: subLabel, path: subPath }) => (
|
||||
<li
|
||||
className={classnames('navigation__link-item', {
|
||||
'navigation__link-item--active': subLinkActive,
|
||||
})}
|
||||
key={subPath}
|
||||
>
|
||||
{subPath ? (
|
||||
<Button label={subLabel} navigate={subPath} />
|
||||
) : (
|
||||
<span>{subLabel}</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
navigate={path}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
<ul>
|
||||
<li className="navigation__link navigation__link--title">Account</li>
|
||||
{navLinks.secondary.map(this.renderNavLink)}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default SideBar;
|
||||
|
|
20
src/renderer/constants/pages.js
Normal file
20
src/renderer/constants/pages.js
Normal file
|
@ -0,0 +1,20 @@
|
|||
export const AUTH = 'auth';
|
||||
export const BACKUP = 'backup';
|
||||
export const CHANNEL = 'channel';
|
||||
export const DISCOVER = 'discover';
|
||||
export const DOWNLOADED = 'downloaded';
|
||||
export const HELP = 'help';
|
||||
export const HISTORY = 'history';
|
||||
export const INVITE = 'invite';
|
||||
export const PUBLISH = 'publish';
|
||||
export const PUBLISHED = 'published';
|
||||
export const GET_CREDITS = 'getcredits';
|
||||
export const REPORT = 'report';
|
||||
export const REWARDS = 'rewards';
|
||||
export const SEND = 'send';
|
||||
export const SETTINGS = 'settings';
|
||||
export const SHOW = 'show';
|
||||
export const WALLET = 'wallet';
|
||||
export const SUBSCRIPTIONS = 'subscriptions';
|
||||
export const SEARCH = 'search';
|
||||
export const USER_HISTORY = 'user_history';
|
|
@ -4,6 +4,7 @@ export const CREDIT_REQUIRED_ACKNOWLEDGED = 'credit_required_acknowledged';
|
|||
export const NEW_USER_ACKNOWLEDGED = 'welcome_acknowledged';
|
||||
export const EMAIL_COLLECTION_ACKNOWLEDGED = 'email_collection_acknowledged';
|
||||
export const FIRST_RUN_COMPLETED = 'first_run_completed';
|
||||
export const INVITE_ACKNOWLEDGED = 'invite_acknowledged';
|
||||
export const LANGUAGE = 'language';
|
||||
export const SHOW_NSFW = 'showNsfw';
|
||||
export const SHOW_UNAVAILABLE = 'showUnavailable';
|
||||
|
|
|
@ -1,18 +1,23 @@
|
|||
import * as SETTINGS from 'constants/settings';
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
doFetchInviteStatus,
|
||||
selectUserInviteStatusFailed,
|
||||
selectUserInviteStatusIsPending,
|
||||
} from 'lbryinc';
|
||||
import { makeSelectClientSetting } from 'redux/selectors/settings';
|
||||
import { doSetClientSetting } from 'redux/actions/settings';
|
||||
import InvitePage from './view';
|
||||
|
||||
const select = state => ({
|
||||
isFailed: selectUserInviteStatusFailed(state),
|
||||
isPending: selectUserInviteStatusIsPending(state),
|
||||
inviteAcknowledged: makeSelectClientSetting(state)(SETTINGS.INVITE_ACKNOWLEDGED),
|
||||
});
|
||||
|
||||
const perform = dispatch => ({
|
||||
fetchInviteStatus: () => dispatch(doFetchInviteStatus()),
|
||||
acknowledgeInivte: () => dispatch(doSetClientSetting(SETTINGS.INVITE_ACKNOWLEDGED, true)),
|
||||
});
|
||||
|
||||
export default connect(
|
||||
|
|
|
@ -1,12 +1,26 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import BusyIndicator from 'component/common/busy-indicator';
|
||||
import InviteNew from 'component/inviteNew';
|
||||
import InviteList from 'component/inviteList';
|
||||
import Page from 'component/page';
|
||||
|
||||
class InvitePage extends React.PureComponent {
|
||||
componentWillMount() {
|
||||
this.props.fetchInviteStatus();
|
||||
type Props = {
|
||||
isPending: boolean,
|
||||
isFailed: boolean,
|
||||
inviteAcknowledged: boolean,
|
||||
acknowledgeInivte: () => void,
|
||||
fetchInviteStatus: () => void,
|
||||
};
|
||||
|
||||
class InvitePage extends React.PureComponent<Props> {
|
||||
componentDidMount() {
|
||||
const { fetchInviteStatus, inviteAcknowledged, acknowledgeInivte } = this.props;
|
||||
fetchInviteStatus();
|
||||
|
||||
if (!inviteAcknowledged) {
|
||||
acknowledgeInivte();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
@ -43,17 +43,18 @@ export default (props: Props) => {
|
|||
<Button button="primary" label={__('Explore')} onClick={doShowSuggestedSubs} />
|
||||
</div>
|
||||
)}
|
||||
{showSuggested && numberOfSubscriptions > 0 && (
|
||||
<div className="card__actions">
|
||||
<Button
|
||||
button="primary"
|
||||
onClick={onFinish}
|
||||
label={`${__('View your')} ${numberOfSubscriptions} ${
|
||||
numberOfSubscriptions > 1 ? __('subscribed channels') : __('subscribed channel')
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{showSuggested &&
|
||||
numberOfSubscriptions > 0 && (
|
||||
<div className="card__actions">
|
||||
<Button
|
||||
button="primary"
|
||||
onClick={onFinish}
|
||||
label={`${__('View your')} ${numberOfSubscriptions} ${
|
||||
numberOfSubscriptions > 1 ? __('subscribed channels') : __('subscribed channel')
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{showSuggested && !loadingSuggested && <SuggestedSubscriptions />}
|
||||
|
|
|
@ -9,10 +9,10 @@ import FileList from 'component/fileList';
|
|||
import { FormField } from 'component/common/form';
|
||||
import FileCard from 'component/fileCard';
|
||||
import { parseURI } from 'lbry-redux';
|
||||
import Native from 'native';
|
||||
import SuggestedSubscriptions from 'component/subscribeSuggested';
|
||||
import MarkAsRead from 'component/subscribeMarkAsRead';
|
||||
import Tooltip from 'component/common/tooltip';
|
||||
import Yrbl from 'component/common/yrbl';
|
||||
|
||||
type Props = {
|
||||
viewMode: ViewMode,
|
||||
|
@ -79,17 +79,11 @@ export default (props: Props) => {
|
|||
|
||||
{!hasSubscriptions && (
|
||||
<Fragment>
|
||||
<div className="yrbl-wrap">
|
||||
<img
|
||||
alt="Sad gerbil"
|
||||
className="subscriptions__gerbil"
|
||||
src={Native.imagePath('gerbil-sad.png')}
|
||||
/>
|
||||
<div className="card__content">
|
||||
<h2 className="card__title">{__('Oh no! What happened to your subscriptions?')}</h2>
|
||||
<p className="card__subtitle">{__('These channels look pretty cool.')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Yrbl
|
||||
type="sad"
|
||||
title={__('Oh no! What happened to your subscriptions?')}
|
||||
subtitle={__('These channels look pretty cool.')}
|
||||
/>
|
||||
<SuggestedSubscriptions />
|
||||
</Fragment>
|
||||
)}
|
||||
|
@ -133,17 +127,10 @@ export default (props: Props) => {
|
|||
})
|
||||
) : (
|
||||
<Fragment>
|
||||
<div className="yrbl-wrap">
|
||||
<img
|
||||
alt="Friendly gerbil"
|
||||
className="subscriptions__gerbil"
|
||||
src={Native.imagePath('gerbil-happy.png')}
|
||||
/>
|
||||
<div className="card__content">
|
||||
<h2 className="card__title">{__('All caught up!')}</h2>
|
||||
<p className="card__subtitle">{__('You might like the channels below.')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Yrbl
|
||||
title={__('All caught up!')}
|
||||
subtitle={__('You might like the channels below.')}
|
||||
/>
|
||||
<SuggestedSubscriptions />
|
||||
</Fragment>
|
||||
)}
|
||||
|
|
|
@ -25,6 +25,7 @@ const defaultState = {
|
|||
SETTINGS.EMAIL_COLLECTION_ACKNOWLEDGED,
|
||||
false
|
||||
),
|
||||
[SETTINGS.INVITE_ACKNOWLEDGED]: getLocalStorageSetting(SETTINGS.INVITE_ACKNOWLEDGED, false),
|
||||
[SETTINGS.FIRST_RUN_COMPLETED]: getLocalStorageSetting(SETTINGS.FIRST_RUN_COMPLETED, false),
|
||||
[SETTINGS.CREDIT_REQUIRED_ACKNOWLEDGED]: false, // this needs to be re-acknowledged every run
|
||||
[SETTINGS.LANGUAGE]: getLocalStorageSetting(SETTINGS.LANGUAGE, 'en'),
|
||||
|
|
|
@ -1,6 +1,9 @@
|
|||
import * as SETTINGS from 'constants/settings';
|
||||
import * as PAGES from 'constants/pages';
|
||||
import * as ICONS from 'constants/icons';
|
||||
import { createSelector } from 'reselect';
|
||||
import { selectCurrentPage, selectHistoryStack } from 'lbry-redux';
|
||||
import * as icons from 'constants/icons';
|
||||
import { makeSelectClientSetting } from 'redux/selectors/settings';
|
||||
|
||||
export const selectState = state => state.app || {};
|
||||
|
||||
|
@ -97,15 +100,29 @@ export const selectUpgradeTimer = createSelector(selectState, state => state.che
|
|||
export const selectNavLinks = createSelector(
|
||||
selectCurrentPage,
|
||||
selectHistoryStack,
|
||||
(currentPage, historyStack) => {
|
||||
const isWalletPage = page =>
|
||||
page === 'wallet' ||
|
||||
page === 'send' ||
|
||||
page === 'getcredits' ||
|
||||
page === 'rewards' ||
|
||||
page === 'history' ||
|
||||
page === 'backup';
|
||||
makeSelectClientSetting(SETTINGS.FIRST_RUN_COMPLETED),
|
||||
makeSelectClientSetting(SETTINGS.INVITE_ACKNOWLEDGED),
|
||||
(currentPage, historyStack, firstRunCompleted, inviteAcknowledged) => {
|
||||
// Determine if any links should show a tooltip for a guided tour
|
||||
// It will only show one at a time, in the order they are set.
|
||||
const guidedTourItem = [
|
||||
{
|
||||
page: PAGES.INVITE,
|
||||
hasBeenCompleted: inviteAcknowledged,
|
||||
guide: 'Check this out!',
|
||||
},
|
||||
// Add more items below for tooltip guides that will happen after a user has completed the invite guide
|
||||
].filter(({ hasBeenCompleted }) => !hasBeenCompleted)[0];
|
||||
|
||||
const isWalletPage = page =>
|
||||
page === PAGES.WALLET ||
|
||||
page === PAGES.SEND ||
|
||||
page === PAGES.GET_CREDITS ||
|
||||
page === PAGES.REWARDS ||
|
||||
page === PAGES.HISTORY ||
|
||||
page === PAGES.BACKUP;
|
||||
|
||||
const isCurrentlyWalletPage = isWalletPage(currentPage);
|
||||
const previousStack = historyStack.slice().reverse();
|
||||
|
||||
const getPreviousSubLinkPath = checkIfValidPage => {
|
||||
|
@ -124,107 +141,92 @@ export const selectNavLinks = createSelector(
|
|||
|
||||
// Gets the last active sublink in a section
|
||||
const getActiveSublink = category => {
|
||||
if (category === 'wallet') {
|
||||
if (category === PAGES.WALLET) {
|
||||
const previousPath = getPreviousSubLinkPath(isWalletPage);
|
||||
return previousPath || '/wallet';
|
||||
return previousPath || `/${PAGES.WALLET}`;
|
||||
}
|
||||
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const isCurrentlyWalletPage = isWalletPage(currentPage);
|
||||
// Is this path the first unacknowledged item in the guided tour list
|
||||
const getGuideIfNecessary = page => {
|
||||
if (!firstRunCompleted) {
|
||||
return null;
|
||||
}
|
||||
return guidedTourItem && guidedTourItem.page === page ? guidedTourItem.guide : null;
|
||||
};
|
||||
|
||||
const buildLink = (label, page) => ({
|
||||
label,
|
||||
path: `/${page}`,
|
||||
active: currentPage === page,
|
||||
guide: getGuideIfNecessary(page),
|
||||
});
|
||||
|
||||
const walletSubLinks = [
|
||||
{
|
||||
label: 'Overview',
|
||||
path: '/wallet',
|
||||
active: currentPage === 'wallet',
|
||||
...buildLink('Overview', PAGES.WALLET),
|
||||
},
|
||||
{
|
||||
label: 'Send & Receive',
|
||||
path: '/send',
|
||||
active: currentPage === 'send',
|
||||
...buildLink('Send & Receive', PAGES.SEND),
|
||||
},
|
||||
{
|
||||
label: 'Transactions',
|
||||
path: '/history',
|
||||
active: currentPage === 'history',
|
||||
...buildLink('Transactions', PAGES.HISTORY),
|
||||
},
|
||||
{
|
||||
label: 'Get Credits',
|
||||
path: '/getcredits',
|
||||
active: currentPage === 'getcredits',
|
||||
...buildLink('Get Credits', PAGES.GET_CREDITS),
|
||||
},
|
||||
{
|
||||
label: 'Rewards',
|
||||
path: '/rewards',
|
||||
active: currentPage === 'rewards',
|
||||
...buildLink('Rewards', PAGES.REWARDS),
|
||||
},
|
||||
{
|
||||
label: 'Backup',
|
||||
path: '/backup',
|
||||
active: currentPage === 'backup',
|
||||
...buildLink('Backup', PAGES.BACKUP),
|
||||
},
|
||||
];
|
||||
|
||||
const navLinks = {
|
||||
primary: [
|
||||
{
|
||||
label: 'Explore',
|
||||
path: '/discover',
|
||||
active: currentPage === 'discover',
|
||||
icon: icons.HOME,
|
||||
...buildLink('Explore', PAGES.DISCOVER),
|
||||
icon: ICONS.HOME,
|
||||
},
|
||||
{
|
||||
label: 'Subscriptions',
|
||||
path: '/subscriptions',
|
||||
active: currentPage === 'subscriptions',
|
||||
icon: icons.SUBSCRIPTION,
|
||||
...buildLink('Subscriptions', PAGES.SUBSCRIPTIONS),
|
||||
icon: ICONS.SUBSCRIPTION,
|
||||
},
|
||||
],
|
||||
secondary: [
|
||||
{
|
||||
label: 'Wallet',
|
||||
icon: icons.WALLET,
|
||||
icon: ICONS.WALLET,
|
||||
subLinks: walletSubLinks,
|
||||
path: isCurrentlyWalletPage ? '/wallet' : getActiveSublink('wallet'),
|
||||
path: isCurrentlyWalletPage ? `/${PAGES.WALLET}` : getActiveSublink(PAGES.WALLET),
|
||||
active: isWalletPage(currentPage),
|
||||
},
|
||||
{
|
||||
label: 'Invite',
|
||||
icon: icons.INVITE,
|
||||
path: '/invite',
|
||||
active: currentPage === 'invite',
|
||||
...buildLink('Invite', PAGES.INVITE),
|
||||
icon: ICONS.INVITE,
|
||||
},
|
||||
{
|
||||
label: 'Downloads',
|
||||
icon: icons.LOCAL,
|
||||
path: '/downloaded',
|
||||
active: currentPage === 'downloaded',
|
||||
...buildLink('Downloads', PAGES.DOWNLOADED),
|
||||
icon: ICONS.LOCAL,
|
||||
},
|
||||
{
|
||||
label: 'Publishes',
|
||||
icon: icons.PUBLISHED,
|
||||
path: '/published',
|
||||
active: currentPage === 'published',
|
||||
...buildLink('Publishes', PAGES.PUBLISHED),
|
||||
icon: ICONS.PUBLISHED,
|
||||
},
|
||||
{
|
||||
label: 'History',
|
||||
icon: icons.HISTORY,
|
||||
path: '/user_history',
|
||||
active: currentPage === 'user_history',
|
||||
...buildLink('History', PAGES.USER_HISTORY),
|
||||
icon: ICONS.HISTORY,
|
||||
},
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: icons.SETTINGS,
|
||||
path: '/settings',
|
||||
active: currentPage === 'settings',
|
||||
...buildLink('Settings', PAGES.SETTINGS),
|
||||
icon: ICONS.SETTINGS,
|
||||
},
|
||||
{
|
||||
label: 'Help',
|
||||
path: '/help',
|
||||
icon: icons.HELP,
|
||||
active: currentPage === 'help',
|
||||
...buildLink('Help', PAGES.HELP),
|
||||
icon: ICONS.HELP,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
|
@ -1,23 +1,8 @@
|
|||
// The gerbil is tied to subscriptions currently, but this style should move to it's own file once
|
||||
// the gerbil is added in more places with different layouts
|
||||
.subscriptions__gerbil {
|
||||
}
|
||||
|
||||
.subscriptions__suggested {
|
||||
animation: expand 0.2s;
|
||||
left: -2rem;
|
||||
position: relative;
|
||||
width: calc(100% + 4rem);
|
||||
}
|
||||
|
||||
.yrbl-wrap {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
margin-bottom: var(--spacing-vertical-large);
|
||||
|
||||
img {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,11 +1,10 @@
|
|||
.tooltip {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
&:not(:hover) {
|
||||
.tooltip__body {
|
||||
visibility: hidden;
|
||||
}
|
||||
.tooltip__body {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
@ -15,17 +14,20 @@
|
|||
}
|
||||
|
||||
.tooltip__body {
|
||||
background-color: $lbry-gray-5;
|
||||
border-radius: 8px;
|
||||
color: $lbry-white;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: $lbry-black;
|
||||
font-weight: 400;
|
||||
padding: var(--spacing-vertical-small);
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
white-space: pre-wrap;
|
||||
width: 200px;
|
||||
z-index: 1;
|
||||
box-shadow: 5px 5px 5px rgba($lbry-black, 0.15);
|
||||
|
||||
html[data-theme='dark'] & {
|
||||
border: 1px solid #2f2f2f;
|
||||
background-color: $lbry-gray-1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 0;
|
||||
|
@ -37,12 +39,18 @@
|
|||
position: absolute;
|
||||
}
|
||||
|
||||
&--short {
|
||||
&.tooltip__body--short {
|
||||
width: 130px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip--always-visible {
|
||||
.tooltip__body {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip--bottom .tooltip__body {
|
||||
top: 90%;
|
||||
left: 50%;
|
||||
|
|
|
@ -1,10 +1,19 @@
|
|||
.yrbl-wrap {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
margin-bottom: var(--spacing-vertical-large);
|
||||
}
|
||||
|
||||
.yrbl {
|
||||
height: 300px;
|
||||
margin-right: var(--spacing-vertical-large);
|
||||
}
|
||||
|
||||
.yrbl--first-run {
|
||||
align-self: center;
|
||||
height: 200px;
|
||||
height: 250px;
|
||||
width: auto;
|
||||
margin: 0 var(--spacing-vertical-large);
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue