Improved Sieve gui style

dev/Sieve/View/Script.js

@@ -7,6 +7,8 @@ import { parseScript } from 'Sieve/Parser';
 
 import { availableActions, availableControls, availableTests } from 'Sieve/Commands';
 
+import { ControlCommand, TestCommand, ActionCommand, GrammarComment } from 'Sieve/Grammar';
+
 import {
 	capa,
 	scripts,
@@ -137,6 +139,57 @@ export class SieveScriptPopupView extends rl.pluginPopupView {
 		return document.getElementById(id) ? id : 'SieveCommand';
 	}
 
+	styleClass(obj) {
+		if (obj instanceof ControlCommand) {
+			return 'sieve-control';
+		}
+		if (obj instanceof TestCommand) {
+			return 'sieve-test';
+		}
+		if (obj instanceof ActionCommand) {
+			return 'sieve-action';
+		}
+		if (obj instanceof GrammarComment) {
+			return 'sieve-comment';
+		}
+/*
+		if (obj instanceof GrammarString) {
+			return 'sieve-string';
+		}
+		if (obj instanceof GrammarCommand) {
+			return 'sieve-command';
+		}
+		if (obj instanceof GrammarCommands) {
+			return 'sieve-commands';
+		}
+		if (obj instanceof GrammarTestList {
+			return 'sieve-testlist';
+		}
+		if (obj instanceof GrammarBracketComment {
+			return 'sieve-bcomment';
+		}
+		if (obj instanceof GrammarHashComment {
+			return 'sieve-hcomment';
+		}
+		if (obj instanceof GrammarNumber {
+			return 'sieve-number';
+		}
+		if (obj instanceof GrammarStringList {
+			return 'sieve-stringlist';
+		}
+		if (obj instanceof GrammarQuotedString {
+			return 'sieve-qstring';
+		}
+		if (obj instanceof GrammarMultiLine {
+			return 'sieve-multiline';
+		}
+		if (obj instanceof UnknownCommand {
+			return 'sieve-string';
+		}
+*/
+		return 'sieve-' + obj.constructor.name;
+	}
+
 	beforeShow(oScript) {
 //	onShow(oScript) {
 		this.sieveCapabilities(capa.join(' '));

dev/Styles/User/SettingsFilters.less

@@ -35,15 +35,20 @@
 	font-family: var(--fontMono);
 }
 
-.sieve-block {
+.sieve-control > div,
-	border: 1px solid var(--border-color, #ddd);
+.sieve-test > div,
-	margin: 1em 0;
+.sieve-action > div {
-	padding: 0.5em;
-}
-
-.sieve-block > div {
 	padding-left:2em;
 }
-.sieve-block > details > div {
+
+.sieve-control > details > div,
+.sieve-test > details > div,
+.sieve-action > details > div {
 	padding-left:1em;
 }
+
+.sieve-control, .sieve-test, .sieve-action, .sieve-comment {
+	border: 1px solid var(--border-color, #ddd);
+	margin: 0.5em 0;
+	padding: 0.5em;
+}

snappymail/v/0.0.0/app/templates/Views/Sieve/AllOfTest.html

@@ -1,7 +1,7 @@
 <!-- rfc5228 -->
-<div data-bind="foreach: tests">
+<!-- ko foreach: tests -->
-	<details class="sieve-block">
+	<details class="sieve-test">
 		<summary data-bind="text: $data"></summary>
 		<div data-bind="template: {name: $root.templateName($data)}"></div>
 	</details>
-</div>
+<!-- /ko -->

snappymail/v/0.0.0/app/templates/Views/Sieve/AnyOfTest.html

@@ -1,6 +1,6 @@
 <!-- rfc5228 -->
 <!-- ko foreach: tests -->
-	<details class="sieve-block">
+	<details class="sieve-test">
 		<summary data-bind="text: $data"></summary>
 		<div data-bind="template: {name: $root.templateName($data)}"></div>
 	</details>

snappymail/v/0.0.0/app/templates/Views/Sieve/ElsIfCommand.html

@@ -1,12 +1,10 @@
 <!-- rfc5228 -->
-<div class="sieve-block">
+<details>
-	<details>
+	<summary data-bind="text: 'elsif ' + test"></summary>
-		<summary data-bind="text: 'elsif ' + test"></summary>
+	<div data-bind="template: {name: $root.templateName(test), data: test}"></div>
-		<div data-bind="template: {name: $root.templateName(test), data: test}"></div>
+</details>
-	</details>
+{
-	{
+	<div data-bind="foreach: commands">
-		<div data-bind="foreach: commands">
+		<div data-bind="attr:{class:$root.styleClass($data)}, template: {name: $root.templateName($data)}"></div>
-			<div data-bind="template: {name: $root.templateName($data)}"></div>
+	</div>
-		</div>
+}
-	}
-</div>

snappymail/v/0.0.0/app/templates/Views/Sieve/ElseCommand.html

@@ -1,9 +1,7 @@
 <!-- rfc5228 -->
-<div class="sieve-block">
+<span>else</span>
-	<span>else</span>
+{
-	{
+	<div data-bind="foreach: commands">
-		<div data-bind="foreach: commands">
+		<div data-bind="attr:{class:$root.styleClass($data)}, template: {name: $root.templateName($data)}"></div>
-			<div data-bind="template: {name: $root.templateName($data)}"></div>
+	</div>
-		</div>
+}
-	}
-</div>

snappymail/v/0.0.0/app/templates/Views/Sieve/IfCommand.html

@@ -1,12 +1,10 @@
 <!-- rfc5228 -->
-<div class="sieve-block">
+<details>
-	<details>
+	<summary data-bind="text: 'if ' + test"></summary>
-		<summary data-bind="text: 'if ' + test"></summary>
+	<div data-bind="template: {name: $root.templateName(test), data: test}"></div>
-		<div data-bind="template: {name: $root.templateName(test), data: test}"></div>
+</details>
-	</details>
+{
-	{
+	<div data-bind="foreach: commands">
-		<div data-bind="foreach: commands">
+		<div data-bind="attr:{class:$root.styleClass($data)}, template: {name: $root.templateName($data)}"></div>
-			<div data-bind="template: {name: $root.templateName($data)}"></div>
+	</div>
-		</div>
+}
-	}
-</div>

snappymail/v/0.0.0/app/templates/Views/Sieve/_Command.html

@@ -1,2 +1,2 @@
 <!-- for every command that has no template -->
-<div data-bind="text: $data"></div>
+<span data-bind="text: $data"></span>

snappymail/v/0.0.0/app/templates/Views/User/PopupsSieveScript.html

@@ -39,7 +39,7 @@
 		<textarea style="width:100%;height:60vh" data-bind="value: body, valueUpdate: 'input'"></textarea>
 
 		<div data-bind="foreach: parse()">
-			<div data-bind="template: {name: $root.templateName($data)}"></div>
+			<div data-bind="attr:{class:$root.styleClass($data)}, template: {name: $root.templateName($data)}"></div>
 		</div>
 	</div>
 	<div data-bind="visible: !$root.rawActive()">