More CSS, HTML & JS cleanups

This commit is contained in:
djmaze 2021-09-10 09:30:06 +02:00
parent 371b23a2f3
commit 985a4f5077
13 changed files with 54 additions and 74 deletions

View file

@ -53,7 +53,7 @@ export class TemplatesUserSettings {
onBuild(oDom) {
oDom.addEventListener('click', event => {
const el = event.target.closestWithin('.templates-list .template-item .e-action', oDom);
const el = event.target.closestWithin('td.e-action', oDom);
el && ko.dataFor(el) && this.editTemplate(ko.dataFor(el));
});

View file

@ -20,13 +20,9 @@ export const SettingsUserStore = new class {
]
});
this.messagesPerPage = ko.observable(pInt(SettingsGet('MPP'))).extend(
{ rateLimit: { timeout: 999, method: "notifyWhenChangesStop" } }
);
this.messagesPerPage = ko.observable(pInt(SettingsGet('MPP'))).extend({ debounce: 999 });
this.messageReadDelay = ko.observable(pInt(SettingsGet('MessageReadDelay'))).extend(
{ rateLimit: { timeout: 999, method: "notifyWhenChangesStop" } }
);
this.messageReadDelay = ko.observable(pInt(SettingsGet('MessageReadDelay'))).extend({ debounce: 999 });
addObservablesTo(this, {
showImages: !!SettingsGet('ShowImages'),

View file

@ -47,35 +47,34 @@
}
.attachmentIconParent {
position: absolute;
height: 56px;
width: 60px;
text-align: center;
}
.iconPreview, .iconBG, .iconMain, .iconProgress {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.iconPreview, .iconBG, .iconMain, .iconProgress {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.iconProgress {
background: #eee;
width: 0%;
}
.iconProgress {
background: #eee;
width: 0%;
}
.iconBG {
font-size: 18px;
font-weight: bold;
line-height: 55px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
.iconBG {
font-size: 18px;
font-weight: bold;
line-height: 55px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
.iconPreview {
display: none;
}
.iconPreview {
display: none;
}
.attachmentNameParent {
@ -111,20 +110,20 @@
*/
.showPreview, .showPreplay,
.attachmentIconParent.hasPreview:hover .iconMain,
.attachmentIconParent.hasPreplay:hover .iconMain,
.attachmentIconParent.hasPreview .hidePreview,
.attachmentIconParent.hasPreplay .hidePreview {
.hasPreview:hover .iconMain,
.hasPreplay:hover .iconMain,
.hasPreview .hidePreview,
.hasPreplay .hidePreview {
display: none;
}
.attachmentIconParent.hasPreview:hover .iconPreview,
.attachmentIconParent.hasPreplay:hover .iconPreview {
.hasPreview:hover .iconPreview,
.hasPreplay:hover .iconPreview {
display: inline-block;
}
.attachmentIconParent.hasPreview .showPreview,
.attachmentIconParent.hasPreplay .showPreplay {
.hasPreview .showPreview,
.hasPreplay .showPreplay {
display: inline;
cursor: pointer;
}

View file

@ -122,8 +122,6 @@ html.rl-no-preview-pane {
z-index: 101;
scroll-behavior: smooth;
box-sizing: border-box;
background-color: #fff;
.listClear {

View file

@ -4,15 +4,15 @@
max-width: 720px;
}
.filter-item td.drag-wrapper {
padding: 4px 0;
}
.b-filter-script .filter-item,
.b-settings-filters .script-item {
white-space: nowrap;
}
.filter-item td.drag-wrapper {
padding: 4px 0;
}
.filter-item .delete-filter {
cursor: pointer;
opacity: 0.5;
@ -22,7 +22,6 @@
.filter-item .filter-sub-name {
display: inline-block;
word-break: break-all;
box-sizing: border-box;
line-height: 22px;
cursor: pointer;
}

View file

@ -20,7 +20,6 @@
.folder-name {
word-break: break-all;
white-space: pre-wrap;
box-sizing: border-box;
}
.folder-system-name {

View file

@ -1,7 +1,11 @@
.b-settings-open-pgp {
.list-table {
td + td {
width: 1%;
}
table {
.open-pgp-key-img {
margin-right: 10px;

View file

@ -1,13 +1,14 @@
.b-settings-templates {
.template-img {
font-size: 12px;
margin-right: 5px;
td + td {
width: 150px;
}
td + td + td {
width: 1%;
}
.template-name {
box-sizing: border-box;
display: inline-block;
line-height: 22px;
word-break: break-all;

View file

@ -192,7 +192,6 @@ class ContactsPopupView extends AbstractViewPopup {
case 'bcc':
bccEmails = aE;
break;
case 'to':
default:
toEmails = aE;
break;
@ -496,8 +495,8 @@ class ContactsPopupView extends AbstractViewPopup {
}
onShow(bBackToCompose, sLastComposeFocusedField) {
this.bBackToCompose = undefined === bBackToCompose ? false : !!bBackToCompose;
this.sLastComposeFocusedField = undefined === sLastComposeFocusedField ? '' : sLastComposeFocusedField;
this.bBackToCompose = !!bBackToCompose;
this.sLastComposeFocusedField = sLastComposeFocusedField;
rl.route.off();
this.reloadContactList(true);

View file

@ -124,7 +124,7 @@ class SieveScriptPopupView extends AbstractViewPopup {
onBuild(oDom) {
oDom.addEventListener('click', event => {
const el = event.target.closestWithin('.filter-item .e-action', oDom),
const el = event.target.closestWithin('td.e-action', oDom),
filter = el && ko.dataFor(el);
filter && this.editFilter(filter);
});

View file

@ -4,18 +4,18 @@
<h3>
<span data-i18n="POPUPS_SIEVE_SCRIPT/TITLE_CREATE" data-bind="visible: !exists()"></span>
<span data-i18n="POPUPS_SIEVE_SCRIPT/TITLE_EDIT" data-bind="visible: exists"></span>
<span data-bind="visible: exists">: <!-- ko text: name--><!-- /ko --></span>
</h3>
</div>
<div class="modal-body">
<div class="control-group" data-bind="css: {'error': nameError}">
<div class="control-group" data-bind="css: {'error': nameError}, hidden: exists">
<div class="controls">
<input type="text" class="span5"
data-bind="value: name, hasfocus: !exists(), visible: !exists()"
data-bind="value: name, hasfocus: !exists()"
autocorrect="off" autocapitalize="off" spellcheck="false"
data-i18n="[placeholder]GLOBAL/NAME"
/>
<span data-bind="text: name, visible: exists"></span>
</div>
</div>
@ -57,12 +57,8 @@
</colgroup>
<tbody data-bind="foreach: filters">
<tr class="filter-item" draggable="true" data-bind="sortableItem: { list: $parent.filters }">
<td>
<span class="disabled-filter fontastic" data-bind="click: function () { $parent.hasChanges(true); enabled(!enabled()); }, text: enabled() ? '☑' : '☐'"></span>
</td>
<td class="drag-wrapper">
<span class="fontastic drag-handle"></span>
</td>
<td class="fontastic" data-bind="click: function () { $parent.hasChanges(true); enabled(!enabled()); }, text: enabled() ? '☑' : '☐'"></td>
<td class="drag-wrapper fontastic drag-handle"></td>
<td class="e-action">
<span class="filter-name" data-bind="text: name()"></span>
&nbsp;&nbsp;

View file

@ -24,11 +24,6 @@
</div>
<br />
<table class="table table-hover list-table" data-bind="i18nUpdate: openpgpkeys">
<colgroup>
<col />
<col style="width: 1%" />
<col style="width: 1%" />
</colgroup>
<tbody data-bind="foreach: openpgpkeysPrivate">
<tr class="open-pgp-key-item">
<td>

View file

@ -9,15 +9,9 @@
<span data-i18n="SETTINGS_TEMPLATES/BUTTON_ADD_TEMPLATE"></span>
</a>
<table class="table table-hover list-table templates-list" data-bind="i18nUpdate: templates">
<colgroup>
<col />
<col style="width: 150px" />
<col style="width: 1%" />
</colgroup>
<tbody data-bind="foreach: templates">
<tr class="template-item" draggable="true" data-bind="sortableItem: { list: $root.templates }">
<tr draggable="true" data-bind="sortableItem: { list: $root.templates }">
<td class="e-action">
<span class="template-img fontastic">👤</span>
<i class="fontastic drag-handle"></i>
<span class="template-name" data-bind="text: name"></span>
</td>