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