TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-27 10:42:45 +03:00
Code Issues Projects Releases Wiki Activity

First version of basic reporting modal

Browse Source 
refs https://github.com/TryGhost/Team/issues/1685
This commit is contained in:
James Morris 2022-07-19 13:05:42 +01:00
parent e84b4e5320
commit 6768ae2d55
4 changed files with 71 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
apps/comments-ui/src/components/modals/GenericDialog.js Normal file
View File

@ -0,0 +1,33 @@
import React from 'react';
import {Transition} from '@headlessui/react';
const GenericDialog = (props) => {
return (
<Transition
show={props.show}
enter="transition duration-200 linear"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition duration-200 linear"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed top-0 left-0 overflow-hidden w-screen h-screen z-[99999999] flex pt-12 justify-center bg-gradient-to-b from-[rgba(0,0,0,0.2)] to-rgba(0,0,0,0.1) backdrop-blur-[2px]" onClick={props.cancel}>
<Transition.Child
enter="transition duration-200 delay-150 linear"
enterFrom="translate-y-4 opacity-0"
enterTo="translate-y-0 opacity-100"
leave="transition duration-200 linear"
leaveFrom="translate-y-0 opacity-100"
leaveTo="translate-y-4 opacity-0"
>
<div className="bg-white w-[500px] p-8 rounded-xl text-center shadow-modal">
{props.children}
</div>
</Transition.Child>
</div>
</Transition>
);
};
export default GenericDialog;

18
apps/comments-ui/src/components/modals/NotAuthorContextMenu.js
View File

@ -1,12 +1,19 @@
import React, {useContext} from 'react';
import AppContext from '../../AppContext';
import React, {useState} from 'react';
// import React, {useContext, useState} from 'react';
import ReportDialog from './ReportDialog';
// import AppContext from '../../AppContext';
const NotAuthorContextMenu = (props) => {
const {dispatchAction} = useContext(AppContext);
// const {dispatchAction} = useContext(AppContext);
let [isOpen, setIsOpen] = useState(false);
const reportComment = (event) => {
dispatchAction('reportComment', props.comment);
props.close();
// dispatchAction('reportComment', props.comment);
setIsOpen(true);
};
const closeModal = () => {
setIsOpen(false);
};
return (
@ -14,6 +21,7 @@ const NotAuthorContextMenu = (props) => {
<button className="text-[14px]" onClick={reportComment}>
Report comment
</button>
<ReportDialog show={isOpen} submit={reportComment} cancel={closeModal} />
</div>
);
};

17
apps/comments-ui/src/components/modals/ReportDialog.js Normal file
View File

@ -0,0 +1,17 @@
import React from 'react';
import GenericDialog from './GenericDialog';
const ReportDialog = (props) => {
return (
<GenericDialog show={props.show} submit={props.submit} cancel={props.cancel}>
<h1 className="font-sans font-bold tracking-tight text-[24px] mb-3">You sure you want to report?</h1>
<p className="font-sans text-[1.45rem] text-neutral-500">You request will be sent to the owner of this site.</p>
<div className="mt-10">
<button className="w-full h-[44px] bg-red-600 px-8 flex items-center justify-center rounded-md text-white font-sans font-semibold text-lg" onClick={props.submit}>Yes</button>
<p className="font-sans font-medium text-[1.45rem] text-neutral-500 mt-4 -mb-1">No, <button className="font-sans underline" onClick={props.cancel}>I've changed my mind</button></p>
</div>
</GenericDialog>
);
};
export default ReportDialog;

8
apps/comments-ui/tailwind.config.js
View File

@ -133,6 +133,14 @@ module.exports = {
'0px 0px 1px rgba(0, 0, 0, 0.12)',
'0px 13px 20px rgba(0, 0, 0, 0.04)',
'0px 14px 57px rgba(0, 0, 0, 0.06)'
],
modal: [
'0 3.8px 2.2px rgba(0, 0, 0, 0.028)',
'0 9.2px 5.3px rgba(0, 0, 0, 0.04)',
'0 17.3px 10px rgba(0, 0, 0, 0.05)',
'0 30.8px 17.9px rgba(0, 0, 0, 0.06)',
'0 57.7px 33.4px rgba(0, 0, 0, 0.072)',
'0 138px 80px rgba(0, 0, 0, 0.1)'
]
},
animation: {