From 692862c769397aa3101a186f35c873fe34eabab6 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Mon, 10 Aug 2020 16:47:39 -0400 Subject: [PATCH] collapsable sidebar initial commit --- static/app-strings.json | 1 + ui/component/common/card.jsx | 13 +- ui/component/common/paginate.jsx | 2 +- ui/component/embedPlayButton/view.jsx | 2 +- ui/component/fileActions/view.jsx | 2 +- ui/component/fileDescription/view.jsx | 33 +- ui/component/fileRenderFloating/view.jsx | 2 +- ui/component/header/index.js | 1 - ui/component/header/view.jsx | 150 ++++----- ui/component/notificationBubble/index.js | 9 + ui/component/notificationBubble/view.jsx | 20 ++ ui/component/page/view.jsx | 57 +++- ui/component/recommendedContent/view.jsx | 2 + ui/component/router/view.jsx | 20 +- ui/component/sideNavigation/index.js | 8 +- ui/component/sideNavigation/view.jsx | 393 ++++++++++++----------- ui/component/socialShare/view.jsx | 2 +- ui/component/subscribeButton/view.jsx | 2 +- ui/constants/modal_types.js | 1 - ui/effects/use-is-mobile.js | 6 - ui/effects/use-screensize.js | 11 + ui/modal/modal.jsx | 2 +- ui/modal/modalMobileNavigation/index.js | 11 - ui/modal/modalMobileNavigation/view.jsx | 18 -- ui/modal/modalRouter/view.jsx | 3 - ui/page/discover/view.jsx | 2 +- ui/page/file/index.js | 2 - ui/page/file/view.jsx | 46 +-- ui/page/notifications/index.js | 5 +- ui/page/notifications/view.jsx | 10 +- ui/scss/component/_animation.scss | 11 + ui/scss/component/_card.scss | 10 +- ui/scss/component/_claim-list.scss | 2 +- ui/scss/component/_file-render.scss | 4 + ui/scss/component/_header.scss | 69 ++-- ui/scss/component/_main.scss | 51 ++- ui/scss/component/_modal.scss | 14 - ui/scss/component/_navigation.scss | 234 +++++++++++--- ui/scss/component/_notification.scss | 17 + ui/scss/component/_wunderbar.scss | 5 +- ui/scss/init/_color.scss | 3 +- ui/scss/init/_gui.scss | 17 +- ui/scss/init/_vars.scss | 8 +- ui/scss/themes/light.scss | 2 +- web/component/nag-data-collection.jsx | 5 +- 45 files changed, 776 insertions(+), 512 deletions(-) create mode 100644 ui/component/notificationBubble/index.js create mode 100644 ui/component/notificationBubble/view.jsx delete mode 100644 ui/effects/use-is-mobile.js create mode 100644 ui/effects/use-screensize.js delete mode 100644 ui/modal/modalMobileNavigation/index.js delete mode 100644 ui/modal/modalMobileNavigation/view.jsx diff --git a/static/app-strings.json b/static/app-strings.json index fd1f7b700..1e8d3af26 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -1275,5 +1275,6 @@ "URL": "URL", "Total Uploads": "Total Uploads", "Are you sure you want to purchase %claim_title%?": "Are you sure you want to purchase %claim_title%?", + "Discover": "Discover", "--end--": "--end--" } diff --git a/ui/component/common/card.jsx b/ui/component/common/card.jsx index 1bd1ad442..4d7756669 100644 --- a/ui/component/common/card.jsx +++ b/ui/component/common/card.jsx @@ -19,6 +19,7 @@ type Props = { isBodyList?: boolean, defaultExpand?: boolean, nag?: Node, + smallTitle?: boolean, }; export default function Card(props: Props) { @@ -33,6 +34,7 @@ export default function Card(props: Props) { isPageTitle = false, isBodyList = false, noTitleWrap = false, + smallTitle = false, defaultExpand, nag, } = props; @@ -47,11 +49,18 @@ export default function Card(props: Props) { 'card__header--nowrap': noTitleWrap, })} > -
+
{icon && }
{isPageTitle &&

{title}

} - {!isPageTitle &&

{title}

} + {!isPageTitle && ( +

{title}

+ )} {subtitle &&
{subtitle}
}
diff --git a/ui/component/common/paginate.jsx b/ui/component/common/paginate.jsx index ebb258219..f082285e6 100644 --- a/ui/component/common/paginate.jsx +++ b/ui/component/common/paginate.jsx @@ -3,7 +3,7 @@ import React from 'react'; import { withRouter } from 'react-router'; import { Form, FormField } from 'component/common/form'; import ReactPaginate from 'react-paginate'; -import useIsMobile from 'effects/use-is-mobile'; +import { useIsMobile } from 'effects/use-screensize'; const PAGINATE_PARAM = 'page'; diff --git a/ui/component/embedPlayButton/view.jsx b/ui/component/embedPlayButton/view.jsx index 5c35bfa64..4c09d77ef 100644 --- a/ui/component/embedPlayButton/view.jsx +++ b/ui/component/embedPlayButton/view.jsx @@ -3,7 +3,7 @@ import React, { useEffect } from 'react'; import Button from 'component/button'; import FileViewerEmbeddedTitle from 'component/fileViewerEmbeddedTitle'; import { useHistory } from 'react-router-dom'; -import useIsMobile from 'effects/use-is-mobile'; +import { useIsMobile } from 'effects/use-screensize'; import { formatLbryUrlForWeb } from 'util/url'; type Props = { diff --git a/ui/component/fileActions/view.jsx b/ui/component/fileActions/view.jsx index 43c183fab..df0fd20e2 100644 --- a/ui/component/fileActions/view.jsx +++ b/ui/component/fileActions/view.jsx @@ -10,7 +10,7 @@ import Button from 'component/button'; import FileDownloadLink from 'component/fileDownloadLink'; import { buildURI } from 'lbry-redux'; import * as RENDER_MODES from 'constants/file_render_modes'; -import useIsMobile from 'effects/use-is-mobile'; +import { useIsMobile } from 'effects/use-screensize'; import ClaimSupportButton from 'component/claimSupportButton'; type Props = { diff --git a/ui/component/fileDescription/view.jsx b/ui/component/fileDescription/view.jsx index 118713ac9..fc307dad5 100644 --- a/ui/component/fileDescription/view.jsx +++ b/ui/component/fileDescription/view.jsx @@ -1,5 +1,5 @@ // @flow -import React, { Fragment, PureComponent } from 'react'; +import React, { PureComponent } from 'react'; import MarkdownPreview from 'component/common/markdown-preview'; import ClaimTags from 'component/claimTags'; import Card from 'component/common/card'; @@ -23,23 +23,22 @@ class FileDescription extends PureComponent { const { description } = metadata; if (!description && !(tags && tags.length)) return null; + return ( - - - {description && ( -
- -
- )} - - - } - /> - + + {description && ( +
+ +
+ )} + + + } + /> ); } } diff --git a/ui/component/fileRenderFloating/view.jsx b/ui/component/fileRenderFloating/view.jsx index c97cb1bc0..9e6b42a1c 100644 --- a/ui/component/fileRenderFloating/view.jsx +++ b/ui/component/fileRenderFloating/view.jsx @@ -12,7 +12,7 @@ import { FILE_WRAPPER_CLASS } from 'page/file/view'; import Draggable from 'react-draggable'; import Tooltip from 'component/common/tooltip'; import { onFullscreenChange } from 'util/full-screen'; -import useIsMobile from 'effects/use-is-mobile'; +import { useIsMobile } from 'effects/use-screensize'; type Props = { isFloating: boolean, diff --git a/ui/component/header/index.js b/ui/component/header/index.js index 53285e0f4..ad0ffa13b 100644 --- a/ui/component/header/index.js +++ b/ui/component/header/index.js @@ -28,7 +28,6 @@ const perform = dispatch => ({ setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)), syncSettings: () => dispatch(doSyncClientSettings()), signOut: () => dispatch(doSignOut()), - openMobileNavigation: () => dispatch(doOpenModal(MODALS.MOBILE_NAVIGATION)), openChannelCreate: () => dispatch(doOpenModal(MODALS.CREATE_CHANNEL)), openSignOutModal: () => dispatch(doOpenModal(MODALS.SIGN_OUT)), clearEmailEntry: () => dispatch(doClearEmailEntry()), diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx index cb9fbbf31..5909a7e89 100644 --- a/ui/component/header/view.jsx +++ b/ui/component/header/view.jsx @@ -12,9 +12,11 @@ import Icon from 'component/common/icon'; import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button'; import Tooltip from 'component/common/tooltip'; import NavigationButton from 'component/navigationButton'; -import NotificationHeaderButton from 'component/notificationHeaderButton'; import { LOGO_TITLE } from 'config'; -import useIsMobile from 'effects/use-is-mobile'; +import { useIsMobile } from 'effects/use-screensize'; +import NotificationBubble from 'component/notificationBubble'; +import NotificationHeaderButton from 'component/notificationHeaderButton'; + // @if TARGET='app' import { remote } from 'electron'; import { IS_MAC } from 'component/app/view'; @@ -49,13 +51,15 @@ type Props = { syncError: ?string, emailToVerify?: string, signOut: () => void, - openMobileNavigation: () => void, openChannelCreate: () => void, openSignOutModal: () => void, clearEmailEntry: () => void, clearPasswordEntry: () => void, hasNavigated: boolean, syncSettings: () => void, + sidebarOpen: boolean, + setSidebarOpen: boolean => void, + isAbsoluteSideNavHidden: boolean, }; const Header = (props: Props) => { @@ -71,13 +75,15 @@ const Header = (props: Props) => { authHeader, signOut, syncError, - openMobileNavigation, openSignOutModal, clearEmailEntry, clearPasswordEntry, emailToVerify, backout, syncSettings, + sidebarOpen, + setSidebarOpen, + isAbsoluteSideNavHidden, } = props; const isMobile = useIsMobile(); // on the verify page don't let anyone escape other than by closing the tab to keep session data consistent @@ -164,9 +170,6 @@ const Header = (props: Props) => {
{ ) : ( <>
+ +
+ )} +
+ + {!authHeader ? ( +
+ {(!IS_WEB || authenticated) && ( + +
) )} -