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

add react image overlay to other message type

Browse Source
This commit is contained in:
Michael Peters 2021-12-07 19:26:51 -06:00
parent 72b8ad6281
commit c12873d929
5 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/client/webapp/elements/msg-img-res-cont.tsx
View File

@ -10,12 +10,12 @@ import ElementsUtil from './require/elements-util.js';
import { Message, ShouldNeverHappenError } from '../data-types';
import Q from '../q-module';
import createImageOverlay from './overlay-image';
import createImageContextMenu from './context-menu-img';
import CombinedGuild from '../guild-combined';
import React from 'react';
import ReactHelper from './require/react-helper';
import ImageOverlay from './overlays/overlay-image';
export default function createImageResourceMessageContinued(document: Document, q: Q, guild: CombinedGuild, message: Message): Element {
if (!message.resourceId || !message.resourcePreviewId || !message.resourceName) {
@ -35,7 +35,10 @@ export default function createImageResourceMessageContinued(document: Document,
);
q.$$$(element, '.content.image').addEventListener('click', () => {
document.body.appendChild(createImageOverlay(document, q, guild, message.resourceId as string, message.resourceName as string));
ElementsUtil.presentReactOverlay(document,
<ImageOverlay guild={guild}
resourceId={message.resourceId as string} resourceName={message.resourceName as string} />
);
});
(async () => {
try {

2
src/client/webapp/elements/msg-img-res.tsx
View File

@ -62,7 +62,7 @@ export default function createImageResourceMessage(document: Document, q: Q, gui
);
q.$$$(element, '.content.image').addEventListener('click', (e) => {
BaseElements.presentReactOverlay(document,
ElementsUtil.presentReactOverlay(document,
<ImageOverlay guild={guild}
resourceId={message.resourceId as string} resourceName={message.resourceName as string} />
);

4
src/client/webapp/elements/overlays/overlay-image.tsx
View File

@ -5,7 +5,7 @@ const LOG = Logger.create(__filename, electronConsole);
import * as FileType from 'file-type';
import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
import React, { FC, useEffect, useMemo, useState } from 'react';
import CombinedGuild from '../../guild-combined';
import ElementsUtil from '../require/elements-util';
import { Resource } from '../../data-types';
@ -13,8 +13,6 @@ import DownloadButton from '../components/button-download';
import createImageContextMenu from '../context-menu-img';
import Q from '../../q-module';
type ButtonText = 'Loading...' | 'Error' | 'Save' | 'Downloading...' | 'Writing...' | 'Reveal in Explorer' | 'Try Again';
export interface ImageOverlayProps {
guild: CombinedGuild
resourceId: string,

5
src/client/webapp/elements/require/base-elements.tsx
View File

@ -251,11 +251,6 @@ export default class BaseElements {
return element as HTMLElementWithRemoveSelf;
}
static presentReactOverlay(document: Document, content: JSX.Element) {
const overlay = <Overlay>{content}</Overlay>;
ReactDOM.render(overlay, document.querySelector('#react-overlays'));
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
static createOverlay(document: Document, content: JSX.Element): HTMLElementWithRemoveSelf {
const q = new Q(document);

7
src/client/webapp/elements/require/elements-util.tsx
View File

@ -17,6 +17,8 @@ import CombinedGuild from '../../guild-combined';
import { ShouldNeverHappenError } from '../../data-types';
import React from 'react';
import Overlay from '../components/overlay';
import ReactDOM from 'react-dom';
interface IAlignment {
left?: string;
@ -336,6 +338,11 @@ export default class ElementsUtil {
}
}
static presentReactOverlay(document: Document, content: JSX.Element) {
const overlay = <Overlay>{content}</Overlay>;
ReactDOM.render(overlay, document.querySelector('#react-overlays'));
}
static bindHoverableContextElement(
hoverElement: HTMLElement,
contextElement: IHTMLElementWithRemovalType,