proper color editor for labels

diff --git a/modules/pref-labels.php b/modules/pref-labels.php
index 66753df9a1a31b55b0da349e18e304f0fe3278ec..ffaea56fba72b5952b58b68eef112f4a7295eaa9 100644 (file)
--- 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 782c2d4eab46e9c2cb5dc9d750a402085aec60f0..3a43851df6344b39051429c596a831629ac7ee82 100644 (file)
--- 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 fd1e0787f9b2a5e912791187a32e5ea4f0433d20..95938bc910cb02a89e5f4725b8593526f83c9847 100644 (file)
--- 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;
 }