the-djmaze/snappymail
1
1
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2024-09-20 15:45:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

More improvements to view Sieve Scripts.

Browse source
This commit is contained in:
djmaze 2021-01-18 23:52:15 +01:00
parent d1f9249ac1
commit a31834458b
5 changed files with 93 additions and 155 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
dev/Settings/User/Filters.js
View file

@ -10,22 +10,17 @@ import Remote from 'Remote/User/Fetch';
import { FilterModel } from 'Model/Filter';
import { SieveScriptModel } from 'Model/SieveScript';
import { showScreenPopup, command } from 'Knoin/Knoin';
import { showScreenPopup } from 'Knoin/Knoin';
class FiltersUserSettings {
constructor() {
this.modules = FilterStore.modules;
this.filters = FilterStore.filters;
this.sieve = SieveStore;
this.scripts = SieveStore.scripts;
ko.addObservablesTo(this, {
inited: false,
serverError: false,
serverErrorDesc: '',
haveChanges: false,
saveErrorText: ''
serverErrorDesc: ''
});
this.serverError.subscribe((value) => {
@ -34,60 +29,7 @@ class FiltersUserSettings {
}
}, this);
this.filterRaw = FilterStore.raw;
this.filterRaw.capa = FilterStore.capa;
this.filterRaw.active = ko.observable(false);
this.filterRaw.allow = ko.observable(false);
this.filterRaw.error = ko.observable(false);
this.filterForDeletion = ko.observable(null).deleteAccessHelper();
this.filters.subscribe(() => this.haveChanges(true));
this.filterRaw.subscribe(() => {
this.haveChanges(true);
this.filterRaw.error(false);
});
this.haveChanges.subscribe(() => this.saveErrorText(''));
this.filterRaw.active.subscribe(() => {
this.haveChanges(true);
this.filterRaw.error(false);
});
}
@command((self) => self.haveChanges())
saveChangesCommand() {
if (!this.filters.saving()) {
if (this.filterRaw.active() && !this.filterRaw().trim()) {
this.filterRaw.error(true);
return false;
}
this.filters.saving(true);
this.saveErrorText('');
Remote.filtersSave(
(result, data) => {
this.filters.saving(false);
if (StorageResultType.Success === result && data && data.Result) {
this.haveChanges(false);
this.updateList();
} else if (data && data.ErrorCode) {
this.saveErrorText(data.ErrorMessageAdditional || getNotification(data.ErrorCode));
} else {
this.saveErrorText(getNotification(Notification.CantSaveFilters));
}
},
this.filters(),
this.filterRaw(),
this.filterRaw.active()
);
}
return true;
this.scriptForDeletion = ko.observable(null).deleteAccessHelper();
}
updateList() {
@ -100,16 +42,15 @@ class FiltersUserSettings {
this.scripts([]);
if (StorageResultType.Success === result && data && data.Result && Array.isArray(data.Result.Filters)) {
this.inited(true);
this.serverError(false);
this.filters(
data.Result.Filters.map(aItem => FilterModel.reviveFromJson(aItem)).filter(v => v)
);
this.modules(data.Result.Capa);
FilterStore.modules(data.Result.Capa);
this.sieve.capa(data.Result.Capa);
SieveStore.capa(data.Result.Capa);
/*
this.scripts(
data.Result.Scripts.map(aItem => SieveScriptModel.reviveFromJson(aItem)).filter(v => v)
@ -120,26 +61,24 @@ class FiltersUserSettings {
value && this.scripts.push(value)
});
this.filterRaw(data.Result.Scripts['rainloop.user.raw'].body);
this.filterRaw.capa(data.Result.Capa.join(' '));
this.filterRaw.active(data.Result.Scripts['rainloop.user.raw'].active);
this.filterRaw.allow(!!data.Result.RawIsAllow);
FilterStore.raw(data.Result.Scripts['rainloop.user.raw'].body);
FilterStore.capa(data.Result.Capa.join(' '));
// this.filterRaw.active(data.Result.Scripts['rainloop.user.raw'].active);
// this.filterRaw.allow(!!data.Result.RawIsAllow);
} else {
this.filters([]);
this.modules({});
FilterStore.modules({});
this.sieve.capa([]);
SieveStore.capa([]);
this.filterRaw('');
this.filterRaw.capa({});
FilterStore.raw('');
FilterStore.capa({});
this.serverError(true);
this.serverErrorDesc(
data && data.ErrorCode ? getNotification(data.ErrorCode) : getNotification(Notification.CantGetFilters)
);
}
this.haveChanges(false);
});
}
}
@ -171,6 +110,11 @@ class FiltersUserSettings {
// TODO
}
toggleScript(script) {
// TODO: activate/deactivate script
script.active(!script.active());
}
onBuild(oDom) {
oDom.addEventListener('click', event => {
const el = event.target.closestWithin('.script-item .e-action', oDom),

112
dev/Styles/SettingsFilters.less
View file

@ -1,64 +1,52 @@
.b-settings-filters {
html.rl-mobile &{
margin-right: 15px;
}
.process-place {
text-align: center;
width: 600px;
padding: 14px 0;
}
.list-table {
width: 600px;
td {
padding: 4px 8px;
line-height: 30px;
&.drag-wrapper {
padding: 4px 0;
}
}
.filter-img {
font-size: 12px;
margin-right: 5px;
}
.filter-name, .filter-sub-name {
display: inline-block;
word-break: break-all;
box-sizing: border-box;
line-height: 22px;
cursor: pointer;
}
.filter-sub-name {
color: #aaa;
}
}
.filters-list-top-padding {
display: inline-block;
height: 5px;
width: 5px;
}
.filter-item {
white-space: nowrap;
.e-action {
cursor: pointer;
}
.delete-filter {
cursor: pointer;
opacity: 0.5;
}
}
html.rl-mobile .b-settings-filters {
margin-right: 15px;
}
.b-filter-script {
width: 800px;
min-width: 640px;
}
.b-settings-filters .list-table,
.b-filter-script .list-table {
width: 600px;
}
.filter-item td,
.script-item td {
padding: 4px 8px;
line-height: 30px;
}
.filter-item td.drag-wrapper {
padding: 4px 0;
}
.b-filter-script .filter-item,
.b-settings-filters .script-item {
white-space: nowrap;
}
.b-filter-script .e-action,
.b-settings-filters .e-action {
cursor: pointer;
}
.filter-item .delete-filter {
cursor: pointer;
opacity: 0.5;
}
.filter-item .filter-name,
.filter-item .filter-sub-name {
display: inline-block;
word-break: break-all;
box-sizing: border-box;
line-height: 22px;
cursor: pointer;
}
.filter-item .filter-sub-name {
color: #aaa;
}

17
dev/View/Popup/SieveScript.js
View file

@ -19,8 +19,12 @@ class SieveScriptPopupView extends AbstractViewNext {
constructor() {
super();
// this.filters = FilterStore.filters;
this.filters = ko.observableArray([]);
this.filters.loading = ko.observable(false).extend({ throttle: 200 });
this.filters.saving = ko.observable(false).extend({ throttle: 200 });
this.modules = FilterStore.modules;
this.filters = FilterStore.filters;
this.script = {
filters: FilterStore.filters,
@ -29,17 +33,16 @@ class SieveScriptPopupView extends AbstractViewNext {
ko.addObservablesTo(this, {
isNew: true,
inited: false,
serverError: false,
serverErrorDesc: '',
saveErrorText: '',
haveChanges: false,
saveErrorText: ''
filterRaw: ''
});
this.serverError.subscribe(value => value || this.serverErrorDesc(''), this);
this.filterRaw = FilterStore.raw;
// this.filterRaw = FilterStore.raw;
this.filterRaw.capa = FilterStore.capa;
this.filterRaw.active = ko.observable(false);
this.filterRaw.allow = ko.observable(false);
@ -148,6 +151,10 @@ class SieveScriptPopupView extends AbstractViewNext {
this.fTrueCallback = fTrueCallback;
this.filters(oScript.filters());
this.filterRaw(oScript.body());
this.filterRaw.active(!oScript.allowFilters());
this.filterRaw.error(false);
this.isNew(!bEdit);
if (!bEdit && oScript) {

23
snappymail/v/0.0.0/app/templates/Views/User/PopupsSieveScript.html
View file

@ -5,14 +5,6 @@
<h3 class="i18n" data-i18n="POPUPS_FILTER/LEGEND_SIEVE_SCRIPT"></h3>
</div>
<div class="modal-body">
<div class="row" data-bind="visible: inited() && !serverError()">
<div class="span5 width100-on-mobile">
<a class="btn" data-bind="visible: filterRaw.allow, click: function () { filterRaw.active(!filterRaw.active()) },
css: {'active': filterRaw.active }, tooltip: 'SETTINGS_FILTERS/BUTTON_RAW_SCRIPT'">
<i class="icon-file-code"></i>
</a>
</div>
</div>
<div class="row" data-bind="visible: haveChanges">
<div class="span8 width100-on-mobile">
<br />
@ -33,10 +25,17 @@
</div>
</div>
<br />
<br />
<div class="row">
<div class="span5 width100-on-mobile">
<a class="btn" data-bind="click: function () { filterRaw.active(!filterRaw.active()) },
css: {'active': filterRaw.active }, tooltip: 'SETTINGS_FILTERS/BUTTON_RAW_SCRIPT'">
<i class="icon-file-code"></i>
</a>
</div>
</div>
<div class="row">
<div class="span8 width100-on-mobile">
<div class="control-group" data-bind="css: {'error': filterRaw.error}, visible: inited() && filterRaw.allow() && filterRaw.active()">
<div class="control-group" data-bind="css: {'error': filterRaw.error}, visible: filterRaw.active()">
<div class="controls">
<pre style="word-break: break-word;" data-bind="visible: '' !== filterRaw.capa()">
<b class="i18n" data-i18n="SETTINGS_FILTERS/CAPABILITY_LABEL"></b>:
@ -46,7 +45,7 @@
data-bind="value: filterRaw, valueUpdate: 'afterkeydown'"></textarea>
</div>
</div>
<div data-bind="visible: inited() && (!filterRaw.active() || !filterRaw.active())">
<div data-bind="visible: !filterRaw.active()">
<table class="table table-hover list-table filters-list g-ui-user-select-none"
data-bind="i18nUpdate: filters">
<colgroup>
@ -72,7 +71,7 @@
<span class="filter-sub-name" data-bind="text: nameSub()"></span>
</td>
<td>
<a class="btn btn-small btn-small-small btn-danger pull-right button-delete button-delete-transitions" data-bind="css: {'delete-access': deleteAccess()}, click: function(oFilter) { $root.deleteFilter(oFilter); }">
<a class="btn btn-small btn-small-small btn-danger pull-right button-confirm-delete button-delete-transitions" data-bind="css: {'delete-access': deleteAccess()}, click: function(oFilter) { $root.deleteFilter(oFilter); }">
<span class="i18n" data-i18n="SETTINGS_FILTERS/DELETING_ASK"></span>
</a>
</td>

4
snappymail/v/0.0.0/app/templates/Views/User/SettingsFilters.html
View file

@ -29,7 +29,7 @@
<tbody data-bind="foreach: scripts">
<tr class="script-item">
<td>
<span class="disabled-script" data-bind="click: function () { $root.haveChanges(true); active(!active()); }">
<span class="disabled-script" data-bind="click: function (oScript) { $root.toggleScript(oScript); }">
<i data-bind="css: {'icon-checkbox-checked': active, 'icon-checkbox-unchecked': !active()}"></i>
</span>
</td>
@ -40,7 +40,7 @@
</a>
</td>
<td>
<span class="delete-script" data-bind="visible: !deleteAccess() && canBeDeleted(), click: function (oScript) { $root.filterForDeletion(oScript); }">
<span class="delete-script" data-bind="visible: !deleteAccess() && canBeDeleted(), click: function (oScript) { $root.scriptForDeletion(oScript); }">
<i class="icon-trash"></i>
</span>
</td>