mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
Working progress of the button when sending reporting
refs https://github.com/TryGhost/Team/issues/1685
This commit is contained in:
James Morris
parent
0424fcd099
commit
4b504130d8
4 changed files with 59 additions and 9 deletions
|
|
@ -5,23 +5,41 @@ import ReportDialog from './ReportDialog';
|
|||
|
||||
const NotAuthorContextMenu = (props) => {
|
||||
// const {dispatchAction} = useContext(AppContext);
|
||||
let [isOpen, setIsOpen] = useState(false);
|
||||
let [isOpen, setOpen] = useState(false);
|
||||
let [reportProgress, setProgress] = useState('default'); // states for button: default, sending, sent
|
||||
|
||||
const reportComment = (event) => {
|
||||
// dispatchAction('reportComment', props.comment);
|
||||
setIsOpen(true);
|
||||
const openModal = () => {
|
||||
setProgress('default');
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
setIsOpen(false);
|
||||
setProgress('default');
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const reportComment = (event) => {
|
||||
event.stopPropagation();
|
||||
|
||||
setProgress('sending');
|
||||
|
||||
// faked timing of the report being sent for user feedback purposes
|
||||
setTimeout(() => {
|
||||
setProgress('sent');
|
||||
// dispatchAction('reportComment', props.comment);
|
||||
|
||||
setTimeout(() => {
|
||||
setOpen(false);
|
||||
}, 750);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<button className="text-[14px]" onClick={reportComment}>
|
||||
<button className="text-[14px]" onClick={openModal}>
|
||||
Report comment
|
||||
</button>
|
||||
<ReportDialog show={isOpen} submit={reportComment} cancel={closeModal} />
|
||||
<ReportDialog show={isOpen} progress={reportProgress} submit={reportComment} cancel={closeModal} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,13 +1,39 @@
|
|||
import React from 'react';
|
||||
import GenericDialog from './GenericDialog';
|
||||
import {ReactComponent as SpinnerIcon} from '../../images/icons/spinner.svg';
|
||||
import {ReactComponent as SuccessIcon} from '../../images/icons/success.svg';
|
||||
|
||||
const ReportDialog = (props) => {
|
||||
let buttonColor = 'bg-red-600';
|
||||
if (props.progress === 'sent') {
|
||||
buttonColor = 'bg-green-600';
|
||||
}
|
||||
|
||||
let buttonText = 'Yes';
|
||||
if (props.progress === 'sending') {
|
||||
buttonText = 'Sending';
|
||||
} else if (props.progress === 'sent') {
|
||||
buttonText = 'Sent';
|
||||
}
|
||||
|
||||
let buttonIcon = null;
|
||||
if (props.progress === 'sending') {
|
||||
buttonIcon = <SpinnerIcon className="w-[16px] h-[16px] mr-2" />;
|
||||
} else if (props.progress === 'sent') {
|
||||
buttonIcon = <SuccessIcon className="w-[16px] h-[16px] mr-2" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<GenericDialog show={props.show} submit={props.submit} cancel={props.cancel}>
|
||||
<GenericDialog show={props.show} 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>
|
||||
<button
|
||||
className={`transition duration-200 ease-linear w-full h-[44px] px-8 flex items-center justify-center rounded-md text-white font-sans font-semibold text-[15px] ${buttonColor}`}
|
||||
onClick={props.submit}
|
||||
>
|
||||
{buttonIcon}{buttonText}
|
||||
</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>
|
||||
|
|
|
|||
1
apps/comments-ui/src/images/icons/spinner.svg
Normal file
1
apps/comments-ui/src/images/icons/spinner.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width='24px' height='24px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(0 50 50) translate(0 -40)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(30 50 50) translate(0 -40)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.08333333333333333s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(60 50 50) translate(0 -40)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.16666666666666666s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(90 50 50) translate(0 -40)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.25s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(120 50 50) translate(0 -40)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.3333333333333333s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(150 50 50) translate(0 -40)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.4166666666666667s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(180 50 50) translate(0 -40)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(210 50 50) translate(0 -40)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5833333333333334s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(240 50 50) translate(0 -40)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.6666666666666666s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(270 50 50) translate(0 -40)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.75s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(300 50 50) translate(0 -40)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.8333333333333334s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#fefefe' transform='rotate(330 50 50) translate(0 -40)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.9166666666666666s' repeatCount='indefinite'/></rect></svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
5
apps/comments-ui/src/images/icons/success.svg
Normal file
5
apps/comments-ui/src/images/icons/success.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="26px" height="26px" viewBox="-1 -1 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="check-circle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path class="animated-check-circle" d="M19.6004116,2.71490714 C17.5353801,1.0196018 14.8927356,0 12,0 C5.38938053,0 0,5.38938053 0,12 C0,18.6106195 5.38938053,24 12,24 C18.6106195,24 24,18.6106195 24,12 C24,9.71681416 23.3628319,7.59292035 22.2743363,5.78761062 L11.0442478,17.0442478 L5.49557522,11.4955752" id="Shape" stroke="#FFFFFF" stroke-width="2"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 622 B |
Loading…
Add table
Reference in a new issue