Skip to content

Commit

Permalink
Fixed #4756 dropdown popup positioning in contents page
Browse files Browse the repository at this point in the history
  • Loading branch information
@kanhaiya04
kanhaiya04 committed Jan 21, 2024
1 parent 0d80d0e commit d2daf1c
Show file tree
Hide file tree
Showing 2 changed files with 138 additions and 79 deletions.
204 changes: 125 additions & 79 deletions packages/volto/src/components/manage/Contents/ContentsItem.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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: {
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -221,83 +247,103 @@ export const ContentsItemComponent = ({
className={cx('', { 'dragging-cell': isDragging })}
textAlign="right"
>
<Popup
menu={true}
position="bottom right"
flowing={true}
basic={true}
on="click"
popper={{
className: 'dropdown-popup',
}}
trigger={
<Icon
name={moreSVG}
className="dropdown-popup-trigger"
size="24px"
color="#007eb1"
/>
}
>
<Menu vertical borderless fluid>
<Link className="item icon-align" to={`${item['@id']}/edit`}>
<Icon name={editingSVG} color="#007eb1" size="24px" />{' '}
<FormattedMessage id="Edit" defaultMessage="Edit" />
</Link>
<Link className="item right-dropdown icon-align" to={item['@id']}>
<Icon name={showSVG} color="#007eb1" size="24px" />{' '}
<FormattedMessage id="View" defaultMessage="View" />
</Link>
<Divider />
<Menu.Item
onClick={onCut}
value={item['@id']}
className="right-dropdown icon-align"
<div ref={clickOutsideDropDownPopUpRef}>
<Ref innerRef={setReferenceElement}>
<Button
basic
icon
onClick={() => setOpenDropDownPopUp(!isOpenDropDownPopUp)}
className="add-block-button"
>
<Icon name={cutSVG} color="#007eb1" size="24px" />{' '}
<FormattedMessage id="Cut" defaultMessage="Cut" />
</Menu.Item>
<Menu.Item
onClick={onCopy}
value={item['@id']}
className="right-dropdown icon-align"
>
<Icon name={copySVG} color="#007eb1" size="24px" />{' '}
<FormattedMessage id="Copy" defaultMessage="Copy" />
</Menu.Item>
<Menu.Item
onClick={onDelete}
value={item['@id']}
className="right-dropdown icon-align"
>
<Icon name={deleteSVG} color="#e40166" size="24px" />{' '}
<FormattedMessage id="Delete" defaultMessage="Delete" />
</Menu.Item>
<Divider />
<Menu.Item
onClick={onMoveToTop}
value={order}
className="right-dropdown icon-align"
>
<Icon name={moveUpSVG} color="#007eb1" size="24px" />{' '}
<FormattedMessage
id="Move to top of folder"
defaultMessage="Move to top of folder"
/>
</Menu.Item>
<Menu.Item
onClick={onMoveToBottom}
value={order}
className="right-dropdown icon-align"
>
<Icon name={moveDownSVG} color="#007eb1" size="24px" />{' '}
<FormattedMessage
id="Move to bottom of folder"
defaultMessage="Move to bottom of folder"
<Icon
name={moreSVG}
className="dropdown-popup-trigger"
size="24px"
color="#007eb1"
/>
</Menu.Item>
</Menu>
</Popup>
</Button>
</Ref>
{isOpenDropDownPopUp ? (
<Portal node={document.getElementById('body')}>
<div
ref={setPopperElement}
style={{
...styles.popper,
visibility: styles.popper.visibility,
zIndex: 1000,
minWidth: '200px',
}}
className="popperJs-dropdown-popup"
{...attributes.popper}
>
<Menu vertical borderless fluid>
<Link
className="item icon-align"
to={`${item['@id']}/edit`}
>
<Icon name={editingSVG} color="#007eb1" size="24px" />{' '}
<FormattedMessage id="Edit" defaultMessage="Edit" />
</Link>
<Link
className="item right-dropdown icon-align"
to={item['@id']}
>
<Icon name={showSVG} color="#007eb1" size="24px" />{' '}
<FormattedMessage id="View" defaultMessage="View" />
</Link>
<Divider />
<Menu.Item
onClick={onCut}
value={item['@id']}
className="right-dropdown icon-align"
>
<Icon name={cutSVG} color="#007eb1" size="24px" />{' '}
<FormattedMessage id="Cut" defaultMessage="Cut" />
</Menu.Item>
<Menu.Item
onClick={onCopy}
value={item['@id']}
className="right-dropdown icon-align"
>
<Icon name={copySVG} color="#007eb1" size="24px" />{' '}
<FormattedMessage id="Copy" defaultMessage="Copy" />
</Menu.Item>
<Menu.Item
onClick={onDelete}
value={item['@id']}
className="right-dropdown icon-align"
>
<Icon name={deleteSVG} color="#e40166" size="24px" />{' '}
<FormattedMessage id="Delete" defaultMessage="Delete" />
</Menu.Item>
<Divider />
<Menu.Item
onClick={onMoveToTop}
value={order}
className="right-dropdown icon-align"
>
<Icon name={moveUpSVG} color="#007eb1" size="24px" />{' '}
<FormattedMessage
id="Move to top of folder"
defaultMessage="Move to top of folder"
/>
</Menu.Item>
<Menu.Item
onClick={onMoveToBottom}
value={order}
className="right-dropdown icon-align"
>
<Icon name={moveDownSVG} color="#007eb1" size="24px" />{' '}
<FormattedMessage
id="Move to bottom of folder"
defaultMessage="Move to bottom of folder"
/>
</Menu.Item>
</Menu>
</div>
</Portal>
) : null}
</div>
</Table.Cell>
</tr>,
),
Expand Down
13 changes: 13 additions & 0 deletions packages/volto/theme/themes/pastanaga/modules/popup.overrides
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,3 +70,16 @@
}
}
}

.popperJs-dropdown-popup {
> .menu {
.item {
display: flex !important;
align-items: center;

> .icon {
margin-right: 1rem;
}
}
}
}

0 comments on commit d2daf1c

Please sign in to comment.