mirrors/oneuptime
1
0
Fork 0
mirror of https://github.com/OneUptime/oneuptime synced 2024-11-22 07:10:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add CircleClose icon and CheckboxViewer component

Browse Source
This commit is contained in:
Simon Larsen 2024-01-30 07:26:36 +00:00
parent 5367953ab0
commit b426670d48
No known key found for this signature in database
GPG Key ID: AB45983AA9C81CDE
4 changed files with 51 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Common/Types/Icon/IconProp.ts
View File

@ -17,6 +17,7 @@ enum IconProp {
Squares = 'Squares',
RectangleStack = 'RectangleStack',
ChartBar = 'ChartBar',
CircleClose = 'CircleClose',
SquareStack = 'SquareStack',
Calendar = 'Calendar',
Help = 'Help',

27
CommonUI/src/Components/Checkbox/CheckboxViewer.tsx Normal file
View File

@ -0,0 +1,27 @@
import React, { FunctionComponent, ReactElement } from 'react';
import { Green, Red } from 'Common/Types/BrandColors';
import IconProp from 'Common/Types/Icon/IconProp';
import Icon from '../Icon/Icon';
export interface ComponentProps {
text: string;
isChecked: boolean;
}
const CheckboxViewer: FunctionComponent<ComponentProps> = (
props: ComponentProps
): ReactElement => {
return (<div>
<div className='flex'>
<div className='h-6 w-6'>
{props.isChecked ? <Icon className='h-5 w-5' icon={IconProp.CheckCircle} color={Green} /> : <Icon className='h-5 w-5' icon={IconProp.CircleClose} color={Red} />}
</div>
<div className="ml-1 text-sm font-light">
{props.text}
</div>
</div>
</div>)
};
export default CheckboxViewer;

7
CommonUI/src/Components/Icon/Icon.tsx
View File

@ -140,6 +140,13 @@ const Icon: FunctionComponent<ComponentProps> = ({
strokeLinejoin="round"
d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z"
/>
);
} else if (icon === IconProp.CircleClose) {
return getSvgWrapper(
<path strokeLinecap="round" strokeLinejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
);
} else if (icon === IconProp.Swatch) {
return getSvgWrapper(

17
Dashboard/src/Pages/Incidents/View/PublicNote.tsx
View File

@ -31,6 +31,7 @@ import DropdownUtil from 'CommonUI/src/Utils/Dropdown';
import BasicFormModal from 'CommonUI/src/Components/FormModal/BasicFormModal';
import ConfirmModal from 'CommonUI/src/Components/Modal/ConfirmModal';
import OneUptimeDate from 'Common/Types/Date';
import CheckboxViewer from 'CommonUI/src/Components/Checkbox/CheckboxViewer';
const PublicNote: FunctionComponent<PageComponentProps> = (
props: PageComponentProps
@ -246,6 +247,7 @@ const PublicNote: FunctionComponent<PageComponentProps> = (
contentClassName:
'mt-1 whitespace-nowrap text-sm text-gray-600 sm:mt-0 sm:ml-3 text-right',
},
{
field: {
note: true,
@ -254,9 +256,22 @@ const PublicNote: FunctionComponent<PageComponentProps> = (
title: '',
type: FieldType.Markdown,
contentClassName:
'-mt-3 space-y-6 text-sm text-gray-800',
'-mt-3 space-y-1 text-sm text-gray-800',
colSpan: 2,
},
{
field: {
shouldStatusPageSubscribersBeNotifiedOnNoteCreated: true,
},
title: '',
type: FieldType.Boolean,
colSpan: 2,
getElement: (item: JSONObject): ReactElement => {
return (<div className='-mt-5'><CheckboxViewer isChecked={item[
'shouldStatusPageSubscribersBeNotifiedOnNoteCreated'
] as boolean} text='Status Page Subscribers Notified' /> </div> )
}
},
]}
/>