From b6ba48c1fd39f6e472a5394810be7b4f0bad87b3 Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Mon, 26 Jan 2009 17:46:23 +0100 Subject: [PATCH] proper color editor for labels --- modules/pref-labels.php | 88 +++++++++++++++++++----------- prefs.js | 117 +++++++++++++++++++++++++++++++++------- tt-rss.css | 18 +++++-- 3 files changed, 170 insertions(+), 53 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,32 +121,50 @@ $label_search = $_SESSION["prefs_label_search"]; } - print "
"; - - $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')); + function print_color_picker($id) { - foreach ($color_picker_pairs as $c) { - $fg_color = $c[0]; - $bg_color = $c[1]; + print ""; } - print "
"; - - print "
"; - print "
α
 "; + onclick=\"colorPicker('$id', '$fg_color', '$bg_color')\">α"; + print_color_picker($id); + print ""; print ""; - print "  "; - print __("Color:"); - print "  "; print " "; + onclick=\"labelColorSet('bg')\" value=\"".__('Bg')."\"> "; */ print ""; + onclick=\"labelColorReset()\" value=\"".__('Clear colors')."\">"; print "

"; 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.colorPickerEntry { +div.colorPicker div.colorPickerEntry:hover { + border : 1px solid #88b0f0; +} + +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; }