diff --git a/src/client/webapp/elements/context-menu-img.tsx b/src/client/webapp/elements/context-menu-img.tsx deleted file mode 100644 index 2bcb917..0000000 --- a/src/client/webapp/elements/context-menu-img.tsx +++ /dev/null @@ -1,55 +0,0 @@ -/* eslint-disable @typescript-eslint/no-empty-function */ -import * as path from 'path'; - -import sharp from 'sharp'; -import * as electron from 'electron'; - -import BaseElements from './require/base-elements'; -import ElementsUtil from './require/elements-util'; - -import Q from '../q-module'; -import CombinedGuild from '../guild-combined'; - -import React from 'react'; - -export default function createImageContextMenu( - document: Document, - q: Q, - guild: CombinedGuild, - resourceName: string, - buffer: Buffer, - mime: string, - ext: string, - isPreview: boolean -): HTMLElement { - // TODO: try/catch around sharp? - const contextMenu = BaseElements.createContextMenu(document, ( -
-
Copy Image{isPreview ? ' Preview' : ''}
-
Save Image{isPreview ? ' Preview' : ''}
-
- )); - q.$$$(contextMenu, '.copy-image').addEventListener('click', async () => { - q.$$$(contextMenu, '.copy-image').innerText = 'Copying...'; - let nativeImage: electron.NativeImage; - if (mime != 'image/png' && mime != 'image/jpeg' && mime != 'image/jpg') { - // use sharp to convert to png since nativeImage only supports jpeg/png - nativeImage = electron.nativeImage.createFromBuffer(await sharp(buffer).png().toBuffer()); - } else { - nativeImage = electron.nativeImage.createFromBuffer(buffer); - } - electron.clipboard.writeImage(nativeImage); - q.$$$(contextMenu, '.copy-image').innerText = 'Copied to Clipboard'; - }); - q.$$$(contextMenu, '.save-image').addEventListener('click', ElementsUtil.createDownloadListener({ - downloadBuff: buffer, guild: guild, - resourceName: path.basename(resourceName, '.' + ext) + (isPreview ? '-preview.' : '.') + ext, - downloadStartFunc: () => {}, - writeStartFunc: () => { q.$$$(contextMenu, '.save-image').innerText = 'Writing...'; }, - writeFailFunc: () => { - q.$$$(contextMenu, '.save-image').innerText = 'Write Failed. Click to Try Again'; - }, - successFunc: () => { q.$$$(contextMenu, '.save-image').innerText = 'Reveal' + (isPreview ? ' Preview' : '') + ' in Explorer'; } - })); - return contextMenu; -} diff --git a/src/client/webapp/elements/overlay-upload-datatransfer.ts b/src/client/webapp/elements/overlay-upload-datatransfer.ts deleted file mode 100644 index b1b19cd..0000000 --- a/src/client/webapp/elements/overlay-upload-datatransfer.ts +++ /dev/null @@ -1,21 +0,0 @@ -import BaseElements from './require/base-elements.js'; - -import { Channel, ShouldNeverHappenError } from '../data-types'; -import CombinedGuild from '../guild-combined.js'; - -export default function createUploadOverlayFromDataTransferItem(document: Document, guild: CombinedGuild, channel: Channel, dataTransferItem: DataTransferItem): HTMLElement { - const file = dataTransferItem.getAsFile(); - if (file === null) throw new ShouldNeverHappenError('no file in the data transfer item'); - const element = BaseElements.createUploadOverlay(document, { - guild: guild, channel: channel, resourceName: file.name, - resourceBuffFunc: async () => { - if (file === null) throw new ShouldNeverHappenError('no file in the data transfer item'); - return Buffer.from(await file.arrayBuffer()); - }, - resourceSizeFunc: () => { - if (file === null) throw new ShouldNeverHappenError('no file in the data transfer item'); - return file.size; - } - }); - return element; -} diff --git a/src/client/webapp/elements/overlay-upload-drop-target.tsx b/src/client/webapp/elements/overlay-upload-drop-target.tsx deleted file mode 100644 index bc0f8ed..0000000 --- a/src/client/webapp/elements/overlay-upload-drop-target.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import * as electronRemote from '@electron/remote'; -const electronConsole = electronRemote.getGlobal('console') as Console; -import Logger from '../../../logger/logger'; -const LOG = Logger.create(__filename, electronConsole); - -import { Channel } from '../data-types'; -import BaseElements from './require/base-elements'; -import Q from '../q-module'; -import createUploadOverlayFromDataTransferItem from './overlay-upload-datatransfer'; -import CombinedGuild from '../guild-combined'; - -import React from 'react'; - -export default function createUploadDropTarget(document: Document, q: Q, guild: CombinedGuild, channel: Channel): HTMLElement { - const element = BaseElements.createOverlay(document, ( -
- {/* TODO: icon? */} -
Upload to #{channel.name}
-
- )); - - element.addEventListener('dragover', (e) => { - e.preventDefault(); - e.stopPropagation(); - }); - element.addEventListener('dragleave', (e) => { - e.preventDefault(); - e.stopPropagation(); - if (element.parentElement) { - element.parentElement.removeChild(element); - } - }); - element.addEventListener('drop', (e) => { - e.preventDefault(); - element.parentElement?.removeChild(element); - let fileTransferItem: DataTransferItem | null = null; - for (const item of e.dataTransfer?.items ?? []) { - if (item.kind == 'file') { - e.preventDefault(); // don't continue the paste - fileTransferItem = item; - break; - } - } - if (fileTransferItem) { - const element = createUploadOverlayFromDataTransferItem(document, guild, channel, fileTransferItem); - document.body.appendChild(element); - q.$$$(element, '.text-input').focus(); - } else { - LOG.debug('dropped non-file'); - } - }); - return element; -} diff --git a/src/client/webapp/elements/overlay-upload-path.ts b/src/client/webapp/elements/overlay-upload-path.ts deleted file mode 100644 index 80f150c..0000000 --- a/src/client/webapp/elements/overlay-upload-path.ts +++ /dev/null @@ -1,22 +0,0 @@ -import * as fs from 'fs/promises'; -import * as path from 'path'; - -import BaseElements from './require/base-elements'; - -import { Channel } from '../data-types'; -import CombinedGuild from '../guild-combined'; - -export default function createUploadOverlayFromPath(document: Document, guild: CombinedGuild, channel: Channel, resourcePath: string): HTMLElement { - const resourceName = path.basename(resourcePath); - const element = BaseElements.createUploadOverlay(document, { - guild: guild, channel: channel, resourceName: resourceName, - resourceBuffFunc: async () => { - return await fs.readFile(resourcePath); - }, - resourceSizeFunc: async () => { - const stat = await fs.stat(resourcePath); - return stat.size; - } - }); - return element; -} diff --git a/src/client/webapp/styles/overlays.scss b/src/client/webapp/styles/overlays.scss index 1b9563d..a022f59 100644 --- a/src/client/webapp/styles/overlays.scss +++ b/src/client/webapp/styles/overlays.scss @@ -37,85 +37,6 @@ body > .overlay, } } - /* Drop Target Overlay */ - - > .content.drop-target { - box-sizing: border-box; - width: calc(100vw - 32px); - height: calc(100vh - 22px - 32px); - margin: 16px; - border: 4px dashed $background-primary; - border-radius: 16px; - display: flex; - justify-content: center; - align-items: center; - - * { - pointer-events: none; - } - - .message { - border-radius: 8px; - padding: 32px; - background-color: $background-primary; - color: $header-primary; - font-size: 48px; - font-weight: 600; - } - } - - /* Upload Overlay */ - - > .content.upload { - background-color: $background-primary; - width: 500px; - border-radius: 12px; - padding: 16px; - - .title { - display: flex; - align-items: flex-start; - margin-bottom: 16px; - } - - .title img { - max-width: 128px; - max-height: 128px; - border-radius: 8px; - margin-right: 16px; - } - - .title .right > *:not(:last-child) { - margin-bottom: 8px; - } - - .title .right > * { - color: $text-normal; - } - - .title .right > .name { - font-weight: 600; - font-size: 1.25em; - color: $header-primary; - } - - .lower { - margin-top: 16px; - display: flex; - align-items: center; - } - - .lower .error { - flex: 1; - color: $header-primary; - } - - .buttons { - display: flex; - justify-content: flex-end; - } - } - /* General Submit Dialog Overlays */ > .content.submit-dialog { @@ -215,76 +136,4 @@ body > .overlay, } } } - - /* View Tokens Overlay */ - > .content.token-log { - background-color: $background-secondary; - padding: 16px; - border-radius: 12px; - color: $text-normal; - - .tokens .token-display { - border-radius: 8px; - padding: 8px; - display: flex; - align-items: center; - } - - .tokens .token-display:hover { - background-color: $background-secondary-alt; - } - - .tokens .token-display:last-child { - margin-bottom: 0; - } - - .tokens .instance { - display: flex; - justify-content: space-between; - width: 400px; - margin-right: 8px; - } - - .tokens .instance .left { - text-align: left; - } - - .tokens .instance .right { - text-align: right; - } - - .tokens .instance .member { - font-weight: 600; - font-size: 16px; - } - - .tokens .instance .token { - font-size: 12px; - color: $text-muted; - } - - .tokens .instance .expires, - .tokens .instance .created { - font-size: 14px; - } - - .tokens .buttons { - display: flex; - } - - .tokens .buttons .download { - cursor: pointer; - border-radius: 4px; - padding: 8px; - background-color: $away; - margin-right: 8px; - } - - .tokens .buttons .revoke { - cursor: pointer; - border-radius: 4px; - padding: 8px; - background-color: $busy - } - } } \ No newline at end of file