Remove mobile activity panel toggle (https://github.com/woocommerce/woocommerce-admin/pull/6539)
* Remove activity panel mobile sub nav * Allow toggling of tab in focus outside * Add changelog and testing instructions
This commit is contained in:
Joshua T Flowers
GitHub
parent
e99fc3488a
commit
0e1b81b3c9
|
|
@ -3,11 +3,8 @@
|
|||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { lazy, useState } from '@wordpress/element';
|
||||
import { Button } from '@wordpress/components';
|
||||
import { useDispatch, useSelect } from '@wordpress/data';
|
||||
import { uniqueId, find } from 'lodash';
|
||||
import CrossIcon from 'gridicons/dist/cross-small';
|
||||
import classnames from 'classnames';
|
||||
import {
|
||||
Icon,
|
||||
help as helpIcon,
|
||||
|
|
@ -24,7 +21,6 @@ import { recordEvent } from '@woocommerce/tracks';
|
|||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
import ActivityPanelToggleBubble from './toggle-bubble';
|
||||
import { getUnreadNotes } from './unread-indicators';
|
||||
import { isWCAdmin } from '../../dashboard/utils';
|
||||
import { Tabs } from './tabs';
|
||||
|
|
@ -47,7 +43,6 @@ export const ActivityPanel = ( { isEmbedded, query, userPreferencesData } ) => {
|
|||
const [ currentTab, setCurrentTab ] = useState( '' );
|
||||
const [ isPanelOpen, setIsPanelOpen ] = useState( false );
|
||||
const [ isPanelSwitching, setIsPanelSwitching ] = useState( false );
|
||||
const [ mobileOpen, setMobileOpen ] = useState( false );
|
||||
|
||||
const {
|
||||
hasUnreadNotes,
|
||||
|
|
@ -85,7 +80,6 @@ export const ActivityPanel = ( { isEmbedded, query, userPreferencesData } ) => {
|
|||
isPanelOpen;
|
||||
|
||||
setCurrentTab( tabName );
|
||||
setMobileOpen( isTabOpen );
|
||||
setIsPanelOpen( isTabOpen );
|
||||
setIsPanelSwitching( panelSwitching );
|
||||
};
|
||||
|
|
@ -101,14 +95,6 @@ export const ActivityPanel = ( { isEmbedded, query, userPreferencesData } ) => {
|
|||
}
|
||||
};
|
||||
|
||||
// On smaller screen, the panel buttons are hidden behind a toggle.
|
||||
const toggleMobile = () => {
|
||||
const tabs = getTabs();
|
||||
setCurrentTab( mobileOpen ? '' : tabs[ 0 ].name );
|
||||
setMobileOpen( ! mobileOpen );
|
||||
setIsPanelOpen( ! mobileOpen );
|
||||
};
|
||||
|
||||
const isHomescreen = () => {
|
||||
return query.page === 'wc-admin' && ! query.path;
|
||||
};
|
||||
|
|
@ -251,18 +237,7 @@ export const ActivityPanel = ( { isEmbedded, query, userPreferencesData } ) => {
|
|||
|
||||
const tabs = getTabs();
|
||||
const headerId = uniqueId( 'activity-panel-header_' );
|
||||
const panelClasses = classnames( 'woocommerce-layout__activity-panel', {
|
||||
'is-mobile-open': mobileOpen,
|
||||
} );
|
||||
|
||||
const showHelpHighlightTooltip = shouldShowHelpTooltip();
|
||||
const hasUnread = tabs.some( ( tab ) => tab.unread );
|
||||
const viewLabel = hasUnread
|
||||
? __(
|
||||
'View Activity Panel, you have unread activity',
|
||||
'woocommerce-admin'
|
||||
)
|
||||
: __( 'View Activity Panel', 'woocommerce-admin' );
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
|
@ -272,49 +247,30 @@ export const ActivityPanel = ( { isEmbedded, query, userPreferencesData } ) => {
|
|||
<Section
|
||||
component="aside"
|
||||
id="woocommerce-activity-panel"
|
||||
className="woocommerce-layout__activity-panel"
|
||||
aria-labelledby={ headerId }
|
||||
>
|
||||
<Button
|
||||
onClick={ () => {
|
||||
toggleMobile();
|
||||
<Tabs
|
||||
tabs={ tabs }
|
||||
tabOpen={ isPanelOpen }
|
||||
selectedTab={ currentTab }
|
||||
onTabClick={ ( tab, tabOpen ) => {
|
||||
if ( tab.onClick ) {
|
||||
tab.onClick();
|
||||
return;
|
||||
}
|
||||
togglePanel( tab, tabOpen );
|
||||
} }
|
||||
label={
|
||||
mobileOpen
|
||||
? __( 'Close Activity Panel', 'woocommerce-admin' )
|
||||
: viewLabel
|
||||
}
|
||||
aria-expanded={ mobileOpen }
|
||||
className="woocommerce-layout__activity-panel-mobile-toggle"
|
||||
>
|
||||
{ mobileOpen ? (
|
||||
<CrossIcon />
|
||||
) : (
|
||||
<ActivityPanelToggleBubble hasUnread={ hasUnread } />
|
||||
) }
|
||||
</Button>
|
||||
<div className={ panelClasses }>
|
||||
<Tabs
|
||||
tabs={ tabs }
|
||||
tabOpen={ isPanelOpen }
|
||||
selectedTab={ currentTab }
|
||||
onTabClick={ ( tab, tabOpen ) => {
|
||||
if ( tab.onClick ) {
|
||||
tab.onClick();
|
||||
return;
|
||||
}
|
||||
togglePanel( tab, tabOpen );
|
||||
} }
|
||||
/>
|
||||
<Panel
|
||||
currentTab
|
||||
isPanelOpen={ isPanelOpen }
|
||||
isPanelSwitching={ isPanelSwitching }
|
||||
tab={ find( getTabs(), { name: currentTab } ) }
|
||||
content={ getPanelContent( currentTab ) }
|
||||
closePanel={ () => closePanel() }
|
||||
clearPanel={ () => clearPanel() }
|
||||
/>
|
||||
</div>
|
||||
/>
|
||||
<Panel
|
||||
currentTab
|
||||
isPanelOpen={ isPanelOpen }
|
||||
isPanelSwitching={ isPanelSwitching }
|
||||
tab={ find( getTabs(), { name: currentTab } ) }
|
||||
content={ getPanelContent( currentTab ) }
|
||||
closePanel={ () => closePanel() }
|
||||
clearPanel={ () => clearPanel() }
|
||||
/>
|
||||
</Section>
|
||||
{ showHelpHighlightTooltip ? (
|
||||
<HighlightTooltip
|
||||
|
|
|
|||
|
|
@ -26,7 +26,14 @@ export const Panel = ( {
|
|||
'.woocommerce-inbox-dismiss-confirmation_modal'
|
||||
) || event.target.closest( '.components-snackbar__action' );
|
||||
|
||||
if ( isPanelOpen && ! isClickOnModalOrSnackbar ) {
|
||||
const isToggling =
|
||||
event.relatedTarget &&
|
||||
event.relatedTarget.classList.contains(
|
||||
'woocommerce-layout__activity-panel-tab'
|
||||
) &&
|
||||
event.relatedTarget.classList.contains( 'is-active' );
|
||||
|
||||
if ( isPanelOpen && ! isClickOnModalOrSnackbar && ! isToggling ) {
|
||||
closePanel();
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,30 +3,6 @@
|
|||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: $header-height;
|
||||
|
||||
@include breakpoint( '<782px' ) {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
background: $studio-white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100vw;
|
||||
display: none;
|
||||
flex: 1 100%;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@include breakpoint( '782px-960px' ) {
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
@include breakpoint( '>1280px' ) {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
&.is-mobile-open {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-layout__activity-panel-tabs {
|
||||
|
|
@ -182,20 +158,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.woocommerce-layout__activity-panel-mobile-toggle.components-button {
|
||||
margin-right: 10px;
|
||||
max-width: 48px;
|
||||
|
||||
@include breakpoint( '>782px' ) {
|
||||
display: none;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-responsive-open .woocommerce-layout__activity-panel-mobile-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.woocommerce-layout__activity-panel-toggle-bubble.has-unread::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
|
|
@ -240,7 +202,7 @@
|
|||
@include activity-panel-slide();
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: #{$header-height + $header-height + $adminbar-height-mobile};
|
||||
top: #{$header-height + $adminbar-height-mobile};
|
||||
z-index: 1000;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
|
@ -250,12 +212,8 @@
|
|||
top: #{$header-height + $adminbar-height};
|
||||
}
|
||||
.has-woocommerce-navigation & {
|
||||
height: calc(100vh - #{$header-height + $header-height});
|
||||
top: #{$header-height + $header-height};
|
||||
@include breakpoint( '>782px' ) {
|
||||
height: calc(100vh - #{$header-height});
|
||||
top: #{$header-height};
|
||||
}
|
||||
height: calc(100vh - #{$header-height});
|
||||
top: #{$header-height};
|
||||
}
|
||||
|
||||
&.is-open {
|
||||
|
|
|
|||
|
|
@ -75,6 +75,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
|
|||
|
||||
== Unreleased ==
|
||||
|
||||
- Tweak: Remove mobile activity panel toggle #6539
|
||||
- Dev: Add nav header component tests #6509
|
||||
- Add: Add legacy report items to new navigation #6507
|
||||
- Dev: Add initial tests for navigation Menu class #6492
|
||||
|
|
|
|||
Loading…
Reference in New Issue