colored labels UI improvements

modules/pref-labels.php

@@ -14,6 +14,18 @@
 					AND owner_uid = " . $_SESSION["uid"]);			
 			}
 
+			return;
+		}
+
+		if ($subop == "color-reset") {
+			$ids = split(',', db_escape_string($_REQUEST["ids"]));
+
+			foreach ($ids as $id) {
+				db_query($link, "UPDATE ttrss_labels2 SET
+					fg_color = '', bg_color = '' WHERE id = '$id'
+					AND owner_uid = " . $_SESSION["uid"]);			
+			}
+
 		}
 
 		if ($subop == "save") {
@@ -192,8 +204,8 @@
 				$fg_color = $line["fg_color"];
 				$bg_color = $line["bg_color"];
 
-				if (!$fg_color) $fg_color = "black";
+				if (!$fg_color) $fg_color = "";
-				if (!$bg_color) $bg_color = "transparent";
+				if (!$bg_color) $bg_color = "";
 
 				print "<td width='5%' align='center'><input 
 					onclick='toggleSelectPrefRow(this, \"label\");' 
@@ -201,15 +213,14 @@
 	
 				$id = $line['id'];
 
-/*				print "<td width='30' align='center'>
+				print "<td>";
-					<div class='labelColorIndicator' 
-					style='color : $fg_color; background-color : $bg_color'
-					onclick=\"colorPicker(this, '$id', '$fg_color', '$bg_color')\">z</div>";
 
-				print "</td>"; */
+				print "<div class='labelColorIndicator' id='LICID-$id' 
-
-				print "<td><span class='prefsLabelEntry' 
 					style='color : $fg_color; background-color : $bg_color'
+					onclick=\"colorPicker(this, '$id', '$fg_color', '$bg_color')\">&alpha;</div>&nbsp;";
+
+
+				print "<span class='prefsLabelEntry' 
 					id=\"LILT-".$line["id"]."\">" . $line["caption"] . 
 					"</span>";
 

prefs.js

@@ -77,6 +77,29 @@ function filterlist_callback2(transport) {
 	remove_splash();
 }
 
+function init_label_inline_editor() {
+	try {
+		if (document.getElementById("prefLabelList")) {
+			var elems = document.getElementById("prefLabelList").getElementsByTagName("SPAN");
+
+			for (var i = 0; i < elems.length; i++) {
+				if (elems[i].id && elems[i].id.match("LILT-")) {
+
+					var id = elems[i].id.replace("LILT-", "");
+
+					new Ajax.InPlaceEditor(elems[i],
+						'backend.php?op=pref-labels&subop=save&id=' + id,
+						{cols: 20, rows: 1});
+
+				}
+			}
+		}
+
+	} catch (e) {
+		exception_error("init_label_inline_editor", e);
+	}
+}
+
 function labellist_callback2(transport) {
 
 	try {
@@ -84,20 +107,8 @@ function labellist_callback2(transport) {
 		var container = document.getElementById('prefContent');
 			closeInfoBox();
 			container.innerHTML=transport.responseText;
-	
-			if (document.getElementById("prefLabelList")) {
-				var elems = document.getElementById("prefLabelList").getElementsByTagName("SPAN");
 
-				for (var i = 0; i < elems.length; i++) {
+			init_label_inline_editor();
-					if (elems[i].id && elems[i].id.match("LILT-")) {
-
-						var id = elems[i].id.replace("LILT-", "");
-							new Ajax.InPlaceEditor(elems[i],
-							'backend.php?op=pref-labels&subop=save&id=' + id,
-							{cols: 20, rows: 1});
-					}
-				}
-			}
 	
 			if (typeof correctPNG != 'undefined') {
 				correctPNG();
@@ -1994,17 +2005,33 @@ function labelColorSet(kind) {
 	try {
 		var labels = getSelectedLabels();
 
-		var p = prompt(__("Please enter new label color:"));
+		var p = null
+
+		if (kind == "fg") {
+			p = prompt(__("Please enter new label foreground color:"));
+		} else {
+			p = prompt(__("Please enter new label background color:"));
+		}
 
 		if (p != null) {
 
 			var query = "backend.php?op=pref-labels&subop=color-set&kind=" + kind +
 				"&ids="+	param_escape(labels.toString()) + "&color=" + param_escape(p);
 
-			new Ajax.Request(query,	{
+			selectPrefRows('label', false);
-				onComplete: function(transport) {
+
-						labellist_callback2(transport);
+			for (var i = 0; i < labels.length; i++) {
-					} });
+				var e = document.getElementById("LICID-" + labels[i]);
+				if (e) {
+					if (kind == "fg") {
+						e.style.color = p;
+					} else {
+						e.style.backgroundColor = p;
+					}
+				}
+			}
+
+			new Ajax.Request(query);
 		}
 
 	} catch (e) {

tt-rss.css

@@ -2098,6 +2098,9 @@ div.labelColorIndicator {
 	font-height : 9px;
 	text-align : center;
 	border : 1px solid black;
+	float : left;
+	background-color : #fff7d5;	
+	color : #063064;
 }
 
 div.colorPickerEntry {