Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use a DropdownMenu for menu selection in the navigation screen #25390

Merged
merged 10 commits into from
Oct 20, 2020
Merged

Use a DropdownMenu for menu selection in the navigation screen #25390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
733ee30
Add menu selection button
talldan Sep 17, 2020
d789df0
Update copy
talldan Sep 17, 2020
5c66bd4
Make the change menu button disabled when clicking it would have no a…
talldan Sep 17, 2020
07208b6
Update selected menu when creating a menu or any change external to t…
talldan Sep 17, 2020
d6204d5
Add explanatory comment
talldan Sep 17, 2020
8593bb0
Switch to a dropdown menu for menu selector
talldan Sep 18, 2020
f3e0492
Add header showing currently edited menu
talldan Sep 22, 2020
67d8985
Move dropdown menu back into main header file
talldan Sep 22, 2020
66e8727
Align items left and add create menu header
talldan Sep 30, 2020
fc42623
Change text to No menus available
talldan Sep 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 65 additions & 27 deletions packages/edit-navigation/src/components/header/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,48 @@
/**
* External dependencies
*/
import { find } from 'lodash';

/**
* WordPress dependencies
*/
import { useViewportMatch } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
import { Button, SelectControl, Dropdown } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import {
Button,
Dropdown,
DropdownMenu,
MenuGroup,
MenuItemsChoice,
} from '@wordpress/components';

/**
* Internal dependencies
*/
import ManageLocations from './manage-locations';
import AddMenuForm from './add-menu-form';

export default function Header( { menus, selectedMenuId, onSelectMenu } ) {
const isMobileViewport = useViewportMatch( 'small', '<' );
export default function Header( {
menus,
selectedMenuId,
onSelectMenu,
isPending,
} ) {
const selectedMenu = find( menus, { id: selectedMenuId } );
const menuName = selectedMenu ? selectedMenu.name : undefined;
let actionHeaderText;

if ( menuName ) {
actionHeaderText = sprintf(
// translators: Name of the menu being edited, e.g. 'Main Menu'.
__( 'Editing: %s' ),
menuName
);
} else if ( isPending ) {
// Loading text won't be displayed if menus are preloaded.
actionHeaderText = __( 'Loading …' );
} else {
actionHeaderText = __( 'No menus available' );
}

return (
<div className="edit-navigation-header">
Expand All @@ -21,28 +51,36 @@ export default function Header( { menus, selectedMenuId, onSelectMenu } ) {
</h1>

<div className="edit-navigation-header__actions">
<div className="edit-navigation-header__current-menu">
<SelectControl
label={ __( 'Currently editing' ) }
hideLabelFromVision={ isMobileViewport }
disabled={ ! menus?.length }
value={ selectedMenuId ?? 0 }
options={
menus?.length
? menus.map( ( menu ) => ( {
value: menu.id,
label: menu.name,
} ) )
: [
{
value: 0,
label: '-',
},
]
}
onChange={ onSelectMenu }
/>
</div>
<h2 className="edit-navigation-header__action_header">
{ actionHeaderText }
</h2>

<DropdownMenu
icon={ null }
toggleProps={ {
showTooltip: false,
children: __( 'Select menu' ),
isTertiary: true,
disabled: ! menus,
__experimentalIsFocusable: true,
} }
popoverProps={ {
position: 'bottom center',
} }
>
{ () => (
<MenuGroup>
<MenuItemsChoice
value={ selectedMenuId }
onSelect={ onSelectMenu }
choices={ menus.map( ( menu ) => ( {
value: menu.id,
label: menu.name,
} ) ) }
/>
</MenuGroup>
) }
</DropdownMenu>

<Dropdown
position="bottom center"
Expand Down
18 changes: 12 additions & 6 deletions packages/edit-navigation/src/components/header/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,25 @@

// Lining up all the actions in a nice row.
.edit-navigation-header__actions {
align-items: center;
display: flex;
align-items: baseline;
margin-top: $grid-unit-10;

.edit-navigation-header__action_header {
font-weight: normal;
font-size: inherit;
margin: 0;
}

// Spacing out the actions a little.
.edit-navigation-header__current-menu,
.edit-navigation-header__action_header,
.components-dropdown {
margin-right: $grid-unit-20;
}
}

// The select menu for choosing which menu to edit.
.edit-navigation-header__current-menu .components-base-control__field {
margin: 0;
.components-dropdown:last-child {
margin-right: 0;
}
}

.edit-navigation-header__create-menu-button {
Expand Down
1 change: 1 addition & 0 deletions packages/edit-navigation/src/components/layout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ export default function Layout( { blockEditorSettings } ) {

<div className="edit-navigation-layout">
<Header
isPending={ ! navigationPost }
menus={ menus }
selectedMenuId={ selectedMenuId }
onSelectMenu={ selectMenu }
Expand Down