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

Added hover styles to comment context menus (#21714)

Browse source 
REF https://linear.app/ghost/issue/PLG-283/add-hover-state-to-menu-items
This commit is contained in:
Sanne de Vries 2024-11-25 12:41:10 +01:00 • committed by GitHub
parent 1a0a36b64c
commit 2d9b593844
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 11 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
apps/comments-ui/src/components/content/context-menus/AdminContextMenu.tsx
View file

@ -20,15 +20,15 @@ const AdminContextMenu: React.FC<Props> = ({comment, close}) => {
const isHidden = comment.status !== 'published'; const isHidden = comment.status !== 'published';
return ( return (
<div className="flex flex-col"> <div className="flex w-full flex-col gap-0.5">
{ {
isHidden ? isHidden ?
<button className="w-full text-left text-[14px]" type="button" onClick={showComment}> <button className="w-full rounded px-2.5 py-1.5 text-left text-[14px] transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-700" type="button" onClick={showComment}>
<span className="hidden sm:inline">{t('Show comment')}</span><span className="sm:hidden">{t('Show')}</span> <span className="hidden sm:inline">{t('Show comment')}</span><span className="sm:hidden">{t('Show')}</span>
</button> </button>
: :
<button className="w-full text-left text-[14px]" type="button" onClick={hideComment}> <button className="w-full rounded px-2.5 py-1.5 text-left text-[14px] text-red-600 transition-colors hover:bg-neutral-100 dark:text-red-500 dark:hover:bg-neutral-700" type="button" onClick={hideComment}>
<span className="hidden text-red-600 sm:inline">{t('Hide comment')}</span><span className="text-red-600 sm:hidden">{t('Hide')}</span> <span className="hidden sm:inline">{t('Hide comment')}</span><span className="sm:hidden">{t('Hide')}</span>
</button> </button>
} }
</div> </div>

6
apps/comments-ui/src/components/content/context-menus/AuthorContextMenu.tsx
View file

@ -15,11 +15,11 @@ const AuthorContextMenu: React.FC<Props> = ({comment, close, toggleEdit}) => {
}; };
return ( return (
<div className="flex flex-col"> <div className="flex w-full flex-col gap-0.5">
<button className="mb-3 w-full text-left text-[14px]" data-testid="edit" type="button" onClick={toggleEdit}> <button className="w-full rounded px-2.5 py-1.5 text-left text-[14px] transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-700" data-testid="edit" type="button" onClick={toggleEdit}>
{t('Edit')} {t('Edit')}
</button> </button>
<button className="w-full text-left text-[14px] text-red-600" type="button" onClick={deleteComment}> <button className="w-full rounded px-2.5 py-1.5 text-left text-[14px] text-red-600 transition-colors hover:bg-neutral-100 dark:text-red-500 dark:hover:bg-neutral-700" type="button" onClick={deleteComment}>
{t('Delete')} {t('Delete')}
</button> </button>
</div> </div>

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

@ -80,13 +80,13 @@ const CommentContextMenu: React.FC<Props> = ({comment, close, toggleEdit, isLast
return ( return (
labs.commentImprovements ? ( labs.commentImprovements ? (
<div ref={element} className="relative" onClick={stopPropagation}> <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'}`}> <div className={`absolute z-10 min-w-min whitespace-nowrap rounded bg-white p-1 font-sans text-sm shadow-lg outline-0 sm:min-w-[80px] dark:bg-neutral-800 dark:text-white ${isLastComment ? 'bottom-full mb-6' : 'top-0'}`}>
{contextMenu} {contextMenu}
</div> </div>
</div> </div>
) : ( ) : (
<div ref={element} onClick={stopPropagation}> <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"> <div className="absolute z-10 min-w-min whitespace-nowrap rounded bg-white p-1 font-sans text-sm shadow-lg outline-0 sm:min-w-[80px] dark:bg-neutral-800 dark:text-white">
{contextMenu} {contextMenu}
</div> </div>
</div> </div>

4
apps/comments-ui/src/components/content/context-menus/NotAuthorContextMenu.tsx
View file

@ -17,8 +17,8 @@ const NotAuthorContextMenu: React.FC<Props> = ({comment, close}) => {
}; };
return ( return (
<div className="flex flex-col"> <div className="flex w-full flex-col gap-0.5">
<button className="w-full text-left text-[14px]" type="button" onClick={openModal}> <button className="w-full rounded px-2.5 py-1.5 text-left text-[14px] transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-700" type="button" onClick={openModal}>
<span className="hidden sm:inline">{t('Report comment')}</span><span className="sm:hidden">{t('Report')}</span> <span className="hidden sm:inline">{t('Report comment')}</span><span className="sm:hidden">{t('Report')}</span>
</button> </button>
</div> </div>