add back invite guide
This commit is contained in:
parent
4e97858d59
commit
7c852b30b8
9 changed files with 44 additions and 33 deletions
|
@ -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 = () => ({});
|
||||||
|
|
|
@ -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),
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -1,10 +0,0 @@
|
||||||
.menu-container {
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
.menu {
|
|
||||||
padding-top: var(--spacing-vertical-medium);
|
|
||||||
position: absolute;
|
|
||||||
white-space: nowrap;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -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(
|
||||||
|
|
|
@ -3,8 +3,6 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.tooltip__body {
|
.tooltip__body {
|
||||||
z-index: 2;
|
|
||||||
|
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue