Draft of new Filters design

This commit is contained in:
djmaze 2021-01-18 16:47:10 +01:00
parent cd504ffa4b
commit 61c3da14b4
8 changed files with 446 additions and 114 deletions

View file

@ -64,10 +64,19 @@ class SieveStorage implements FiltersInterface
foreach ($aList as $name => $active) {
if ($name != self::SIEVE_FILE_NAME) {
$aScripts[$name] = array(
'@Object' => 'Object/SieveScript',
'name' => $name,
'active' => $active,
'body' => $oSieveClient->GetScript($name) // \trim() ?
);
} else {
$aScripts[$name] = array(
'@Object' => 'Object/SieveScript',
'name' => $name,
'active' => $active,
'body' => $oSieveClient->GetScript($name), // \trim() ?
'filters' => $aFilters
);
}
}
}
@ -77,12 +86,15 @@ class SieveStorage implements FiltersInterface
if (!isset($aList[self::SIEVE_FILE_NAME_RAW])) {
$aScripts[$name] = array(
'@Object' => 'Object/SieveScript',
'name' => self::SIEVE_FILE_NAME_RAW,
'active' => false,
'body' => ''
);
}
\ksort($aScripts);
return array(
'RawIsAllow' => $bAllowRaw,
'Filters' => $aFilters,

View file

@ -431,6 +431,7 @@ en:
BUTTON_BACK: "Back"
SETTINGS_FILTERS:
LEGEND_FILTERS: "Filters"
LEGEND_SIEVE_SCRIPT: "Sieve Script"
BUTTON_SAVE: "Save"
BUTTON_ADD_FILTER: "Add a Filter"
BUTTON_DELETE: "Delete"

View file

@ -0,0 +1,104 @@
<div class="modal fade b-filter-script g-ui-user-select-none" data-bind="modal: modalVisibility">
<div>
<div class="modal-header">
<button type="button" class="close" data-bind="command: cancelCommand">×</button>
<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 />
<div class="alert g-ui-user-select-none" style="margin-bottom: 0">
<i class="icon-warning"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_FILTERS/CHANGES_NEED_TO_BE_SAVED_DESC"></span>
</div>
</div>
</div>
<div class="row" data-bind="visible: serverError">
<div class="span8 width100-on-mobile">
<div class="alert alert-error g-ui-user-select-none" style="margin-bottom: 0">
<i class="icon-warning"></i>
&nbsp;&nbsp;
<span data-bind="text: serverErrorDesc"></span>
</div>
</div>
</div>
<br />
<br />
<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="controls">
<pre style="word-break: break-word;" data-bind="visible: '' !== filterRaw.capa()">
<b class="i18n" data-i18n="SETTINGS_FILTERS/CAPABILITY_LABEL"></b>:
<span data-bind="text: filterRaw.capa"></span>
</pre>
<textarea class="span8" style="height: 300px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;"
data-bind="value: filterRaw, valueUpdate: 'afterkeydown'"></textarea>
</div>
</div>
<div data-bind="visible: inited() && (!filterRaw.active() || !filterRaw.active())">
<table class="table table-hover list-table filters-list g-ui-user-select-none"
data-bind="i18nUpdate: filters">
<colgroup>
<col style="width: 30px" />
<col style="width: 16px" />
<col />
<col style="width: 140px" />
<col style="width: 1%" />
</colgroup>
<tbody data-bind="foreach: filters" style="width: 600px">
<tr class="filter-item" draggable="true" data-bind="sortableItem: { list: $root.filters }">
<td>
<span class="disabled-filter" data-bind="click: function () { $root.haveChanges(true); enabled(!enabled()); }">
<i data-bind="css: {'icon-checkbox-checked': enabled, 'icon-checkbox-unchecked': !enabled()}"></i>
</span>
</td>
<td class="drag-wrapper">
<i class="icon-braille drag-handle"></i>
</td>
<td class="e-action">
<span class="filter-name" data-bind="text: name()"></span>
&nbsp;&nbsp;
<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); }">
<span class="i18n" data-i18n="SETTINGS_FILTERS/DELETING_ASK"></span>
</a>
</td>
<td>
<span class="delete-filter" data-bind="visible: !deleteAccess() && canBeDeleted(), click: function (oFilter) { $root.filterForDeletion(oFilter); }">
<i class="icon-trash"></i>
</span>
</td>
</tr>
</tbody>
</table>
<a class="btn" data-bind="click: addFilter">
<i class="icon-plus"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_FILTERS/BUTTON_ADD_FILTER"></span>
</a>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn buttonSave" data-bind="command: saveScriptCommand, tooltipErrorTip: saveErrorText, css: {'btn-danger': '' !== saveErrorText()}">
<i data-bind="css: {'icon-floppy': !script.saving(), 'icon-spinner animated': script.saving()}"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_FILTERS/BUTTON_SAVE"></span>
</a>
</div>
</div>
</div>

View file

@ -6,37 +6,6 @@
<i class="icon-spinner animated" style="margin-top: 5px" data-bind="visible: filters.loading"></i>
</div>
</div>
<div class="row" data-bind="visible: inited() && !serverError()">
<div class="span5 width100-on-mobile">
<a class="btn" data-bind="click: addFilter">
<i class="icon-plus"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_FILTERS/BUTTON_ADD_FILTER"></span>
</a>
&nbsp;&nbsp;
<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>
&nbsp;&nbsp;
<a class="btn hide-on-disabled-command" data-placement="bottom" data-join="top"
data-bind="command: saveChangesCommand, tooltipErrorTip: saveErrorText, css: {'btn-danger': '' !== saveErrorText()}">
<i data-bind="css: {'icon-floppy': !filters.saving(), 'icon-spinner animated': filters.saving()}"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_FILTERS/BUTTON_SAVE"></span>
</a>
</div>
</div>
<div class="row" data-bind="visible: haveChanges">
<div class="span8 width100-on-mobile">
<br />
<div class="alert g-ui-user-select-none" style="margin-bottom: 0">
<i class="icon-warning"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="SETTINGS_FILTERS/CHANGES_NEED_TO_BE_SAVED_DESC"></span>
</div>
</div>
</div>
<div class="row" data-bind="visible: serverError">
<div class="span8 width100-on-mobile">
<div class="alert alert-error g-ui-user-select-none" style="margin-bottom: 0">
@ -46,60 +15,38 @@
</div>
</div>
</div>
<br />
<br />
<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="controls">
<pre style="word-break: break-word;" data-bind="visible: '' !== filterRaw.capa()">
<b class="i18n" data-i18n="SETTINGS_FILTERS/CAPABILITY_LABEL"></b>:
<span data-bind="text: filterRaw.capa"></span>
</pre>
<textarea class="span8" style="height: 300px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;"
data-bind="value: filterRaw, valueUpdate: 'afterkeydown'"></textarea>
</div>
</div>
<div data-bind="visible: inited() && (!filterRaw.active() || !filterRaw.active())">
<div class="filters-list-top-padding"></div>
<table class="table table-hover list-table filters-list g-ui-user-select-none"
data-bind="i18nUpdate: filters">
<colgroup>
<col style="width: 30px" />
<col style="width: 16px" />
<col />
<col style="width: 140px" />
<col style="width: 1%" />
</colgroup>
<tbody data-bind="foreach: filters" style="width: 600px">
<tr class="filter-item" draggable="true" data-bind="sortableItem: { list: $root.filters }">
<td>
<span class="disabled-filter" data-bind="click: function () { $root.haveChanges(true); enabled(!enabled()); }">
<i data-bind="css: {'icon-checkbox-checked': enabled, 'icon-checkbox-unchecked': !enabled()}"></i>
</span>
</td>
<td class="drag-wrapper">
<i class="icon-braille drag-handle"></i>
</td>
<td class="e-action">
<span class="filter-name" data-bind="text: name()"></span>
&nbsp;&nbsp;
<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); }">
<span class="i18n" data-i18n="SETTINGS_FILTERS/DELETING_ASK"></span>
</a>
</td>
<td>
<span class="delete-filter" data-bind="visible: !deleteAccess() && canBeDeleted(), click: function (oFilter) { $root.filterForDeletion(oFilter); }">
<i class="icon-trash"></i>
</span>
</td>
</tr>
</tbody>
</table>
</div>
<table class="table table-hover list-table scripts-list g-ui-user-select-none"
data-bind="i18nUpdate: scripts">
<colgroup>
<col style="width: 30px" />
<col style="width: 16px" />
<col />
<col style="width: 140px" />
<col style="width: 1%" />
</colgroup>
<tbody data-bind="foreach: scripts">
<tr class="script-item">
<td>
<span class="disabled-script" data-bind="click: function () { $root.haveChanges(true); active(!active()); }">
<i data-bind="css: {'icon-checkbox-checked': active, 'icon-checkbox-unchecked': !active()}"></i>
</span>
</td>
<td class="e-action" class="script-name" data-bind="text: name()"></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(oScript) { $root.deleteScript(oScript); }">
<span class="i18n" data-i18n="SETTINGS_FILTERS/DELETING_ASK"></span>
</a>
</td>
<td>
<span class="delete-script" data-bind="visible: !deleteAccess() && canBeDeleted(), click: function (oScript) { $root.filterForDeletion(oScript); }">
<i class="icon-trash"></i>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>