more header cherry-pick

2022-01-26 16:07:58 -05:00 · 2022-01-26 16:07:58 -05:00 · 90f0b66959
commit 90f0b66959
parent 3dfa522fa9
8 changed files with 170 additions and 166 deletions
--- a/ui/component/header/view.jsx
+++ b/ui/component/header/view.jsx
@ -1,4 +1,6 @@
 // @flow
+// import 'scss/component/_header.scss'; // ody codesplits this. no.
+
 import { useIsMobile } from 'effects/use-screensize';
 import { withRouter } from 'react-router';
 import * as ICONS from 'constants/icons';
@ -18,7 +20,6 @@ import { IS_MAC } from 'component/app/view';
 import NavigationButton from 'component/navigationButton';

 type Props = {
-  authenticated: boolean,
  authHeader: boolean,
  backout: {
    backLabel?: string,
@ -50,7 +51,6 @@ type Props = {

 const Header = (props: Props) => {
  const {
-    authenticated,
    authHeader,
    backout,
    balance,
@ -120,8 +120,9 @@ const Header = (props: Props) => {
    }
  }, [canBackout, onBackout]);

-  const userButtons = (className: string) => (
-    <div className={classnames('header__menu', { 'header__menu--with-balance': authenticated })}>
+  const userButtons = (hideWallet?: boolean, hideProfile?: boolean) => (
+    <div className="header__menu--right">
+      {isMobile && !authHeader && !canBackout && <WunderBar />}
      <Tooltip
        title={
          balance > 0
@ -137,7 +138,7 @@ const Header = (props: Props) => {
            //     : __('Your Wallet')
            // }
            navigate={`/$/${PAGES.WALLET}`}
-            className={classnames(className, 'header__navigation-item--balance')}
+            className="button--file-action header__navigationItem--balance"
            label={hideBalance || Number(roundedBalance) === 0 ? __('Your Wallet') : roundedBalance}
            icon={ICONS.LBC}
            // @if TARGET='app'
@ -165,50 +166,51 @@ const Header = (props: Props) => {
      }}
      // @endif
    >
-      <div className="header__contents">
+      <div className="card__actions--between header__contents">
        {!authHeader && canBackout ? (
-          <div className="card__actions--between">
-            <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 className="header__menu--left">
+              <Button onClick={onBackout} button="link" label={backLabel || __('Cancel')} icon={ICONS.ARROW_LEFT} />
+            </div>
+            {backTitle && <h1 className="header__authTitle">{(isMobile && simpleBackTitle) || backTitle}</h1>}
+            {userButtons(false, isMobile)}
+          </>
        ) : (
          <>
            <div className="header__navigation">
-              <SkipNavigationButton />
+              <div className="header__menu--left">
+                <SkipNavigationButton />
+                {!authHeader && (
+                  <span style={{ position: 'relative' }}>
+                    <Button
+                      aria-label={sidebarLabel}
+                      className="header__navigationItem--icon"
+                      icon={ICONS.MENU}
+                      aria-expanded={sidebarOpen}
+                      onClick={() => setSidebarOpen(!sidebarOpen)}
+                    >
+                      {isAbsoluteSideNavHidden && isMobile && <NotificationBubble />}
+                    </Button>
+                  </span>
+                )}
+                <Button
+                  aria-label={__('Home')}
+                  className="header__navigationItem--logo"
+                  onClick={() => {
+                    // here use state.router.location.pathname
+                    if (history.location.pathname === '/') window.location.reload();
+                  }}
+                  // @if TARGET='app'
+                  onDoubleClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                  // @endif
+                  {...homeButtonNavigationProps}
+                >
+                  <Logo />
+                </Button>
+              </div>

-              {!authHeader && (
-                <span style={{ position: 'relative' }}>
-                  <Button
-                    aria-label={sidebarLabel}
-                    className="header__navigation-item menu__title header__navigation-item--icon"
-                    icon={ICONS.MENU}
-                    aria-expanded={sidebarOpen}
-                    onClick={() => setSidebarOpen(!sidebarOpen)}
-                  >
-                    {isAbsoluteSideNavHidden && isMobile && <NotificationBubble />}
-                  </Button>
-                </span>
-              )}
-
-              <Button
-                aria-label={__('Home')}
-                className="header__navigation-item header__navigation-item--lbry"
-                onClick={() => {
-                  // here use state.router.location.pathname
-                  if (history.location.pathname === '/') window.location.reload();
-                }}
-                // @if TARGET='app'
-                onDoubleClick={(e) => {
-                  e.stopPropagation();
-                }}
-                // @endif
-                {...homeButtonNavigationProps}
-              >
-                <Logo />
-              </Button>
              {!authHeader && (
                <div className="header__center">
                  {/* @if TARGET='app' */}
@ -223,37 +225,33 @@ const Header = (props: Props) => {
                  <HeaderMenuButtons />
                </div>
              )}
+
+              {!authHeader && !canBackout
+                ? userButtons(isMobile)
+                : !isVerifyPage &&
+                  !hideCancel && (
+                    <div className="header__menu--right">
+                      <Button
+                        title={__('Go Back')}
+                        button="alt"
+                        // className="button--header-close"
+                        icon={ICONS.REMOVE}
+                        onClick={() => {
+                          clearEmailEntry();
+                          clearPasswordEntry();
+
+                          if (syncError) signOut();
+
+                          if ((isSignInPage && !emailToVerify) || isSignUpPage || isPwdResetPage) {
+                            goBack();
+                          } else {
+                            push('/');
+                          }
+                        }}
+                      />
+                    </div>
+                  )}
            </div>
-
-            {!authHeader && !canBackout
-              ? userButtons('header__navigation-item menu__title mobile-hidden')
-              : !isVerifyPage &&
-                !hideCancel && (
-                  <div className="header__menu">
-                    {/* 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
-                      title={__('Go Back')}
-                      button="alt"
-                      // className="button--header-close"
-                      icon={ICONS.REMOVE}
-                      onClick={() => {
-                        clearEmailEntry();
-                        clearPasswordEntry();
-
-                        if (syncError) signOut();
-
-                        if ((isSignInPage && !emailToVerify) || isSignUpPage || isPwdResetPage) {
-                          goBack();
-                        } else {
-                          push('/');
-                        }
-                      }}
-                    />
-                  </div>
-                )}
          </>
        )}
      </div>
--- a/ui/component/headerMenuButtons/view.jsx
+++ b/ui/component/headerMenuButtons/view.jsx
@ -1,4 +1,6 @@
 // @flow
+// import 'scss/component/_header.scss'; // ody codesplits this; no.
+
 import { ENABLE_UI_NOTIFICATIONS } from 'config';
 import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
 import * as ICONS from 'constants/icons';
@ -26,7 +28,7 @@ export default function HeaderMenuButtons(props: HeaderMenuButtonProps) {
    <div className="header__buttons">
      <Menu>
        <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 />
          </MenuButton>
        </Tooltip>
@ -41,7 +43,7 @@ export default function HeaderMenuButtons(props: HeaderMenuButtonProps) {

      <Menu>
        <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 />
          </MenuButton>
        </Tooltip>
--- a/ui/component/headerNotificationButton/view.jsx
+++ b/ui/component/headerNotificationButton/view.jsx
@ -1,4 +1,6 @@
 // @flow
+// import 'scss/component/_header.scss'; // ody codesplits this; no. REMOVE THESE
+
 import { ENABLE_UI_NOTIFICATIONS } from 'config';
 import { useHistory } from 'react-router';
 import * as ICONS from 'constants/icons';
@ -30,10 +32,7 @@ export default function NotificationHeaderButton(props: Props) {

  return (
    <Tooltip title={__('Notifications')}>
-      <Button
-        onClick={handleMenuClick}
-        className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden"
-      >
+      <Button onClick={handleMenuClick} className="header__navigationItem--icon">
        <Icon size={18} icon={ICONS.NOTIFICATION} aria-hidden />
        <NotificationBubble />
      </Button>
--- a/ui/component/headerProfileMenuButton/view.jsx
+++ b/ui/component/headerProfileMenuButton/view.jsx
@ -1,4 +1,6 @@
 // @flow
+// import 'scss/component/_header.scss'; // REMOVE!
+
 import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
 import * as ICONS from 'constants/icons';
 import * as PAGES from 'constants/pages';
@ -26,9 +28,9 @@ export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
        <MenuButton
          aria-label={__('Your account')}
          title={__('Your account')}
-          className={classnames('header__navigation-item', {
-            'menu__title header__navigation-item--icon': !activeChannelUrl,
-            'header__navigation-item--profile-pic': activeChannelUrl,
+          className={classnames('header__navigationItem', {
+            'header__navigationItem--icon': !activeChannelUrl,
+            'header__navigationItem--profilePic': activeChannelUrl,
          })}
        >
          {activeChannelUrl ? (
--- a/ui/scss/component/_header.scss
+++ b/ui/scss/component/_header.scss
@ -1,3 +1,6 @@
+@import '../init/vars';
+@import '../init/mixins';
+
 .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;
@ -6,6 +9,7 @@
  background-color: var(--color-header-background);
  box-shadow: var(--card-box-shadow);
  font-size: var(--font-body);
+  user-select: none;
  -webkit-user-select: none;
  -webkit-app-region: drag;

@ -23,31 +27,32 @@
      opacity: 1;
      position: relative;
      overflow: unset;
-      width: inherit;
-      height: inherit;
+      width: unset;
+      height: unset;
    }
  }
-
-  & > * {
-    user-select: none;
-  }
 }

 .header--minimal {
  box-shadow: none;
  background-color: var(--color-background);
  border-bottom: none;
-}

-.header--mac {
-  padding-top: var(--mac-titlebar-height);
+  .header__navigation {
+    padding: var(--spacing-xs);
+  }
+
+  .header__navigationItem--logo {
+    height: 3rem;
+  }
 }

 .header__contents {
-  height: calc(var(--header-height));
  display: flex;
  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) {
    padding: var(--spacing-xs);
@ -55,17 +60,42 @@
 }

 .header__navigation {
-  flex: 1;
  display: flex;
  align-items: center;
+  justify-content: space-between;
+  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;
-  justify-content: space-between;
  align-items: center;
 }

+.header__menu--left {
+  @extend .header__menu;
+  justify-content: flex-start;
+}
+
+.header__menu--right {
+  @extend .header__menu;
+  justify-content: flex-end;
+
+  @media (max-width: $breakpoint-small) {
+    max-width: 4rem;
+  }
+}
+
 .header__buttons {
  display: flex;
 }
@ -77,7 +107,7 @@
  max-width: fit-content;
 }

-.header__navigation-item {
+.header__navigationItem {
  height: var(--height-button);
  display: flex;
  justify-content: center;
@ -89,11 +119,16 @@
  svg {
    stroke: var(--color-text);
  }
+
+  &[aria-expanded='true'] {
+    background-color: var(--color-header-button-active);
+  }
 }

 .header__navigation-item--back,
 .header__navigation-item--forward,
-.header__navigation-item--icon {
+.header__navigationItem--icon {
+  @extend .header__navigationItem;
  width: var(--height-button);
  background-color: var(--color-header-button);
  border-radius: 1.5rem;
@ -109,6 +144,10 @@
    }
  }

+  @media (max-width: $breakpoint-small) {
+    margin: 0;
+  }
+
  span {
    display: flex;
    justify-content: center;
@ -116,8 +155,8 @@
  }
 }

-.header__navigation-item--profile-pic {
-  margin-left: var(--spacing-m);
+.header__navigationItem--profilePic {
+  margin-right: var(--spacing-s);

  .channel-thumbnail {
    height: var(--height-button);
@ -130,8 +169,8 @@
  }
 }

-.header__navigation-item--balance {
-  @extend .button--file-action;
+.header__navigationItem--balance {
+  @extend .header__navigationItem;
  margin: 0 var(--spacing-s);
  color: var(--color-text);

@ -140,17 +179,8 @@
  }
 }

-.header__navigation-item--forward {
-  margin-right: 0;
-}
-
-.header__navigation-item--icon {
-  @media (max-width: $breakpoint-small) {
-    margin: 0;
-  }
-}
-
-.header__navigation-item--lbry {
+.header__navigationItem--logo {
+  @extend .header__navigationItem;
  height: 4rem;
  display: flex;
  align-items: center;
@ -172,61 +202,44 @@
  }
 }

-.header--minimal {
-  .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 {
+.header__authButtons {
  display: flex;
  align-items: center;
  font-weight: var(--font-weight-bold);
-  margin-left: var(--spacing-s);

  & > *:not(:last-child) {
    margin: 0 var(--spacing-m);
  }
+
+  @media (max-width: $breakpoint-small) {
+    .button--link {
+      margin: 0;
+    }
+
+    .button--primary {
+      padding: var(--spacing-xxs);
+    }
+  }
 }

 .header__center {
  display: flex;
-  justify-content: flex-end;
+  justify-content: center;
  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) {
    font-size: var(--font-large);
  }
 }
+
+.ReactModal__Overlay {
+  .button--close {
+    margin: 0;
+    margin-top: var(--spacing-xxs);
+  }
+}
--- a/ui/scss/component/_wunderbar.scss
+++ b/ui/scss/component/_wunderbar.scss
@ -1,3 +1,5 @@
+@import './header';
+
 .wunderbar__wrapper {
  flex: 1;
  max-width: 30rem;
@ -227,7 +229,7 @@

 .wunderbar__mobile-search {
  @extend .button--alt;
-  @extend .header__navigation-item--icon;
+  @extend .header__navigationItem--icon;
  padding: var(--spacing-xs);
  margin-right: var(--spacing-m);

--- a/ui/scss/component/menu-button.scss
+++ b/ui/scss/component/menu-button.scss
@ -65,12 +65,6 @@
  }
 }

-.menu__title {
-  &[aria-expanded='true'] {
-    background-color: var(--color-header-button-active);
-  }
-}
-
 .menu__list {
  box-shadow: var(--card-box-shadow);
  animation: menu-animate-in var(--animation-duration) var(--animation-style);
--- a/ui/scss/init/_gui.scss
+++ b/ui/scss/init/_gui.scss
@ -480,12 +480,6 @@ textarea {
  }
 }

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