Restructure some popups to use <form>

This commit is contained in:
the-djmaze 2022-02-25 13:12:44 +01:00
parent 169dbfecca
commit b82d26b71b
7 changed files with 201 additions and 227 deletions

View file

@ -5,33 +5,30 @@
<span data-bind="visible: !isNew()" data-i18n="POPUPS_ADD_ACCOUNT/TITLE_UPDATE_ACCOUNT"></span>
</h3>
</header>
<form class="modal-body form-horizontal" autocomplete="off">
<form id="accountform" class="modal-body form-horizontal" autocomplete="off" data-bind="submit: submitForm">
<div class="alert" data-bind="visible: '' !== submitError()">
<a href="#" class="close" data-bind="click: function () { submitError('') }">×</a>
<span data-bind="text: submitError"></span>
<div data-bind="visible: submitErrorAdditional">
<br>
<span data-bind="text: submitErrorAdditional"></span>
</div>
<div data-bind="visible: submitErrorAdditional, text: submitErrorAdditional"></div>
</div>
<div class="control-group" data-bind="css: {'error': emailError}">
<label data-i18n="GLOBAL/EMAIL"></label>
<strong style="margin-top: 5px;" data-bind="visible: !isNew(), text: email"></strong>
<input type="email" class="input-xlarge"
autofocus="" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="visible: isNew, textInput: email, onEnter: addAccountCommand">
data-bind="visible: isNew, textInput: email">
</div>
<div class="control-group" data-bind="css: {'error': passwordError}">
<label data-i18n="GLOBAL/PASSWORD"></label>
<input type="password" class="input-xlarge" autocomplete="new-password" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="value: password, onEnter: addAccountCommand">
required="" data-bind="value: password">
</div>
</form>
<footer>
<a class="btn buttonAddAccount" data-bind="command: addAccountCommand">
<button form="accountform" class="btn buttonAddAccount">
<i data-bind="visible: isNew, css: {'icon-user-add': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
<span data-bind="visible: isNew" data-i18n="POPUPS_ADD_ACCOUNT/BUTTON_ADD_ACCOUNT"></span>
<i data-bind="visible: !isNew(), css: {'icon-ok': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
<span data-bind="visible: !isNew()" data-i18n="POPUPS_ADD_ACCOUNT/BUTTON_UPDATE_ACCOUNT"></span>
</a>
</button>
</footer>

View file

@ -2,88 +2,86 @@
<a href="#" class="close" data-bind="command: closeCommand">×</a>
<h3 data-i18n="SEARCH/TITLE_ADV"></h3>
</header>
<div class="modal-body">
<form id="searchform" class="form-horizontal" action="#/" autocomplete="off" data-bind="submit: submitForm">
<div class="row">
<div class="span4">
<div class="control-group">
<label data-i18n="GLOBAL/FROM"></label>
<input type="text" autofocus="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="value: from, onEsc: closeCommand">
</div>
<div class="control-group">
<label data-i18n="GLOBAL/TO"></label>
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="value: to, onEsc: closeCommand">
</div>
<div class="control-group">
<label data-i18n="GLOBAL/SUBJECT"></label>
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="value: subject, onEsc: closeCommand">
</div>
<div class="control-group">
<label data-i18n="SEARCH/LABEL_ADV_TEXT"></label>
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="value: text, onEsc: closeCommand">
</div>
<form id="modal-body searchform" class="form-horizontal" action="#/" autocomplete="off" data-bind="submit: submitForm">
<div class="row">
<div class="span4">
<div class="control-group">
<label data-i18n="GLOBAL/FROM"></label>
<input type="text" autofocus="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="value: from, onEsc: closeCommand">
</div>
<div class="span4">
<div class="control-group">
<label data-i18n="SEARCH/LABEL_ADV_DATE"></label>
<div class="control-group">
<label data-i18n="GLOBAL/TO"></label>
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="value: to, onEsc: closeCommand">
</div>
<div class="control-group">
<label data-i18n="GLOBAL/SUBJECT"></label>
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="value: subject, onEsc: closeCommand">
</div>
<div class="control-group">
<label data-i18n="SEARCH/LABEL_ADV_TEXT"></label>
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="value: text, onEsc: closeCommand">
</div>
</div>
<div class="span4">
<div class="control-group">
<label data-i18n="SEARCH/LABEL_ADV_DATE"></label>
<div data-bind="component: {
name: 'Select',
params: {
options: selectedDates,
value: selectedDateValue,
optionsText: 'name',
optionsValue: 'id'
}
}"></div>
</div>
<!-- ko if: showMultisearch -->
<div class="control-group">
<label data-i18n="SEARCH/LABEL_ADV_SUBFOLDERS"></label>
<div data-bind="component: {
name: 'Select',
params: {
options: selectedTree,
value: selectedTreeValue,
optionsText: 'name',
optionsValue: 'id'
}
}"></div>
</div>
<!-- /ko -->
<div class="control-group">
<label></label>
<div>
<div data-bind="component: {
name: 'Select',
name: 'Checkbox',
params: {
options: selectedDates,
value: selectedDateValue,
optionsText: 'name',
optionsValue: 'id'
label: 'SEARCH/LABEL_ADV_UNSEEN',
value: unseen
}
}"></div>
</div>
<!-- ko if: showMultisearch -->
<div class="control-group">
<label data-i18n="SEARCH/LABEL_ADV_SUBFOLDERS"></label>
<div data-bind="component: {
name: 'Select',
name: 'Checkbox',
params: {
options: selectedTree,
value: selectedTreeValue,
optionsText: 'name',
optionsValue: 'id'
label: 'SEARCH/LABEL_ADV_FLAGGED',
value: starred
}
}"></div>
<div data-bind="component: {
name: 'Checkbox',
params: {
label: 'SEARCH/LABEL_ADV_HAS_ATTACHMENT',
value: hasAttachment
}
}"></div>
</div>
<!-- /ko -->
<div class="control-group">
<label></label>
<div>
<div data-bind="component: {
name: 'Checkbox',
params: {
label: 'SEARCH/LABEL_ADV_UNSEEN',
value: unseen
}
}"></div>
<div data-bind="component: {
name: 'Checkbox',
params: {
label: 'SEARCH/LABEL_ADV_FLAGGED',
value: starred
}
}"></div>
<div data-bind="component: {
name: 'Checkbox',
params: {
label: 'SEARCH/LABEL_ADV_HAS_ATTACHMENT',
value: hasAttachment
}
}"></div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</form>
<footer>
<button type="submit" form="searchform" class="btn buttonAdvSearch" data-icon="🔎" data-i18n="GLOBAL/SEARCH"></button>
<button form="searchform" class="btn buttonAdvSearch" data-icon="🔎" data-i18n="GLOBAL/SEARCH"></button>
</footer>

View file

@ -2,31 +2,29 @@
<a href="#" class="close" data-bind="command: closeCommand">×</a>
<h3 data-i18n="POPUPS_CREATE_FOLDER/TITLE_CREATE_FOLDER"></h3>
</header>
<div class="modal-body">
<div class="form-horizontal">
<div class="control-group">
<label data-i18n="POPUPS_CREATE_FOLDER/LABEL_PARENT"></label>
<select data-bind="options: parentFolderSelectList, value: selectedParentValue,
optionsText: 'name', optionsValue: 'id', optionsAfterRender: defaultOptionsAfterRender"></select>
</div>
<div class="control-group">
<label data-i18n="GLOBAL/NAME"></label>
<input type="text"
autofocus="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="textInput: folderName, onEnter: createFolderCommand">
</div>
<div class="control-group" data-bind="component: {
name: 'Checkbox',
params: {
label: 'SETTINGS_FOLDERS/BUTTON_SUBSCRIBE',
value: folderSubscribe
}
}"></div>
<form id="createfolderform" class="modal-body form-horizontal" autocomplete="off" data-bind="submit: submitForm">
<div class="control-group">
<label data-i18n="POPUPS_CREATE_FOLDER/LABEL_PARENT"></label>
<select data-bind="options: parentFolderSelectList, value: selectedParentValue,
optionsText: 'name', optionsValue: 'id', optionsAfterRender: defaultOptionsAfterRender"></select>
</div>
</div>
<div class="control-group">
<label data-i18n="GLOBAL/NAME"></label>
<input type="text"
autofocus="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
required="" pattern="^[^\\/]+$" data-bind="textInput: folderName">
</div>
<div class="control-group" data-bind="component: {
name: 'Checkbox',
params: {
label: 'SETTINGS_FOLDERS/BUTTON_SUBSCRIBE',
value: folderSubscribe
}
}"></div>
</form>
<footer>
<a class="btn buttonCreate" data-bind="command: createFolderCommand">
<button form="createfolderform" class="btn buttonCreate">
<i class="icon-folder-add"></i>
<span data-i18n="POPUPS_CREATE_FOLDER/BUTTON_CREATE"></span>
</a>
</button>
</footer>

View file

@ -5,7 +5,7 @@
<span data-bind="visible: edit" data-i18n="POPUPS_IDENTITY/TITLE_UPDATE_IDENTITY"></span>
</h3>
</header>
<div class="modal-body">
<form id="identityform" class="modal-body" autocomplete="off" data-bind="submit: submitForm">
<div class="form-horizontal g-ui-user-select-none">
<div class="alert" data-bind="visible: '' !== submitError()">
<a href="#" class="close" data-bind="click: function () { submitError('') }">×</a>
@ -17,26 +17,26 @@
<div class="textEmail" data-bind="text: email, visible: owner"></div>
<input type="email" class="input-xlarge" autofocus=""
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="visible: !owner(), value: email, onEnter: addOrEditIdentityCommand, hasfocus: emailFocused">
data-bind="visible: !owner(), value: email, hasfocus: emailFocused">
</div>
</div>
<div class="control-group">
<label data-i18n="GLOBAL/NAME"></label>
<input type="text" class="input-xlarge"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="value: name, onEnter: addOrEditIdentityCommand">
data-bind="value: name">
</div>
<div class="control-group" data-bind="visible: showReplyTo, css: {'error': replyToHasError}">
<label data-i18n="GLOBAL/REPLY_TO"></label>
<input type="text" class="inputReplyTo input-xlarge"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="value: replyTo, onEnter: addOrEditIdentityCommand, hasfocus: replyToFocused">
data-bind="value: replyTo, hasfocus: replyToFocused">
</div>
<div class="control-group" data-bind="visible: showBcc, css: {'error': bccHasError}">
<label data-i18n="GLOBAL/BCC"></label>
<input type="text" class="inputBcc input-xlarge"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="value: bcc, onEnter: addOrEditIdentityCommand, hasfocus: bccFocused">
data-bind="value: bcc, hasfocus: bccFocused">
</div>
<div class="control-group" data-bind="visible: !showReplyTo() || !showBcc()">
<div>
@ -63,12 +63,12 @@
}"></div>
</div>
<div class="e-signature-place" data-bind="editor: signature"></div>
</div>
</form>
<footer>
<a class="btn buttonAddIdentity" data-bind="command: addOrEditIdentityCommand">
<button form="identityform" class="btn buttonAddIdentity">
<i data-bind="visible: !edit(), css: {'icon-user-add': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
<span data-bind="visible: !edit()" data-i18n="POPUPS_IDENTITY/BUTTON_ADD_IDENTITY"></span>
<i data-bind="visible: edit, css: {'icon-ok': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
<span data-bind="visible: edit" data-i18n="POPUPS_IDENTITY/BUTTON_UPDATE_IDENTITY"></span>
</a>
</button>
</footer>