From 7f2c12464b4db302f2ec7628cd73d14a1cdfa213 Mon Sep 17 00:00:00 2001
From: mmtr <1233880+mmtr@users.noreply.github.com>
Date: Thu, 9 May 2024 15:02:38 +0200
Subject: [PATCH 1/4] Nav Redesign: Add notifications pointer
---
client/layout/global-sidebar/footer.tsx | 1 +
.../menu-items/notifications/index.jsx | 30 ++++++--
.../menu-items/notifications/style.scss | 68 +++++++++++++++++++
3 files changed, 95 insertions(+), 4 deletions(-)
diff --git a/client/layout/global-sidebar/footer.tsx b/client/layout/global-sidebar/footer.tsx
index b21a2aeeaa837..3d8cc1fe8ba4f 100644
--- a/client/layout/global-sidebar/footer.tsx
+++ b/client/layout/global-sidebar/footer.tsx
@@ -57,6 +57,7 @@ export const GlobalSidebarFooter: FC< {
className="sidebar__item-notifications"
tooltip={ translate( 'Notifications' ) }
onClick={ () => recordTracksEvent( GLOBAL_SIDEBAR_EVENTS.NOTIFICATION_CLICK ) }
+ translate={ translate }
/>
{ isInSupportSession && (
diff --git a/client/layout/global-sidebar/menu-items/notifications/index.jsx b/client/layout/global-sidebar/menu-items/notifications/index.jsx
index 4c085128d5723..0652b0fe7c5a1 100644
--- a/client/layout/global-sidebar/menu-items/notifications/index.jsx
+++ b/client/layout/global-sidebar/menu-items/notifications/index.jsx
@@ -2,13 +2,15 @@ import classNames from 'classnames';
import { throttle } from 'lodash';
import PropTypes from 'prop-types';
import { Component, createRef } from 'react';
+import { createPortal } from 'react-dom';
import { connect } from 'react-redux';
import store from 'store';
+import DismissibleCard from 'calypso/blocks/dismissible-card';
import AsyncLoad from 'calypso/components/async-load';
-import { withCurrentRoute } from 'calypso/components/route';
import TranslatableString from 'calypso/components/translatable/proptype';
import SidebarMenuItem from 'calypso/layout/global-sidebar/menu-items/menu-item';
import { recordTracksEvent } from 'calypso/state/analytics/actions';
+import { getCurrentUserId } from 'calypso/state/current-user/selectors';
import hasUnseenNotifications from 'calypso/state/selectors/has-unseen-notifications';
import isNotificationsOpen from 'calypso/state/selectors/is-notifications-open';
import { toggleNotificationsPanel } from 'calypso/state/ui/actions';
@@ -26,6 +28,9 @@ class SidebarNotifications extends Component {
isNotificationsOpen: PropTypes.bool,
hasUnseenNotifications: PropTypes.bool,
tooltip: TranslatableString,
+ translate: PropTypes.func,
+ isSidebarCollapsed: PropTypes.bool,
+ currentUserId: PropTypes.number,
};
notificationLink = createRef();
@@ -135,8 +140,26 @@ class SidebarNotifications extends Component {
'is-initial-load': this.state.animationState === -1,
} );
+ const shouldShowNotificationsPointer =
+ Date.now() < Date.parse( '23 May 2024' ) && // Show pointer for 2 weeks.
+ this.props.currentUserId < 250450000; // Show pointer to users registered before 08-May-2024 (when we moved the notifications to the footer).
+
return (
<>
+ { shouldShowNotificationsPointer &&
+ createPortal(
+
+
+ { this.props.translate(
+ 'Looking for your notifications? They have been moved here.'
+ ) }
+
+ ,
+ document.querySelector( '.layout' )
+ ) }
}
@@ -167,6 +190,7 @@ const mapStateToProps = ( state ) => {
return {
isNotificationsOpen: isNotificationsOpen( state ),
hasUnseenNotifications: hasUnseenNotifications( state ),
+ currentUserId: getCurrentUserId( state ),
};
};
const mapDispatchToProps = {
@@ -174,6 +198,4 @@ const mapDispatchToProps = {
recordTracksEvent,
};
-export default withCurrentRoute(
- connect( mapStateToProps, mapDispatchToProps )( SidebarNotifications )
-);
+export default connect( mapStateToProps, mapDispatchToProps )( SidebarNotifications );
diff --git a/client/layout/global-sidebar/menu-items/notifications/style.scss b/client/layout/global-sidebar/menu-items/notifications/style.scss
index f757acbec5835..e739ac798e40c 100644
--- a/client/layout/global-sidebar/menu-items/notifications/style.scss
+++ b/client/layout/global-sidebar/menu-items/notifications/style.scss
@@ -1,3 +1,71 @@
.sidebar-notifications__panel {
position: absolute;
}
+
+.sidebar-notifications-pointer {
+ position: absolute;
+ z-index: z-index("root", ".layout__secondary");
+ bottom: 55px;
+ left: 35px;
+ background: var(--studio-black);
+ color: var(--studio-white);
+ /* stylelint-disable-next-line scales/font-sizes */
+ font-size: 0.8125rem;
+ margin: 0;
+ padding: 12px;
+ box-shadow: none;
+ display: flex;
+ flex-direction: column-reverse;
+ width: 250px;
+
+ &::after {
+ content: "";
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ width: 0;
+ height: 0;
+ border-top: 8px solid var(--studio-black);
+ border-left: 8px solid transparent;
+ border-right: 8px solid transparent;
+ visibility: visible;
+ }
+
+ .dismissible-card__close-button {
+ position: relative;
+ width: auto;
+ height: auto;
+ top: auto;
+ right: auto;
+ margin-top: 12px;
+ margin-right: 0;
+ background-color: var(--color-accent);
+ border-color: var(--color-accent);
+ color: var(--color-text-inverted);
+ font-size: $font-body-extra-small;
+ line-height: 1;
+ border-radius: 2px;
+ padding: 7px;
+ align-self: flex-end;
+
+ &::before {
+ content: attr(aria-label);
+ }
+
+ svg {
+ display: none;
+ }
+ }
+}
+
+.is-global-sidebar-collapsed .sidebar-notifications-pointer {
+ display: none;
+}
+
+@media ( max-width: 782px ) {
+ .sidebar-notifications-pointer {
+ display: none;
+ }
+}
From 1843e2d7f4e64a5254dd08124f60ae61d0618fdb Mon Sep 17 00:00:00 2001
From: mmtr <1233880+mmtr@users.noreply.github.com>
Date: Thu, 9 May 2024 15:15:02 +0200
Subject: [PATCH 2/4] Remove unnecessary prop type
---
client/layout/global-sidebar/menu-items/notifications/index.jsx | 1 -
1 file changed, 1 deletion(-)
diff --git a/client/layout/global-sidebar/menu-items/notifications/index.jsx b/client/layout/global-sidebar/menu-items/notifications/index.jsx
index 0652b0fe7c5a1..14e39d37872b3 100644
--- a/client/layout/global-sidebar/menu-items/notifications/index.jsx
+++ b/client/layout/global-sidebar/menu-items/notifications/index.jsx
@@ -29,7 +29,6 @@ class SidebarNotifications extends Component {
hasUnseenNotifications: PropTypes.bool,
tooltip: TranslatableString,
translate: PropTypes.func,
- isSidebarCollapsed: PropTypes.bool,
currentUserId: PropTypes.number,
};
From c9369ef2f44a60fb1bc1a0d8293f60f4a0fc3095 Mon Sep 17 00:00:00 2001
From: mmtr <1233880+mmtr@users.noreply.github.com>
Date: Thu, 9 May 2024 15:22:28 +0200
Subject: [PATCH 3/4] Hide pointer if untranslated
---
.../menu-items/notifications/index.jsx | 14 ++++++++++++--
1 file changed, 12 insertions(+), 2 deletions(-)
diff --git a/client/layout/global-sidebar/menu-items/notifications/index.jsx b/client/layout/global-sidebar/menu-items/notifications/index.jsx
index 14e39d37872b3..640db70f1010a 100644
--- a/client/layout/global-sidebar/menu-items/notifications/index.jsx
+++ b/client/layout/global-sidebar/menu-items/notifications/index.jsx
@@ -1,3 +1,5 @@
+import { englishLocales } from '@automattic/i18n-utils';
+import { hasTranslation } from '@wordpress/i18n';
import classNames from 'classnames';
import { throttle } from 'lodash';
import PropTypes from 'prop-types';
@@ -11,6 +13,7 @@ import TranslatableString from 'calypso/components/translatable/proptype';
import SidebarMenuItem from 'calypso/layout/global-sidebar/menu-items/menu-item';
import { recordTracksEvent } from 'calypso/state/analytics/actions';
import { getCurrentUserId } from 'calypso/state/current-user/selectors';
+import getCurrentLocaleSlug from 'calypso/state/selectors/get-current-locale-slug';
import hasUnseenNotifications from 'calypso/state/selectors/has-unseen-notifications';
import isNotificationsOpen from 'calypso/state/selectors/is-notifications-open';
import { toggleNotificationsPanel } from 'calypso/state/ui/actions';
@@ -30,6 +33,7 @@ class SidebarNotifications extends Component {
tooltip: TranslatableString,
translate: PropTypes.func,
currentUserId: PropTypes.number,
+ locale: PropTypes.string,
};
notificationLink = createRef();
@@ -140,8 +144,13 @@ class SidebarNotifications extends Component {
} );
const shouldShowNotificationsPointer =
- Date.now() < Date.parse( '23 May 2024' ) && // Show pointer for 2 weeks.
- this.props.currentUserId < 250450000; // Show pointer to users registered before 08-May-2024 (when we moved the notifications to the footer).
+ // Show pointer for 2 weeks.
+ Date.now() < Date.parse( '23 May 2024' ) &&
+ // Show pointer to users registered before 08-May-2024 (when we moved the notifications to the footer).
+ this.props.currentUserId < 250450000 &&
+ // Show pointer only if translated.
+ ( englishLocales.includes( this.props.locale ) ||
+ hasTranslation( 'Looking for your notifications? They have been moved here.' ) );
return (
<>
@@ -190,6 +199,7 @@ const mapStateToProps = ( state ) => {
isNotificationsOpen: isNotificationsOpen( state ),
hasUnseenNotifications: hasUnseenNotifications( state ),
currentUserId: getCurrentUserId( state ),
+ locale: getCurrentLocaleSlug( state ),
};
};
const mapDispatchToProps = {
From 8495a8604370db38b9e17387bd8e908684d2e6fa Mon Sep 17 00:00:00 2001
From: mmtr <1233880+mmtr@users.noreply.github.com>
Date: Thu, 9 May 2024 16:40:10 +0200
Subject: [PATCH 4/4] Fix E2E
---
.../layout/global-sidebar/menu-items/notifications/index.jsx | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/client/layout/global-sidebar/menu-items/notifications/index.jsx b/client/layout/global-sidebar/menu-items/notifications/index.jsx
index 640db70f1010a..25fe42043add2 100644
--- a/client/layout/global-sidebar/menu-items/notifications/index.jsx
+++ b/client/layout/global-sidebar/menu-items/notifications/index.jsx
@@ -11,6 +11,7 @@ import DismissibleCard from 'calypso/blocks/dismissible-card';
import AsyncLoad from 'calypso/components/async-load';
import TranslatableString from 'calypso/components/translatable/proptype';
import SidebarMenuItem from 'calypso/layout/global-sidebar/menu-items/menu-item';
+import { isE2ETest } from 'calypso/lib/e2e';
import { recordTracksEvent } from 'calypso/state/analytics/actions';
import { getCurrentUserId } from 'calypso/state/current-user/selectors';
import getCurrentLocaleSlug from 'calypso/state/selectors/get-current-locale-slug';
@@ -150,7 +151,9 @@ class SidebarNotifications extends Component {
this.props.currentUserId < 250450000 &&
// Show pointer only if translated.
( englishLocales.includes( this.props.locale ) ||
- hasTranslation( 'Looking for your notifications? They have been moved here.' ) );
+ hasTranslation( 'Looking for your notifications? They have been moved here.' ) ) &&
+ // Hide pointer on E2E tests so it doesn't hide menu items that are expected to be visible.
+ ! isE2ETest();
return (
<>