remove old upload overlays
This commit is contained in:
Michael Peters
parent
15c92c2eac
commit
dea18a9a9c
@ -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, (
|
||||
<div className="image">
|
||||
<div className="item copy-image">Copy Image{isPreview ? ' Preview' : ''}</div>
|
||||
<div className="item save-image">Save Image{isPreview ? ' Preview' : ''}</div>
|
||||
</div>
|
||||
));
|
||||
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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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, (
|
||||
<div className="content drop-target">
|
||||
{/* TODO: icon? */}
|
||||
<div className="message">Upload to #{channel.name}</div>
|
||||
</div>
|
||||
));
|
||||
|
||||
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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user