serv/mox
1
0
Fork 0
mirror of https://github.com/mjl-/mox.git synced 2024-12-27 08:53:48 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
No known key found for this signature in database
5 changed files with 27 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
webaccount/account.html
View file

@ -26,6 +26,9 @@ fieldset { border: 0; }
#page.loading { opacity: 0.1; animation: fadeout 1s ease-out; } #page.loading { opacity: 0.1; animation: fadeout 1s ease-out; }
@keyframes fadein { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes fadein { 0% { opacity: 0 } 100% { opacity: 1 } }
@keyframes fadeout { 0% { opacity: 1 } 100% { opacity: 0.1 } } @keyframes fadeout { 0% { opacity: 1 } 100% { opacity: 0.1 } }
.autosize { display: inline-grid; max-width: 90vw; }
.autosize.input { grid-area: 1 / 2; }
.autosize::after { content: attr(data-value); margin-right: 1em; line-height: 0; visibility: hidden; white-space: pre-wrap; overflow-x: hidden; }
</style> </style>
</head> </head>
<body> <body>

3
webaccount/account.js
View file

@ -706,6 +706,7 @@ const login = async (reason) => {
const origFocus = document.activeElement; const origFocus = document.activeElement;
let reasonElem; let reasonElem;
let fieldset; let fieldset;
let autosize;
let username; let username;
let password; 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: '1', 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) { const root = dom.div(style({ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, backgroundColor: '#eee', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: '1', 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) {
@ -736,7 +737,7 @@ const login = async (reason) => {
finally { finally {
fieldset.disabled = false; fieldset.disabled = false;
} }
}, fieldset = dom.fieldset(dom.h1('Account'), 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('Account'), 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); document.body.appendChild(root);
username.focus(); username.focus();
}); });

10
webaccount/account.ts
View file

@ -9,6 +9,7 @@ const login = async (reason: string) => {
const origFocus = document.activeElement const origFocus = document.activeElement
let reasonElem: HTMLElement let reasonElem: HTMLElement
let fieldset: HTMLFieldSetElement let fieldset: HTMLFieldSetElement
let autosize: HTMLElement
let username: HTMLInputElement let username: HTMLInputElement
let password: HTMLInputElement let password: HTMLInputElement
@ -52,7 +53,14 @@ const login = async (reason: string) => {
dom.label( dom.label(
style({display: 'block', marginBottom: '2ex'}), style({display: 'block', marginBottom: '2ex'}),
dom.div('Email address', style({marginBottom: '.5ex'})), dom.div('Email address', style({marginBottom: '.5ex'})),
username=dom.input(attr.required(''), attr.placeholder('jane@example.org')), 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( dom.label(
style({display: 'block', marginBottom: '2ex'}), style({display: 'block', marginBottom: '2ex'}),

4
webmail/webmail.js
View file

@ -1362,6 +1362,7 @@ const login = async (reason) => {
const origFocus = document.activeElement; const origFocus = document.activeElement;
let reasonElem; let reasonElem;
let fieldset; let fieldset;
let autosize;
let username; let username;
let password; 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) { 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 { finally {
fieldset.disabled = false; 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); document.body.appendChild(root);
username.focus(); username.focus();
}); });
@ -2393,6 +2394,7 @@ const compose = (opts) => {
// data-value is used for size of ::after css pseudo-element to stretch input field. // data-value is used for size of ::after css pseudo-element to stretch input field.
autosizeElem.dataset.value = inputElem.value; autosizeElem.dataset.value = inputElem.value;
}, function change() { }, function change() {
autosizeElem.dataset.value = inputElem.value;
fetchRecipientSecurity(); fetchRecipientSecurity();
}), securityBar = dom.span(dom._class('securitybar'), style({ }), securityBar = dom.span(dom._class('securitybar'), style({
margin: '0 1px', margin: '0 1px',

11
webmail/webmail.ts
View file

@ -236,6 +236,7 @@ const login = async (reason: string) => {
const origFocus = document.activeElement const origFocus = document.activeElement
let reasonElem: HTMLElement let reasonElem: HTMLElement
let fieldset: HTMLFieldSetElement let fieldset: HTMLFieldSetElement
let autosize: HTMLElement
let username: HTMLInputElement let username: HTMLInputElement
let password: HTMLInputElement let password: HTMLInputElement
const root = dom.div( const root = dom.div(
@ -277,7 +278,14 @@ const login = async (reason: string) => {
dom.label( dom.label(
style({display: 'block', marginBottom: '2ex'}), style({display: 'block', marginBottom: '2ex'}),
dom.div('Email address', style({marginBottom: '.5ex'})), dom.div('Email address', style({marginBottom: '.5ex'})),
username=dom.input(attr.required(''), attr.placeholder('jane@example.org')), 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( dom.label(
style({display: 'block', marginBottom: '2ex'}), style({display: 'block', marginBottom: '2ex'}),
@ -1476,6 +1484,7 @@ const compose = (opts: ComposeOptions) => {
autosizeElem.dataset.value = inputElem.value autosizeElem.dataset.value = inputElem.value
}, },
function change() { function change() {
autosizeElem.dataset.value = inputElem.value
fetchRecipientSecurity() fetchRecipientSecurity()
}, },
), ),