michael/cordis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

reactify error message

Browse Source
This commit is contained in:
Michael Peters 2021-12-09 00:15:07 -06:00
parent f87fdeff3c
commit a6bde60b1d
4 changed files with 50 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/client/webapp/elements/context-menu-guild-title.tsx
View File

@ -18,6 +18,7 @@ import CombinedGuild from '../guild-combined';
import React from 'react';
import ReactHelper from './require/react-helper';
import GuildSettingsOverlay from './overlays/overlay-guild-settings';
import ErrorMessageOverlay from './overlays/overlay-error-message';
export default function createGuildTitleContextMenu(document: Document, q: Q, ui: UI, guild: CombinedGuild): Element {
if (ui.activeConnection === null) {
@ -83,12 +84,9 @@ export default function createGuildTitleContextMenu(document: Document, q: Q, ui
LOG.error('error fetching guild info', e);
}
if (guildMeta === null) {
const overlay = createErrorMessageOverlay(document, 'Error Opening Settings', 'Could not load guild information');
document.body.appendChild(overlay);
ElementsUtil.presentReactOverlay(document, <ErrorMessageOverlay title="Error Opening Settings" message="Could not load guild information" />);
} else {
ElementsUtil.presentReactOverlay(document, <GuildSettingsOverlay guild={guild} guildMeta={guildMeta} />);
// const overlay = createGuildSettingsOverlay(document, q, guild, guildMeta);
// document.body.appendChild(overlay);
}
});
}

8
src/client/webapp/elements/events-add-guild.tsx
View File

@ -13,6 +13,7 @@ import GuildsManager from '../guilds-manager';
import createErrorMessageOverlay from './overlay-error-message';
import AddGuildOverlay from './overlays/overlay-add-guild';
import React from 'react';
import ErrorMessageOverlay from './overlays/overlay-error-message';
export default function bindAddGuildEvents(document: Document, q: Q, ui: UI, guildsManager: GuildsManager): void {
let choosingFile = false;
@ -53,13 +54,10 @@ export default function bindAddGuildEvents(document: Document, q: Q, ui: UI, gui
LOG.debug('bad guild data:', { addGuildData, fileText })
throw new Error('bad guild data');
}
ElementsUtil.presentReactOverlay(document, <AddGuildOverlay document={document} ui={ui} guildsManager={guildsManager} addGuildData={addGuildData} />)
// const overlayElement = createAddGuildOverlay(document, q, ui, guildsManager, addGuildData as IAddGuildData);
// document.body.appendChild(overlayElement);
ElementsUtil.presentReactOverlay(document, <AddGuildOverlay document={document} ui={ui} guildsManager={guildsManager} addGuildData={addGuildData} />);
} catch (e: unknown) {
LOG.error('Unable to parse guild data', e);
const errorOverlayElement = createErrorMessageOverlay(document, 'Unable to parse guild file', (e as Error).message);
document.body.appendChild(errorOverlayElement);
ElementsUtil.presentReactOverlay(document, <ErrorMessageOverlay title="Unable to parse guild file" message={(e as Error).message} />);
}
choosingFile = false;

23
src/client/webapp/elements/overlays/overlay-error-message.tsx Normal file
View File

@ -0,0 +1,23 @@
import React, { FC } from 'react';
export interface ErrorMessageOverlayProps {
title: string;
message: string;
}
const ErrorMessageOverlay: FC<ErrorMessageOverlayProps> = (props: ErrorMessageOverlayProps) => {
const { title, message } = props;
return (
<div className="content error-message">
<div className="icon">
<img src="./img/error.png" alt="error" />
</div>
<div className="text">
<div className="title">{title}</div>
<div className="message">{message}</div>
</div>
</div>
);
}
export default ErrorMessageOverlay;

32
src/client/webapp/styles/overlays.scss
View File

@ -376,19 +376,31 @@ body > .overlay,
> .content.error-message {
background-color: $background-secondary;
padding: 16px;
border-radius: 12px;
border-radius: 8px;
align-items: center;
display: flex;
.title {
color: $header-primary;
font-size: 1.25em;
font-weight: 600;
line-height: 1;
margin-bottom: 12px;
.icon img {
display: block;
width: 48px;
height: 48px;
}
.message {
padding: 0;
color: $text-normal;
.text {
margin-left: 16px;
.title {
color: $header-primary;
font-size: 1.2em;
font-weight: 600;
line-height: 1;
margin-bottom: 4px;
}
.message {
padding: 0;
color: $text-normal;
}
}
}