TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-30 11:54:33 +03:00
Code Issues Projects Releases Wiki Activity

Made unblur work on the text box when adding

Browse Source
This commit is contained in:
James Morris 2022-07-06 19:41:36 +02:00
parent 9ad8a0afcc
commit 02d81a36f1
1 changed files with 22 additions and 5 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

@ -95,7 +95,7 @@ class AddForm extends React.Component {
}
try {
// Todo: send comment to server
// Send comment to server
await this.context.onAction('addComment', {
post_id: this.context.postId,
status: 'published',
@ -118,7 +118,9 @@ class AddForm extends React.Component {
}
handleBlur(event) {
// this.setState({focused: false});
if (this.state.message === '') {
this.setState({focused: false});
}
}
handleFocus(event) {
@ -134,9 +136,24 @@ class AddForm extends React.Component {
</div>
<div className="-mt-[51px] ml-14 pr-3 font-sans leading-normal dark:text-neutral-300">
<div className="relative w-full">
<textarea className={`transition-[height] ${this.state.focused ? 'cursor-text h-40' : 'cursor-pointer hover:border-slate-300 h-12'} 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`} value={this.state.message} onChange={this.handleChange} onFocus={this.handleFocus} onBlur={this.handleBlur} placeholder={this.state.focused ? '' : 'Add to the discussion'} />
<button className={`transition-[opacity] ${this.state.focused ? 'opacity-100' : 'opacity-0'} 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`} type="submit">Add your comment</button>
<button className={`transition-[opacity] ${this.state.focused ? 'opacity-0' : 'opacity-100'} 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`} disabled="true">Comment</button>
<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 ${this.state.focused ? 'cursor-text h-40' : 'cursor-pointer overflow-hidden h-12 hover:border-slate-300'}`}
value={this.state.message}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
placeholder={this.state.focused ? '' : 'Add to the discussion'}
/>
<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 ${this.state.focused ? 'opacity-100' : 'opacity-0'}`}
type="submit">
Add your comment
</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 ${this.state.focused ? 'opacity-0' : 'opacity-100'}`}
disabled="true">
Comment
</button>
</div>
</div>
</div>