Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Basic version of expandable textbox for adding

Browse source
This commit is contained in:
James Morris 2022-07-06 16:45:50 +02:00
parent 1ac92467b5
commit 652d9191b5
4 changed files with 25 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
apps/comments-ui/src/components/AddForm.js
View file

@ -68,11 +68,14 @@ class AddForm extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
message: '' message: '',
focused: false
}; };
this.submitForm = this.submitForm.bind(this); this.submitForm = this.submitForm.bind(this);
this.handleChange = this.handleChange.bind(this); this.handleChange = this.handleChange.bind(this);
this.handleBlur = this.handleBlur.bind(this);
this.handleFocus = this.handleFocus.bind(this);
} }
getHTML() { getHTML() {
@ -87,7 +90,7 @@ class AddForm extends React.Component {
const message = this.state.message; const message = this.state.message;
if (message.length === 0) { if (message.length === 0) {
alert('Please enter a message'); // alert('Please enter a message'); TODO: Check, but don't think we really need this
return; return;
} }
@ -100,7 +103,10 @@ class AddForm extends React.Component {
}); });
// Clear message on success // Clear message on success
this.setState({message: ''}); this.setState({
message: '',
focused: false
});
} catch (e) { } catch (e) {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.error(e); console.error(e);
@ -111,6 +117,14 @@ class AddForm extends React.Component {
this.setState({message: event.target.value}); this.setState({message: event.target.value});
} }
handleBlur(event) {
// this.setState({focused: false});
}
handleFocus(event) {
this.setState({focused: true});
}
render() { render() {
return ( return (
<form onSubmit={this.submitForm} className="comment-form"> <form onSubmit={this.submitForm} className="comment-form">
@ -122,10 +136,11 @@ class AddForm extends React.Component {
<h6 className="text-xs text-neutral-400 font-sans">&nbsp;</h6> <h6 className="text-xs text-neutral-400 font-sans">&nbsp;</h6>
</div> </div>
</div> </div>
<div className="-mt-12 ml-14 pr-3 font-sans leading-normal dark:text-neutral-300"> <div className="-mt-[51px] ml-14 pr-3 font-sans leading-normal dark:text-neutral-300">
<div className="relative w-full"> <div className="relative w-full">
<textarea className="w-full resize-none rounded-md border h-36 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" value={this.state.message} onChange={this.handleChange} autofocus="true" /> <textarea className={`transition-[height] ${this.state.focused ? 'cursor-text h-40 duration-0' : 'cursor-pointer duration-150 hover:border-slate-300'} w-full resize-none rounded-md border border-slate-200 h-12 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`} value={this.state.message} onChange={this.handleChange} onFocus={this.handleFocus} onBlur={this.handleBlur} placeholder={this.state.focused ? '' : 'Add to the discussion'} />
<button type="submit" className="rounded-md border p-3 py-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">Add your comment</button> <button className={`transition-[opacity] ${this.state.focused ? 'opacity-100 duration-0' : 'opacity-0 duration-150'} rounded-md border p-3 py-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`} type="submit">Add your comment</button>
<button className={`transition-[opacity] ${this.state.focused ? 'opacity-0 duration-0' : 'opacity-100 duration-100'} absolute top-[5px] right-[5px] rounded-md border p-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`} disabled="true">Comment</button>
</div> </div>
</div> </div>
</div> </div>

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

@ -55,7 +55,7 @@ class Comment extends React.Component {
); );
} else { } else {
return ( return (
<div className="flex mb-6"> <div className="flex mb-8">
<div> <div>
<div className="flex mb-2 space-x-4 justify-start items-center"> <div className="flex mb-2 space-x-4 justify-start items-center">
<Avatar comment={comment} /> <Avatar comment={comment} />

4
apps/comments-ui/src/components/EditForm.js
View file

@ -50,8 +50,8 @@ class EditForm extends React.Component {
<div className="relative w-full"> <div className="relative w-full">
<textarea className="w-full resize-none rounded-md border h-32 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" value={this.state.message} onChange={this.handleChange} /> <textarea className="w-full resize-none rounded-md border h-32 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" value={this.state.message} onChange={this.handleChange} />
<div className="flex flex-start"> <div className="flex flex-start">
<button type="submit" className="rounded-md border p-3 py-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">Edit comment</button> <button type="submit" className="rounded-md border p-2 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800">Edit comment</button>
<button className="font-sans text-sm font-medium ml-2 text-neutral-500" onClick={this.props.toggle}>Cancel</button> <button className="font-sans text-sm font-medium ml-2.5 text-neutral-500" onClick={this.props.toggle}>Cancel</button>
</div> </div>
</div> </div>
</div> </div>

2
apps/comments-ui/src/components/Pagination.js
View file

@ -29,7 +29,7 @@ class Pagination extends React.Component {
} }
return ( return (
<button className="w-full rounded-md border p-3 mb-6 font-sans text-sm text-center dark:border-neutral-500 dark:text-white" onClick={this.loadMore}> <button className="w-full rounded-md border p-3 mb-8 font-sans text-sm text-center dark:border-neutral-500 dark:text-white" onClick={this.loadMore}>
Show {left} previous comments Show {left} previous comments
</button> </button>
); );