From f87bd3d381ed4a4fa219187beba2c8f6add2d6aa Mon Sep 17 00:00:00 2001 From: "okmttdhr, tada" Date: Mon, 19 Feb 2024 15:44:09 +0900 Subject: [PATCH] Add Global sidebar footer (#87576) * Port the Global Sidebar Footer from the PR: #86766 * Port Help Center from the PR: #86766 * JS to TS * Add Global Sidebar Footer * Remove help icon * Add tooltips * Add background-color --- client/layout/global-sidebar/footer.tsx | 62 +++++++++++++++++++ client/layout/global-sidebar/index.jsx | 4 ++ .../menu-items/help-center/help-center.jsx | 52 ++++++++++++++++ .../global-sidebar/menu-items/menu-item.jsx | 3 +- client/layout/global-sidebar/style.scss | 40 ++++++++++++ 5 files changed, 160 insertions(+), 1 deletion(-) create mode 100644 client/layout/global-sidebar/footer.tsx create mode 100644 client/layout/global-sidebar/menu-items/help-center/help-center.jsx diff --git a/client/layout/global-sidebar/footer.tsx b/client/layout/global-sidebar/footer.tsx new file mode 100644 index 0000000000000..c093ffc074f81 --- /dev/null +++ b/client/layout/global-sidebar/footer.tsx @@ -0,0 +1,62 @@ +import { LocalizeProps } from 'i18n-calypso'; +import { FC } from 'react'; +import AsyncLoad from 'calypso/components/async-load'; +import Gravatar from 'calypso/components/gravatar'; +import SidebarFooter from 'calypso/layout/sidebar/footer'; +import { UserData } from 'calypso/lib/user/user'; + +const CustomReaderIcon = () => ( + + + + + + + + +); +export const GlobalSidebarFooter: FC< { + translate: LocalizeProps[ 'translate' ]; + user?: UserData; +} > = ( { translate, user } ) => { + return ( + + + + + + + + + + + } + /> + + ); +}; diff --git a/client/layout/global-sidebar/index.jsx b/client/layout/global-sidebar/index.jsx index 1c6f67ba1b846..78d4c2a8a5a7e 100644 --- a/client/layout/global-sidebar/index.jsx +++ b/client/layout/global-sidebar/index.jsx @@ -4,13 +4,16 @@ import { useSelector } from 'react-redux'; import GlobalSidebarHeader from 'calypso/layout/global-sidebar/header'; import useSiteMenuItems from 'calypso/my-sites/sidebar/use-site-menu-items'; import { getIsRequestingAdminMenu } from 'calypso/state/admin-menu/selectors'; +import { getCurrentUser } from 'calypso/state/current-user/selectors'; import Sidebar from '../sidebar'; +import { GlobalSidebarFooter } from './footer'; import './style.scss'; const GlobalSidebar = ( { children, onClick = undefined, className = '', ...props } ) => { const menuItems = useSiteMenuItems(); const isRequestingMenu = useSelector( getIsRequestingAdminMenu ); const translate = useTranslate(); + const currentUser = useSelector( getCurrentUser ); /** * If there are no menu items and we are currently requesting some, @@ -40,6 +43,7 @@ const GlobalSidebar = ( { children, onClick = undefined, className = '', ...prop { children } + ); }; diff --git a/client/layout/global-sidebar/menu-items/help-center/help-center.jsx b/client/layout/global-sidebar/menu-items/help-center/help-center.jsx new file mode 100644 index 0000000000000..f85510ae9b855 --- /dev/null +++ b/client/layout/global-sidebar/menu-items/help-center/help-center.jsx @@ -0,0 +1,52 @@ +//import { recordTracksEvent } from '@automattic/calypso-analytics'; +import { HelpCenter } from '@automattic/data-stores'; +import { + useDispatch as useDataStoreDispatch, + useSelect as useDateStoreSelect, +} from '@wordpress/data'; +import { Icon, help } from '@wordpress/icons'; +import classnames from 'classnames'; +//import { useRef } from 'react'; +//import { useSelector } from 'react-redux'; +//import { getSectionName } from 'calypso/state/ui/selectors'; +import SidebarMenuItem from '../menu-item'; + +const HELP_CENTER_STORE = HelpCenter.register(); + +const SidebarHelpCenter = ( { tooltip, tooltipPlacement } ) => { + //const helpIconRef = useRef(); + //const sectionName = useSelector( getSectionName ); + + const helpCenterVisible = useDateStoreSelect( + ( select ) => select( HELP_CENTER_STORE ).isHelpCenterShown(), + [] + ); + const { setShowHelpCenter } = useDataStoreDispatch( HELP_CENTER_STORE ); + + const handleToggleHelpCenter = () => { + // TODO: track this event when sidebar dev is ready + // recordTracksEvent( `calypso_inlinehelp_${ helpCenterVisible ? 'close' : 'show' }`, { + // force_site_id: true, + // location: 'help-center', + // section: sectionName, + // } ); + + setShowHelpCenter( ! helpCenterVisible ); + }; + + return ( + <> + } + /> + + ); +}; + +export default SidebarHelpCenter; diff --git a/client/layout/global-sidebar/menu-items/menu-item.jsx b/client/layout/global-sidebar/menu-items/menu-item.jsx index a3dba42c2bd48..610c38a1953d7 100644 --- a/client/layout/global-sidebar/menu-items/menu-item.jsx +++ b/client/layout/global-sidebar/menu-items/menu-item.jsx @@ -9,6 +9,7 @@ const SidebarMenuItem = forwardRef( tipTarget, onClick, tooltip, + tooltipPlacement, icon, className, isActive, @@ -45,7 +46,7 @@ const SidebarMenuItem = forwardRef( 'is-active': isActive, 'has-unseen': hasUnseen, 'sidebar__item--always-show-content': alwaysShowContent, - 'tooltip tooltip-bottom': tooltip, + [ `tooltip tooltip-${ tooltipPlacement || 'bottom' }` ]: tooltip, } ); const attributes = { diff --git a/client/layout/global-sidebar/style.scss b/client/layout/global-sidebar/style.scss index 05a1a400903b9..263a289bb6ec6 100644 --- a/client/layout/global-sidebar/style.scss +++ b/client/layout/global-sidebar/style.scss @@ -7,6 +7,7 @@ position: relative; top: 0; transition: all 220ms ease-out; + background-color: var(--studio-black); ul { height: 100%; @@ -41,6 +42,14 @@ right: unset; } } + .tooltip-top { + &::after { + right: unset; + bottom: unset; + left: 0; + top: -30px; + } + } .sidebar__header { align-items: center; @@ -121,6 +130,37 @@ } } + .sidebar__footer { + display: flex; + align-items: center; + padding: 16px 24px 16px 24px; + border-color: var(--studio-gray-90); + border-top-style: solid; + border-top-width: 1px; + .sidebar__menu-icon { + margin-right: 0; + } + .sidebar__footer-link { + display: flex; + align-items: center; + margin-left: 20px; + height: 40px; + &:first-child { + margin-left: 4px; + } + } + .sidebar__item-help { + display: flex; + align-items: center; + margin-left: 20px; + height: 40px; + cursor: pointer; + svg { + fill: var(--studio-white); + } + } + } + .sidebar-notifications { .sidebar__menu-icon.sidebar_svg-notifications { fill: var(--color-sidebar-background);