fixed img having invisible extra stuff below from non-display: block
This commit is contained in:
Michael Peters
parent
7fb4809a5e
commit
8e4a195464
@ -1,157 +0,0 @@
|
||||
/* eslint-disable @typescript-eslint/no-empty-function */
|
||||
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 BaseElements, { HTMLElementWithRemoveSelf } from './require/base-elements';
|
||||
import ElementsUtil from './require/elements-util';
|
||||
|
||||
import Globals from '../globals';
|
||||
|
||||
import Q from '../q-module';
|
||||
import createTextMessage from './msg-txt';
|
||||
import CombinedGuild from '../guild-combined';
|
||||
import { ConnectionInfo } from '../data-types';
|
||||
|
||||
import React from 'react';
|
||||
import moment from 'moment';
|
||||
|
||||
export default function createPersonalizeOverlay(document: Document, q: Q, guild: CombinedGuild, connection: ConnectionInfo): HTMLElementWithRemoveSelf {
|
||||
const element = BaseElements.createOverlay(document, (
|
||||
<div className="content submit-dialog personalize">
|
||||
<div className="message">
|
||||
<div className="member-avatar">
|
||||
<img src="./img/loading.svg" alt={connection.displayName}></img>
|
||||
</div>
|
||||
<div className="right">
|
||||
<div className="header">
|
||||
<div className="member-name">{connection.displayName}</div>
|
||||
<div className="timestamp">{moment(new Date()).calendar(ElementsUtil.calendarFormats)}</div>
|
||||
</div>
|
||||
<div className="content text">Example Message</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-input display-name-input" data-placeholder="New Display Name"
|
||||
contentEditable={'plaintext-only' as unknown as boolean /* React doesn't have plaintext-only in its typings (https://github.com/DefinitelyTyped/DefinitelyTyped/pull/54779) */}></div>
|
||||
<div className="image-input avatar-input">
|
||||
<label className="image-input-label avatar-input-label button">
|
||||
Select New Avatar
|
||||
<input className="image-input-upload avatar-upload" type="file" accept=".png,.jpg,.jpeg" style={{ display: 'none' }}></input>
|
||||
</label>
|
||||
</div>
|
||||
<div className="lower">
|
||||
<div className="error"></div>
|
||||
<div className="buttons">
|
||||
<div className="button submit">Save Changes</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
));
|
||||
|
||||
q.$$$(element, '.text-input.display-name-input').innerText = connection.displayName;
|
||||
(async () => {
|
||||
(q.$$$(element, '.member-avatar img') as HTMLImageElement).src =
|
||||
await ElementsUtil.getImageBufferFromResourceFailSoftly(guild, connection.avatarResourceId);
|
||||
})();
|
||||
|
||||
let newAvatarBuffer: Buffer | null = null;
|
||||
BaseElements.bindImageUploadEvents(q.$$$(element, '.avatar-upload') as HTMLInputElement, {
|
||||
maxSize: Globals.MAX_AVATAR_SIZE,
|
||||
acceptedMimeTypes: [ 'image/png', 'image/jpeg', 'image/jpg' ],
|
||||
onChangeStart: () => { q.$$$(element, '.error').innerText = ''; },
|
||||
onCleared: () => {},
|
||||
onError: async (errMsg) => {
|
||||
q.$$$(element, '.error').innerText = errMsg;
|
||||
await ElementsUtil.shakeElement(q.$$$(element, '.avatar-upload-label'), 400);
|
||||
},
|
||||
onLoaded: (buff, src) => {
|
||||
newAvatarBuffer = buff;
|
||||
(q.$$$(element, '.member-avatar img') as HTMLImageElement).src = src;
|
||||
}
|
||||
});
|
||||
|
||||
q.$$$(element, '.text-input').addEventListener('keydown', (e) => {
|
||||
if (e.key == 'Enter') {
|
||||
e.preventDefault();
|
||||
if (e.shiftKey) return; // since the shift key makes newlines other places
|
||||
q.$$$(element, '.button.submit').click();
|
||||
}
|
||||
});
|
||||
|
||||
q.$$$(element, '.text-input').addEventListener('input', () => {
|
||||
q.$$$(element, '.member-name').innerText = q.$$$(element, '.text-input').innerText;
|
||||
});
|
||||
|
||||
let setting = false;
|
||||
q.$$$(element, '.button.submit').addEventListener('click', async () => {
|
||||
if (setting) return;
|
||||
setting = true;
|
||||
q.$$$(element, '.error').innerText = '';
|
||||
q.$$$(element, '.button.submit').innerText = 'Submitting...';
|
||||
const newDisplayName = q.$$$(element, '.text-input').innerText;
|
||||
|
||||
if (newDisplayName == connection.displayName && newAvatarBuffer == null) {
|
||||
// nothing changed, simply close the diaolg
|
||||
element.removeSelf();
|
||||
setting = false;
|
||||
return;
|
||||
}
|
||||
|
||||
q.$$$(element, '.text-input').removeAttribute('contenteditable');
|
||||
|
||||
let success = false;
|
||||
if (newDisplayName != connection.displayName && newDisplayName.length == 0) {
|
||||
LOG.warn('attempted to set empty new display name');
|
||||
q.$$$(element, '.button.submit').innerText = 'Try Again';
|
||||
q.$$$(element, '.error').innerText = 'New display name is empty.';
|
||||
await ElementsUtil.shakeElement(q.$$$(element, '.button.submit'), 400);
|
||||
} else if (newDisplayName != connection.displayName && newDisplayName.length > Globals.MAX_DISPLAY_NAME_LENGTH) {
|
||||
LOG.warn('attempted to set too long new display name');
|
||||
q.$$$(element, '.button.submit').innerText = 'Try Again';
|
||||
q.$$$(element, '.error').innerText = 'New display name too long. ' + newDisplayName.length + ' > ' + Globals.MAX_DISPLAY_NAME_LENGTH;
|
||||
await ElementsUtil.shakeElement(q.$$$(element, '.button.submit'), 400);
|
||||
} else { // new avatar buffer size is already checked above
|
||||
// Set Display Name
|
||||
let failed = false;
|
||||
if (newDisplayName != connection.displayName) {
|
||||
try {
|
||||
await guild.requestSetDisplayName(newDisplayName);
|
||||
connection.displayName = newDisplayName; // prevent resubmit
|
||||
} catch (e) {
|
||||
LOG.error('error setting display name', e);
|
||||
q.$$$(element, '.button.submit').innerText = 'Try Again';
|
||||
q.$$$(element, '.error').innerText = 'Error setting display name';
|
||||
await ElementsUtil.shakeElement(q.$$$(element, '.button.submit'), 400);
|
||||
failed = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Set New Avatar
|
||||
if (!failed && newAvatarBuffer != null) {
|
||||
try {
|
||||
await guild.requestSetAvatar(newAvatarBuffer);
|
||||
newAvatarBuffer = null; // prevent resubmit
|
||||
} catch (e) {
|
||||
LOG.error('error setting avatar buffer', e);
|
||||
q.$$$(element, '.button.submit').innerText = 'Try Again';
|
||||
q.$$$(element, '.error').innerText = 'Error submitting avatar';
|
||||
await ElementsUtil.shakeElement(q.$$$(element, '.button.submit'), 400);
|
||||
failed = true;
|
||||
}
|
||||
}
|
||||
|
||||
success = !failed;
|
||||
}
|
||||
|
||||
q.$$$(element, '.text-input').setAttribute('contenteditable', 'plaintext-only');
|
||||
q.$$$(element, '.text-input').focus();
|
||||
|
||||
if (success) {
|
||||
element.removeSelf(); // close the dialog
|
||||
}
|
||||
|
||||
setting = false;
|
||||
});
|
||||
return element;
|
||||
}
|
||||
@ -42,6 +42,7 @@
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.modify {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user