infrastructure/mox
1
0
Fork 0
mirror of https://github.com/mjl-/mox.git synced 2025-07-10 07:54:40 +03:00
Code Issues Packages Projects Releases Wiki Activity

for username/email input field in login form, automatically resize so also longer addresses are fully visible

Browse Source 
feedback from jsfan3 in issue #58, thanks!
This commit is contained in:
Mechiel Lukkien
2024-01-08 21:59:15 +01:00
parent c348834ce9
commit 2392f79aa9
5 changed files with 27 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
webmail/webmail.js
View File

@ -1362,6 +1362,7 @@ const login = async (reason) => {
const origFocus = document.activeElement;
let reasonElem;
let fieldset;
let autosize;
let username;
let password;
const root = dom.div(style({ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, backgroundColor: '#eee', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: zindexes.login, animation: 'fadein .15s ease-in' }), dom.div(reasonElem = reason ? dom.div(style({ marginBottom: '2ex', textAlign: 'center' }), reason) : dom.div(), dom.div(style({ backgroundColor: 'white', borderRadius: '.25em', padding: '1em', boxShadow: '0 0 20px rgba(0, 0, 0, 0.1)', border: '1px solid #ddd', maxWidth: '95vw', overflowX: 'auto', maxHeight: '95vh', overflowY: 'auto', marginBottom: '20vh' }), dom.form(async function submit(e) {
@ -1391,7 +1392,7 @@ const login = async (reason) => {
finally {
fieldset.disabled = false;
}
}, fieldset = dom.fieldset(dom.h1('Mail'), dom.label(style({ display: 'block', marginBottom: '2ex' }), dom.div('Email address', style({ marginBottom: '.5ex' })), username = dom.input(attr.required(''), attr.placeholder('jane@example.org'))), dom.label(style({ display: 'block', marginBottom: '2ex' }), dom.div('Password', style({ marginBottom: '.5ex' })), password = dom.input(attr.type('password'), attr.required(''))), dom.div(style({ textAlign: 'center' }), dom.submitbutton('Login')))))));
}, fieldset = dom.fieldset(dom.h1('Mail'), dom.label(style({ display: 'block', marginBottom: '2ex' }), dom.div('Email address', style({ marginBottom: '.5ex' })), autosize = dom.span(dom._class('autosize'), username = dom.input(attr.required(''), attr.placeholder('jane@example.org'), function change() { autosize.dataset.value = username.value; }, function input() { autosize.dataset.value = username.value; }))), dom.label(style({ display: 'block', marginBottom: '2ex' }), dom.div('Password', style({ marginBottom: '.5ex' })), password = dom.input(attr.type('password'), attr.required(''))), dom.div(style({ textAlign: 'center' }), dom.submitbutton('Login')))))));
document.body.appendChild(root);
username.focus();
});
@ -2393,6 +2394,7 @@ const compose = (opts) => {
// data-value is used for size of ::after css pseudo-element to stretch input field.
autosizeElem.dataset.value = inputElem.value;
}, function change() {
autosizeElem.dataset.value = inputElem.value;
fetchRecipientSecurity();
}), securityBar = dom.span(dom._class('securitybar'), style({
margin: '0 1px',