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

Fix style shift

Browse source
This commit is contained in:
Rafael 2022-05-05 07:31:56 -03:00 committed by Thomas Zarebczan
parent ca755d37b3
commit 33826ea652
2 changed files with 90 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,9 @@
// @flow
import 'scss/component/_header.scss';
// $FlowFixMe
import { Global } from '@emotion/react';
import { Menu as MuiMenu, MenuItem as MuiMenuItem } from '@mui/material';
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
@ -26,93 +29,97 @@ export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(!anchorEl ? event.currentTarget : null);
};
const handleClose = () => {
setAnchorEl(null);
};
const handleClick = (event) => setAnchorEl(!anchorEl ? event.currentTarget : null);
const handleClose = () => setAnchorEl(null);
const activeChannelUrl = activeChannelClaim && activeChannelClaim.permanent_url;
// activeChannel will be: undefined = fetching, null = nothing, or { channel claim }
const noActiveChannel = activeChannelUrl === null;
const pendingChannelFetch = !noActiveChannel && myChannelClaimIds === undefined;
return (
<div className="header__buttons">
{pendingChannelFetch ? (
<Skeleton variant="circular" animation="wave" className="header__navigationItem--iconSkeleton" />
) : (
<Button
id="basic-button"
aria-controls={open ? 'basic-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
onClick={handleClick}
className={classnames('header__navigationItem', {
'header__navigationItem--icon': !activeChannelUrl,
'header__navigationItem--profilePic': activeChannelUrl,
})}
>
{activeChannelUrl ? (
<ChannelThumbnail uri={activeChannelUrl} hideTooltip small noLazyLoad showMemberBadge />
) : (
<Icon size={18} icon={ICONS.ACCOUNT} aria-hidden />
)}
</Button>
)}
{authenticated ? (
<MuiMenu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'basic-button',
sx: { padding: 'var(--spacing-xs)' },
}}
className="menu__list--header"
sx={{ 'z-index': 2 }}
PaperProps={{ className: 'MuiMenu-list--paper' }}
>
<HeaderMenuLink useMui page={PAGES.UPLOADS} icon={ICONS.PUBLISH} name={__('Uploads')} />
<HeaderMenuLink useMui page={PAGES.CHANNELS} icon={ICONS.CHANNEL} name={__('Channels')} />
<HeaderMenuLink useMui page={PAGES.CREATOR_DASHBOARD} icon={ICONS.ANALYTICS} name={__('Creator Analytics')} />
<HeaderMenuLink useMui page={PAGES.REWARDS} icon={ICONS.REWARDS} name={__('Rewards')} />
<HeaderMenuLink useMui page={PAGES.INVITE} icon={ICONS.INVITE} name={__('Invites')} />
<HeaderMenuLink useMui page={PAGES.ODYSEE_MEMBERSHIP} icon={ICONS.UPGRADE} name={__('Odysee Premium')} />
<ChannelSelector storeSelection isHeaderMenu />
const menuProps = {
id: 'basic-menu',
anchorEl,
open,
onClose: handleClose,
MenuListProps: {
'aria-labelledby': 'basic-button',
sx: { padding: 'var(--spacing-xs)' },
},
className: 'menu__list--header',
sx: { 'z-index': 2 },
PaperProps: { className: 'MuiMenu-list--paper' },
};
<MuiMenuItem onClick={signOut} sx={{ padding: '0px' }}>
<div className="menu__link" style={{ flexDirection: 'column', alignItems: 'flex-start' }}>
<div>
<Icon aria-hidden icon={ICONS.SIGN_OUT} />
{__('Sign Out')}
</div>
<span className="menu__link-help">{email}</span>
</div>
</MuiMenuItem>
</MuiMenu>
) : (
<MuiMenu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'basic-button',
sx: { padding: 'var(--spacing-xs)' },
return (
<>
{open && (
<Global
styles={{
body: {
'overflow-y': 'scroll !important',
'padding-right': '0px !important',
},
}}
className="menu__list--header"
sx={{ 'z-index': 2 }}
PaperProps={{ className: 'MuiMenu-list--paper' }}
>
<HeaderMenuLink useMui page={PAGES.AUTH_SIGNIN} icon={ICONS.SIGN_IN} name={__('Log In')} />
<HeaderMenuLink useMui page={PAGES.AUTH} icon={ICONS.SIGN_UP} name={__('Sign Up')} />
<HeaderMenuLink useMui page={PAGES.SETTINGS} icon={ICONS.SETTINGS} name={__('Settings')} />
<HeaderMenuLink useMui page={PAGES.HELP} icon={ICONS.HELP} name={__('Help')} />
</MuiMenu>
/>
)}
</div>
<div className="header__buttons">
{pendingChannelFetch ? (
<Skeleton variant="circular" animation="wave" className="header__navigationItem--iconSkeleton" />
) : (
<Button
id="basic-button"
aria-controls={open ? 'basic-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
onClick={handleClick}
className={classnames('header__navigationItem', {
'header__navigationItem--icon': !activeChannelUrl,
'header__navigationItem--profilePic': activeChannelUrl,
})}
>
{activeChannelUrl ? (
<ChannelThumbnail uri={activeChannelUrl} hideTooltip small noLazyLoad showMemberBadge />
) : (
<Icon size={18} icon={ICONS.ACCOUNT} aria-hidden />
)}
</Button>
)}
{authenticated ? (
<MuiMenu {...menuProps}>
<HeaderMenuLink useMui page={PAGES.UPLOADS} icon={ICONS.PUBLISH} name={__('Uploads')} />
<HeaderMenuLink useMui page={PAGES.CHANNELS} icon={ICONS.CHANNEL} name={__('Channels')} />
<HeaderMenuLink
useMui
page={PAGES.CREATOR_DASHBOARD}
icon={ICONS.ANALYTICS}
name={__('Creator Analytics')}
/>
<HeaderMenuLink useMui page={PAGES.REWARDS} icon={ICONS.REWARDS} name={__('Rewards')} />
<HeaderMenuLink useMui page={PAGES.INVITE} icon={ICONS.INVITE} name={__('Invites')} />
<HeaderMenuLink useMui page={PAGES.ODYSEE_MEMBERSHIP} icon={ICONS.UPGRADE} name={__('Odysee Premium')} />
<ChannelSelector storeSelection isHeaderMenu />
<MuiMenuItem onClick={signOut} sx={{ padding: '0px' }}>
<div className="menu__link" style={{ flexDirection: 'column', alignItems: 'flex-start' }}>
<div>
<Icon aria-hidden icon={ICONS.SIGN_OUT} />
{__('Sign Out')}
</div>
<span className="menu__link-help">{email}</span>
</div>
</MuiMenuItem>
</MuiMenu>
) : (
<MuiMenu {...menuProps}>
<HeaderMenuLink useMui page={PAGES.AUTH_SIGNIN} icon={ICONS.SIGN_IN} name={__('Log In')} />
<HeaderMenuLink useMui page={PAGES.AUTH} icon={ICONS.SIGN_UP} name={__('Sign Up')} />
<HeaderMenuLink useMui page={PAGES.SETTINGS} icon={ICONS.SETTINGS} name={__('Settings')} />
<HeaderMenuLink useMui page={PAGES.HELP} icon={ICONS.HELP} name={__('Help')} />
</MuiMenu>
)}
</div>
</>
);
}

4
ui/scss/component/menu-button.scss
View file

@ -31,6 +31,10 @@ reach-portal {
max-width: calc(100% - var(--height-button) - var(--spacing-xs));
}
.MuiMenu-list--paper {
display: flex;
}
[data-reach-menu-list],
.MuiMenu-list--paper {
display: block;