Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Added nicer focus state so text and button don't clash

Browse source 
ref https://linear.app/tryghost/issue/AP-307/component-for-replying-to-objects-in-the-inboxfeed
This commit is contained in:
Djordje Vlaisavljevic 2024-09-19 20:45:18 +01:00 • committed by Fabien 'egg' O'Carroll
parent ae50afe307
commit 674227941e
1 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
apps/admin-x-activitypub/src/components/global/APReplyBox.tsx
View file

@ -54,13 +54,6 @@ const APReplyBox: React.FC<APTextAreaProps> = ({
}
}, [focused]);
const styles = clsx(
'ap-textarea order-2 w-full resize-none rounded-lg border py-2 pr-3 text-[1.5rem] transition-all dark:text-white',
error ? 'border-red' : 'border-transparent placeholder:text-grey-500 dark:placeholder:text-grey-800',
title && 'mt-1.5',
className
);
async function handleClick() {
await replyMutation.mutate({id: object.id, content: textValue}, {
onSuccess(activity) {
@ -88,6 +81,13 @@ const APReplyBox: React.FC<APTextAreaProps> = ({
setFocused(true);
}
const styles = clsx(
`ap-textarea order-2 w-full resize-none rounded-lg border py-2 pr-3 text-[1.5rem] transition-all dark:text-white ${isFocused && 'pb-12'}`,
error ? 'border-red' : 'border-transparent placeholder:text-grey-500 dark:placeholder:text-grey-800',
title && 'mt-1.5',
className
);
// We disable the button if either the textbox isn't focused, or the reply is currently being sent.
const buttonDisabled = !isFocused || replyMutation.isLoading;
@ -106,7 +106,7 @@ const APReplyBox: React.FC<APTextAreaProps> = ({
id={id}
maxLength={maxLength}
placeholder={`Reply to ${getUsername(object.attributedTo)}...`}
rows={rows}
rows={isFocused ? 3 : rows}
value={textValue}
onBlur={handleBlur}
onChange={handleChange}