diff --git a/client/layout/masterbar/logged-in.jsx b/client/layout/masterbar/logged-in.jsx index 1123f86f884a6..3ebec795f47ca 100644 --- a/client/layout/masterbar/logged-in.jsx +++ b/client/layout/masterbar/logged-in.jsx @@ -4,6 +4,7 @@ import page from '@automattic/calypso-router'; import { PromptIcon } from '@automattic/command-palette'; import { Button, Popover } from '@automattic/components'; import { isWithinBreakpoint, subscribeIsWithinBreakpoint } from '@automattic/viewport'; +import { Button as WPButton } from '@wordpress/components'; import { Icon, category } from '@wordpress/icons'; import { localize } from 'i18n-calypso'; import PropTypes from 'prop-types'; @@ -66,6 +67,7 @@ import Notifications from './masterbar-notifications/notifications-button'; const NEW_MASTERBAR_SHIPPING_DATE = new Date( 2022, 3, 14 ).getTime(); const MENU_POPOVER_PREFERENCE_KEY = 'dismissible-card-masterbar-collapsable-menu-popover'; +const READER_POPOVER_PREFERENCE_KEY = 'dismissible-card-masterbar-reader-popover'; const MOBILE_BREAKPOINT = '<480px'; const IS_RESPONSIVE_MENU_BREAKPOINT = '<782px'; @@ -78,6 +80,7 @@ class MasterbarLoggedIn extends Component { isResponsiveMenu: isWithinBreakpoint( IS_RESPONSIVE_MENU_BREAKPOINT ), // making the ref a state triggers a re-render when it changes (needed for popover) menuBtnRef: null, + readerBtnRef: null, }; static propTypes = { @@ -93,6 +96,7 @@ class MasterbarLoggedIn extends Component { isCheckoutFailed: PropTypes.bool, isInEditor: PropTypes.bool, hasDismissedThePopover: PropTypes.bool, + hasDismissedReaderPopover: PropTypes.bool, isUserNewerThanNewNavigation: PropTypes.bool, loadHelpCenterIcon: PropTypes.bool, isGlobalSidebarVisible: PropTypes.bool, @@ -319,6 +323,10 @@ class MasterbarLoggedIn extends Component { this.props.savePreference( MENU_POPOVER_PREFERENCE_KEY, true ); }; + dismissReaderPopover = () => { + this.props.savePreference( READER_POPOVER_PREFERENCE_KEY, true ); + }; + renderCheckout() { const { isCheckoutPending, @@ -520,30 +528,63 @@ class MasterbarLoggedIn extends Component { } renderReader() { - const { translate } = this.props; + const { translate, sectionName, sectionGroup, isFetchingPrefs, hasDismissedReaderPopover } = + this.props; + const { readerBtnRef } = this.state; return ( - + + + + } + onClick={ this.clickReader } + isActive={ this.isActive( 'reader', true ) } + tooltip={ translate( 'Read the blogs and topics you follow' ) } + preloadSection={ this.preloadReader } + ref={ ( ref ) => ref !== readerBtnRef && this.setState( { readerBtnRef: ref } ) } + hasGlobalBorderStyle + /> + { readerBtnRef && ( + - - - } - onClick={ this.clickReader } - isActive={ this.isActive( 'reader', true ) } - tooltip={ translate( 'Read the blogs and topics you follow' ) } - preloadSection={ this.preloadReader } - hasGlobalBorderStyle - /> +

+ { translate( "We've moved the Reader!", { + comment: 'This is a popover title', + } ) } +

+

+ { translate( 'Click the eyeglasses icon to check it out.' ) } +

+
+ + { translate( 'Got it', { comment: 'Got it, as in OK' } ) } + +
+ + ) } + ); } @@ -858,6 +899,7 @@ class MasterbarLoggedIn extends Component { export default connect( ( state ) => { const sectionGroup = getSectionGroup( state ); + const sectionName = getSectionName( state ); // Falls back to using the user's primary site if no site has been selected // by the user yet @@ -881,6 +923,7 @@ export default connect( siteAdminUrl: getSiteAdminUrl( state, siteId ), siteHomeUrl: getSiteHomeUrl( state, siteId ), sectionGroup, + sectionName, domainOnlySite: isDomainOnlySite( state, siteId ), hasNoSites: siteCount === 0, user: getCurrentUser( state ), @@ -894,6 +937,7 @@ export default connect( isJetpackNotAtomic: isJetpackSite( state, siteId ) && ! isAtomicSite( state, siteId ), currentLayoutFocus: getCurrentLayoutFocus( state ), hasDismissedThePopover: getPreference( state, MENU_POPOVER_PREFERENCE_KEY ), + hasDismissedReaderPopover: getPreference( state, READER_POPOVER_PREFERENCE_KEY ), isFetchingPrefs: isFetchingPreferences( state ), // If the user is newer than new navigation shipping date, don't tell them this nav is new. Everything is new to them. isUserNewerThanNewNavigation: diff --git a/client/layout/masterbar/style.scss b/client/layout/masterbar/style.scss index bf27a175f37d3..0612c479b0d86 100644 --- a/client/layout/masterbar/style.scss +++ b/client/layout/masterbar/style.scss @@ -1491,3 +1491,56 @@ a.masterbar__quick-language-switcher { opacity: 1; } } + +.popover.masterbar__reader-popover { + z-index: 176; + + .popover__arrow::before { + --color-border-inverted: var(--color-neutral-100); + } + + .popover__arrow { + border: 10px dashed var(--color-neutral-70) !important; + border-bottom-style: solid !important; + border-top: none !important; + border-left-color: transparent !important; + border-right-color: transparent !important; + } + .popover__inner { + display: flex; + gap: 16px; + padding: 16px; + flex-direction: column; + align-items: flex-start; + border-radius: 4px !important; + background-color: var(--color-neutral-100) !important; + border: 1px solid var(--color-neutral-70) !important; + left: 0 !important; + } + + .masterbar__reader-popover-heading { + font-size: rem(16px); + color: var(--color-text-inverted); + font-weight: 500; + } + + .masterbar__reader-popover-description { + max-width: 325px; + margin-top: -8px; + margin-bottom: 0; + font-size: rem(13px); + color: var(--color-neutral-0); + text-align: left; + } + + .masterbar__reader-popover-actions { + display: flex; + align-items: center; + justify-content: flex-end; + width: 100%; + button { + padding: 4px 8px; + font-size: rem(13px); + } + } +}