proper color editor for labels

3 files changed, 171 insertions, 54 deletions

diff --git a/modules/pref-labels.php b/modules/pref-labels.php
index 66753df9a..ffaea56fb 100644
--- a/modules/pref-labels.php
+++ b/modules/pref-labels.php
@@ -7,11 +7,20 @@
 			$kind = db_escape_string($_REQUEST["kind"]);
 			$ids = split(',', db_escape_string($_REQUEST["ids"]));
 			$color = db_escape_string($_REQUEST["color"]);
+			$fg = db_escape_string($_REQUEST["fg"]);
+			$bg = db_escape_string($_REQUEST["bg"]);
 
 			foreach ($ids as $id) {
-				db_query($link, "UPDATE ttrss_labels2 SET
-					${kind}_color = '$color' WHERE id = '$id'
-					AND owner_uid = " . $_SESSION["uid"]);			
+
+				if ($kind == "fg" || $kind == "bg") {
+					db_query($link, "UPDATE ttrss_labels2 SET
+						${kind}_color = '$color' WHERE id = '$id'
+						AND owner_uid = " . $_SESSION["uid"]);			
+				} else {
+					db_query($link, "UPDATE ttrss_labels2 SET
+						fg_color = '$fg', bg_color = '$bg' WHERE id = '$id'
+						AND owner_uid = " . $_SESSION["uid"]);			
+				}
 			}
 
 			return;
@@ -112,31 +121,49 @@
 			$label_search = $_SESSION["prefs_label_search"];
 		}
 
-		print "<div id=\"colorPicker\" style=\"display : none\">";
-		
-		$color_picker_pairs = array(
-			array('#063064', '#fff7d5'),
-			array('#ffffff', '#00ccff'),
-			array('#ffffff', '#cc00ff'),
-			array('#ffffff', '#00ffcc'),
-			array('#ffffff', '#0000ff'),
-			array('#ffffff', '#ff00ff'),
-			array('#ffffff', '#ff0000'),
-			array('#394f00', '#ccff00'));
-
-		foreach ($color_picker_pairs as $c) { 
-			$fg_color = $c[0];
-			$bg_color = $c[1];
-
-			print "<div class='colorPickerEntry' 
-				style='color : $fg_color; background-color : $bg_color;'
-				onclick=\"colorPickerDo('$fg_color', '$bg_color')\">z</div>";
+		function print_color_picker($id) {
 
-		}
+			print "<div id=\"colorPicker-$id\" 
+				onmouseover=\"colorPickerActive(true)\"
+				onmouseout=\"colorPickerActive(false)\"
+				class=\"colorPicker\" style='display : none'>";
+	
+			$color_picker_pairs = array(
+				array('#ff0000', '#ffffff'),
+				array('#009000', '#ffffff'),
+				array('#0000ff', '#ffffff'),	
+				array('#ff00ff', '#ffffff'),	
+				array('#009090', '#ffffff'),
+				array('#ffffff', '#ff0000'),
+				array('#000000', '#00ff00'),
+				array('#ffffff', '#0000ff'),
+				array('#ffffff', '#ff00ff'),
+				array('#000000', '#00ffff'),
+				array('#000000', '#ffffff'),
+				array('#ffffff', '#000000'),
+				array('#ffffff', '#909000'),
+				array('#063064', '#fff7d5'),
+				array('#ffffff', '#4E4E90'),
+			);
+	
+			foreach ($color_picker_pairs as $c) { 
+				$fg_color = $c[0];
+				$bg_color = $c[1];
+	
+				print "<div class='colorPickerEntry' 
+					style='color : $fg_color; background-color : $bg_color;'
+					onclick=\"colorPickerDo('$id', '$fg_color', '$bg_color')\">&alpha;</div>";
+	
+			}
+	
+			print "<br clear='both'>";
 
-		print "<br clear='both'>";
+			print "<br/><b>".__('custom color:')."</b>";
+			print "<div class=\"ccPrompt\" onclick=\"labelColorAsk('$id', 'fg')\">".__("foreground")."</div>";
+			print "<div class=\"ccPrompt\" onclick=\"labelColorAsk('$id', 'bg')\">".__("background")."</div>";
 
-		print "</div>";
+			print "</div>";
+		}
 
 		print "<div class=\"feedEditSearch\">
 			<input id=\"label_search\" size=\"20\" type=\"search\"
@@ -217,7 +244,9 @@
 
 				print "<div class='labelColorIndicator' id='LICID-$id' 
 					style='color : $fg_color; background-color : $bg_color'
-					onclick=\"colorPicker(this, '$id', '$fg_color', '$bg_color')\">&alpha;</div>&nbsp;";
+					onclick=\"colorPicker('$id', '$fg_color', '$bg_color')\">&alpha;";
+				print_color_picker($id);
+				print "</div>";
 
 
 				print "<span class='prefsLabelEntry' 
@@ -238,14 +267,13 @@
 			print "<input type=\"submit\" class=\"button\" disabled=\"true\"
 				onclick=\"javascript:removeSelectedLabels()\" value=\"".__('Remove')."\">";
 
-			print "&nbsp;&nbsp;";
-			print __("Color:");
-			print "&nbsp;<input type=\"submit\" class=\"button\" disabled=\"true\"
+			print "&nbsp;";
+/*			print "&nbsp;<input type=\"submit\" class=\"button\" disabled=\"true\"
 				onclick=\"labelColorSet('fg')\" value=\"".__('Fg')."\">&nbsp;";
 			print "<input type=\"submit\" class=\"button\" disabled=\"true\"
-				onclick=\"labelColorSet('bg')\" value=\"".__('Bg')."\">&nbsp;";
+				onclick=\"labelColorSet('bg')\" value=\"".__('Bg')."\">&nbsp;"; */
 			print "<input type=\"submit\" class=\"button\" disabled=\"true\"
-				onclick=\"labelColorReset()\" value=\"".__('Clear')."\">";
+				onclick=\"labelColorReset()\" value=\"".__('Clear colors')."\">";
 
 			print "</p>";
 
diff --git a/prefs.js b/prefs.js
index 782c2d4ea..3a43851df 100644
--- a/prefs.js
+++ b/prefs.js
@@ -7,6 +7,10 @@ var caller_subop = false;
 var sanity_check_done = false;
 var hotkey_prefix = false;
 
+var color_picker_active = false;
+var selection_disabled = false;
+var mouse_is_down = false;
+
 function replace_pubkey_callback(transport) {
 	try {	
 		var link = document.getElementById("pubGenAddress");
@@ -1175,6 +1179,8 @@ function init_second_stage() {
 		if (!active_tab || active_tab == '0') active_tab = "genConfig";
 
 		document.onkeydown = pref_hotkey_handler;
+		document.onmousedown = mouse_down_handler;
+		document.onmouseup = mouse_up_handler;
 
 		var tab = getURLParam('tab');
 		
@@ -1418,6 +1424,7 @@ function pref_hotkey_handler(e) {
 			if (Element.visible("hotkey_help_overlay")) {
 				Element.hide("hotkey_help_overlay");
 			}
+			colorPickerHideAll();
 			hotkey_prefix = false;
 			closeInfoBox();
 		} 
@@ -1983,7 +1990,7 @@ function labelColorReset() {
 	try {
 		var labels = getSelectedLabels();
 
-		var ok = confirm(__("Clear colors of labels?"));
+		var ok = confirm(__("Reset label colors to default?"));
 
 		if (ok) {
 
@@ -2001,9 +2008,8 @@ function labelColorReset() {
 	}
 }
 
-function labelColorSet(kind) {
+function labelColorAsk(id, kind) {
 	try {
-		var labels = getSelectedLabels();
 
 		var p = null
 
@@ -2016,18 +2022,17 @@ function labelColorSet(kind) {
 		if (p != null) {
 
 			var query = "backend.php?op=pref-labels&subop=color-set&kind=" + kind +
-				"&ids="+	param_escape(labels.toString()) + "&color=" + param_escape(p);
+				"&ids="+	param_escape(id) + "&color=" + param_escape(p);
 
 			selectPrefRows('label', false);
 
-			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;
-					}
+			var e = document.getElementById("LICID-" + id);
+
+			if (e) {		
+				if (kind == "fg") {
+					e.style.color = p
+				} else {
+					e.style.backgroundColor = p;
 				}
 			}
 
@@ -2040,16 +2045,90 @@ function labelColorSet(kind) {
 }
 
 
-/*
-function colorPicker(caller, id, fg, bg) {
+function colorPicker(id, fg, bg) {
 	try {
-		var picker = document.getElementById("colorPicker");
-
+		var picker = document.getElementById("colorPicker-" + id);
 
-		picker.style.left = caller.offsetLeft;
-		picker.style.top = caller.offsetTop;
+		if (picker) Element.show(picker);
 
 	} catch (e) {
 		exception_error("colorPicker", e);
 	}
-}*/
+}
+
+function colorPickerHideAll() {
+	try {
+		if (document.getElementById("prefLabelList")) {
+
+			var elems = document.getElementById("prefLabelList").getElementsByTagName("DIV");
+
+			for (var i = 0; i < elems.length; i++) {
+				if (elems[i].id && elems[i].id.match("colorPicker-")) {
+					Element.hide(elems[i]);
+				}
+			}
+		}
+
+	} catch (e) {
+		exception_error("colorPickerHideAll", e);
+	}
+}
+
+function colorPickerDo(id, fg, bg) {
+	try {
+
+		var query = "backend.php?op=pref-labels&subop=color-set&kind=both"+
+			"&ids=" + param_escape(id) + "&fg=" + param_escape(fg) + 
+			"&bg=" + param_escape(bg);
+
+		var e = document.getElementById("LICID-" + id);
+
+		if (e) {		
+			e.style.color = fg;
+			e.style.backgroundColor = bg;
+		}
+
+		new Ajax.Request(query);
+
+	} catch (e) {
+		exception_error("colorPickerDo", e);
+	}
+}
+
+function colorPickerActive(b) {
+	color_picker_active = b;
+}
+
+function mouse_down_handler(e) {
+	try {
+
+		/* do not prevent right click */
+		if (e.button && e.button == 2) return;
+
+		if (selection_disabled) {
+			document.onselectstart = function() { return false; };
+			return false;
+		}
+
+	} catch (e) {
+		exception_error("mouse_move_handler", e);
+	}
+}
+
+function mouse_up_handler(e) {
+	try {
+		mouse_is_down = false;
+
+		if (!selection_disabled) {
+			document.onselectstart = null;
+		}
+
+		if (!color_picker_active) {
+			colorPickerHideAll();
+		}
+
+	} catch (e) {
+		exception_error("mouse_move_handler", e);
+	}
+}
+
diff --git a/tt-rss.css b/tt-rss.css
index fd1e0787f..95938bc91 100644
--- a/tt-rss.css
+++ b/tt-rss.css
@@ -2101,9 +2101,18 @@ div.labelColorIndicator {
 	float : left;
 	background-color : #fff7d5;	
 	color : #063064;
+	margin-right : 10px;
+}
+
+div.colorPicker div.colorPickerEntry:hover {
+	border : 1px solid #88b0f0;
 }
 
-div.colorPickerEntry {
+div.colorPicker div.ccPrompt:hover {
+	color : black;
+}
+
+div.colorPicker div.colorPickerEntry {
 	height : 15px;
 	width : 15px;
 	line-height : 13px;
@@ -2114,15 +2123,16 @@ div.colorPickerEntry {
 	float : left;
 }
 
-div#colorPicker {
+div.colorPicker {
 	border : 1px solid #cccccc;
 	background : #f0f0f0;
 	width : 110px;
 	padding : 0px 0px 5px 5px;
 	position : absolute;
-	left : 150px;
-	top : 50px;
+	left : auto;
+	top : auto;
 	z-index : 3;
+	color : #909090;
 }