Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-08 02:52:39 -05:00
Code Issues Activity

Fixed comment form visual issues (#21138)

Browse source 
REF PLG-225
- When editing a comment, the form was not aligned correctly.
- The form has more height by default now even when not focused, to
increase engagement.
This commit is contained in:
Sanne de Vries 2024-09-26 18:35:01 +02:00 • committed by GitHub
parent 146e702d93
commit 5a251b5cac
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 14 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -186,7 +186,7 @@ const ReplyFormBox: React.FC<ReplyFormBoxProps> = ({comment, isInReplyMode, clos
}
return (
<div className="my-10">
<div className="my-8 sm:my-10">
<ReplyForm close={closeReplyMode} parent={comment} />
</div>
);

4
apps/comments-ui/src/components/content/forms/EditForm.tsx
View file

@ -68,7 +68,9 @@ const EditForm: React.FC<Props> = ({comment, parent, close}) => {
}, [editor, close, comment.html]);
return (
<SecundaryForm close={close} closeIfNotChanged={closeIfNotChanged} editor={editor} {...submitProps} />
<div className='px-3 pb-2 pt-3'>
<SecundaryForm close={close} closeIfNotChanged={closeIfNotChanged} editor={editor} {...submitProps} />
</div>
);
};

16
apps/comments-ui/src/components/content/forms/Form.tsx
View file

@ -103,9 +103,9 @@ const FormEditor: React.FC<FormEditorProps> = ({submit, progress, setProgress, c
}, [editor, close, submitForm]);
return (
<div className={`relative w-full pl-[40px] transition-[padding] delay-100 duration-150 sm:pl-[44px] ${reduced && 'pl-0'} ${isOpen && 'pl-[1px] pt-[56px] sm:pl-[44px] sm:pt-[52px]'}`}>
<div className={`relative w-full pl-[40px] transition-[padding] delay-100 duration-150 sm:pl-[44px] ${reduced && 'pl-0'} ${isOpen && 'pl-[1px] pt-[48px] sm:pl-[44px] sm:pt-[40px]'}`}>
<div
className={`text-md w-full rounded-md border border-[rgba(0,0,0,0.1)] bg-[rgba(255,255,255,0.9)] px-2 font-sans leading-normal transition-all delay-100 duration-150 focus:outline-0 sm:px-3 sm:text-lg dark:bg-[rgba(255,255,255,0.14)] dark:text-neutral-300 ${isOpen ? 'min-h-[144px] cursor-text py-2 pb-[68px]' : 'min-h-[48px] cursor-pointer overflow-hidden py-3 sm:py-4'}
className={`text-md min-h-[120px] w-full rounded-md border border-[rgba(0,0,0,0.1)] bg-[rgba(255,255,255,0.9)] p-2 pb-[68px] font-sans leading-normal transition-all delay-100 duration-150 focus:outline-0 sm:px-3 sm:text-lg dark:bg-[rgba(255,255,255,0.14)] dark:text-neutral-300${isOpen ? 'cursor-text' : 'cursor-pointer'}
`}
data-testid="form-editor">
<EditorContent
@ -150,9 +150,9 @@ const FormHeader: React.FC<FormHeaderProps> = ({show, name, expertise, editName,
leaveTo="opacity-0"
show={show}
>
<div className="flex">
<div className="flex flex-wrap">
<div
className="font-sans text-base font-bold leading-snug text-[rgb(23,23,23)] sm:text-sm dark:text-[rgba(255,255,255,0.85)]"
className="w-full font-sans text-base font-bold leading-snug text-[rgb(23,23,23)] sm:w-auto sm:text-sm dark:text-[rgba(255,255,255,0.85)]"
data-testid="member-name"
onClick={editName}
>
@ -165,7 +165,7 @@ const FormHeader: React.FC<FormHeaderProps> = ({show, name, expertise, editName,
type="button"
onClick={editExpertise}
>
<span><span className="mx-[0.3em]">·</span>{expertise ? expertise : 'Add your expertise'}</span>
<span><span className="mx-[0.3em] hidden sm:inline">·</span>{expertise ? expertise : 'Add your expertise'}</span>
{expertise && <EditIcon className="ml-1 h-[12px] w-[12px] translate-x-[-6px] stroke-[rgba(0,0,0,0.5)] opacity-0 transition-all duration-100 ease-out group-hover:translate-x-0 group-hover:stroke-[rgba(0,0,0,0.75)] group-hover:opacity-100 dark:stroke-[rgba(255,255,255,0.5)] dark:group-hover:stroke-[rgba(255,255,255,0.3)]" />}
</button>
</div>
@ -265,16 +265,16 @@ const Form: React.FC<FormProps> = ({comment, submit, submitText, submitSize, clo
}, [editor, memberName, progress]);
return (
<form ref={formEl} className={`-mx-3 mb-7 mt-[-10px] rounded-md transition duration-200 ${isOpen ? 'cursor-default' : 'cursor-pointer'} ${reduced && 'pl-1'}`} data-testid="form" onClick={focusEditor} onMouseDown={preventIfFocused} onTouchStart={preventIfFocused}>
<form ref={formEl} className={`-mx-3 mb-7 mt-[-10px] rounded-md transition duration-200 ${isOpen ? 'cursor-default' : 'cursor-pointer'}`} data-testid="form" onClick={focusEditor} onMouseDown={preventIfFocused} onTouchStart={preventIfFocused}>
<div className="relative w-full">
<div className="pr-[1px] font-sans leading-normal dark:text-neutral-300">
<FormEditor close={close} editor={editor} isOpen={isOpen} progress={progress} reduced={reduced} setProgress={setProgress} submit={submit} submitSize={submitSize} submitText={submitText} />
</div>
<div className='absolute left-0 top-1 flex h-11 w-full items-center justify-start sm:h-12'>
<div className='absolute left-0 top-1 flex h-11 w-full items-start justify-start sm:h-12'>
<div className="pointer-events-none mr-2 grow-0 sm:mr-3">
<Avatar comment={comment} />
</div>
<div className="grow-1 w-full">
<div className="grow-1 mt-0.5 w-full">
<FormHeader editExpertise={editExpertise} editName={editName} expertise={memberExpertise} name={memberName} show={isOpen} />
</div>
</div>

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

@ -38,7 +38,7 @@ const SecundaryForm: React.FC<Props> = ({editor, submit, close, closeIfNotChange
const reduced = isMobile();
return (
<div className='mt-[-28px] pr-3'>
<div className='mt-[-16px] pr-3'>
<Form close={close} editor={editor} isOpen={true} reduced={reduced} submit={submit} submitSize={submitSize} submitText={submitText} />
</div>
);

22
apps/comments-ui/test/e2e/editor.test.ts
View file

@ -1,4 +1,4 @@
import {MockedApi, getHeight, getModifierKey, initialize, selectText, setClipboard, waitEditorFocused} from '../utils/e2e';
import {MockedApi, getModifierKey, initialize, selectText, setClipboard, waitEditorFocused} from '../utils/e2e';
import {expect, test} from '@playwright/test';
test.describe('Editor', async () => {
@ -22,7 +22,6 @@ test.describe('Editor', async () => {
await expect(frame.getByTestId('count')).toHaveText('1 comment');
const editor = frame.getByTestId('form-editor');
const editorHeight = await getHeight(editor);
await editor.click({force: true});
@ -31,9 +30,6 @@ test.describe('Editor', async () => {
// Wait for animation to finish
await page.waitForTimeout(200);
const newEditorHeight = await getHeight(editor);
expect(newEditorHeight).toBeGreaterThan(editorHeight);
// Type in the editor
await editor.type('Newly added comment');
@ -57,22 +53,10 @@ test.describe('Editor', async () => {
const mockedApi = new MockedApi({});
mockedApi.setMember({});
const {frame} = await initialize({
mockedApi,
page,
publication: 'Publisher Weekly'
});
const editor = frame.getByTestId('form-editor');
const editorHeight = await getHeight(editor);
await page.keyboard.press('c');
// Wait for animation to finish
await page.waitForTimeout(200);
const newEditorHeight = await getHeight(editor);
expect(newEditorHeight).toBeGreaterThan(editorHeight);
});
test('Can use CMD+ENTER to submmit', async ({page}) => {
@ -95,7 +79,6 @@ test.describe('Editor', async () => {
await expect(frame.getByTestId('count')).toHaveText('1 comment');
const editor = frame.getByTestId('form-editor');
const editorHeight = await getHeight(editor);
await editor.click({force: true});
// Wait for focused
@ -103,9 +86,6 @@ test.describe('Editor', async () => {
// Wait for animation to finish
await page.waitForTimeout(200);
const newEditorHeight = await getHeight(editor);
expect(newEditorHeight).toBeGreaterThan(editorHeight);
// Type in the editor
await editor.type('Newly added comment');