LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Fix header profile button for no channels, use it as an icon for mobile unath instead of big login/signup buttons

Browse source
This commit is contained in:
Rafael 2021-12-21 12:09:19 -03:00 • committed by Thomas Zarebczan
parent 7001c27ed0
commit 4158b99453
3 changed files with 35 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ui/component/header/view.jsx
View file

@ -158,13 +158,13 @@ const Header = (props: Props) => {
{!hideProfile && <HeaderProfileMenuButton />} {!hideProfile && <HeaderProfileMenuButton />}
</> </>
) : ( ) : !isMobile ? (
<div className="header__authButtons"> <div className="header__authButtons">
{!isMobile && ( <Button navigate={`/$/${PAGES.AUTH_SIGNIN}`} button="link" label={__('Log In')} disabled={user === null} />
<Button navigate={`/$/${PAGES.AUTH_SIGNIN}`} button="link" label={__('Log In')} disabled={user === null} />
)}
<Button navigate={`/$/${PAGES.AUTH}`} button="primary" label={__('Sign Up')} disabled={user === null} /> <Button navigate={`/$/${PAGES.AUTH}`} button="primary" label={__('Sign Up')} disabled={user === null} />
</div> </div>
) : (
<HeaderProfileMenuButton />
)} )}
</div> </div>
); );

35
ui/component/headerProfileMenuButton/view.jsx
View file

@ -45,19 +45,30 @@ export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
)} )}
<MenuList className="menu__list--header"> <MenuList className="menu__list--header">
<HeaderMenuLink page={PAGES.UPLOADS} icon={ICONS.PUBLISH} name={__('Uploads')} /> {email ? (
<HeaderMenuLink page={PAGES.CHANNELS} icon={ICONS.CHANNEL} name={__('Channels')} /> <>
<HeaderMenuLink page={PAGES.CREATOR_DASHBOARD} icon={ICONS.ANALYTICS} name={__('Creator Analytics')} /> <HeaderMenuLink page={PAGES.UPLOADS} icon={ICONS.PUBLISH} name={__('Uploads')} />
<HeaderMenuLink page={PAGES.REWARDS} icon={ICONS.REWARDS} name={__('Rewards')} /> <HeaderMenuLink page={PAGES.CHANNELS} icon={ICONS.CHANNEL} name={__('Channels')} />
<HeaderMenuLink page={PAGES.INVITE} icon={ICONS.INVITE} name={__('Invites')} /> <HeaderMenuLink page={PAGES.CREATOR_DASHBOARD} icon={ICONS.ANALYTICS} name={__('Creator Analytics')} />
<HeaderMenuLink page={PAGES.REWARDS} icon={ICONS.REWARDS} name={__('Rewards')} />
<HeaderMenuLink page={PAGES.INVITE} icon={ICONS.INVITE} name={__('Invites')} />
<MenuItem onSelect={signOut}> <MenuItem onSelect={signOut}>
<div className="menu__link"> <div className="menu__link">
<Icon aria-hidden icon={ICONS.SIGN_OUT} /> <Icon aria-hidden icon={ICONS.SIGN_OUT} />
{__('Sign Out')} {__('Sign Out')}
</div> </div>
<span className="menu__link-help">{email}</span> <span className="menu__link-help">{email}</span>
</MenuItem> </MenuItem>
</>
) : (
<>
<HeaderMenuLink page={PAGES.AUTH_SIGNIN} icon={ICONS.SIGN_IN} name={__('Log In')} />
<HeaderMenuLink page={PAGES.AUTH} icon={ICONS.SIGN_UP} name={__('Sign Up')} />
<HeaderMenuLink page={PAGES.SETTINGS} icon={ICONS.SETTINGS} name={__('Settings')} />
<HeaderMenuLink page={PAGES.HELP} icon={ICONS.HELP} name={__('Help')} />
</>
)}
</MenuList> </MenuList>
</Menu> </Menu>
</div> </div>

13
ui/redux/selectors/app.js
View file

@ -1,5 +1,6 @@
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import { selectClaimWithId, selectMyChannelClaims, selectStakedLevelForChannelUri } from 'redux/selectors/claims'; import { selectClaimWithId, selectMyChannelClaims, selectStakedLevelForChannelUri } from 'redux/selectors/claims';
import { selectUserEmail } from 'redux/selectors/user';
export const selectState = (state) => state.app || {}; export const selectState = (state) => state.app || {};
@ -66,15 +67,17 @@ export const selectActiveChannelId = (state) => selectState(state).activeChannel
export const selectActiveChannelClaim = createSelector( export const selectActiveChannelClaim = createSelector(
(state) => selectClaimWithId(state, selectActiveChannelId(state)), // i.e. 'byId[activeChannelId]' specifically, instead of just 'byId'. (state) => selectClaimWithId(state, selectActiveChannelId(state)), // i.e. 'byId[activeChannelId]' specifically, instead of just 'byId'.
(state) => selectUserEmail(state),
selectMyChannelClaims, selectMyChannelClaims,
(activeChannelClaim, myChannelClaims) => { (activeChannelClaim, userEmail, myChannelClaims) => {
if (!activeChannelClaim || !myChannelClaims || !myChannelClaims.length) { // Null: has none. Undefined: not resolved, default state, could have or not
if (!userEmail || myChannelClaims === null) {
return null;
} else if (!activeChannelClaim || !myChannelClaims || !myChannelClaims.length) {
return undefined; return undefined;
} }
if (activeChannelClaim) { if (activeChannelClaim) return activeChannelClaim;
return activeChannelClaim;
}
const myChannelClaimsByEffectiveAmount = myChannelClaims.slice().sort((a, b) => { const myChannelClaimsByEffectiveAmount = myChannelClaims.slice().sort((a, b) => {
const effectiveAmountA = (a.meta && Number(a.meta.effective_amount)) || 0; const effectiveAmountA = (a.meta && Number(a.meta.effective_amount)) || 0;