Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-04 02:01:58 -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';
return (
<div className="flex flex-col">
<div className="flex w-full flex-col gap-0.5">
{
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>
</button>
:
<button className="w-full text-left text-[14px]" 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>
<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 sm:inline">{t('Hide comment')}</span><span className="sm:hidden">{t('Hide')}</span>
</button>
}
</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 (
<div className="flex flex-col">
<button className="mb-3 w-full text-left text-[14px]" data-testid="edit" type="button" onClick={toggleEdit}>
<div className="flex w-full flex-col gap-0.5">
<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')}
</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')}
</button>
</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 (
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'}`}>
<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}
</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">
<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}
</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 (
<div className="flex flex-col">
<button className="w-full text-left text-[14px]" type="button" onClick={openModal}>
<div className="flex w-full flex-col gap-0.5">
<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>
</button>
</div>