Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Fixed reply box disappearing instantly when add details dialog appears

Browse source 
refs https://github.com/TryGhost/Team/issues/1710
This commit is contained in:
Simon Backx 2022-08-02 10:40:54 +02:00
parent 01e2fbde7c
commit e7338b71d8
4 changed files with 28 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -14,6 +14,9 @@ const Form = (props) => {
const formEl = useRef(null); const formEl = useRef(null);
const [progress, setProgress] = useState('default'); const [progress, setProgress] = useState('default');
// Prevent closing on blur (required when showing name dialog)
const [preventClosing, setPreventClosing] = useState(false);
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 memberBio = false; // TODO: needed for bio to be wired up // const memberBio = false; // TODO: needed for bio to be wired up
@ -81,11 +84,17 @@ const Form = (props) => {
const onFormFocus = useCallback(() => { const onFormFocus = useCallback(() => {
if (!memberName && !props.isEdit) { if (!memberName && !props.isEdit) {
setPreventClosing(true);
editor.commands.blur(); editor.commands.blur();
dispatchAction('openPopup', { dispatchAction('openPopup', {
type: 'addDetailsDialog', type: 'addDetailsDialog',
callback: () => { callback: (succeeded) => {
editor.commands.focus(); if (succeeded) {
editor.commands.focus();
} else {
props.close();
}
setPreventClosing(false);
} }
}); });
} else { } else {
@ -152,7 +161,7 @@ const Form = (props) => {
editor.on('blur', () => { editor.on('blur', () => {
if (editor?.isEmpty) { if (editor?.isEmpty) {
setFormOpen(false); setFormOpen(false);
if (props.isReply && props.close) { if (props.isReply && props.close && !preventClosing) {
// TODO: we cannot toggle the form when this happens, because when the member doesn't have a name we'll always loose focus to input the name... // TODO: we cannot toggle the form when this happens, because when the member doesn't have a name we'll always loose focus to input the name...
// Need to find a different way for this behaviour // Need to find a different way for this behaviour
props.close(); props.close();
@ -165,7 +174,7 @@ const Form = (props) => {
editor?.off('focus'); editor?.off('focus');
editor?.off('blur'); editor?.off('blur');
}; };
}, [editor, props, onFormFocus]); }, [editor, props, onFormFocus, preventClosing]);
const submitForm = async (event) => { const submitForm = async (event) => {
event.preventDefault(); event.preventDefault();
@ -279,6 +288,9 @@ const Form = (props) => {
const shouldFormBeReduced = (isMobile() && props.isReply) || (isMobile() && props.isEdit); const shouldFormBeReduced = (isMobile() && props.isReply) || (isMobile() && props.isEdit);
// Keep the form always open when replying or editing (hide on blur)
const isFormReallyOpen = props.isReply || props.isEdit || isFormOpen;
return ( return (
<> <>
<form ref={formEl} onClick={focusEditor} onMouseDown={preventIfFocused} onTouchStart={preventIfFocused} className={` <form ref={formEl} onClick={focusEditor} onMouseDown={preventIfFocused} onTouchStart={preventIfFocused} className={`
@ -287,14 +299,14 @@ const Form = (props) => {
-mt-[12px] -mr-3 mb-10 -ml-[12px] -mt-[12px] -mr-3 mb-10 -ml-[12px]
rounded-md rounded-md
${!commentsCount && !props.isEdit && !props.isReply && 'mt-0 ml-0 mr-0'} ${!commentsCount && !props.isEdit && !props.isReply && 'mt-0 ml-0 mr-0'}
${isFormOpen ? 'cursor-default' : 'cursor-pointer'} ${isFormReallyOpen ? 'cursor-default' : 'cursor-pointer'}
${(!props.isReply && !props.isEdit) && '-mt-[4px]'} ${(!props.isReply && !props.isEdit) && '-mt-[4px]'}
${(props.isReply || props.isEdit) && '-mt-[16px]'} ${(props.isReply || props.isEdit) && '-mt-[16px]'}
${shouldFormBeReduced && 'pl-1'} ${shouldFormBeReduced && 'pl-1'}
`}> `}>
<div className="w-full relative"> <div className="w-full relative">
<div className="pr-[1px] font-sans leading-normal dark:text-neutral-300"> <div className="pr-[1px] font-sans leading-normal dark:text-neutral-300">
<div className={`transition-[padding] duration-150 delay-100 relative w-full pl-[52px] ${shouldFormBeReduced && 'pl-0'} ${isFormOpen && 'pt-[64px]'}`}> <div className={`transition-[padding] duration-150 delay-100 relative w-full pl-[52px] ${shouldFormBeReduced && 'pl-0'} ${isFormReallyOpen && 'pt-[64px]'}`}>
<div <div
className={` className={`
transition-all duration-150 delay-100 transition-all duration-150 delay-100
@ -305,7 +317,7 @@ const Form = (props) => {
focus:outline-0 focus:outline-0
shadow-form hover:shadow-formxl dark:shadow-transparent shadow-form hover:shadow-formxl dark:shadow-transparent
${commentsCount === 0 && 'placeholder:text-neutral-700'} ${commentsCount === 0 && 'placeholder:text-neutral-700'}
${isFormOpen ? 'cursor-text min-h-[144px] pb-[68px] pt-2' : 'cursor-pointer overflow-hidden min-h-[48px] hover:border-slate-300'} ${isFormReallyOpen ? 'cursor-text min-h-[144px] pb-[68px] pt-2' : 'cursor-pointer overflow-hidden min-h-[48px] hover:border-slate-300'}
${props.isEdit && 'cursor-text'} ${props.isEdit && 'cursor-text'}
${!memberName && 'pointer-events-none'} ${!memberName && 'pointer-events-none'}
`}> `}>
@ -346,7 +358,7 @@ const Form = (props) => {
</div> </div>
<div> <div>
<Transition <Transition
show={isFormOpen} show={isFormReallyOpen}
enter="transition duration-500 delay-100 ease-in-out" enter="transition duration-500 delay-100 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"

2
apps/comments-ui/src/components/PopupModal.js
View file

@ -32,7 +32,7 @@ export default function PopupModal(props) {
const show = popup === lastPopup; const show = popup === lastPopup;
return ( return (
<GenericDialog show={show}> <GenericDialog show={show} callback={popupProps.callback}>
<PageComponent {...popupProps}/> <PageComponent {...popupProps}/>
</GenericDialog> </GenericDialog>
); );

8
apps/comments-ui/src/components/modals/AddDetailsDialog.js
View file

@ -11,8 +11,9 @@ const AddNameDialog = (props) => {
// const [bio, setBio] = useState(''); // TODO: needed for bio to be wired up // const [bio, setBio] = useState(''); // TODO: needed for bio to be wired up
const [error, setError] = useState({name: '', bio: ''}); const [error, setError] = useState({name: '', bio: ''});
const close = () => { const close = (succeeded) => {
dispatchAction('closePopup'); dispatchAction('closePopup');
props.callback(succeeded);
}; };
const submit = async () => { const submit = async () => {
@ -26,8 +27,7 @@ const AddNameDialog = (props) => {
// bio // bio
// }); // });
props.callback(); close(true);
close();
} else { } else {
setError({name: 'Enter your name'}); setError({name: 'Enter your name'});
setName(''); setName('');
@ -126,7 +126,7 @@ const AddNameDialog = (props) => {
Save Save
</button> </button>
</section> </section>
<CloseButton close={close} /> <CloseButton close={() => close(false)} />
</> </>
); );
}; };

3
apps/comments-ui/src/components/modals/GenericDialog.js
View file

@ -9,6 +9,9 @@ const GenericDialog = (props) => {
const close = (event) => { const close = (event) => {
dispatchAction('closePopup'); dispatchAction('closePopup');
if (props.callback) {
props.callback(false);
}
}; };
const stopPropagation = (event) => { const stopPropagation = (event) => {