Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-03 23:00:14 -05:00
Code Issues Activity

Fixed comments dropdown menu being cutoff by iframe (#21555)

Browse source 
REF https://linear.app/ghost/issue/PLG-255/dropdown-cut-off-by-iframe
- Avoided menu cutoff by positioning the dropdown of the last comment
above the MoreButton
This commit is contained in:
Sanne de Vries 2024-11-07 11:39:52 +01:00 • committed by GitHub
parent 274f2aa8d3
commit 5f7734bf36
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 27 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/comments-ui/src/components/content/Content.tsx
View file

@ -63,7 +63,7 @@ const Content = () => {
</span>
</div>
)}
<div className={!pagination ? 'z-10 mt-4' : 'z-10'} data-test="comment-elements">
<div className="z-10" data-test="comment-elements">
{commentsElements}
</div>
<Pagination />

16
apps/comments-ui/src/components/content/buttons/MoreButton.tsx
View file

@ -10,7 +10,7 @@ type Props = {
const MoreButton: React.FC<Props> = ({comment, toggleEdit}) => {
const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
const {member, admin} = useAppContext();
const {member, admin, pagination, comments} = useAppContext();
const isAdmin = !!admin;
const toggleContextMenu = () => {
@ -21,10 +21,10 @@ const MoreButton: React.FC<Props> = ({comment, toggleEdit}) => {
setIsContextMenuOpen(false);
};
/*
* Whether we have at least one action inside the context menu
* (to hide the 'more' icon if we don't have any actions)
*/
// Check if this is the last comment and there's no more pagination
const isLastComment = (!pagination || pagination.total <= pagination.page * pagination.limit) &&
comments[comments.length - 1]?.id === comment.id;
const show = (!!member && comment.status === 'published') || isAdmin;
if (!show) {
@ -33,8 +33,10 @@ const MoreButton: React.FC<Props> = ({comment, toggleEdit}) => {
return (
<div data-testid="more-button">
<button className="outline-0" type="button" onClick={toggleContextMenu}><MoreIcon className={`duration-50 gh-comments-icon gh-comments-icon-more outline-0 transition ease-linear hover:fill-black/75 dark:hover:fill-white/75 ${isContextMenuOpen ? 'fill-black/75 dark:fill-white/75' : 'fill-black/50 dark:fill-white/60'}`} /></button>
{isContextMenuOpen ? <CommentContextMenu close={closeContextMenu} comment={comment} toggleEdit={toggleEdit} /> : null}
<button className="outline-0" type="button" onClick={toggleContextMenu}>
<MoreIcon className={`duration-50 gh-comments-icon gh-comments-icon-more outline-0 transition ease-linear hover:fill-black/75 dark:hover:fill-white/75 ${isContextMenuOpen ? 'fill-black/75 dark:fill-white/75' : 'fill-black/50 dark:fill-white/60'}`} />
</button>
{isContextMenuOpen ? <CommentContextMenu close={closeContextMenu} comment={comment} isLastComment={isLastComment} toggleEdit={toggleEdit} /> : null}
</div>
);
};

24
apps/comments-ui/src/components/content/context-menus/CommentContextMenu.tsx
View file

@ -1,20 +1,22 @@
import AdminContextMenu from './AdminContextMenu';
import AuthorContextMenu from './AuthorContextMenu';
import NotAuthorContextMenu from './NotAuthorContextMenu';
import {Comment, useAppContext} from '../../../AppContext';
import {Comment, useAppContext, useLabs} from '../../../AppContext';
import {useEffect, useRef} from 'react';
type Props = {
comment: Comment;
close: () => void;
toggleEdit: () => void;
isLastComment?: boolean;
};
const CommentContextMenu: React.FC<Props> = ({comment, close, toggleEdit}) => {
const CommentContextMenu: React.FC<Props> = ({comment, close, toggleEdit, isLastComment}) => {
const {member, admin} = useAppContext();
const isAuthor = member && comment.member?.uuid === member?.uuid;
const isAdmin = !!admin;
const element = useRef<HTMLDivElement>(null);
const labs = useLabs();
useEffect(() => {
const listener = () => {
close();
@ -76,11 +78,19 @@ const CommentContextMenu: React.FC<Props> = ({comment, close, toggleEdit}) => {
}
return (
<div ref={element} onClick={stopPropagation}>
<div className="absolute z-10 min-w-min whitespace-nowrap rounded bg-white py-3 pl-4 pr-8 font-sans text-sm shadow-lg outline-0 sm:min-w-36 dark:bg-neutral-800 dark:text-white">
{contextMenu}
labs.commentImprovements ? (
<div ref={element} className="relative" onClick={stopPropagation}>
<div className={`absolute z-10 min-w-min whitespace-nowrap rounded bg-white py-3 pl-4 pr-8 font-sans text-sm shadow-lg outline-0 sm:min-w-36 dark:bg-neutral-800 dark:text-white ${isLastComment ? 'bottom-full mb-6' : 'top-0'}`}>
{contextMenu}
</div>
</div>
</div>
) : (
<div ref={element} onClick={stopPropagation}>
<div className="absolute z-10 min-w-min whitespace-nowrap rounded bg-white py-3 pl-4 pr-8 font-sans text-sm shadow-lg outline-0 sm:min-w-36 dark:bg-neutral-800 dark:text-white">
{contextMenu}
</div>
</div>
)
);
};