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

@@ -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)
 			{

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:'#'}

mail/templates/default/sieve.edit.xet

@@ -2,16 +2,8 @@
 <!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">
+	<template id="mail.sieve.condition" template="" lang="" group="0" version="16.1">
-		<grid width="100%">
+		<grid width="99%">
-			<columns>
-				<column width="100%"/>
-			</columns>
-			<rows>
-				<row>
-					<groupbox>
-						<caption label="Condition"/>
-						<grid width="100%">
 			<columns>
 				<column width="40%"/>
 				<column width="60%"/>
@@ -73,18 +65,17 @@
 						<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>
-						<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. \!)'/>
+	</template>
-					</groupbox>
+	<template id="mail.sieve.action" template="" lang="" group="0" version="16.1">
-				</row>
-				<row>
-					<groupbox>
-						<caption label="Action"/>
 		<grid width="100%">
 			<columns>
-								<column/>
+				<column width="40%"/>
-								<column/>
+				<column width="60%"/>
 			</columns>
 			<rows>
 				<row>
@@ -101,7 +92,7 @@
 				</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" />
+					<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"/>
@@ -112,17 +103,33 @@
 				</row>
 			</rows>
 		</grid>
-					</groupbox>
+	</template>
-				</row>
+	<template id="mail.sieve.edit" template="" lang="" group="0" version="1.9.001">
-				<row>
+		<grid width="100%">
-					<groupbox>
-						<caption label="Extended"/>
-						<grid>
 			<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>
@@ -131,12 +138,8 @@
 				<row>
 					<checkbox label="Use regular expressions (see wikipedia for information on POSIX regular expressions)" id="regexp"/>
 				</row>
-							</rows>
+				<row class="dialogFooterToolbar">
-						</grid>
+					<hbox>
-					</groupbox>
-				</row>
-				<row>
-					<hbox class="dialogFooterToolbar">
 						<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]"/>

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;
 }

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;
 }