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 { Message, ShouldNeverHappenError } from '../data-types';
import Q from '../q-module'; import Q from '../q-module';
import createImageOverlay from './overlay-image';
import createImageContextMenu from './context-menu-img'; import createImageContextMenu from './context-menu-img';
import CombinedGuild from '../guild-combined'; import CombinedGuild from '../guild-combined';
import React from 'react'; import React from 'react';
import ReactHelper from './require/react-helper'; 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 { export default function createImageResourceMessageContinued(document: Document, q: Q, guild: CombinedGuild, message: Message): Element {
if (!message.resourceId || !message.resourcePreviewId || !message.resourceName) { if (!message.resourceId || !message.resourcePreviewId || !message.resourceName) {
@ -35,7 +35,10 @@ export default function createImageResourceMessageContinued(document: Document,
); );
q.$$$(element, '.content.image').addEventListener('click', () => { 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 () => { (async () => {
try { 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) => { q.$$$(element, '.content.image').addEventListener('click', (e) => {
BaseElements.presentReactOverlay(document, ElementsUtil.presentReactOverlay(document,
<ImageOverlay guild={guild} <ImageOverlay guild={guild}
resourceId={message.resourceId as string} resourceName={message.resourceName as string} /> 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 * 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 CombinedGuild from '../../guild-combined';
import ElementsUtil from '../require/elements-util'; import ElementsUtil from '../require/elements-util';
import { Resource } from '../../data-types'; import { Resource } from '../../data-types';
@ -13,8 +13,6 @@ import DownloadButton from '../components/button-download';
import createImageContextMenu from '../context-menu-img'; import createImageContextMenu from '../context-menu-img';
import Q from '../../q-module'; import Q from '../../q-module';
type ButtonText = 'Loading...' | 'Error' | 'Save' | 'Downloading...' | 'Writing...' | 'Reveal in Explorer' | 'Try Again';
export interface ImageOverlayProps { export interface ImageOverlayProps {
guild: CombinedGuild guild: CombinedGuild
resourceId: string, 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; 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 // eslint-disable-next-line @typescript-eslint/no-explicit-any
static createOverlay(document: Document, content: JSX.Element): HTMLElementWithRemoveSelf { static createOverlay(document: Document, content: JSX.Element): HTMLElementWithRemoveSelf {
const q = new Q(document); 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 { ShouldNeverHappenError } from '../../data-types';
import React from 'react'; import React from 'react';
import Overlay from '../components/overlay';
import ReactDOM from 'react-dom';
interface IAlignment { interface IAlignment {
left?: string; 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( static bindHoverableContextElement(
hoverElement: HTMLElement, hoverElement: HTMLElement,
contextElement: IHTMLElementWithRemovalType, contextElement: IHTMLElementWithRemovalType,