jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui): add not found modal

Browse source
This commit is contained in:
sylenien 2022-10-03 11:05:20 +02:00 • committed by Delirium
parent f3872b83a0
commit c4bc71dd17
2 changed files with 44 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
frontend/app/components/Session/WebPlayer.js
View file

@ -110,15 +110,16 @@ function WebPlayer(props) {
<Modal open={showNoteModal} onClose={onNoteClose}>
{showNoteModal ? (
<ReadNote
userEmail={props.members.find(m => m.id === noteItem.userId)?.email || noteItem.userId}
timestamp={noteItem.timestamp}
tags={noteItem.tags}
isPublic={noteItem.isPublic}
message={noteItem.message}
sessionId={noteItem.sessionId}
date={noteItem.createdAt}
noteId={noteItem.noteId}
userEmail={props.members.find(m => m.id === noteItem?.userId)?.email || ''}
timestamp={noteItem?.timestamp}
tags={noteItem?.tags}
isPublic={noteItem?.isPublic}
message={noteItem?.message}
sessionId={noteItem?.sessionId}
date={noteItem?.createdAt}
noteId={noteItem?.noteId}
onClose={onNoteClose}
notFound={!noteItem}
/>
) : null}
</Modal>

36
frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx
View file

@ -15,12 +15,38 @@ interface Props {
date: string;
noteId: number;
onClose: () => void;
notFound?: boolean;
}
function ReadNote(props: Props) {
const { settingsStore } = useStore();
const { timezone } = settingsStore.sessionSettings;
if (props.notFound) {
return (
<div style={{ position: 'absolute', top: '45%', left: 'calc(50% - 200px)' }}>
<div
className="flex items-start flex-col p-4 border gap-2"
style={{ background: '#FFFEF5', width: 400 }}
>
<div className="flex items-start font-semibold w-full text-xl">
<div style={{ flex: 9 }}>You do not have access to this note. <br /> Or it’s deleted.</div>
<div style={{ flex: 1 }} className="cursor-pointer ml-auto" onClick={props.onClose}>
<Icon name="close" size={18} />
</div>
</div>
<div
onClick={props.onClose}
className="rounded py-2 px-4 mt-2 bg-active-blue flex items-center text-blue gap-2 cursor-pointer hover:bg-active-blue-border"
>
<Icon size={16} name="play-fill" color="main" />
<span>Play Session</span>
</div>
</div>
</div>
);
}
return (
<div style={{ position: 'absolute', top: '45%', left: 'calc(50% - 300px)' }}>
<div
@ -42,7 +68,7 @@ function ReadNote(props: Props) {
</div>
</div>
<div>{props.message}</div>
<div>
<div className="w-full">
<div className="flex items-center gap-2 flex-wrap w-full">
{props.tags.length ? (
<div className="flex items-center gap-1">
@ -61,6 +87,14 @@ function ReadNote(props: Props) {
<Icon name="user-friends" className="ml-2 mr-1" color="gray-dark" /> Team
</>
)}
<div
onClick={props.onClose}
className="ml-auto rounded py-2 px-4 bg-active-blue flex items-center text-blue gap-2 cursor-pointer hover:bg-active-blue-border"
>
<Icon size={16} name="play-fill" color="main" />
<span>Play Session</span>
</div>
</div>
</div>
</div>