-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
rebase with master, conflicts resolved
- Loading branch information
grzegorz_marzencki
committed
Mar 23, 2021
1 parent
73b2d92
commit 272ce65
Showing
9 changed files
with
327 additions
and
84 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +0,0 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { Spinner, SelectControl } from '@wordpress/components'; | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import useMenuLocations from '../../hooks/use-menu-locations'; | ||
|
|
||
| export default function ManageLocations( { menus } ) { | ||
| const [ menuLocations, assignMenuToLocation ] = useMenuLocations(); | ||
|
|
||
| if ( ! menus || ! menuLocations ) { | ||
| return <Spinner />; | ||
| } | ||
|
|
||
| if ( ! menus.length ) { | ||
| return <p>{ __( 'There are no available menus.' ) }</p>; | ||
| } | ||
|
|
||
| if ( ! menuLocations.length ) { | ||
| return <p>{ __( 'There are no available menu locations.' ) }</p>; | ||
| } | ||
|
|
||
| return menuLocations.map( ( menuLocation ) => ( | ||
| <SelectControl | ||
| key={ menuLocation.name } | ||
| label={ menuLocation.description } | ||
| labelPosition="top" | ||
| value={ menuLocation.menu } | ||
| options={ [ | ||
| { value: 0, label: __( '— Select a Menu —' ) }, | ||
| ...menus.map( ( menu ) => ( { | ||
| value: menu.id, | ||
| label: menu.name, | ||
| } ) ), | ||
| ] } | ||
| onChange={ ( menuId ) => { | ||
| assignMenuToLocation( menuLocation.name, Number( menuId ) ); | ||
| } } | ||
| /> | ||
| ) ); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
158 changes: 158 additions & 0 deletions
158
packages/edit-navigation/src/components/inspector-additions/manage-locations.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,158 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { useContext } from '@wordpress/element'; | ||
| import { | ||
| Spinner, | ||
| SelectControl, | ||
| CheckboxControl, | ||
| Button, | ||
| Modal, | ||
| } from '@wordpress/components'; | ||
| import { __, sprintf } from '@wordpress/i18n'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { useMenuLocations, MenuIdContext } from '../../hooks'; | ||
|
|
||
| export default function ManageLocations( { | ||
| onSelectMenu, | ||
| isModalOpen, | ||
| openModal, | ||
| closeModal, | ||
| } ) { | ||
| const menus = useSelect( ( select ) => select( 'core' ).getMenus(), [] ); | ||
|
|
||
| const selectedMenuId = useContext( MenuIdContext ); | ||
|
|
||
| const { | ||
| menuLocations, | ||
| assignMenuToLocation, | ||
| toggleMenuLocationAssignment, | ||
| } = useMenuLocations(); | ||
|
|
||
| const themeLocationCountTextMain = sprintf( | ||
| // translators: Number of available theme locations. | ||
| __( | ||
| 'Your current theme provides %d different locations to place menu.' | ||
| ), | ||
| menuLocations.length | ||
| ); | ||
|
|
||
| const themeLocationCountTextModal = sprintf( | ||
| // translators: Number of available theme locations. | ||
| __( | ||
| 'Your current theme supports %d different locations. Select which menu appears in each location.' | ||
| ), | ||
| menuLocations.length | ||
| ); | ||
|
|
||
| const menusWithSelection = menuLocations.map( ( { name, menu } ) => { | ||
| const menuOnLocation = menus | ||
| .filter( ( { id } ) => ! [ 0, selectedMenuId ].includes( id ) ) | ||
| .find( ( { id } ) => id === menu ); | ||
|
|
||
| return ( | ||
| <li | ||
| key={ name } | ||
| className="edit-navigation-manage-locations__checklist-item" | ||
| > | ||
| <CheckboxControl | ||
| className="edit-navigation-manage-locations__menu-location-checkbox" | ||
| checked={ menu === selectedMenuId } | ||
| onChange={ () => | ||
| toggleMenuLocationAssignment( name, selectedMenuId ) | ||
| } | ||
| label={ name } | ||
| help={ | ||
| menuOnLocation && | ||
| sprintf( | ||
| // translators: menu name. | ||
| __( 'Currently using %s' ), | ||
| menuOnLocation.name | ||
| ) | ||
| } | ||
| /> | ||
| </li> | ||
| ); | ||
| } ); | ||
|
|
||
| if ( ! menus || ! menuLocations ) { | ||
| return <Spinner />; | ||
| } | ||
|
|
||
| if ( ! menuLocations.length ) { | ||
| return <p>{ __( 'There are no available menu locations.' ) }</p>; | ||
| } | ||
|
|
||
| const menuLocationCard = menuLocations.map( ( menuLocation ) => ( | ||
| <div | ||
| key={ menuLocation.name } | ||
| className="edit-navigation-manage-locations__menu-entry" | ||
| > | ||
| <SelectControl | ||
| key={ menuLocation.name } | ||
| className="edit-navigation-manage-locations__select-menu" | ||
| label={ menuLocation.description } | ||
| labelPosition="top" | ||
| value={ menuLocation.menu } | ||
| options={ [ | ||
| { value: 0, label: __( '-' ), key: 0 }, | ||
| ...menus.map( ( { id, name } ) => ( { | ||
| key: id, | ||
| value: id, | ||
| label: name, | ||
| } ) ), | ||
| ] } | ||
| onChange={ ( menuId ) => { | ||
| assignMenuToLocation( menuLocation.name, Number( menuId ) ); | ||
| } } | ||
| /> | ||
| <Button | ||
| isSecondary | ||
| style={ { | ||
| visibility: !! menuLocation.menu ? 'visible' : 'hidden', | ||
| } } | ||
| className="edit-navigation-manage-locations__edit-button" | ||
| onClick={ () => ( | ||
| closeModal(), onSelectMenu( menuLocation.menu ) | ||
| ) } | ||
| > | ||
| { __( 'Edit' ) } | ||
| </Button> | ||
| </div> | ||
| ) ); | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="edit-navigation-manage-locations__theme-location-text-main"> | ||
| { themeLocationCountTextMain } | ||
| </div> | ||
| <ul className="edit-navigation-manage-locations__checklist"> | ||
| { menusWithSelection } | ||
| </ul> | ||
| <Button | ||
| isSecondary | ||
| className="edit-navigation-manage-locations__open-menu-locations-modal-button" | ||
| aria-expanded={ isModalOpen } | ||
| onClick={ openModal } | ||
| > | ||
| { __( 'Manage locations' ) } | ||
| </Button> | ||
| { isModalOpen && ( | ||
| <Modal | ||
| className="edit-navigation-manage-locations__modal" | ||
| title={ __( 'Manage locations' ) } | ||
| onRequestClose={ closeModal } | ||
| > | ||
| <div className="edit-navigation-manage-locations__theme-location-text-modal"> | ||
| { themeLocationCountTextModal } | ||
| </div> | ||
| { menuLocationCard } | ||
| </Modal> | ||
| ) } | ||
| </> | ||
| ); | ||
| } |
56 changes: 56 additions & 0 deletions
56
packages/edit-navigation/src/components/inspector-additions/style.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,59 @@ | ||
| .edit-navigation-inspector-additions__delete-menu-panel { | ||
| text-align: center; | ||
| } | ||
|
|
||
| .block-editor-block-inspector__no-blocks, | ||
| .block-editor-block-inspector { | ||
| width: $sidebar-width; | ||
| background: $white; | ||
| border-left: 1px solid $gray-300; | ||
| position: fixed; | ||
| top: $grid-unit-40; | ||
| right: 0; | ||
| bottom: 0; | ||
| z-index: 1; | ||
| overflow: auto; | ||
| } | ||
|
|
||
| .edit-navigation-manage-locations__modal { | ||
| max-width: 360px; | ||
| } | ||
|
|
||
| .edit-navigation-manage-locations__delete-menu-panel { | ||
| text-align: center; | ||
| } | ||
|
|
||
| .edit-navigation-manage-locations__menu-entry .components-base-control { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .edit-navigation-manage-locations__edit-button { | ||
| flex: 1; | ||
| } | ||
|
|
||
| .edit-navigation-manage-locations__menu-entry { | ||
| display: flex; | ||
| margin-bottom: $grid-unit-15; | ||
| margin-top: $grid-unit-15; | ||
| .components-custom-select-control, | ||
| .components-custom-select-control__button { | ||
| width: 100%; | ||
| } | ||
| button { | ||
| height: 100%; | ||
| } | ||
| } | ||
|
|
||
| .edit-navigation-manage-locations__select-menu { | ||
| padding-right: $grid-unit-10; | ||
| } | ||
|
|
||
| .edit-navigation-manage-locations__open-menu-locations-modal-button { | ||
| width: 100%; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .edit-navigation-manage-locations__theme-location-text-main, | ||
| .edit-navigation-manage-locations__theme-location-text-modal { | ||
| margin-bottom: $grid-unit-30; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.