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

Tidying up dialog calls for bio with correct autofocus

Browse source 
- Removed only showing bio in modal, now showing both always
- Changed how the modal is called with parameters to focus on bio if clicked

refs https://github.com/TryGhost/Team/issues/1716
This commit is contained in:
James Morris 2022-08-04 16:46:22 +01:00
parent 4cc2ed88c3
commit 758651013d
2 changed files with 60 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -302,26 +302,13 @@ const Form = (props) => {
editor.commands.focus(); editor.commands.focus();
}; };
const handleAddBoth = (event) => { const handleShowDialog = (event, options) => {
event.preventDefault(); event.preventDefault();
setPreventClosing(true); setPreventClosing(true);
dispatchAction('openPopup', { dispatchAction('openPopup', {
type: 'addDetailsDialog', type: 'addDetailsDialog',
callback: () => { bioAutofocus: options.bioAutofocus ?? false,
editor?.commands.focus();
setPreventClosing(false);
}
});
};
const handleAddBio = (event) => {
event.preventDefault();
setPreventClosing(true);
dispatchAction('openPopup', {
type: 'addDetailsDialog',
bioOnly: true,
callback: () => { callback: () => {
editor?.commands.focus(); editor?.commands.focus();
setPreventClosing(false); setPreventClosing(false);
@ -422,9 +409,21 @@ const Form = (props) => {
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<button className="text-[17px] font-sans font-bold tracking-tight text-[rgb(23,23,23)] hover:text-black dark:text-[rgba(255,255,255,0.85)]" onClick={handleAddBoth}>{memberName ? memberName : 'Anonymous'}</button> <button
<div className="flex items-baseline font-sans text-[14px] tracking-tight text-neutral-400 dark:text-[rgba(255,255,255,0.5)]"> className="text-[17px] font-sans font-bold tracking-tight text-[rgb(23,23,23)] dark:text-[rgba(255,255,255,0.85)]"
<button className="transition duration-150 hover:text-neutral-500" onClick={memberBio ? handleAddBoth : handleAddBio}>{memberBio ? memberBio : 'Add your bio'}</button> onClick={(event) => {
handleShowDialog(event, {
bioAutofocus: false
});
}}>{memberName ? memberName : 'Anonymous'}</button>
<div className="flex items-baseline">
<button
className={`transition duration-150 font-sans text-[14px] tracking-tight text-neutral-400 hover:text-neutral-500 dark:text-[rgba(255,255,255,0.5)] ${!memberBio && 'text-neutral-300 hover:text-neutral-400'}`}
onClick={(event) => {
handleShowDialog(event, {
bioAutofocus: true
});
}}>{memberBio ? memberBio : 'Add your bio'}</button>
</div> </div>
</Transition> </Transition>
</div> </div>

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

@ -26,36 +26,26 @@ const AddNameDialog = (props) => {
}; };
const submit = async () => { const submit = async () => {
// When it's both name and bio if (name.trim() !== '') {
if (!props.bioOnly) {
if (name.trim() !== '') {
await dispatchAction('updateMember', {
name,
bio
});
close(true);
} else {
setError({name: 'Enter your name'});
setName('');
inputNameRef.current?.focus();
}
// When it's only bio
} else {
await dispatchAction('updateMember', { await dispatchAction('updateMember', {
name,
bio bio
}); });
close(true); close(true);
} else {
setError({name: 'Enter your name'});
setName('');
inputNameRef.current?.focus();
} }
}; };
// using <input autofocus> breaks transitions in browsers. So we need to use a timer // using <input autofocus> breaks transitions in browsers. So we need to use a timer
useEffect(() => { useEffect(() => {
const timer = setTimeout(() => { const timer = setTimeout(() => {
if (!props.bioOnly) { if (props.bioAutofocus) {
inputNameRef.current?.focus();
} else {
inputBioRef.current?.focus(); inputBioRef.current?.focus();
} else {
inputNameRef.current?.focus();
} }
}, 200); }, 200);
@ -69,43 +59,39 @@ const AddNameDialog = (props) => {
<h1 className="font-sans font-bold tracking-tight text-[24px] mb-3 text-black">Add context to your comments</h1> <h1 className="font-sans font-bold tracking-tight text-[24px] mb-3 text-black">Add context to your comments</h1>
<p className="font-sans text-[1.45rem] text-neutral-500 px-4 sm:px-8 leading-9">For a healthy discussion, let other members know who you are when commenting.</p> <p className="font-sans text-[1.45rem] text-neutral-500 px-4 sm:px-8 leading-9">For a healthy discussion, let other members know who you are when commenting.</p>
<section className="mt-8 text-left"> <section className="mt-8 text-left">
{!props.bioOnly && <div className="flex flex-row mb-2 justify-between">
<> <label htmlFor="comments-name" className="font-sans font-medium text-sm">Name</label>
<div className="flex flex-row mb-2 justify-between"> <Transition
<label htmlFor="comments-name" className="font-sans font-medium text-sm">Name</label> show={!!error.name}
<Transition enter="transition duration-300 ease-out"
show={!!error.name} enterFrom="opacity-0"
enter="transition duration-300 ease-out" enterTo="opacity-100"
enterFrom="opacity-0" leave="transition duration-100 ease-out"
enterTo="opacity-100" leaveFrom="opacity-100"
leave="transition duration-100 ease-out" leaveTo="opacity-0"
leaveFrom="opacity-100" >
leaveTo="opacity-0" <div className="font-sans text-sm text-red-500">{error.name}</div>
> </Transition>
<div className="font-sans text-sm text-red-500">{error.name}</div> </div>
</Transition> <input
</div> id="comments-name"
<input className={`transition-[border-color] duration-200 font-sans px-3 rounded border border-neutral-200 focus:border-neutral-300 w-full outline-0 h-[42px] flex items-center ${error.name && 'border-red-500 focus:border-red-500'}`}
id="comments-name" type="text"
className={`transition-[border-color] duration-200 font-sans px-3 rounded border border-neutral-200 focus:border-neutral-300 w-full outline-0 h-[42px] flex items-center ${error.name && 'border-red-500 focus:border-red-500'}`} name="name"
type="text" ref={inputNameRef}
name="name" value={name}
ref={inputNameRef} placeholder="Jamie Larson"
value={name} onChange={(e) => {
placeholder="Jamie Larson" setName(e.target.value);
onChange={(e) => { }}
setName(e.target.value); onKeyDown={(e) => {
}} if (e.key === 'Enter') {
onKeyDown={(e) => { setName(e.target.value);
if (e.key === 'Enter') { submit();
setName(e.target.value); }
submit(); }}
} maxLength="64"
}} />
maxLength="64"
/>
</>
}
<div className="flex flex-row mt-4 mb-2 justify-between"> <div className="flex flex-row mt-4 mb-2 justify-between">
<label htmlFor="comments-name" className="font-sans font-medium text-sm">Bio</label> <label htmlFor="comments-name" className="font-sans font-medium text-sm">Bio</label>
<div className={`font-sans text-sm text-neutral-400 ${(bioCharsLeft === 0) && 'text-red-500'}`}><b>{bioCharsLeft}</b> characters left</div> <div className={`font-sans text-sm text-neutral-400 ${(bioCharsLeft === 0) && 'text-red-500'}`}><b>{bioCharsLeft}</b> characters left</div>