From a82e8bcc400079a0de51958e05680255ad578736 Mon Sep 17 00:00:00 2001
From: the-djmaze <>
Date: Mon, 23 Sep 2024 15:41:14 +0200
Subject: [PATCH] Improved Sieve gui style

---
 dev/Sieve/View/Script.js                      | 53 +++++++++++++++++++
 dev/Styles/User/SettingsFilters.less          | 21 +++++---
 .../app/templates/Views/Sieve/AllOfTest.html  |  6 +--
 .../app/templates/Views/Sieve/AnyOfTest.html  |  2 +-
 .../templates/Views/Sieve/ElsIfCommand.html   | 20 ++++---
 .../templates/Views/Sieve/ElseCommand.html    | 14 +++--
 .../app/templates/Views/Sieve/IfCommand.html  | 20 ++++---
 .../app/templates/Views/Sieve/_Command.html   |  2 +-
 .../Views/User/PopupsSieveScript.html         |  2 +-
 9 files changed, 96 insertions(+), 44 deletions(-)

diff --git a/dev/Sieve/View/Script.js b/dev/Sieve/View/Script.js
index 02ebbb9ef..5545208bc 100644
--- a/dev/Sieve/View/Script.js
+++ b/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(' '));
diff --git a/dev/Styles/User/SettingsFilters.less b/dev/Styles/User/SettingsFilters.less
index ea8073585..cc17fb13c 100644
--- a/dev/Styles/User/SettingsFilters.less
+++ b/dev/Styles/User/SettingsFilters.less
@@ -35,15 +35,20 @@
 	font-family: var(--fontMono);
 }
 
-.sieve-block {
-	border: 1px solid var(--border-color, #ddd);
-	margin: 1em 0;
-	padding: 0.5em;
-}
-
-.sieve-block > div {
+.sieve-control > div,
+.sieve-test > div,
+.sieve-action > 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;
+}
diff --git a/snappymail/v/0.0.0/app/templates/Views/Sieve/AllOfTest.html b/snappymail/v/0.0.0/app/templates/Views/Sieve/AllOfTest.html
index 8b60bb2f5..ecb3629af 100644
--- a/snappymail/v/0.0.0/app/templates/Views/Sieve/AllOfTest.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Sieve/AllOfTest.html
@@ -1,7 +1,7 @@
 <!-- rfc5228 -->
-<div data-bind="foreach: tests">
-	<details class="sieve-block">
+<!-- ko foreach: tests -->
+	<details class="sieve-test">
 		<summary data-bind="text: $data"></summary>
 		<div data-bind="template: {name: $root.templateName($data)}"></div>
 	</details>
-</div>
+<!-- /ko -->
diff --git a/snappymail/v/0.0.0/app/templates/Views/Sieve/AnyOfTest.html b/snappymail/v/0.0.0/app/templates/Views/Sieve/AnyOfTest.html
index 56f8549ea..ecb3629af 100644
--- a/snappymail/v/0.0.0/app/templates/Views/Sieve/AnyOfTest.html
+++ b/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>
diff --git a/snappymail/v/0.0.0/app/templates/Views/Sieve/ElsIfCommand.html b/snappymail/v/0.0.0/app/templates/Views/Sieve/ElsIfCommand.html
index bae8070b8..442d777f7 100644
--- a/snappymail/v/0.0.0/app/templates/Views/Sieve/ElsIfCommand.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Sieve/ElsIfCommand.html
@@ -1,12 +1,10 @@
 <!-- rfc5228 -->
-<div class="sieve-block">
-	<details>
-		<summary data-bind="text: 'elsif ' + test"></summary>
-		<div data-bind="template: {name: $root.templateName(test), data: test}"></div>
-	</details>
-	{
-		<div data-bind="foreach: commands">
-			<div data-bind="template: {name: $root.templateName($data)}"></div>
-		</div>
-	}
-</div>
+<details>
+	<summary data-bind="text: 'elsif ' + test"></summary>
+	<div data-bind="template: {name: $root.templateName(test), data: test}"></div>
+</details>
+{
+	<div data-bind="foreach: commands">
+		<div data-bind="attr:{class:$root.styleClass($data)}, template: {name: $root.templateName($data)}"></div>
+	</div>
+}
diff --git a/snappymail/v/0.0.0/app/templates/Views/Sieve/ElseCommand.html b/snappymail/v/0.0.0/app/templates/Views/Sieve/ElseCommand.html
index 19b9534ad..9997e9e10 100644
--- a/snappymail/v/0.0.0/app/templates/Views/Sieve/ElseCommand.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Sieve/ElseCommand.html
@@ -1,9 +1,7 @@
 <!-- rfc5228 -->
-<div class="sieve-block">
-	<span>else</span>
-	{
-		<div data-bind="foreach: commands">
-			<div data-bind="template: {name: $root.templateName($data)}"></div>
-		</div>
-	}
-</div>
+<span>else</span>
+{
+	<div data-bind="foreach: commands">
+		<div data-bind="attr:{class:$root.styleClass($data)}, template: {name: $root.templateName($data)}"></div>
+	</div>
+}
diff --git a/snappymail/v/0.0.0/app/templates/Views/Sieve/IfCommand.html b/snappymail/v/0.0.0/app/templates/Views/Sieve/IfCommand.html
index d49dffd5f..72f7004a6 100644
--- a/snappymail/v/0.0.0/app/templates/Views/Sieve/IfCommand.html
+++ b/snappymail/v/0.0.0/app/templates/Views/Sieve/IfCommand.html
@@ -1,12 +1,10 @@
 <!-- rfc5228 -->
-<div class="sieve-block">
-	<details>
-		<summary data-bind="text: 'if ' + test"></summary>
-		<div data-bind="template: {name: $root.templateName(test), data: test}"></div>
-	</details>
-	{
-		<div data-bind="foreach: commands">
-			<div data-bind="template: {name: $root.templateName($data)}"></div>
-		</div>
-	}
-</div>
+<details>
+	<summary data-bind="text: 'if ' + test"></summary>
+	<div data-bind="template: {name: $root.templateName(test), data: test}"></div>
+</details>
+{
+	<div data-bind="foreach: commands">
+		<div data-bind="attr:{class:$root.styleClass($data)}, template: {name: $root.templateName($data)}"></div>
+	</div>
+}
diff --git a/snappymail/v/0.0.0/app/templates/Views/Sieve/_Command.html b/snappymail/v/0.0.0/app/templates/Views/Sieve/_Command.html
index dcd14f3e4..3efae6ee7 100644
--- a/snappymail/v/0.0.0/app/templates/Views/Sieve/_Command.html
+++ b/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>
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 edf9f5895..9a06482e1 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
@@ -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()">