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;
|
width: 64px;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modify {
|
.modify {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user