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

Refactor and split Header CSS

Browse source
This commit is contained in:
Rafael 2021-12-21 09:42:28 -03:00 committed by Thomas Zarebczan
parent 56603be2f9
commit 76147d89c6
9 changed files with 155 additions and 153 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,6 @@
// @flow // @flow
import 'scss/component/_header.scss';
import { useIsMobile } from 'effects/use-screensize'; import { useIsMobile } from 'effects/use-screensize';
import { withRouter } from 'react-router'; import { withRouter } from 'react-router';
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
@ -121,38 +123,38 @@ const Header = (props: Props) => {
} }
}, [canBackout, onBackout]); }, [canBackout, onBackout]);
const userButtons = (className: string) => ( const userButtons = (hideWallet?: boolean, hideProfile?: boolean) => (
<div className={classnames('header__menu', { 'header__menu--with-balance': authenticated })}> <div className="header__menu--right">
{isMobile && !authHeader && !canBackout && <WunderBar />}
{authenticated ? ( {authenticated ? (
<> <>
<Tooltip {!hideWallet && (
title={ <Tooltip
balance > 0 title={
? __('Immediately spendable: %spendable_balance%', { spendable_balance: roundedSpendableBalance }) balance > 0
: __('Your Wallet') ? __('Immediately spendable: %spendable_balance%', { spendable_balance: roundedSpendableBalance })
} : __('Your Wallet')
> }
<div> >
<Button <div>
navigate={`/$/${PAGES.WALLET}`} <Button
className={classnames(className, 'header__navigation-item--balance')} navigate={`/$/${PAGES.WALLET}`}
label={hideBalance || Number(roundedBalance) === 0 ? __('Your Wallet') : roundedBalance} className="button--file-action header__navigationItem--balance"
icon={ICONS.LBC} label={hideBalance || Number(roundedBalance) === 0 ? __('Your Wallet') : roundedBalance}
/> icon={ICONS.LBC}
</div> />
</Tooltip> </div>
</Tooltip>
)}
<HeaderProfileMenuButton /> {!hideProfile && <HeaderProfileMenuButton />}
</> </>
) : ( ) : (
<div className="header__auth-buttons"> <div className="header__authButtons">
<Button {!isMobile && (
navigate={`/$/${PAGES.AUTH_SIGNIN}`} <Button navigate={`/$/${PAGES.AUTH_SIGNIN}`} button="link" label={__('Log In')} disabled={user === null} />
button="link" )}
label={__('Log In')}
className="mobile-hidden"
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>
)} )}
@ -161,25 +163,27 @@ const Header = (props: Props) => {
return ( return (
<header className={classnames('header', { 'header--minimal': authHeader })}> <header className={classnames('header', { 'header--minimal': authHeader })}>
<div className="header__contents"> {!authHeader && canBackout ? (
{!authHeader && canBackout ? ( <div className="card__actions--between header__contents">
<div className="card__actions--between"> <div className="header__menu--left">
<Button onClick={onBackout} button="link" label={backLabel || __('Cancel')} icon={ICONS.ARROW_LEFT} /> <Button onClick={onBackout} button="link" label={backLabel || __('Cancel')} icon={ICONS.ARROW_LEFT} />
{backTitle && <h1 className="header__auth-title">{(isMobile && simpleBackTitle) || backTitle}</h1>}
{userButtons('header__navigation-item menu__title')}
</div> </div>
) : (
<> {backTitle && <h1 className="header__authTitle">{(isMobile && simpleBackTitle) || backTitle}</h1>}
<div className="header__navigation">
{userButtons(false, isMobile)}
</div>
) : (
<>
<div className="header__navigation">
<div className="header__menu--left">
<SkipNavigationButton /> <SkipNavigationButton />
{!authHeader && ( {!authHeader && (
<span style={{ position: 'relative' }}> <span style={{ position: 'relative' }}>
<Button <Button
aria-label={sidebarLabel} aria-label={sidebarLabel}
className="header__navigation-item menu__title header__navigation-item--icon" className="header__navigationItem--icon"
icon={ICONS.MENU} icon={ICONS.MENU}
aria-expanded={sidebarOpen} aria-expanded={sidebarOpen}
onClick={() => setSidebarOpen(!sidebarOpen)} onClick={() => setSidebarOpen(!sidebarOpen)}
@ -191,7 +195,7 @@ const Header = (props: Props) => {
<Button <Button
aria-label={__('Home')} aria-label={__('Home')}
className="header__navigation-item header__navigation-item--lbry" className="header__navigationItem--logo"
onClick={() => pathname === '/' && window.location.reload()} onClick={() => pathname === '/' && window.location.reload()}
{...homeButtonNavigationProps} {...homeButtonNavigationProps}
> >
@ -217,24 +221,20 @@ const Header = (props: Props) => {
/> />
)} )}
{/* @endif */} {/* @endif */}
{!authHeader && (
<div className="header__center">
<WunderBar />
<HeaderMenuButtons />
</div>
)}
</div> </div>
{!authHeader && !isMobile && (
<div className="header__center">
<WunderBar />
<HeaderMenuButtons />
</div>
)}
{!authHeader && !canBackout {!authHeader && !canBackout
? userButtons('header__navigation-item menu__title mobile-hidden') ? userButtons(isMobile)
: !isVerifyPage && : !isVerifyPage &&
!hideCancel && ( !hideCancel && (
<div className="header__menu"> <div className="header__menu--right">
{/* Add an empty span here so we can use the same style as above */}
{/* This pushes the close button to the right side */}
<span />
<Button <Button
title={__('Go Back')} title={__('Go Back')}
button="alt" button="alt"
@ -255,9 +255,9 @@ const Header = (props: Props) => {
/> />
</div> </div>
)} )}
</> </div>
)} </>
</div> )}
</header> </header>
); );
}; };

6
ui/component/headerMenuButtons/view.jsx
View file

@ -1,4 +1,6 @@
// @flow // @flow
import 'scss/component/_header.scss';
import { ENABLE_UI_NOTIFICATIONS, ENABLE_NO_SOURCE_CLAIMS, CHANNEL_STAKED_LEVEL_LIVESTREAM } from 'config'; import { ENABLE_UI_NOTIFICATIONS, ENABLE_NO_SOURCE_CLAIMS, CHANNEL_STAKED_LEVEL_LIVESTREAM } from 'config';
import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button'; import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
@ -41,7 +43,7 @@ export default function HeaderMenuButtons(props: HeaderMenuButtonProps) {
{authenticated && ( {authenticated && (
<Menu> <Menu>
<Tooltip title={__('Publish a file, or create a channel')}> <Tooltip title={__('Publish a file, or create a channel')}>
<MenuButton className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden"> <MenuButton className="header__navigationItem--icon">
<Icon size={18} icon={ICONS.PUBLISH} aria-hidden /> <Icon size={18} icon={ICONS.PUBLISH} aria-hidden />
</MenuButton> </MenuButton>
</Tooltip> </Tooltip>
@ -59,7 +61,7 @@ export default function HeaderMenuButtons(props: HeaderMenuButtonProps) {
<Menu> <Menu>
<Tooltip title={__('Settings')}> <Tooltip title={__('Settings')}>
<MenuButton className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden"> <MenuButton className="header__navigationItem--icon">
<Icon size={18} icon={ICONS.SETTINGS} aria-hidden /> <Icon size={18} icon={ICONS.SETTINGS} aria-hidden />
</MenuButton> </MenuButton>
</Tooltip> </Tooltip>

7
ui/component/headerNotificationButton/view.jsx
View file

@ -1,4 +1,6 @@
// @flow // @flow
import 'scss/component/_header.scss';
import { ENABLE_UI_NOTIFICATIONS } from 'config'; import { ENABLE_UI_NOTIFICATIONS } from 'config';
import { useHistory } from 'react-router'; import { useHistory } from 'react-router';
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
@ -30,10 +32,7 @@ export default function NotificationHeaderButton(props: Props) {
return ( return (
<Tooltip title={__('Notifications')}> <Tooltip title={__('Notifications')}>
<Button <Button onClick={handleMenuClick} className="header__navigationItem--icon">
onClick={handleMenuClick}
className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden"
>
<Icon size={18} icon={ICONS.NOTIFICATION} aria-hidden /> <Icon size={18} icon={ICONS.NOTIFICATION} aria-hidden />
<NotificationBubble /> <NotificationBubble />
</Button> </Button>

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

@ -1,4 +1,6 @@
// @flow // @flow
import 'scss/component/_header.scss';
import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button'; import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages'; import * as PAGES from 'constants/pages';
@ -25,9 +27,9 @@ export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
<MenuButton <MenuButton
aria-label={__('Your account')} aria-label={__('Your account')}
title={__('Your account')} title={__('Your account')}
className={classnames('header__navigation-item', { className={classnames('header__navigationItem', {
'menu__title header__navigation-item--icon': !activeChannelUrl, 'header__navigationItem--icon': !activeChannelUrl,
'header__navigation-item--profile-pic': activeChannelUrl, 'header__navigationItem--profilePic': activeChannelUrl,
})} })}
> >
{activeChannelUrl ? ( {activeChannelUrl ? (

1
ui/scss/all.scss
View file

@ -30,7 +30,6 @@
@import 'component/file-render'; @import 'component/file-render';
@import 'component/footer'; @import 'component/footer';
@import 'component/form-field'; @import 'component/form-field';
@import 'component/header';
@import 'component/icon'; @import 'component/icon';
@import 'component/main'; @import 'component/main';
@import 'component/markdown-editor'; @import 'component/markdown-editor';

160
ui/scss/component/_header.scss
View file

@ -1,3 +1,6 @@
@import '../init/vars';
@import '../init/mixins';
.header { .header {
z-index: 3; // Main content uses z-index: 1, other content uses z-index: 2, this ensures it always scrolls under the header z-index: 3; // Main content uses z-index: 1, other content uses z-index: 2, this ensures it always scrolls under the header
position: fixed; position: fixed;
@ -6,6 +9,7 @@
background-color: var(--color-header-background); background-color: var(--color-header-background);
box-shadow: var(--card-box-shadow); box-shadow: var(--card-box-shadow);
font-size: var(--font-body); font-size: var(--font-body);
user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
-webkit-app-region: drag; -webkit-app-region: drag;
@ -23,31 +27,32 @@
opacity: 1; opacity: 1;
position: relative; position: relative;
overflow: unset; overflow: unset;
width: inherit; width: unset;
height: inherit; height: unset;
} }
} }
& > * {
user-select: none;
}
} }
.header--minimal { .header--minimal {
box-shadow: none; box-shadow: none;
background-color: var(--color-background); background-color: var(--color-background);
border-bottom: none; border-bottom: none;
}
.header--mac { .header__navigation {
padding-top: var(--mac-titlebar-height); padding: var(--spacing-xs);
}
.header__navigationItem--logo {
height: 3rem;
}
} }
.header__contents { .header__contents {
height: calc(var(--header-height));
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 var(--spacing-m); flex: 1;
height: var(--header-height);
padding: var(--spacing-s) var(--spacing-m);
@media (max-width: $breakpoint-small) { @media (max-width: $breakpoint-small) {
padding: var(--spacing-xs); padding: var(--spacing-xs);
@ -55,16 +60,40 @@
} }
.header__navigation { .header__navigation {
display: flex;
align-items: center;
justify-content: space-between;
flex: 1; flex: 1;
height: var(--header-height);
padding: var(--spacing-s) var(--spacing-m);
flex-wrap: nowrap;
}
.card__actions--between {
.header__menu--left {
@media (max-width: $breakpoint-small) {
max-width: 3rem;
}
}
}
.header__menu {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.header__menu { .header__menu--left {
margin-left: auto; @extend .header__menu;
display: flex; justify-content: flex-start;
justify-content: space-between; }
align-items: center;
.header__menu--right {
@extend .header__menu;
justify-content: flex-end;
@media (max-width: $breakpoint-small) {
max-width: 4rem;
}
} }
.header__buttons { .header__buttons {
@ -78,7 +107,7 @@
max-width: fit-content; max-width: fit-content;
} }
.header__navigation-item { .header__navigationItem {
height: var(--height-button); height: var(--height-button);
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -90,11 +119,14 @@
svg { svg {
stroke: var(--color-text); stroke: var(--color-text);
} }
&[aria-expanded='true'] {
background-color: var(--color-header-button-active);
}
} }
.header__navigation-item--back, .header__navigationItem--icon {
.header__navigation-item--forward, @extend .header__navigationItem;
.header__navigation-item--icon {
width: var(--height-button); width: var(--height-button);
background-color: var(--color-header-button); background-color: var(--color-header-button);
border-radius: 1.5rem; border-radius: 1.5rem;
@ -110,6 +142,10 @@
} }
} }
@media (max-width: $breakpoint-small) {
margin: 0;
}
span { span {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -117,8 +153,8 @@
} }
} }
.header__navigation-item--profile-pic { .header__navigationItem--profilePic {
margin-left: var(--spacing-m); margin-right: var(--spacing-s);
.channel-thumbnail { .channel-thumbnail {
height: var(--height-button); height: var(--height-button);
@ -131,8 +167,8 @@
} }
} }
.header__navigation-item--balance { .header__navigationItem--balance {
@extend .button--file-action; @extend .header__navigationItem;
margin: 0 var(--spacing-s); margin: 0 var(--spacing-s);
color: var(--color-text); color: var(--color-text);
@ -141,17 +177,8 @@
} }
} }
.header__navigation-item--forward { .header__navigationItem--logo {
margin-right: 0; @extend .header__navigationItem;
}
.header__navigation-item--icon {
@media (max-width: $breakpoint-small) {
margin: 0;
}
}
.header__navigation-item--lbry {
height: 4rem; height: 4rem;
display: flex; display: flex;
align-items: center; align-items: center;
@ -173,61 +200,44 @@
} }
} }
.header--minimal { .header__authButtons {
.header__navigation-item--lbry {
height: 3rem;
}
}
.header__navigation-dropdown {
@extend .menu__list--header;
padding: 0;
position: absolute;
list-style-type: none;
background-color: var(--color-header-background);
}
.header__navigation-button {
margin: 0;
padding: var(--spacing-xxs) var(--spacing-m);
display: flex;
align-items: center;
&:hover {
cursor: pointer;
background-color: var(--color-menu-background--active);
}
}
.header__navigation-button-help {
@extend .help;
margin-top: 0;
margin-left: var(--spacing-s);
}
.header__auth-buttons {
display: flex; display: flex;
align-items: center; align-items: center;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
margin-left: var(--spacing-s);
& > *:not(:last-child) { & > *:not(:last-child) {
margin: 0 var(--spacing-m); margin: 0 var(--spacing-m);
} }
@media (max-width: $breakpoint-small) {
.button--link {
margin: 0;
}
.button--primary {
padding: var(--spacing-xxs);
}
}
} }
.header__center { .header__center {
display: flex; display: flex;
justify-content: flex-end; justify-content: center;
width: 100%; width: 100%;
@media (min-width: $breakpoint-small) {
justify-content: center;
}
} }
.header__auth-title { .header__authTitle {
@extend .header__center;
justify-content: center;
@media (min-width: $breakpoint-small) { @media (min-width: $breakpoint-small) {
font-size: var(--font-large); font-size: var(--font-large);
} }
} }
.ReactModal__Overlay {
.button--close {
margin: 0;
margin-top: var(--spacing-xxs);
}
}

4
ui/scss/component/_wunderbar.scss
View file

@ -1,3 +1,5 @@
@import './header';
.wunderbar__wrapper { .wunderbar__wrapper {
flex: 1; flex: 1;
max-width: 30rem; max-width: 30rem;
@ -227,7 +229,7 @@
.wunderbar__mobile-search { .wunderbar__mobile-search {
@extend .button--alt; @extend .button--alt;
@extend .header__navigation-item--icon; @extend .header__navigationItem--icon;
padding: var(--spacing-xs); padding: var(--spacing-xs);
margin-right: var(--spacing-m); margin-right: var(--spacing-m);

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

@ -65,12 +65,6 @@
} }
} }
.menu__title {
&[aria-expanded='true'] {
background-color: var(--color-header-button-active);
}
}
.menu__list { .menu__list {
box-shadow: var(--card-box-shadow); box-shadow: var(--card-box-shadow);
animation: menu-animate-in var(--animation-duration) var(--animation-style); animation: menu-animate-in var(--animation-duration) var(--animation-style);

6
ui/scss/init/_gui.scss
View file

@ -479,12 +479,6 @@ textarea {
} }
} }
.mobile-hidden {
@media (max-width: $breakpoint-small) {
display: none !important;
}
}
.ads-test { .ads-test {
height: 50vh; height: 50vh;
position: relative; position: relative;