From a31834458b5554a317f398f0f3a72b542ced50c7 Mon Sep 17 00:00:00 2001 From: djmaze Date: Mon, 18 Jan 2021 23:52:15 +0100 Subject: [PATCH] More improvements to view Sieve Scripts. --- dev/Settings/User/Filters.js | 92 +++----------- dev/Styles/SettingsFilters.less | 112 ++++++++---------- dev/View/Popup/SieveScript.js | 17 ++- .../Views/User/PopupsSieveScript.html | 23 ++-- .../templates/Views/User/SettingsFilters.html | 4 +- 5 files changed, 93 insertions(+), 155 deletions(-) diff --git a/dev/Settings/User/Filters.js b/dev/Settings/User/Filters.js index 26205a2b7..3b55b7dc2 100644 --- a/dev/Settings/User/Filters.js +++ b/dev/Settings/User/Filters.js @@ -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), diff --git a/dev/Styles/SettingsFilters.less b/dev/Styles/SettingsFilters.less index ca3fb51a6..cf3534c73 100644 --- a/dev/Styles/SettingsFilters.less +++ b/dev/Styles/SettingsFilters.less @@ -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; } diff --git a/dev/View/Popup/SieveScript.js b/dev/View/Popup/SieveScript.js index a0fc4816e..80014d074 100644 --- a/dev/View/Popup/SieveScript.js +++ b/dev/View/Popup/SieveScript.js @@ -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) { diff --git a/snappymail/v/0.0.0/app/templates/Views/User/PopupsSieveScript.html b/snappymail/v/0.0.0/app/templates/Views/User/PopupsSieveScript.html index fff832c6b..a6dce24f1 100644 --- a/snappymail/v/0.0.0/app/templates/Views/User/PopupsSieveScript.html +++ b/snappymail/v/0.0.0/app/templates/Views/User/PopupsSieveScript.html @@ -5,14 +5,6 @@

-
-
- - - -
-

@@ -33,10 +25,17 @@

-
+
+
+ + + +
+
-
+ 
 								:
@@ -46,7 +45,7 @@
 								data-bind="value: filterRaw, valueUpdate: 'afterkeydown'">
-
+
@@ -72,7 +71,7 @@ diff --git a/snappymail/v/0.0.0/app/templates/Views/User/SettingsFilters.html b/snappymail/v/0.0.0/app/templates/Views/User/SettingsFilters.html index 262e9f073..75b84f3dc 100644 --- a/snappymail/v/0.0.0/app/templates/Views/User/SettingsFilters.html +++ b/snappymail/v/0.0.0/app/templates/Views/User/SettingsFilters.html @@ -29,7 +29,7 @@ @@ -40,7 +40,7 @@
- +
- + - +