From d2daf1c0fc1c4806bc75c6ea32118d02b9060011 Mon Sep 17 00:00:00 2001 From: kanhaiya04 Date: Sun, 14 Jan 2024 15:13:37 +0530 Subject: [PATCH 1/4] Fixed #4756 dropdown popup positioning in contents page --- .../manage/Contents/ContentsItem.jsx | 204 +++++++++++------- .../themes/pastanaga/modules/popup.overrides | 13 ++ 2 files changed, 138 insertions(+), 79 deletions(-) diff --git a/packages/volto/src/components/manage/Contents/ContentsItem.jsx b/packages/volto/src/components/manage/Contents/ContentsItem.jsx index 20a0277f9c..2791f3753c 100644 --- a/packages/volto/src/components/manage/Contents/ContentsItem.jsx +++ b/packages/volto/src/components/manage/Contents/ContentsItem.jsx @@ -3,14 +3,14 @@ * @module components/manage/Contents/ContentsItem */ -import React from 'react'; -import { Button, Table, Menu, Divider } from 'semantic-ui-react'; +import React, { useState } from 'react'; +import { Button, Table, Menu, Divider, Ref } from 'semantic-ui-react'; import { Link } from 'react-router-dom'; import PropTypes from 'prop-types'; import { map } from 'lodash'; import { useIntl, defineMessages, FormattedMessage } from 'react-intl'; -import { Circle, FormattedDate, Icon, Popup } from '@plone/volto/components'; -import { getContentIcon } from '@plone/volto/helpers'; +import { Circle, FormattedDate, Icon } from '@plone/volto/components'; +import { getContentIcon, useDetectClickOutside } from '@plone/volto/helpers'; import moreSVG from '@plone/volto/icons/more.svg'; import checkboxUncheckedSVG from '@plone/volto/icons/checkbox-unchecked.svg'; import checkboxCheckedSVG from '@plone/volto/icons/checkbox-checked.svg'; @@ -25,6 +25,8 @@ import dragSVG from '@plone/volto/icons/drag.svg'; import cx from 'classnames'; import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable'; +import { usePopper } from 'react-popper'; +import { Portal } from 'react-portal'; const messages = defineMessages({ private: { @@ -93,6 +95,30 @@ export const ContentsItemComponent = ({ isDragging, order, }) => { + const [isOpenDropDownPopUp, setOpenDropDownPopUp] = React.useState(false); + const [referenceElement, setReferenceElement] = useState(null); + const [popperElement, setPopperElement] = useState(null); + const { styles, attributes } = usePopper(referenceElement, popperElement, { + placement: 'bottom-end', + modifiers: [ + { + name: 'offset', + options: { + offset: [0, 2], + }, + }, + { + name: 'flip', + options: { + fallbackPlacements: ['left', 'top-start'], + }, + }, + ], + }); + const clickOutsideDropDownPopUpRef = useDetectClickOutside({ + onTriggered: () => setOpenDropDownPopUp(false), + triggerKeys: ['Escape'], + }); const intl = useIntl(); return connectDropTarget( @@ -221,83 +247,103 @@ export const ContentsItemComponent = ({ className={cx('', { 'dragging-cell': isDragging })} textAlign="right" > - - } - > - - - {' '} - - - - {' '} - - - - + + - + + + {isOpenDropDownPopUp ? ( + +
+ + + {' '} + + + + {' '} + + + + + {' '} + + + + {' '} + + + + {' '} + + + + + {' '} + + + + {' '} + + + +
+ + ) : null} + , ), diff --git a/packages/volto/theme/themes/pastanaga/modules/popup.overrides b/packages/volto/theme/themes/pastanaga/modules/popup.overrides index 1904a5630e..36558e0bbd 100644 --- a/packages/volto/theme/themes/pastanaga/modules/popup.overrides +++ b/packages/volto/theme/themes/pastanaga/modules/popup.overrides @@ -70,3 +70,16 @@ } } } + +.popperJs-dropdown-popup { + > .menu { + .item { + display: flex !important; + align-items: center; + + > .icon { + margin-right: 1rem; + } + } + } +} From 6343c2725075f0286a3493efd59b497b689c0112 Mon Sep 17 00:00:00 2001 From: kanhaiya04 Date: Wed, 24 Jan 2024 00:07:35 +0530 Subject: [PATCH 2/4] fixed the ContentsItem snapshot --- .../__snapshots__/ContentsItem.test.jsx.snap | 43 +++++++++++-------- 1 file changed, 25 insertions(+), 18 deletions(-) diff --git a/packages/volto/src/components/manage/Contents/__snapshots__/ContentsItem.test.jsx.snap b/packages/volto/src/components/manage/Contents/__snapshots__/ContentsItem.test.jsx.snap index bfbbff011f..52969243a1 100644 --- a/packages/volto/src/components/manage/Contents/__snapshots__/ContentsItem.test.jsx.snap +++ b/packages/volto/src/components/manage/Contents/__snapshots__/ContentsItem.test.jsx.snap @@ -115,24 +115,31 @@ exports[`ContentsItem renders a contents item component 1`] = ` - +
+ +
`; From ffa8d4c2db342f5ab4b3476fc8b03387ca906e53 Mon Sep 17 00:00:00 2001 From: kanhaiya04 Date: Wed, 24 Jan 2024 00:26:39 +0530 Subject: [PATCH 3/4] updated the log --- packages/volto/news/5566.bugfix | 1 + 1 file changed, 1 insertion(+) create mode 100644 packages/volto/news/5566.bugfix diff --git a/packages/volto/news/5566.bugfix b/packages/volto/news/5566.bugfix new file mode 100644 index 0000000000..31f59de9f5 --- /dev/null +++ b/packages/volto/news/5566.bugfix @@ -0,0 +1 @@ +Resolved the positioning issue of the dropdown pop on the contents page by implementing dropdown pop with PopperJS. @kanhaiya04 \ No newline at end of file From f19e91dbca2d470f36df8de661061593a8dbd82b Mon Sep 17 00:00:00 2001 From: kanhaiya04 Date: Wed, 24 Jan 2024 22:52:16 +0530 Subject: [PATCH 4/4] updated the log entry --- packages/volto/news/5566.bugfix | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/volto/news/5566.bugfix b/packages/volto/news/5566.bugfix index 31f59de9f5..19f620d02c 100644 --- a/packages/volto/news/5566.bugfix +++ b/packages/volto/news/5566.bugfix @@ -1 +1 @@ -Resolved the positioning issue of the dropdown pop on the contents page by implementing dropdown pop with PopperJS. @kanhaiya04 \ No newline at end of file +Implemented PopperJS to correctly position the pop-up menu on the contents page. @kanhaiya04 \ No newline at end of file