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

Moved reply box to bottom and made it autofocus

Browse source 
refs https://github.com/TryGhost/Team/issues/1703
This commit is contained in:
James Morris 2022-07-21 12:36:54 +01:00
parent 64b6dbd3ee
commit e6cacdb2db
2 changed files with 10 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
apps/comments-ui/src/components/Comment.js
View file

@ -65,11 +65,16 @@ const Comment = (props) => {
</div>
</div>
</div>
{hasReplies &&
<div className="ml-14 mt-10">
<Replies comment={comment} />
</div>
}
<Transition
show={isInReplyMode}
enter="transition duration-500 delay-50 ease-in-out"
enterFrom="opacity-0 -translate-y-2"
enterTo="opacity-100 translate-y-0"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-none duration-0"
leaveFrom="opacity-100"
leaveTo="opacity-0"
@ -78,11 +83,6 @@ const Comment = (props) => {
<Form parent={comment} toggle={toggleReplyMode} isReply={true} />
</div>
</Transition>
{hasReplies &&
<div className="ml-14 mt-10">
<Replies comment={comment} />
</div>
}
</>
);
}

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

@ -14,7 +14,7 @@ const Form = (props) => {
if (props.isReply) {
config = {
placeholder: 'Reply to comment',
autofocus: false
autofocus: true
};
} else if (props.isEdit) {
config = {
@ -163,7 +163,7 @@ const Form = (props) => {
<div className="relative w-full">
<EditorContent
className={`
transition-all duration-150
transition-all duration-150 delay-100
w-full pl-[56px] px-0 py-[10px] pr-4
bg-transparent rounded-md border-none border border-slate-50 dark:border-none
font-sans text-[16.5px] leading-normal dark:text-neutral-300
@ -204,7 +204,7 @@ const Form = (props) => {
<Avatar comment={comment} saturation={avatarSaturation} className="pointer-events-none" />
<Transition
show={isFocused}
enter="transition duration-500 ease-in-out"
enter="transition duration-500 delay-100 ease-in-out"
enterFrom="opacity-0 -translate-x-2"
enterTo="opacity-100 translate-x-0"
leave="transition-none duration-0"