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

Little tweak to how the Add Name dialog box opens from comments

Browse source 
- Now doesn't jump when opening the Add Name dialog box
- Still some minor things to visually tweak on this but it's an improvement

refs https://github.com/TryGhost/Team/issues/1682
This commit is contained in:
James Morris 2022-07-21 12:04:08 +01:00
parent 269bd6506e
commit 64b6dbd3ee
1 changed files with 11 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
apps/comments-ui/src/components/Form.js
View file

@ -59,8 +59,6 @@ const Form = (props) => {
.run(); .run();
}, [editor, props.isEdit]); }, [editor, props.isEdit]);
const focused = editor?.isFocused || !editor?.isEmpty;
const submitForm = async (event) => { const submitForm = async (event) => {
event.preventDefault(); event.preventDefault();
@ -120,6 +118,7 @@ const Form = (props) => {
const {comment, commentsCount} = props; const {comment, commentsCount} = props;
const memberName = (props.isEdit ? comment.member.name : member.name); const memberName = (props.isEdit ? comment.member.name : member.name);
const isFocused = editor?.isFocused || !editor?.isEmpty;
const focusEditor = (event) => { const focusEditor = (event) => {
event.stopPropagation(); event.stopPropagation();
@ -129,13 +128,17 @@ const Form = (props) => {
} else { } else {
setAddNameShowing(true); setAddNameShowing(true);
} }
return false;
}; };
const closeAddName = () => { const closeAddName = () => {
setAddNameShowing(false); setAddNameShowing(false);
}; };
const saveAddName = () => {
setAddNameShowing(false);
editor.commands.focus();
};
let submitText; let submitText;
if (props.isReply) { if (props.isReply) {
submitText = 'Add reply'; submitText = 'Add reply';
@ -153,7 +156,7 @@ const Form = (props) => {
bg-white dark:bg-[rgba(255,255,255,0.08)] bg-white dark:bg-[rgba(255,255,255,0.08)]
rounded-md shadow-lg dark:shadow-transparent hover:shadow-xl rounded-md shadow-lg dark:shadow-transparent hover:shadow-xl
${!commentsCount && !props.isEdit && !props.isReply && '-mt-0 -mr-0 -ml-0'} ${!commentsCount && !props.isEdit && !props.isReply && '-mt-0 -mr-0 -ml-0'}
${focused ? 'cursor-default' : 'cursor-pointer'}` ${isFocused ? 'cursor-default' : 'cursor-pointer'}`
}> }>
<div className="w-full relative"> <div className="w-full relative">
<div className="pr-3 font-sans leading-normal dark:text-neutral-300"> <div className="pr-3 font-sans leading-normal dark:text-neutral-300">
@ -167,8 +170,9 @@ const Form = (props) => {
focus:outline-0 focus:outline-0
placeholder:text-neutral-300 dark:placeholder:text-[rgba(255,255,255,0.3)] placeholder:text-neutral-300 dark:placeholder:text-[rgba(255,255,255,0.3)]
resize-none resize-none
${focused ? 'cursor-textmin-h-[144px] pt-[44px] pb-[68px]' : 'cursor-pointer overflow-hidden min-h-[48px] hover:border-slate-300'} ${isFocused ? 'cursor-textmin-h-[144px] pt-[44px] pb-[68px]' : 'cursor-pointer overflow-hidden min-h-[48px] hover:border-slate-300'}
${props.isEdit && 'cursor-text'} ${props.isEdit && 'cursor-text'}
${!memberName && 'pointer-events-none'}
`} `}
editor={editor} editor={editor}
/> />
@ -199,7 +203,7 @@ const Form = (props) => {
<div className="flex mb-1 justify-start items-center absolute top-0 left-0"> <div className="flex mb-1 justify-start items-center absolute top-0 left-0">
<Avatar comment={comment} saturation={avatarSaturation} className="pointer-events-none" /> <Avatar comment={comment} saturation={avatarSaturation} className="pointer-events-none" />
<Transition <Transition
show={focused} show={isFocused}
enter="transition duration-500 ease-in-out" enter="transition duration-500 ease-in-out"
enterFrom="opacity-0 -translate-x-2" enterFrom="opacity-0 -translate-x-2"
enterTo="opacity-100 translate-x-0" enterTo="opacity-100 translate-x-0"
@ -214,7 +218,7 @@ const Form = (props) => {
</div> </div>
</div> </div>
</form> </form>
<AddNameDialog show={isAddNameShowing} submit={closeAddName} cancel={closeAddName} /> <AddNameDialog show={isAddNameShowing} submit={saveAddName} cancel={closeAddName} />
</> </>
); );
}; };