display filter tree rules as a list

classes/pref/filters.php

@@ -177,7 +177,7 @@ class Pref_Filters extends Handler_Protected {
 
 	}
 
-	private function getfilterrules_concise($filter_id) {
+	private function getfilterrules_list($filter_id) {
 		$sth = $this->pdo->prepare("SELECT reg_exp,
 			inverse,
 			match_on,
@@ -227,11 +227,11 @@ class Pref_Filters extends Handler_Protected {
 
 			$inverse = $line["inverse"] ? "inverse" : "";
 
-			$rv .= "<span class='$inverse'>" . T_sprintf("%s on %s in %s %s",
+			$rv .= "<li class='$inverse'>" . T_sprintf("%s on %s in %s %s",
 				htmlspecialchars($line["reg_exp"]),
 				$line["field"],
 				$where,
-				$line["inverse"] ? __("(inverse)") : "") . "</span>";
+				$line["inverse"] ? __("(inverse)") : "") . "</li>";
 		}
 
 		return $rv;
@@ -306,7 +306,7 @@ class Pref_Filters extends Handler_Protected {
 			$filter['checkbox'] = false;
 			$filter['last_triggered'] = $line["last_triggered"] ? make_local_datetime($line["last_triggered"], false) : null;
 			$filter['enabled'] = $line["enabled"];
-			$filter['rules'] = $this->getfilterrules_concise($line['id']);
+			$filter['rules'] = $this->getfilterrules_list($line['id']);
 
 			if (!$filter_search || $match_ok) {
 				array_push($folder['items'], $filter);

css/default.css

@@ -1485,9 +1485,6 @@ body.ttrss_prefs .user-css-editor {
   height: 300px;
   width: 575px;
 }
-body.ttrss_prefs #filterTree .filterRules * {
-  white-space: normal;
-}
 body.ttrss_prefs table.prefPluginsList td label,
 body.ttrss_prefs table.prefUserList td {
   cursor: pointer;
@@ -1757,10 +1754,6 @@ body#sharepopup input {
 .flat li {
   padding: 2px;
 }
-.flat .filterRules span {
-  display: block;
-  color: green;
-}
 .flat #filterDlg_Matches span.filterRule {
   color: green;
 }
@@ -1805,7 +1798,7 @@ body#sharepopup input {
 .flat .dijitTree .dijitFolderOpened {
   display: none;
 }
-.flat .dijitTree .dijitTreeRowSelected .filterRules span {
+.flat .dijitTree .dijitTreeRowSelected .filterRules li {
   color: white;
 }
 .flat .dijitTree .dijitTreeRowSelected .dijitTreeExpando {
@@ -1832,11 +1825,13 @@ body#sharepopup input {
   float: right;
 }
 .flat .dijitTree .filterRules {
-  display: block;
-  color: #ccc;
   font-size: 12px;
-  margin-left: 100px;
   line-height: normal;
+  white-space: normal;
+  margin-left: 28px;
+}
+.flat .dijitTree .filterRules li {
+  color: green;
 }
 .flat .dijitTree .dijitTreeContainer {
   max-width: 100%;

css/dijit_basic.less

@@ -4,11 +4,6 @@
 		padding: 2px;
 	}
 
-	.filterRules span {
-		display: block;
-		color: green;
-	}
-
 	#filterDlg_Matches span.filterRule {
 		color: green;
 	}
@@ -69,7 +64,7 @@
 		}
 
 		.dijitTreeRowSelected {
-			.filterRules span {
+			.filterRules li {
 				color : white;
 			}
 
@@ -105,13 +100,15 @@
 		}
 
 		.filterRules {
-			display: block;
-			color: #ccc;
 			font-size: 12px;
-			margin-left: 100px;
 			line-height : normal;
-		}
+			white-space: normal;
+			margin-left : 28px;
 
+			li {
+				color : green;
+			}
+		}
 
 		.dijitTreeContainer {
 			max-width : 100%;

css/prefs.less

@@ -76,10 +76,6 @@ body.ttrss_prefs {
 		width : 575px;
 	}
 
-	#filterTree .filterRules * {
-		white-space: normal;
-	}
-
 	table.prefPluginsList td label, table.prefUserList td {
 		cursor : pointer;
 	}

js/PrefFilterTree.js

@@ -17,7 +17,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree"], functio
 			}
 
 			if (rules) {
-				param = dojo.doc.createElement('span');
+				param = dojo.doc.createElement('ul');
 				param.className = 'filterRules';
 				param.innerHTML = rules;
 				domConstruct.place(param, tnode.rowNode, 'next');

themes/night.css

@@ -1486,9 +1486,6 @@ body.ttrss_prefs .user-css-editor {
   height: 300px;
   width: 575px;
 }
-body.ttrss_prefs #filterTree .filterRules * {
-  white-space: normal;
-}
 body.ttrss_prefs table.prefPluginsList td label,
 body.ttrss_prefs table.prefUserList td {
   cursor: pointer;
@@ -1758,10 +1755,6 @@ body#sharepopup input {
 .flat li {
   padding: 2px;
 }
-.flat .filterRules span {
-  display: block;
-  color: green;
-}
 .flat #filterDlg_Matches span.filterRule {
   color: green;
 }
@@ -1806,7 +1799,7 @@ body#sharepopup input {
 .flat .dijitTree .dijitFolderOpened {
   display: none;
 }
-.flat .dijitTree .dijitTreeRowSelected .filterRules span {
+.flat .dijitTree .dijitTreeRowSelected .filterRules li {
   color: white;
 }
 .flat .dijitTree .dijitTreeRowSelected .dijitTreeExpando {
@@ -1833,11 +1826,13 @@ body#sharepopup input {
   float: right;
 }
 .flat .dijitTree .filterRules {
-  display: block;
-  color: #ccc;
   font-size: 12px;
-  margin-left: 100px;
   line-height: normal;
+  white-space: normal;
+  margin-left: 28px;
+}
+.flat .dijitTree .filterRules li {
+  color: green;
 }
 .flat .dijitTree .dijitTreeContainer {
   max-width: 100%;

themes/night_blue.css

@@ -1486,9 +1486,6 @@ body.ttrss_prefs .user-css-editor {
   height: 300px;
   width: 575px;
 }
-body.ttrss_prefs #filterTree .filterRules * {
-  white-space: normal;
-}
 body.ttrss_prefs table.prefPluginsList td label,
 body.ttrss_prefs table.prefUserList td {
   cursor: pointer;
@@ -1758,10 +1755,6 @@ body#sharepopup input {
 .flat li {
   padding: 2px;
 }
-.flat .filterRules span {
-  display: block;
-  color: green;
-}
 .flat #filterDlg_Matches span.filterRule {
   color: green;
 }
@@ -1806,7 +1799,7 @@ body#sharepopup input {
 .flat .dijitTree .dijitFolderOpened {
   display: none;
 }
-.flat .dijitTree .dijitTreeRowSelected .filterRules span {
+.flat .dijitTree .dijitTreeRowSelected .filterRules li {
   color: white;
 }
 .flat .dijitTree .dijitTreeRowSelected .dijitTreeExpando {
@@ -1833,11 +1826,13 @@ body#sharepopup input {
   float: right;
 }
 .flat .dijitTree .filterRules {
-  display: block;
-  color: #ccc;
   font-size: 12px;
-  margin-left: 100px;
   line-height: normal;
+  white-space: normal;
+  margin-left: 28px;
+}
+.flat .dijitTree .filterRules li {
+  color: green;
 }
 .flat .dijitTree .dijitTreeContainer {
   max-width: 100%;