mirror of
https://github.com/TryGhost/Ghost.git
synced 2023-12-13 21:00:40 +01:00
Basic modal but needs more work
- This modal style is mostly there - It needs key behaviours to work with React properly - It triggers only when there isn't a name present - It doesn't save yet or anything fancy refs https://github.com/TryGhost/Team/issues/1682
This commit is contained in:
James Morris
parent
360c5f9779
commit
a2e3b06548
2 changed files with 117 additions and 66 deletions
|
|
@ -1,12 +1,14 @@
|
|||
import React, {useContext, useEffect} from 'react';
|
||||
import React, {useContext, useEffect, useState} from 'react';
|
||||
import {Transition} from '@headlessui/react';
|
||||
import AppContext from '../AppContext';
|
||||
import Avatar from './Avatar';
|
||||
import {useEditor, EditorContent} from '@tiptap/react';
|
||||
import {getEditorConfig} from '../utils/editor';
|
||||
import AddNameDialog from './modals/AddNameDialog';
|
||||
|
||||
const Form = (props) => {
|
||||
const {member, postId, dispatchAction, onAction, avatarSaturation} = useContext(AppContext);
|
||||
const [isAddNameShowing, setAddNameShowing] = useState(false);
|
||||
|
||||
let config;
|
||||
if (props.isReply) {
|
||||
|
|
@ -116,13 +118,24 @@ const Form = (props) => {
|
|||
return false;
|
||||
};
|
||||
|
||||
const focusEditor = (event) => {
|
||||
editor.commands.focus();
|
||||
};
|
||||
|
||||
const {comment, commentsCount} = props;
|
||||
const memberName = (props.isEdit ? comment.member.name : member.name);
|
||||
|
||||
const focusEditor = (event) => {
|
||||
event.stopPropagation();
|
||||
|
||||
if (memberName) {
|
||||
editor.commands.focus();
|
||||
} else {
|
||||
setAddNameShowing(true);
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const closeAddName = () => {
|
||||
setAddNameShowing(false);
|
||||
};
|
||||
|
||||
let submitText;
|
||||
if (props.isReply) {
|
||||
submitText = 'Add reply';
|
||||
|
|
@ -133,72 +146,75 @@ const Form = (props) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<form onClick={focusEditor} className={`
|
||||
transition duration-200
|
||||
-mt-[12px] -mr-3 mb-10 -ml-[12px] pt-3 pb-2 px-3
|
||||
bg-white dark:bg-[rgba(255,255,255,0.08)]
|
||||
rounded-md shadow-lg dark:shadow-transparent hover:shadow-xl
|
||||
${!commentsCount && !props.isEdit && !props.isReply && '-mt-0 -mr-0 -ml-0'}
|
||||
${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">
|
||||
<EditorContent
|
||||
className={`
|
||||
transition-all duration-150
|
||||
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
|
||||
focus:outline-0
|
||||
placeholder:text-neutral-300 dark:placeholder:text-[rgba(255,255,255,0.3)]
|
||||
resize-none
|
||||
${focused ? `cursor-textmin-h-[144px] pt-[44px] pb-[68px]` : 'cursor-pointer overflow-hidden min-h-[48px] hover:border-slate-300'}
|
||||
`}
|
||||
editor={editor}
|
||||
/>
|
||||
<div className="
|
||||
absolute -right-3 bottom-[2px]
|
||||
flex space-x-4
|
||||
transition-[opacity] duration-150
|
||||
">
|
||||
{props.isEdit &&
|
||||
<button type="button" onClick={props.toggle} className="font-sans text-sm font-medium ml-2.5 text-neutral-500 dark:text-neutral-400">Cancel</button>}
|
||||
<button
|
||||
<>
|
||||
<form onClick={focusEditor} className={`
|
||||
transition duration-200
|
||||
-mt-[12px] -mr-3 mb-10 -ml-[12px] pt-3 pb-2 px-3
|
||||
bg-white dark:bg-[rgba(255,255,255,0.08)]
|
||||
rounded-md shadow-lg dark:shadow-transparent hover:shadow-xl
|
||||
${!commentsCount && !props.isEdit && !props.isReply && '-mt-0 -mr-0 -ml-0'}
|
||||
${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">
|
||||
<EditorContent
|
||||
className={`
|
||||
transition-[opacity] duration-150
|
||||
bg-neutral-900 dark:bg-[rgba(255,255,255,0.9)]
|
||||
rounded-[4px] border
|
||||
py-3 px-4
|
||||
text-sm text-center font-sans font-semibold
|
||||
text-white dark:text-neutral-800
|
||||
transition-all duration-150
|
||||
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
|
||||
focus:outline-0
|
||||
placeholder:text-neutral-300 dark:placeholder:text-[rgba(255,255,255,0.3)]
|
||||
resize-none
|
||||
${focused ? `cursor-textmin-h-[144px] pt-[44px] pb-[68px]` : 'cursor-pointer overflow-hidden min-h-[48px] hover:border-slate-300'}
|
||||
`}
|
||||
type="button"
|
||||
onClick={submitForm}
|
||||
>
|
||||
{submitText}
|
||||
</button>
|
||||
editor={editor}
|
||||
/>
|
||||
<div className="
|
||||
absolute -right-3 bottom-[2px]
|
||||
flex space-x-4
|
||||
transition-[opacity] duration-150
|
||||
">
|
||||
{props.isEdit &&
|
||||
<button type="button" onClick={props.toggle} className="font-sans text-sm font-medium ml-2.5 text-neutral-500 dark:text-neutral-400">Cancel</button>}
|
||||
<button
|
||||
className={`
|
||||
transition-[opacity] duration-150
|
||||
bg-neutral-900 dark:bg-[rgba(255,255,255,0.9)]
|
||||
rounded-[4px] border
|
||||
py-3 px-4
|
||||
text-sm text-center font-sans font-semibold
|
||||
text-white dark:text-neutral-800
|
||||
`}
|
||||
type="button"
|
||||
onClick={submitForm}
|
||||
>
|
||||
{submitText}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex mb-1 justify-start items-center absolute top-0 left-0">
|
||||
<Avatar comment={comment} saturation={avatarSaturation} />
|
||||
<Transition
|
||||
show={focused}
|
||||
enter="transition duration-500 ease-in-out"
|
||||
enterFrom="opacity-0 -translate-x-2"
|
||||
enterTo="opacity-100 translate-x-0"
|
||||
leave="transition-none duration-0"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="ml-3">
|
||||
<h4 className="text-lg font-sans font-semibold mb-1 tracking-tight dark:text-neutral-300">{memberName ? memberName : 'Anonymous'}</h4>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex mb-1 justify-start items-center absolute top-0 left-0">
|
||||
<Avatar comment={comment} saturation={avatarSaturation} />
|
||||
<Transition
|
||||
show={focused}
|
||||
enter="transition duration-500 ease-in-out"
|
||||
enterFrom="opacity-0 -translate-x-2"
|
||||
enterTo="opacity-100 translate-x-0"
|
||||
leave="transition-none duration-0"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="ml-3">
|
||||
<h4 className="text-lg font-sans font-semibold mb-1 tracking-tight dark:text-neutral-300">{memberName ? memberName : 'Anonymous'}</h4>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
<AddNameDialog show={isAddNameShowing} submit={closeAddName} cancel={closeAddName} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
35
apps/comments-ui/src/components/modals/AddNameDialog.js
Normal file
35
apps/comments-ui/src/components/modals/AddNameDialog.js
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import React from 'react';
|
||||
import GenericDialog from './GenericDialog';
|
||||
|
||||
const AddNameDialog = (props) => {
|
||||
return (
|
||||
<GenericDialog show={props.show} cancel={props.cancel}>
|
||||
<h1 className="font-sans font-bold tracking-tight text-[24px] mb-3 text-black">Add context to your comment</h1>
|
||||
<p className="font-sans text-[1.45rem] text-neutral-500 px-8 leading-9">For a healthy discussion, let other members know who you are when commenting.</p>
|
||||
<section className="mt-8 text-left">
|
||||
<label htmlFor="comments-name" className="block font-sans font-medium text-sm mb-2">Name</label>
|
||||
<input
|
||||
id="comments-name"
|
||||
className="font-sans px-3 rounded border border-neutral-200 focus:border-neutral-300 w-full outline-0 h-[42px] flex items-center"
|
||||
type="text"
|
||||
name="name"
|
||||
value=""
|
||||
placeholder="Jamie Larson"
|
||||
autoFocus={true}
|
||||
// onChange={e => onChange(e, name)}
|
||||
// onKeyDown={e => onKeyDown(e, name)}
|
||||
// onBlur={e => onBlur(e, name)}
|
||||
maxLength="64"
|
||||
/>
|
||||
<button
|
||||
className="transition duration-200 ease-linear w-full h-[44px] mt-4 px-8 flex items-center justify-center rounded-md text-white font-sans font-semibold text-[15px] bg-blue-700"
|
||||
onClick={props.submit}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</section>
|
||||
</GenericDialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddNameDialog;
|
||||
Loading…
Reference in a new issue