From 35790eabecf4be7cbfaf0484519336d4626d52ce Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hn@stylite.de>
Date: Fri, 6 May 2016 10:47:06 +0000
Subject: [PATCH] Change look and feel for mail filter edit dialog - Make
 ruleID available on client-side to represent it as id in dialog - Use tabs
 instead of long list dialog

---
 mail/inc/class.mail_sieve.inc.php     |   3 +-
 mail/templates/default/app.css        |   6 +
 mail/templates/default/sieve.edit.xet | 253 +++++++++++++-------------
 mail/templates/mobile/app.css         |   7 +
 mail/templates/pixelegg/app.css       |   7 +
 5 files changed, 150 insertions(+), 126 deletions(-)

diff --git a/mail/inc/class.mail_sieve.inc.php b/mail/inc/class.mail_sieve.inc.php
index 6fc6122985..a5415192f7 100644
--- a/mail/inc/class.mail_sieve.inc.php
+++ b/mail/inc/class.mail_sieve.inc.php
@@ -238,6 +238,7 @@ class mail_sieve
 
 				$rules = $this->rulesByID;
 				$content= $rules;
+				$content ['ruleID'] = $_GET['ruleID'];
 				switch ($rules['action'])
 				{
 					case 'folder':
@@ -273,7 +274,7 @@ class mail_sieve
 			list($button) = @each($content['button']);
 
 			//$ruleID is calculated by priority from the selected rule and is an unique ID
-			$ruleID = ($this->rulesByID['priority'] -1) / 2;
+			$content['ruleID'] = $ruleID = ($this->rulesByID['priority'] -1) / 2;
             $error = 0;
 			switch ($button)
 			{
diff --git a/mail/templates/default/app.css b/mail/templates/default/app.css
index 02f3c87b94..4149f9eae8 100644
--- a/mail/templates/default/app.css
+++ b/mail/templates/default/app.css
@@ -872,3 +872,9 @@ div.mailComposeHeaderSection>table {
 #mail-subscribe {
 	overflow: hidden;
 }
+
+.sieve-title {
+	font-size: 12pt;
+	vertical-align: middle;
+}
+.sieve-title .ruleID::before {content:'#'}
\ No newline at end of file
diff --git a/mail/templates/default/sieve.edit.xet b/mail/templates/default/sieve.edit.xet
index d31215ba43..52e46c6fab 100644
--- a/mail/templates/default/sieve.edit.xet
+++ b/mail/templates/default/sieve.edit.xet
@@ -2,141 +2,144 @@
 <!DOCTYPE overlay PUBLIC "-//Stylite AG//eTemplate 2//EN" "http://www.egroupware.org/etemplate2.dtd">
 <!-- $Id$ -->
 <overlay>
-	<template id="mail.sieve.edit" template="" lang="" group="0" version="1.9.001">
-		<grid width="100%">
+	<template id="mail.sieve.condition" template="" lang="" group="0" version="16.1">
+		<grid width="99%">
 			<columns>
-				<column width="100%"/>
+				<column width="40%"/>
+				<column width="60%"/>
 			</columns>
 			<rows>
 				<row>
-					<groupbox>
-						<caption label="Condition"/>
-						<grid width="100%">
-							<columns>
-								<column width="40%"/>
-								<column width="60%"/>
-							</columns>
-							<rows>
-								<row>
-									<description value="Match:"/>
-									<menulist>
-										<menupopup id="anyof"/>
-									</menulist>
-								</row>
-								<row class="sieveRowActive">
-									<description value="If from contains:(*)"/>
-									<textbox id="from" class="et2_fullWidth"/>
-								</row>
-								<row>
-									<description value="If to contains:(*)"/>
-									<textbox id="to" class="et2_fullWidth"/>
-								</row>
-								<row>
-									<description value="If subject contains:(*)"/>
-									<textbox id="subject" class="et2_fullWidth"/>
-								</row>
-								<row>
-									<description value="If message size"/>
-									<hbox>
-										<menulist>
-											<menupopup id="gthan"/>
-										</menulist>
-										<textbox id="size"/>
-										<description value="kilobytes"/>
-									</hbox>
-								</row>
-								<row>
-									<description value="If mail header"/>
-									<hbox>
-										<textbox id="field"/>
-										<description value="Contains(*)"/>
-										<textbox id="field_val" width="38%"/>
-									</hbox>
-								</row>
-								<row>
-									<description value="If mail body message type"/>
-									<hbox>
-										<menulist>
-											<menupopup id="bodytransform"/>
-										</menulist>
-										<description value="Contains(*)"/>
-										<textbox id="field_bodytransform"  width="62%"/>
-									</hbox>
-								</row>
-								<row>
-									<description value="If mail body content / attachment type"/>
-									<hbox>
-										<menulist>
-											<menupopup id="ctype"/>
-										</menulist>
-										<description value="/"/>
-										<textbox blur="for eg.: mpeg" id="field_ctype_val" width="71%"/>
-									</hbox>
-								</row>
-							</rows>
-						</grid>
-						<description value='(*) wildcards (*,?) may be used. If you are trying to match * or ? itself, you must escape them with a backslash (\). If you check &quot;Use regular expressions&quot; you must use valid regular expressions.  In order to escape of exclamation mark (!) at the begining not being used as "NOT", use regex and backslash (\) (e.g. \!)'/>
-					</groupbox>
+					<description value="Match:"/>
+					<menulist>
+						<menupopup id="anyof"/>
+					</menulist>
+				</row>
+				<row class="sieveRowActive">
+					<description value="If from contains:(*)"/>
+					<textbox id="from" class="et2_fullWidth"/>
 				</row>
 				<row>
-					<groupbox>
-						<caption label="Action"/>
-						<grid width="100%">
-							<columns>
-								<column/>
-								<column/>
-							</columns>
-							<rows>
-								<row>
-									<radio label="File into:" id="action" options="folder"/>
-									<hbox>
-										<taglist id="action_folder_text"  class="et2_fullWidth" autocomplete_url="mail.mail_sieve.ajax_getFolders" autocomplete_params="" allowFreeEntries="false" maxSelection="1" onfocus="app.mail.sieve_focus_radioBtn" />
-									</hbox>
-								</row>
-								<row>
-									<radio label="Forward to address (*):" id="action" options="address"/>
-									<hbox>
-										<taglist-email allowFreeEntries="true" id="action_address_text" class="et2_fullWidth" onfocus="app.mail.sieve_focus_radioBtn" />
-									</hbox>
-								</row>
-								<row>
-									<radio label="Send a reject message:" id="action" options="reject"/>
-									<textbox multiline="true" id="action_reject_text" onfocus="app.mail.sieve_focus_radioBtn" width="100%" height="100" />
-								</row>
-								<row>
-									<radio label="Discard message" id="action" options="discard"/>
-									<description/>
-								</row>
-								<row>
-									<description value="(*) Please consider, forward to multiple addresses will not work if number of addresses exceeds the Limit. For most mail Servers the limit is 4 by default, please contact your mail server administrator for further info."/>
-								</row>
-							</rows>
-						</grid>
-					</groupbox>
+					<description value="If to contains:(*)"/>
+					<textbox id="to" class="et2_fullWidth"/>
 				</row>
 				<row>
-					<groupbox>
-						<caption label="Extended"/>
-						<grid>
-							<columns>
-								<column/>
-							</columns>
-							<rows>
-								<row>
-									<checkbox label="Check message against next rule also" id="continue"/>
-								</row>
-								<row>
-									<checkbox label="Keep a copy of the message in your inbox" id="keep"/>
-								</row>
-								<row>
-									<checkbox label="Use regular expressions (see wikipedia for information on POSIX regular expressions)" id="regexp"/>
-								</row>
-							</rows>
-						</grid>
-					</groupbox>
+					<description value="If subject contains:(*)"/>
+					<textbox id="subject" class="et2_fullWidth"/>
 				</row>
 				<row>
-					<hbox class="dialogFooterToolbar">
+					<description value="If message size"/>
+					<hbox>
+						<menulist>
+							<menupopup id="gthan"/>
+						</menulist>
+						<textbox id="size"/>
+						<description value="kilobytes"/>
+					</hbox>
+				</row>
+				<row>
+					<description value="If mail header"/>
+					<hbox>
+						<textbox id="field"/>
+						<description value="Contains(*)"/>
+						<textbox id="field_val" width="38%"/>
+					</hbox>
+				</row>
+				<row>
+					<description value="If mail body message type"/>
+					<hbox>
+						<menulist>
+							<menupopup id="bodytransform"/>
+						</menulist>
+						<description value="Contains(*)"/>
+						<textbox id="field_bodytransform"  width="62%"/>
+					</hbox>
+				</row>
+				<row>
+					<description value="If mail body content / attachment type"/>
+					<hbox>
+						<menulist>
+							<menupopup id="ctype"/>
+						</menulist>
+						<description value="/"/>
+						<textbox blur="for eg.: mpeg" id="field_ctype_val" width="71%"/>
+					</hbox>
+				</row>
+				<row>
+					<description value='(*) wildcards (*,?) may be used. If you are trying to match * or ? itself, you must escape them with a backslash (\). If you check &quot;Use regular expressions&quot; you must use valid regular expressions.  In order to escape of exclamation mark (!) at the begining not being used as "NOT", use regex and backslash (\) (e.g. \!)'/>
+				</row>
+			</rows>
+		</grid>
+	</template>
+	<template id="mail.sieve.action" template="" lang="" group="0" version="16.1">
+		<grid width="100%">
+			<columns>
+				<column width="40%"/>
+				<column width="60%"/>
+			</columns>
+			<rows>
+				<row>
+					<radio label="File into:" id="action" options="folder"/>
+					<hbox>
+						<taglist id="action_folder_text"  class="et2_fullWidth" autocomplete_url="mail.mail_sieve.ajax_getFolders" autocomplete_params="" allowFreeEntries="false" maxSelection="1" onfocus="app.mail.sieve_focus_radioBtn" />
+					</hbox>
+				</row>
+				<row>
+					<radio label="Forward to address (*):" id="action" options="address"/>
+					<hbox>
+						<taglist-email allowFreeEntries="true" id="action_address_text" class="et2_fullWidth" onfocus="app.mail.sieve_focus_radioBtn" />
+					</hbox>
+				</row>
+				<row>
+					<radio label="Send a reject message:" id="action" options="reject"/>
+					<textbox multiline="true" id="action_reject_text" onfocus="app.mail.sieve_focus_radioBtn" height="100" class="et2_fullWidth" />
+				</row>
+				<row>
+					<radio label="Discard message" id="action" options="discard"/>
+					<description/>
+				</row>
+				<row>
+					<description value="(*) Please consider, forward to multiple addresses will not work if number of addresses exceeds the Limit. For most mail Servers the limit is 4 by default, please contact your mail server administrator for further info."/>
+				</row>
+			</rows>
+		</grid>
+	</template>
+	<template id="mail.sieve.edit" template="" lang="" group="0" version="1.9.001">
+		<grid width="100%">
+			<columns>
+				<column/>
+			</columns>
+			<rows>
+				<row class="dialogHeader sieve-title">
+					<hbox>
+						<label value="Mail filter rule" />
+						<description id="ruleID" class="ruleID"/>
+						<image src="filter.png" align="right"/>
+					</hbox>
+				</row>
+				<row>
+					<tabbox id="tabs" class="et2_nowrap" width="100%" span="all" tab_height="350">
+						<tabs>
+							<tab id="condition" label="Condition"/>
+							<tab id="action" label="Action"/>
+						</tabs>
+						<tabpanels>
+							<template id="mail.sieve.condition"/>
+							<template id="mail.sieve.action"/>
+						</tabpanels>
+					</tabbox>
+				</row>
+				<row class="dialogFooterToolbar">
+					<checkbox label="Check message against next rule also" id="continue"/>
+				</row>
+				<row>
+					<checkbox label="Keep a copy of the message in your inbox" id="keep"/>
+				</row>
+				<row>
+					<checkbox label="Use regular expressions (see wikipedia for information on POSIX regular expressions)" id="regexp"/>
+				</row>
+				<row class="dialogFooterToolbar">
+					<hbox>
 						<button statustext="Saves this rule" label="Save" id="button[save]"/>
 						<button statustext="Applies the changes made" label="Apply" id="button[apply]"/>
                         <button label="Cancel" id="button[cancel]"/>
diff --git a/mail/templates/mobile/app.css b/mail/templates/mobile/app.css
index 373198763a..27e3773e39 100644
--- a/mail/templates/mobile/app.css
+++ b/mail/templates/mobile/app.css
@@ -855,6 +855,13 @@ div.mailComposeHeaderSection > table {
 #mail-subscribe {
   overflow: hidden;
 }
+.sieve-title {
+  font-size: 12pt;
+  vertical-align: middle;
+}
+.sieve-title .ruleID::before {
+  content: '#';
+}
 #popupMainDiv {
   padding: 5px;
 }
diff --git a/mail/templates/pixelegg/app.css b/mail/templates/pixelegg/app.css
index a761e4f70f..3cac7682ad 100755
--- a/mail/templates/pixelegg/app.css
+++ b/mail/templates/pixelegg/app.css
@@ -843,6 +843,13 @@ div.mailComposeHeaderSection > table {
 #mail-subscribe {
   overflow: hidden;
 }
+.sieve-title {
+  font-size: 12pt;
+  vertical-align: middle;
+}
+.sieve-title .ruleID::before {
+  content: '#';
+}
 #popupMainDiv {
   padding: 5px;
 }