-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Allow renaming, duplication and deleting of Navigation menus from Bro…
…wse Mode Sidebar (#50880) * added more menu to navigation with delete menu option * modal for the rename function * prop refactoring, title on rename popup * very ugly renaming of the menu * duplicate function * added snackbar notices to each action * navigate to correct places on delete and duplicate. Added Copy after title on duplication * i18n Co-authored-by: Ben Dwyer <ben@scruffian.com> * Another i18n Co-authored-by: Ben Dwyer <ben@scruffian.com> * Apply suggestions from code review Co-authored-by: Ben Dwyer <ben@scruffian.com> * Use self documenting var name * Use consistent confirmatory action wording * Refactor MoreMenu to component * Extract Modal to seperate component * Refactor change function * Use local state and only edit record on “save” confirmation * Localise state closer to where it’s needed * Disable “Save” button until menu title is modified * Remove file import introduced during rebase * Handle Save errors * Error handling for Delete action * Force all actions to throw on error * Add error handling for Duplicate. Also pass error message and not error object. * Improve loading feedback when saving or deleting * Make prop naming consistent * i18n of modal title * Add confirmatory step prior to delete action * Fix rename input focus border clipping * Use default variant to get correct styles * Make `Copy` translatable * Updating confirmatory wording --------- Co-authored-by: Dave Smith <getdavemail@gmail.com> Co-authored-by: Ben Dwyer <ben@scruffian.com>
- Loading branch information
3 people
committed
Jun 12, 2023
1 parent
799137d
commit f634c45
Showing
6 changed files
with
359 additions
and
4 deletions.
There are no files selected for viewing
46 changes: 46 additions & 0 deletions
46
packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/delete-modal.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,46 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { | ||
| __experimentalHStack as HStack, | ||
| __experimentalVStack as VStack, | ||
| Button, | ||
| Modal, | ||
| } from '@wordpress/components'; | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| export default function RenameModal( { onClose, onConfirm } ) { | ||
| return ( | ||
| <Modal title={ __( 'Delete' ) } onRequestClose={ onClose }> | ||
| <form> | ||
| <VStack spacing="3"> | ||
| <p> | ||
| { __( | ||
| 'Are you sure you want to delete this Navigation menu?' | ||
| ) } | ||
| </p> | ||
| <HStack justify="right"> | ||
| <Button variant="tertiary" onClick={ onClose }> | ||
| { __( 'Cancel' ) } | ||
| </Button> | ||
|
|
||
| <Button | ||
| isDestructive | ||
| variant="primary" | ||
| type="submit" | ||
| onClick={ ( e ) => { | ||
| e.preventDefault(); | ||
| onConfirm(); | ||
|
|
||
| // Immediate close avoids ability to hit delete multiple times. | ||
| onClose(); | ||
| } } | ||
| > | ||
| { __( 'Confirm' ) } | ||
| </Button> | ||
| </HStack> | ||
| </VStack> | ||
| </form> | ||
| </Modal> | ||
| ); | ||
| } |
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
89 changes: 89 additions & 0 deletions
89
packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.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,89 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components'; | ||
| import { moreVertical } from '@wordpress/icons'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { useState } from '@wordpress/element'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import RenameModal from './rename-modal'; | ||
| import DeleteModal from './delete-modal'; | ||
|
|
||
| const POPOVER_PROPS = { | ||
| position: 'bottom right', | ||
| }; | ||
|
|
||
| export default function ScreenNavigationMoreMenu( props ) { | ||
| const { onDelete, onSave, onDuplicate, menuTitle } = props; | ||
|
|
||
| const [ renameModalOpen, setRenameModalOpen ] = useState( false ); | ||
| const [ deleteModalOpen, setDeleteModalOpen ] = useState( false ); | ||
|
|
||
| const closeModals = () => { | ||
| setRenameModalOpen( false ); | ||
| setDeleteModalOpen( false ); | ||
| }; | ||
| const openRenameModal = () => setRenameModalOpen( true ); | ||
| const openDeleteModal = () => setDeleteModalOpen( true ); | ||
|
|
||
| return ( | ||
| <> | ||
| <DropdownMenu | ||
| className="sidebar-navigation__more-menu" | ||
| icon={ moreVertical } | ||
| popoverProps={ POPOVER_PROPS } | ||
| > | ||
| { ( { onClose } ) => ( | ||
| <div> | ||
| <MenuGroup> | ||
| <MenuItem | ||
| onClick={ () => { | ||
| openRenameModal(); | ||
| // Close the dropdown after opening the modal. | ||
| onClose(); | ||
| } } | ||
| > | ||
| { __( 'Rename' ) } | ||
| </MenuItem> | ||
| <MenuItem | ||
| onClick={ () => { | ||
| onDuplicate(); | ||
| onClose(); | ||
| } } | ||
| > | ||
| { __( 'Duplicate' ) } | ||
| </MenuItem> | ||
| <MenuItem | ||
| isDestructive | ||
| isTertiary | ||
| onClick={ () => { | ||
| openDeleteModal(); | ||
|
|
||
| // Close the dropdown after opening the modal. | ||
| onClose(); | ||
| } } | ||
| > | ||
| { __( 'Delete' ) } | ||
| </MenuItem> | ||
| </MenuGroup> | ||
| </div> | ||
| ) } | ||
| </DropdownMenu> | ||
|
|
||
| { deleteModalOpen && ( | ||
| <DeleteModal onClose={ closeModals } onConfirm={ onDelete } /> | ||
| ) } | ||
|
|
||
| { renameModalOpen && ( | ||
| <RenameModal | ||
| onClose={ closeModals } | ||
| menuTitle={ menuTitle } | ||
| onSave={ onSave } | ||
| /> | ||
| ) } | ||
| </> | ||
| ); | ||
| } |
51 changes: 51 additions & 0 deletions
51
packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.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,51 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { | ||
| __experimentalHStack as HStack, | ||
| __experimentalVStack as VStack, | ||
| Button, | ||
| TextControl, | ||
| Modal, | ||
| } from '@wordpress/components'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { useState } from '@wordpress/element'; | ||
|
|
||
| export default function RenameModal( { menuTitle, onClose, onSave } ) { | ||
| const [ editedMenuTitle, setEditedMenuTitle ] = useState( menuTitle ); | ||
|
|
||
| return ( | ||
| <Modal title={ __( 'Rename' ) } onRequestClose={ onClose }> | ||
| <form className="sidebar-navigation__rename-modal-form"> | ||
| <VStack spacing="3"> | ||
| <TextControl | ||
| __nextHasNoMarginBottom | ||
| value={ editedMenuTitle } | ||
| placeholder={ __( 'Navigation title' ) } | ||
| onChange={ setEditedMenuTitle } | ||
| /> | ||
| <HStack justify="right"> | ||
| <Button variant="tertiary" onClick={ onClose }> | ||
| { __( 'Cancel' ) } | ||
| </Button> | ||
|
|
||
| <Button | ||
| disabled={ editedMenuTitle === menuTitle } | ||
| variant="primary" | ||
| type="submit" | ||
| onClick={ ( e ) => { | ||
| e.preventDefault(); | ||
| onSave( { title: editedMenuTitle } ); | ||
|
|
||
| // Immediate close avoids ability to hit save multiple times. | ||
| onClose(); | ||
| } } | ||
| > | ||
| { __( 'Save' ) } | ||
| </Button> | ||
| </HStack> | ||
| </VStack> | ||
| </form> | ||
| </Modal> | ||
| ); | ||
| } |
Oops, something went wrong.