Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-07-13 03:27:39 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
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 { FilterModel } from 'Model/Filter';
import { SieveScriptModel } from 'Model/SieveScript'; import { SieveScriptModel } from 'Model/SieveScript';
import { showScreenPopup, command } from 'Knoin/Knoin'; import { showScreenPopup } from 'Knoin/Knoin';
class FiltersUserSettings { class FiltersUserSettings {
constructor() { constructor() {
this.modules = FilterStore.modules;
this.filters = FilterStore.filters; this.filters = FilterStore.filters;
this.sieve = SieveStore; this.sieve = SieveStore;
this.scripts = SieveStore.scripts; this.scripts = SieveStore.scripts;
ko.addObservablesTo(this, { ko.addObservablesTo(this, {
inited: false,
serverError: false, serverError: false,
serverErrorDesc: '', serverErrorDesc: ''
haveChanges: false,
saveErrorText: ''
}); });
this.serverError.subscribe((value) => { this.serverError.subscribe((value) => {
@ -34,60 +29,7 @@ class FiltersUserSettings {
} }
}, this); }, this);
this.filterRaw = FilterStore.raw; this.scriptForDeletion = ko.observable(null).deleteAccessHelper();
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;
} }
updateList() { updateList() {
@ -100,16 +42,15 @@ class FiltersUserSettings {
this.scripts([]); this.scripts([]);
if (StorageResultType.Success === result && data && data.Result && Array.isArray(data.Result.Filters)) { if (StorageResultType.Success === result && data && data.Result && Array.isArray(data.Result.Filters)) {
this.inited(true);
this.serverError(false); this.serverError(false);
this.filters( this.filters(
data.Result.Filters.map(aItem => FilterModel.reviveFromJson(aItem)).filter(v => v) 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( this.scripts(
data.Result.Scripts.map(aItem => SieveScriptModel.reviveFromJson(aItem)).filter(v => v) data.Result.Scripts.map(aItem => SieveScriptModel.reviveFromJson(aItem)).filter(v => v)
@ -120,26 +61,24 @@ class FiltersUserSettings {
value && this.scripts.push(value) value && this.scripts.push(value)
}); });
this.filterRaw(data.Result.Scripts['rainloop.user.raw'].body); FilterStore.raw(data.Result.Scripts['rainloop.user.raw'].body);
this.filterRaw.capa(data.Result.Capa.join(' ')); FilterStore.capa(data.Result.Capa.join(' '));
this.filterRaw.active(data.Result.Scripts['rainloop.user.raw'].active); // this.filterRaw.active(data.Result.Scripts['rainloop.user.raw'].active);
this.filterRaw.allow(!!data.Result.RawIsAllow); // this.filterRaw.allow(!!data.Result.RawIsAllow);
} else { } else {
this.filters([]); this.filters([]);
this.modules({}); FilterStore.modules({});
this.sieve.capa([]); SieveStore.capa([]);
this.filterRaw(''); FilterStore.raw('');
this.filterRaw.capa({}); FilterStore.capa({});
this.serverError(true); this.serverError(true);
this.serverErrorDesc( this.serverErrorDesc(
data && data.ErrorCode ? getNotification(data.ErrorCode) : getNotification(Notification.CantGetFilters) data && data.ErrorCode ? getNotification(data.ErrorCode) : getNotification(Notification.CantGetFilters)
); );
} }
this.haveChanges(false);
}); });
} }
} }
@ -171,6 +110,11 @@ class FiltersUserSettings {
// TODO // TODO
} }
toggleScript(script) {
// TODO: activate/deactivate script
script.active(!script.active());
}
onBuild(oDom) { onBuild(oDom) {
oDom.addEventListener('click', event => { oDom.addEventListener('click', event => {
const el = event.target.closestWithin('.script-item .e-action', oDom), 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 .b-settings-filters {
margin-right: 15px;
html.rl-mobile &{ }
margin-right: 15px;
} .b-filter-script {
width: 800px;
.process-place { min-width: 640px;
text-align: center; }
width: 600px;
padding: 14px 0; .b-settings-filters .list-table,
} .b-filter-script .list-table {
width: 600px;
.list-table { }
width: 600px; .filter-item td,
.script-item td {
td { padding: 4px 8px;
padding: 4px 8px; line-height: 30px;
line-height: 30px; }
&.drag-wrapper { .filter-item td.drag-wrapper {
padding: 4px 0; padding: 4px 0;
} }
}
.b-filter-script .filter-item,
.filter-img { .b-settings-filters .script-item {
font-size: 12px; white-space: nowrap;
margin-right: 5px; }
}
.b-filter-script .e-action,
.filter-name, .filter-sub-name { .b-settings-filters .e-action {
display: inline-block; cursor: pointer;
word-break: break-all; }
box-sizing: border-box;
line-height: 22px; .filter-item .delete-filter {
cursor: pointer; cursor: pointer;
} opacity: 0.5;
}
.filter-sub-name {
color: #aaa; .filter-item .filter-name,
} .filter-item .filter-sub-name {
} display: inline-block;
word-break: break-all;
.filters-list-top-padding { box-sizing: border-box;
display: inline-block; line-height: 22px;
height: 5px; cursor: pointer;
width: 5px; }
}
.filter-item .filter-sub-name {
.filter-item { color: #aaa;
white-space: nowrap;
.e-action {
cursor: pointer;
}
.delete-filter {
cursor: pointer;
opacity: 0.5;
}
}
} }

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

@ -19,8 +19,12 @@ class SieveScriptPopupView extends AbstractViewNext {
constructor() { constructor() {
super(); 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.modules = FilterStore.modules;
this.filters = FilterStore.filters;
this.script = { this.script = {
filters: FilterStore.filters, filters: FilterStore.filters,
@ -29,17 +33,16 @@ class SieveScriptPopupView extends AbstractViewNext {
ko.addObservablesTo(this, { ko.addObservablesTo(this, {
isNew: true, isNew: true,
inited: false,
serverError: false, serverError: false,
serverErrorDesc: '', serverErrorDesc: '',
saveErrorText: '',
haveChanges: false, haveChanges: false,
filterRaw: ''
saveErrorText: ''
}); });
this.serverError.subscribe(value => value || this.serverErrorDesc(''), this); this.serverError.subscribe(value => value || this.serverErrorDesc(''), this);
this.filterRaw = FilterStore.raw; // this.filterRaw = FilterStore.raw;
this.filterRaw.capa = FilterStore.capa; this.filterRaw.capa = FilterStore.capa;
this.filterRaw.active = ko.observable(false); this.filterRaw.active = ko.observable(false);
this.filterRaw.allow = ko.observable(false); this.filterRaw.allow = ko.observable(false);
@ -148,6 +151,10 @@ class SieveScriptPopupView extends AbstractViewNext {
this.fTrueCallback = fTrueCallback; this.fTrueCallback = fTrueCallback;
this.filters(oScript.filters()); this.filters(oScript.filters());
this.filterRaw(oScript.body());
this.filterRaw.active(!oScript.allowFilters());
this.filterRaw.error(false);
this.isNew(!bEdit); this.isNew(!bEdit);
if (!bEdit && oScript) { 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> <h3 class="i18n" data-i18n="POPUPS_FILTER/LEGEND_SIEVE_SCRIPT"></h3>
</div> </div>
<div class="modal-body"> <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="row" data-bind="visible: haveChanges">
<div class="span8 width100-on-mobile"> <div class="span8 width100-on-mobile">
<br /> <br />
@ -33,10 +25,17 @@
</div> </div>
</div> </div>
<br /> <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="row">
<div class="span8 width100-on-mobile"> <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"> <div class="controls">
<pre style="word-break: break-word;" data-bind="visible: '' !== filterRaw.capa()"> <pre style="word-break: break-word;" data-bind="visible: '' !== filterRaw.capa()">
<b class="i18n" data-i18n="SETTINGS_FILTERS/CAPABILITY_LABEL"></b>: <b class="i18n" data-i18n="SETTINGS_FILTERS/CAPABILITY_LABEL"></b>:
@ -46,7 +45,7 @@
data-bind="value: filterRaw, valueUpdate: 'afterkeydown'"></textarea> data-bind="value: filterRaw, valueUpdate: 'afterkeydown'"></textarea>
</div> </div>
</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" <table class="table table-hover list-table filters-list g-ui-user-select-none"
data-bind="i18nUpdate: filters"> data-bind="i18nUpdate: filters">
<colgroup> <colgroup>
@ -72,7 +71,7 @@
<span class="filter-sub-name" data-bind="text: nameSub()"></span> <span class="filter-sub-name" data-bind="text: nameSub()"></span>
</td> </td>
<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> <span class="i18n" data-i18n="SETTINGS_FILTERS/DELETING_ASK"></span>
</a> </a>
</td> </td>

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

@ -29,7 +29,7 @@
<tbody data-bind="foreach: scripts"> <tbody data-bind="foreach: scripts">
<tr class="script-item"> <tr class="script-item">
<td> <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> <i data-bind="css: {'icon-checkbox-checked': active, 'icon-checkbox-unchecked': !active()}"></i>
</span> </span>
</td> </td>
@ -40,7 +40,7 @@
</a> </a>
</td> </td>
<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> <i class="icon-trash"></i>
</span> </span>
</td> </td>