OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Little tweaks for better add and reply forms

Browse Source
This commit is contained in:
James Morris 2022-07-07 15:24:10 +02:00
parent d0633fb70e
commit 838fe784f1
3 changed files with 27 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/comments-ui/src/components/AddForm.js
View File

@ -1,6 +1,5 @@
// import React, {useState} from 'react';
import {Transition} from '@headlessui/react';
import React, {useContext, useState} from 'react';
import {Transition} from '@headlessui/react';
import AppContext from '../AppContext';
import Avatar from './Avatar';
@ -18,7 +17,6 @@ const AddForm = (props) => {
event.preventDefault();
if (message.length === 0) {
// alert('Please enter a message'); TODO: Check, but don't think we really need this
return;
}

17
apps/comments-ui/src/components/Comment.js
View File

@ -1,5 +1,5 @@
import {formatRelativeTime} from '../utils/helpers';
import React, {useContext, useState} from 'react';
import {Transition} from '@headlessui/react';
import Avatar from './Avatar';
import Like from './Like';
import Reply from './Reply';
@ -8,6 +8,7 @@ import EditForm from './EditForm';
import Replies from './Replies';
import ReplyForm from './ReplyForm';
import AppContext from '../AppContext';
import {formatRelativeTime} from '../utils/helpers';
const Comment = (props) => {
const [isInEditMode, setIsInEditMode] = useState(false);
@ -63,11 +64,19 @@ const Comment = (props) => {
</div>
</div>
</div>
{isInReplyMode &&
<div className={`ml-14 mb-10 ${!hasReplies && 'mt-10'}`}>
<Transition
show={isInReplyMode}
enter="transition duration-500 ease-in-out"
enterFrom="opacity-0 -translate-y-2"
enterTo="opacity-100 translate-x-0"
leave="transition-none duration-0"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="ml-14 my-10">
<ReplyForm parent={comment} toggle={toggleReplyMode} avatarSaturation={props.avatarSaturation} />
</div>
}
</Transition>
{hasReplies &&
<div className="ml-14 mt-10">
<Replies comment={comment} avatarSaturation={props.avatarSaturation} />

34
apps/comments-ui/src/components/ReplyForm.js
View File

@ -5,7 +5,7 @@ import Avatar from './Avatar';
const ReplyForm = (props) => {
const [message, setMessage] = useState('');
const [focused, setFocused] = useState(false);
const {member, postId, dispatchAction} = useContext(AppContext);
const {postId, dispatchAction} = useContext(AppContext);
const getHTML = () => {
// Convert newlines to <br> for now (until we add a real editor)
@ -47,7 +47,7 @@ const ReplyForm = (props) => {
const handleBlur = (event) => {
if (message === '') {
setFocused(false);
props.toggle();
}
};
@ -56,37 +56,29 @@ const ReplyForm = (props) => {
};
return (
<form onSubmit={submitForm} className="comment-form mb-4">
<div className="w-full">
<div className="flex mb-4 space-x-4 justify-start items-center">
<Avatar saturation={props.avatarSaturation} />
<div>
<h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{member.name}</h4>
<h6 className="text-[13px] text-neutral-400 font-sans">Now</h6>
</div>
</div>
<form onSubmit={submitForm} onClick={handleFocus} className={`comment-form transition duration-200 border border-neutral-150 hover:border-neutral-200 rounded-md px-3 pt-3 pb-2 -ml-[13px] -mr-[12px] -mt-[15px] shadow-lg shadow-neutral-50 hover:shadow-xl hover:shadow-neutral-100 ${focused ? 'cursor-default' : 'cursor-pointer'}`}>
<div className="w-full relative">
<div className="pr-3 font-sans leading-normal dark:text-neutral-300">
<div className="relative w-full">
<textarea
className={`transition-[height] duration-150 w-full resize-none rounded-md border border-slate-200 p-3 font-sans mb-1 leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300 ${focused ? 'cursor-text h-40' : 'cursor-pointer overflow-hidden h-12 hover:border-slate-300'}`}
className={`transition-[height] pl-[56px] mt-0 duration-150 w-full placeholder:text-neutral-300 border-none resize-none rounded-md border border-slate-50 px-0 py-3 font-sans mb-1 leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300 ${focused ? 'cursor-text h-40' : 'cursor-pointer overflow-hidden h-12 hover:border-slate-300'}`}
value={message}
onChange={handleChange}
onFocus={handleFocus}
onBlur={handleBlur}
placeholder={focused ? '' : 'Reply to this comment'}
autofocus={true}
placeholder='Reply to comment'
/>
{focused && <button
className={`transition-[opacity] duration-150 rounded-md border py-2 px-3 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800 ${focused ? 'opacity-100' : 'opacity-0'}`}
type="submit">
Add your reply
</button>}
<button
className={`transition-[opacity] duration-100 absolute top-2 right-2 rounded-md border py-1 px-2 font-sans text-sm text-center bg-black font-semibold text-white pointer-events-none dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800 ${focused ? 'opacity-0' : 'opacity-100'}`}
disabled={true}>
Reply
className={`transition-[opacity] duration-150 absolute -right-3 bottom-2 rounded-md border py-3 px-4 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800`}
type="submit">
Add reply
</button>
</div>
</div>
<div className="flex mb-1 justify-start items-center absolute top-[2px] left-0">
<Avatar saturation={props.avatarSaturation} />
</div>
</div>
</form>
);