add back invite guide

This commit is contained in:
Sean Yesmunt 2019-04-19 17:15:41 -04:00
parent 4e97858d59
commit 7c852b30b8
9 changed files with 44 additions and 33 deletions

View file

@ -1,9 +1,11 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { selectUnreadAmount } from 'redux/selectors/subscriptions'; import { selectUnreadAmount } from 'redux/selectors/subscriptions';
import { selectShouldShowInviteGuide } from 'redux/selectors/app';
import SideBar from './view'; import SideBar from './view';
const select = state => ({ const select = state => ({
unreadSubscriptionTotal: selectUnreadAmount(state), unreadSubscriptionTotal: selectUnreadAmount(state),
shouldShowInviteGuide: selectShouldShowInviteGuide(state),
}); });
const perform = () => ({}); const perform = () => ({});

View file

@ -6,37 +6,46 @@ import Button from 'component/button';
import classnames from 'classnames'; import classnames from 'classnames';
import Tooltip from 'component/common/tooltip'; import Tooltip from 'component/common/tooltip';
type SideBarLink = {
label: string,
path: string,
active: boolean,
icon: ?string,
subLinks: Array<SideBarLink>,
guide: ?string,
};
type Props = { type Props = {
unreadSubscriptionTotal: number, unreadSubscriptionTotal: number,
shouldShowInviteGuide: string,
}; };
class SideBar extends React.PureComponent<Props> { class SideBar extends React.PureComponent<Props> {
render() { render() {
const { unreadSubscriptionTotal } = this.props; const { unreadSubscriptionTotal, shouldShowInviteGuide } = this.props;
const buildLink = (path, label, icon) => ({ const buildLink = (path, label, icon, guide) => ({
navigate: path ? `$/${path}` : '/', navigate: path ? `$/${path}` : '/',
label, label,
icon, icon,
guide,
}); });
const renderLink = (linkProps, index) => ( const renderLink = (linkProps, index) => {
<li key={index}> const { guide } = linkProps;
const inner = (
<Button <Button
{...linkProps} {...linkProps}
className="navigation__link" className={classnames('navigation__link', {
'navigation__link--guide': guide,
})}
activeClass="navigation__link--active" activeClass="navigation__link--active"
/> />
</li> );
);
return (
<li key={index}>
{guide ? (
<Tooltip key={guide} alwaysVisible direction="right" body={guide}>
{inner}
</Tooltip>
) : (
inner
)}
</li>
);
};
return ( return (
<nav className="navigation"> <nav className="navigation">
@ -70,7 +79,12 @@ class SideBar extends React.PureComponent<Props> {
...buildLink(PAGES.ACCOUNT, 'Overview', ICONS.ACCOUNT), ...buildLink(PAGES.ACCOUNT, 'Overview', ICONS.ACCOUNT),
}, },
{ {
...buildLink(PAGES.INVITE, 'Invite', ICONS.INVITE), ...buildLink(
PAGES.INVITE,
'Invite',
ICONS.INVITE,
shouldShowInviteGuide && __('Check this out!')
),
}, },
{ {
...buildLink(PAGES.REWARDS, 'Rewards', ICONS.FEATURED), ...buildLink(PAGES.REWARDS, 'Rewards', ICONS.FEATURED),

View file

@ -138,3 +138,11 @@ export const selectSearchOptionsExpanded = createSelector(
selectState, selectState,
state => state.searchOptionsExpanded state => state.searchOptionsExpanded
); );
export const selectShouldShowInviteGuide = createSelector(
makeSelectClientSetting(SETTINGS.FIRST_RUN_COMPLETED),
makeSelectClientSetting(SETTINGS.INVITE_ACKNOWLEDGED),
(firstRunCompleted, inviteAcknowledged) => {
return firstRunCompleted ? !inviteAcknowledged : false;
}
);

View file

@ -28,7 +28,6 @@
@import 'component/markdown-editor'; @import 'component/markdown-editor';
@import 'component/markdown-preview'; @import 'component/markdown-preview';
@import 'component/media'; @import 'component/media';
@import 'component/menu';
@import 'component/modal'; @import 'component/modal';
@import 'component/navigation'; @import 'component/navigation';
@import 'component/notice'; @import 'component/notice';

View file

@ -7,6 +7,7 @@
.banner--first-run { .banner--first-run {
height: 310px; height: 310px;
padding-right: var(--spacing-vertical-medium);
// Adjust this class inside other `.banner--xxx` styles for control over animation // Adjust this class inside other `.banner--xxx` styles for control over animation
.banner__item--static-for-animation { .banner__item--static-for-animation {

View file

@ -6,7 +6,6 @@
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
z-index: 1;
html[data-mode='dark'] & { html[data-mode='dark'] & {
border: 1px solid rgba($lbry-gray-1, 0.3); border: 1px solid rgba($lbry-gray-1, 0.3);

View file

@ -1,10 +0,0 @@
.menu-container {
display: inline-block;
.menu {
padding-top: var(--spacing-vertical-medium);
position: absolute;
white-space: nowrap;
z-index: 1;
}
}

View file

@ -4,12 +4,13 @@
height: calc(100vh - var(--header-height)); height: calc(100vh - var(--header-height));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: overlay; overflow: visible;
background-color: $lbry-white; background-color: $lbry-white;
border-right: 1px solid rgba($lbry-gray-1, 0.9); border-right: 1px solid rgba($lbry-gray-1, 0.9);
padding-top: var(--spacing-vertical-large); padding-top: var(--spacing-vertical-large);
padding-right: var(--spacing-vertical-small); padding-right: var(--spacing-vertical-small);
font-size: 1.2rem; font-size: 1.2rem;
z-index: 2;
html[data-mode='dark'] & { html[data-mode='dark'] & {
background-color: $lbry-black; background-color: $lbry-black;
@ -41,7 +42,6 @@
); );
content: ''; content: '';
position: absolute; position: absolute;
z-index: 0;
html[data-mode='dark'] & { html[data-mode='dark'] & {
background-image: linear-gradient( background-image: linear-gradient(

View file

@ -3,8 +3,6 @@
position: relative; position: relative;
.tooltip__body { .tooltip__body {
z-index: 2;
visibility: hidden; visibility: hidden;
} }