Improve Sieve Scripts editor layout

This commit is contained in:
djmaze 2021-01-22 16:45:12 +01:00
parent 1535dd00f1
commit 23d7fecd22
3 changed files with 57 additions and 66 deletions

View file

@ -4,13 +4,8 @@ html.rl-mobile .b-settings-filters {
}
.b-filter-script {
width: 800px;
min-width: 640px;
}
.b-settings-filters .list-table,
.b-filter-script .list-table {
width: 600px;
width: auto;
max-width: 720px;
}
.filter-item td,

View file

@ -8,8 +8,8 @@
</h3>
</div>
<div class="modal-body">
<div class="row filter" data-bind="with: filter, i18nInit: filter">
<div class="span9" data-bind="i18nInit: true">
<div class="filter" data-bind="with: filter, i18nInit: filter">
<div data-bind="i18nInit: true">
<div class="control-group" data-bind="css: {'error': nameError}">
<div class="controls">

View file

@ -20,7 +20,7 @@
</div>
</div>
<div class="row" data-bind="visible: hasChanges">
<div data-bind="visible: hasChanges">
<div class="span8 width100-on-mobile">
<div class="alert g-ui-user-select-none">
<i class="icon-warning"></i>
@ -29,7 +29,7 @@
</div>
</div>
</div>
<div class="row" data-bind="visible: $root.saveError">
<div data-bind="visible: $root.saveError">
<div class="span8 width100-on-mobile">
<div class="alert alert-error g-ui-user-select-none">
<i class="icon-warning"></i>
@ -39,63 +39,59 @@
</div>
</div>
<div class="row">
<div class="span8 width100-on-mobile">
<div class="control-group" data-bind="visible: $root.rawActive">
<div class="controls">
<pre>
<b class="i18n" data-i18n="POPUPS_SIEVE_SCRIPT/CAPABILITY_LABEL"></b>:
<span data-bind="text: $root.sieveCapabilities"></span>
</pre>
<textarea class="span8" data-bind="value: body, valueUpdate: 'input'"></textarea>
</div>
</div>
<div data-bind="visible: !$root.rawActive()">
<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">
<tr class="filter-item" draggable="true" data-bind="sortableItem: { list: $root.filters }">
<td>
<span class="disabled-filter" data-bind="click: function () { $parent.hasChanges(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-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>
<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: $root.addFilter">
<i class="icon-plus"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="POPUPS_SIEVE_SCRIPT/BUTTON_ADD_FILTER"></span>
</a>
</div>
<div class="control-group" data-bind="visible: $root.rawActive">
<div class="controls">
<pre>
<b class="i18n" data-i18n="POPUPS_SIEVE_SCRIPT/CAPABILITY_LABEL"></b>:
<span data-bind="text: $root.sieveCapabilities"></span>
</pre>
<textarea class="span8" data-bind="value: body, valueUpdate: 'input'"></textarea>
</div>
</div>
<div data-bind="visible: !$root.rawActive()">
<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">
<tr class="filter-item" draggable="true" data-bind="sortableItem: { list: $root.filters }">
<td>
<span class="disabled-filter" data-bind="click: function () { $parent.hasChanges(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-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>
<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: $root.addFilter">
<i class="icon-plus"></i>
&nbsp;&nbsp;
<span class="i18n" data-i18n="POPUPS_SIEVE_SCRIPT/BUTTON_ADD_FILTER"></span>
</a>
</div>
</div>
<div class="modal-footer">
<a class="btn" data-bind="visible: $root.allowToggle, click: function() { $root.toggleFiltersRaw(); },