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

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

@ -26,37 +26,27 @@ const AddNameDialog = (props) => {
};
const submit = async () => {
// When it's both name and bio
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 {
if (name.trim() !== '') {
await dispatchAction('updateMember', {
name,
bio
});
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
useEffect(() => {
const timer = setTimeout(() => {
if (!props.bioOnly) {
inputNameRef.current?.focus();
} else {
if (props.bioAutofocus) {
inputBioRef.current?.focus();
}
} else {
inputNameRef.current?.focus();
}
}, 200);
return () => {
@ -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>
<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">
{!props.bioOnly &&
<>
<div className="flex flex-row mb-2 justify-between">
<label htmlFor="comments-name" className="font-sans font-medium text-sm">Name</label>
<Transition
show={!!error.name}
enter="transition duration-300 ease-out"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition duration-100 ease-out"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="font-sans text-sm text-red-500">{error.name}</div>
</Transition>
</div>
<input
id="comments-name"
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'}`}
type="text"
name="name"
ref={inputNameRef}
value={name}
placeholder="Jamie Larson"
onChange={(e) => {
setName(e.target.value);
}}
onKeyDown={(e) => {
if (e.key === 'Enter') {
setName(e.target.value);
submit();
}
}}
maxLength="64"
/>
</>
}
<div className="flex flex-row mb-2 justify-between">
<label htmlFor="comments-name" className="font-sans font-medium text-sm">Name</label>
<Transition
show={!!error.name}
enter="transition duration-300 ease-out"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition duration-100 ease-out"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="font-sans text-sm text-red-500">{error.name}</div>
</Transition>
</div>
<input
id="comments-name"
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'}`}
type="text"
name="name"
ref={inputNameRef}
value={name}
placeholder="Jamie Larson"
onChange={(e) => {
setName(e.target.value);
}}
onKeyDown={(e) => {
if (e.key === 'Enter') {
setName(e.target.value);
submit();
}
}}
maxLength="64"
/>
<div className="flex flex-row mt-4 mb-2 justify-between">
<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>