update label editor

diff --git a/PrefLabelTree.js b/PrefLabelTree.js
new file mode 100644 (file)
index 0000000..47e1878
--- /dev/null
+++ b/PrefLabelTree.js
@@ -0,0 +1,51 @@
+dojo.provide("fox.PrefLabelTree");
+
+dojo.require("lib.CheckBoxTree");
+dojo.require("dijit.form.DropDownButton");
+
+dojo.declare("fox.PrefLabelTree", lib.CheckBoxTree, {
+       setNameById: function (id, name) {
+               var item = this.model.store._itemsByIdentity['LABEL:' + id];
+
+               if (item)
+                       this.model.store.setValue(item, 'name', name);
+
+       },
+       _createTreeNode: function(args) {
+               var tnode = this.inherited(arguments);
+
+               var fg_color = this.model.store.getValue(args.item, 'fg_color');
+               var bg_color = this.model.store.getValue(args.item, 'bg_color');
+               var type = this.model.store.getValue(args.item, 'type');
+               var bare_id = this.model.store.getValue(args.item, 'bare_id');
+
+               if (type == 'label') {
+                       var span = dojo.doc.createElement('span');
+                       span.innerHTML = 'α';
+                       span.className = 'labelColorIndicator2';
+                       span.id = 'LICID-' + bare_id;
+
+                       span.setStyle({
+                               color: fg_color,
+                               backgroundColor: bg_color});
+
+                       tnode._labelIconNode = span;
+
+                       dojo.place(tnode._labelIconNode, tnode.labelNode, 'before');
+               }
+
+               return tnode;
+       },
+       getIconClass: function (item, opened) {
+               return (!item || this.model.mayHaveChildren(item)) ? (opened ? "dijitFolderOpened" : "dijitFolderClosed") : "invisible";
+       }, 
+       onClick: function (item) {
+               var id = String(item.id);
+               var bare_id = id.substr(id.indexOf(':')+1);
+
+               if (id.match('LABEL:')) {
+                       editLabel(bare_id, event);
+               }                       
+       },
+});
+

diff --git a/modules/pref-labels.php b/modules/pref-labels.php
index 467928416a44c929f6b8a89b96a38fa1f1b2661d..386b9c6a2817435484f6e8e270e02521e337013d 100644 (file)
--- a/modules/pref-labels.php
+++ b/modules/pref-labels.php
@@ -3,6 +3,114 @@
 
                $subop = $_REQUEST["subop"];
 
+               if ($subop == "edit") {
+                       $label_id = db_escape_string($_REQUEST['id']);
+
+                       header("Content-Type: text/xml");
+                       print "<dlg id=\"$subop\">";
+                       print "<title>" . __("Label Editor") . "</title>";
+                       print "<content><![CDATA[";
+
+                       $result = db_query($link, "SELECT * FROM ttrss_labels2 WHERE
+                               id = '$label_id' AND owner_uid = " . $_SESSION["uid"]);
+
+                       $line = db_fetch_assoc($result);
+
+                       print "<div class=\"dlgSec\">".__("Caption")."</div>";
+
+                       print "<div class=\"dlgSecCont\">";
+
+                       print "<span dojoType=\"dijit.InlineEditBox\" style=\"font-size : 18px;\"
+                               width=\"150px\" autoSave=\"false\"
+                               label-id=\"$label_id\">" . $line["caption"] . 
+                               "<script type=\"dojo/method\" event=\"onChange\" args=\"item\">
+                                       var elem = this;
+                                       dojo.xhrPost({
+                                               url: 'backend.php',
+                                               content: {op: 'pref-labels', subop: 'save',
+                                                       value: this.value,
+                                                       id: this.srcNodeRef.getAttribute('label-id')},
+                                                       load: function(response) {
+                                                               elem.attr('value', response);
+                                                               dijit.byId('labelTree').setNameById($label_id, response);
+                                                               updateFilterList();
+                                                       }
+                                       });     
+                               </script>
+                       </span>";
+
+                       print "</div>";
+                       print "<div class=\"dlgSec\">" . __("Change colors") . "</div>";
+                       print "<div class=\"dlgSecCont\">";
+
+                       print "<table cellspacing=\"5\"><th>";
+
+                       print "<tr><td>".__("Foreground color:")."</td><td>".__("Background color:").
+                               "</td></tr>";
+
+                       print "</th><tr><td>";
+
+                       print "<div dojoType=\"dijit.ColorPalette\">
+                               <script type=\"dojo/method\" event=\"onChange\" args=\"fg_color\">
+                                       setLabelColor('$label_id', fg_color, null);
+                               </script>
+                       </div>";
+                       print "</div>";
+
+                       print "</td><td>";
+
+                       print "<div dojoType=\"dijit.ColorPalette\">
+                               <script type=\"dojo/method\" event=\"onChange\" args=\"bg_color\">
+                                       setLabelColor('$label_id', null, bg_color);
+                               </script>
+                       </div>";
+                       print "</div>";
+
+                       print "</td></tr></table>";
+                       print "</div>";
+
+                       print "<div class=\"dlgButtons\" style=\"text-align : center\">";
+                       print "<button onclick=\"return closeInfoBox()\">".
+                               __('Close this window')."</button>";
+                       print "</div>";
+
+                       print "]]></content></dlg>";
+                       return;
+               }
+
+               if ($subop == "getlabeltree") {
+                       $root = array();
+                       $root['id'] = 'root';
+                       $root['name'] = __('Labels');
+                       $root['items'] = array();
+
+                       $result = db_query($link, "SELECT *
+                               FROM ttrss_labels2
+                               WHERE owner_uid = ".$_SESSION["uid"]."
+                               ORDER BY caption");
+
+                       while ($line = db_fetch_assoc($result)) {
+                               $label = array();
+                               $label['id'] = 'LABEL:' . $line['id'];
+                               $label['bare_id'] = $line['id'];
+                               $label['name'] = $line['caption'];
+                               $label['fg_color'] = $line['fg_color'];
+                               $label['bg_color'] = $line['bg_color'];
+                               $label['type'] = 'label';
+                               $label['checkbox'] = false;
+
+                               array_push($root['items'], $label);
+                       }
+
+                       $fl = array();
+                       $fl['identifier'] = 'id';
+                       $fl['label'] = 'name';
+                       $fl['items'] = array($root);
+
+                       print json_encode($fl);
+                       return;
+               }
+
                if ($subop == "color-set") {
                        $kind = db_escape_string($_REQUEST["kind"]);
                        $ids = split(',', db_escape_string($_REQUEST["ids"]));
@@ -154,21 +262,12 @@
                print "<div id=\"pref-label-header\" dojoType=\"dijit.layout.ContentPane\" region=\"top\">";
                print "<div id=\"pref-label-toolbar\" dojoType=\"dijit.Toolbar\">";
 
-               print "<div style='float : right; padding-right : 4px'>
-                       <input id=\"label_search\" size=\"20\" type=\"search\"
-                               dojoType=\"dijit.form.TextBox\"
-                               onfocus=\"javascript:disableHotkeys();\" 
-                               onblur=\"javascript:enableHotkeys();\"
-                               onchange=\"javascript:updateLabelList()\" value=\"$label_search\">
-                       <button dojoType=\"dijit.form.Button\" onclick=\"javascript:updateLabelList()\">".__('Search')."</button>
-                       </div>";
-
                print "<div dojoType=\"dijit.form.DropDownButton\">".
                                "<span>" . __('Select')."</span>";
                print "<div dojoType=\"dijit.Menu\" style=\"display: none;\">";
-               print "<div onclick=\"selectTableRows('prefLabelList', 'all')\" 
+               print "<div onclick=\"dijit.byId('labelTree').model.setAllChecked(true)\" 
                        dojoType=\"dijit.MenuItem\">".__('All')."</div>";
-               print "<div onclick=\"selectTableRows('prefLabelList', 'none')\" 
+               print "<div onclick=\"dijit.byId('labelTree').model.setAllChecked(false)\" 
                        dojoType=\"dijit.MenuItem\">".__('None')."</div>";
                print "</div></div>";
 
@@ -186,170 +285,26 @@
                print "</div>"; #pane
                print "<div id=\"pref-label-content\" dojoType=\"dijit.layout.ContentPane\" region=\"center\">";
 
-               if ($label_search) {
-
-                       $label_search = split(" ", $label_search);
-                       $tokens = array();
-
-                       foreach ($label_search as $token) {
-
-                               $token = trim($token);
-                               array_push($tokens, "(UPPER(caption) LIKE UPPER('%$token%'))");
-
-                       }
-
-                       $label_search_query = "(" . join($tokens, " AND ") . ") AND ";
-                       
-               } else {
-                       $label_search_query = "";
-               }
-
-               $result = db_query($link, "SELECT 
-                               *
-                       FROM 
-                               ttrss_labels2
-                       WHERE 
-                               $label_search_query
-                               owner_uid = ".$_SESSION["uid"]."
-                       ORDER BY $sort");
-
-               if (db_num_rows($result) != 0) {
-
-                       print "<p><table width=\"100%\" cellspacing=\"0\" 
-                               class=\"prefLabelList\" id=\"prefLabelList\">";
-
-                       $lnum = 0;
-                       
-                       while ($line = db_fetch_assoc($result)) {
-       
-                               $class = ($lnum % 2) ? "even" : "odd";
-       
-                               $label_id = $line["id"];
-                               $this_row_id = "id=\"LILRR-$label_id\"";
-
-                               print "<tr class=\"$class\" $this_row_id>";
-       
-                               $line["caption"] = htmlspecialchars($line["caption"]);
-
-                               $fg_color = $line["fg_color"];
-                               $bg_color = $line["bg_color"];
-
-                               if (!$fg_color) $fg_color = "";
-                               if (!$bg_color) $bg_color = "";
-
-                               print "<td width='5%' align='center'><input 
-                                       onclick='toggleSelectRow(this);' 
-                                       type=\"checkbox\" id=\"LICHK-".$line["id"]."\"></td>";
-       
-                               $id = $line['id'];
-
-                               print "<td>";
-
-                               print "<div class='labelColorIndicator' id='LICID-$id' 
-                                       style='color : $fg_color; background-color : $bg_color'
-                                       title='".__('Click to change color')."'
-                                       onclick=\"colorPicker('$id', '$fg_color', '$bg_color')\">&alpha;";
-                               print_color_picker($id);
-                               print "</div>";
-
-                               print "<span dojoType=\"dijit.InlineEditBox\" 
-                                       width=\"300px\" autoSave=\"false\"
-                                       label-id=\"".$line["id"]."\">" . $line["caption"] . 
-                                       "<script type=\"dojo/method\" event=\"onChange\" args=\"item\">
-                                               var elem = this;
-                                               dojo.xhrPost({
-                                                       url: 'backend.php',
-                                                       content: {op: 'pref-labels', subop: 'save',
-                                                               value: this.value,
-                                                               id: this.srcNodeRef.getAttribute('label-id')},
-                                                               load: function(response) {
-                                                                       elem.attr('value', response);
-                                                       }
-                                               });     
-                                       </script>
-                               </span>";
-
-                               print "</td>";
-
-                               print "</tr>";
-       
-                               ++$lnum;
-                       }
-
-                       print "</table>";
-       
-
-               } else {
-                       print "<p>";
-                       if (!$label_search) {
-                               print_warning(__('No labels defined.'));
-                       } else {
-                               print_warning(__('No matching labels found.'));
-                       }
-                       print "</p>";
-
-               }
+               print "<div id=\"labellistLoading\">
+               <img src='images/indicator_tiny.gif'>".
+                __("Loading, please wait...")."</div>";
+
+               print "<div dojoType=\"dojo.data.ItemFileWriteStore\" jsId=\"labelStore\" 
+                       url=\"backend.php?op=pref-labels&subop=getlabeltree\">
+               </div>
+               <div dojoType=\"lib.CheckBoxStoreModel\" jsId=\"labelModel\" store=\"labelStore\"
+               query=\"{id:'root'}\" rootId=\"root\"
+                       childrenAttrs=\"items\" checkboxStrict=\"false\" checkboxAll=\"false\">
+               </div>
+               <div dojoType=\"fox.PrefLabelTree\" id=\"labelTree\" 
+                       model=\"labelModel\" openOnClick=\"true\">
+               <script type=\"dojo/method\" event=\"onLoad\" args=\"item\">
+                       Element.hide(\"labellistLoading\");
+               </script>
+               </div>";
 
                print "</div>"; #pane
                print "</div>"; #container
        }
 
-       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('#7b07e1', '#ffffff'),
-                       array('#0091b4', '#ffffff'),
-                       array('#00aa71', '#ffffff'),
-                       array('#7d9e01', '#ffffff'),
-                       array('#e14a00', '#ffffff'),
-
-                       array('#ffffff', '#7b07e1'),
-                       array('#ffffff', '#00b5e1'),
-                       array('#ffffff', '#00e196'),
-                       array('#ffffff', '#b3e100'),
-                       array('#ffffff', '#e14a00'),
-
-                       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/><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>";
-       }
-
 ?>

diff --git a/prefs.js b/prefs.js
index 30b587775f027fea763785a129513bb5388b1534..c959e5dfa32b6ddd4640f44683861605210d09ea 100644 (file)
--- a/prefs.js
+++ b/prefs.js
@@ -6,10 +6,6 @@ var caller_subop = false;
 var hotkey_prefix = false;
 var hotkey_prefix_pressed = false;
 
-var color_picker_active = false;
-var selection_disabled = false;
-var mouse_is_down = false;
-
 var seq = "";
 
 function feedlist_callback2(transport) {
@@ -358,7 +354,15 @@ function editFeed(feed, event) {
 }
 
 function getSelectedLabels() {
-       return getSelectedTableRowIds("prefLabelList");
+       var tree = dijit.byId("labelTree");
+       var items = tree.model.getCheckedItems();
+       var rv = [];
+
+       items.each(function(item) {
+               rv.push(tree.model.store.getValue(item, 'bare_id'));
+       });
+
+       return rv;
 }
 
 function getSelectedUsers() {
@@ -1061,8 +1065,6 @@ function init_second_stage() {
        try {
 
                document.onkeydown = pref_hotkey_handler;
-               document.onmousedown = mouse_down_handler;
-               document.onmouseup = mouse_up_handler;
 
                caller_subop = getURLParam('subop');
 
@@ -1119,6 +1121,7 @@ function init() {
                dojo.require("dijit.Menu");
                dojo.require("dijit.tree.dndSource");
                dojo.require("dijit.InlineEditBox");
+               dojo.require("dijit.ColorPalette");
 
                dojo.registerModulePath("lib", "..");
                dojo.registerModulePath("fox", "../..");
@@ -1126,6 +1129,7 @@ function init() {
                dojo.require("lib.CheckBoxTree");
                dojo.require("fox.PrefFeedTree");
                dojo.require("fox.PrefFilterTree");
+               dojo.require("fox.PrefLabelTree");
 
                loading_set_progress(30);
 
@@ -1201,7 +1205,6 @@ function pref_hotkey_handler(e) {
                        if (Element.visible("hotkey_help_overlay")) {
                                Element.hide("hotkey_help_overlay");
                        }
-                       colorPickerHideAll();
                        hotkey_prefix = false;
                        closeInfoBox();
                } 
@@ -1465,11 +1468,6 @@ function changeUserEmail() {
 
 }
 
-function feedlistToggleSLAT() {
-       notify_progress("Loading, please wait...");
-       updateFeedList()
-}
-
 function opmlRegenKey() {
 
        try {
@@ -1781,127 +1779,41 @@ function labelColorReset() {
        }
 }
 
-function labelColorAsk(id, kind) {
+function setLabelColor(id, fg, bg) {
        try {
 
-               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 = "?op=pref-labels&subop=color-set&kind=" + kind +
-                               "&ids="+        param_escape(id) + "&color=" + param_escape(p);
-
-                       selectTableRows('prefLabelList', 'none');
-
-                       var e = $("LICID-" + id);
-
-                       if (e) {                
-                               if (kind == "fg") {
-                                       e.style.color = p
-                               } else {
-                                       e.style.backgroundColor = p;
-                               }
-                       }
-
-                       new Ajax.Request("backend.php", { parameters: query });
+               var kind = '';
+               var color = '';
+
+               if (fg && bg) {
+                       kind = 'both';
+               } else if (fg) {
+                       kind = 'fg';
+                       color = fg;
+               } else if (bg) {
+                       kind = 'bg';
+                       color = bg;
                }
 
-       } catch (e) {
-               exception_error("labelColorReset", e);
-       }
-}
-
-
-function colorPicker(id, fg, bg) {
-       try {
-               var picker = $("colorPicker-" + id);
-
-               if (picker) Element.show(picker);
-
-       } catch (e) {
-               exception_error("colorPicker", e);
-       }
-}
-
-function colorPickerHideAll() {
-       try {
-               if ($("prefLabelList")) {
-
-                       var elems = $("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 = "?op=pref-labels&subop=color-set&kind=both"+
+               var query = "?op=pref-labels&subop=color-set&kind="+kind+
                        "&ids=" + param_escape(id) + "&fg=" + param_escape(fg) + 
-                       "&bg=" + param_escape(bg);
+                       "&bg=" + param_escape(bg) + "&color=" + param_escape(color);
+
+//             console.log(query);
 
                var e = $("LICID-" + id);
 
                if (e) {                
-                       e.style.color = fg;
-                       e.style.backgroundColor = bg;
+                       if (fg) e.style.color = fg;
+                       if (bg) e.style.backgroundColor = bg;
                }
 
                new Ajax.Request("backend.php", { parameters: 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 && e.button && e.button == 2) return;
-
-               if (selection_disabled) {
-                       document.onselectstart = function() { return false; };
-                       return false;
-               }
-
-       } catch (e) {
-               exception_error("mouse_down_handler", e);
-       }
-}
-
-function mouse_up_handler(e) {
-       try {
-               mouse_is_down = false;
-
-               if (!selection_disabled) {
-                       document.onselectstart = null;
-               }
-
-               if (!color_picker_active) {
-                       colorPickerHideAll();
-               }
+               updateFilterList();
 
        } catch (e) {
-               exception_error("mouse_up_handler", e);
+               exception_error("colorPickerDo", e);
        }
 }
 
@@ -2051,3 +1963,21 @@ function editCat(id, item, event) {
                exception_error("editCat", e);
        }
 }
+
+function editLabel(id, event) {
+       try {
+               var query = "?op=pref-labels&subop=edit&id=" +
+                       param_escape(id);
+
+               notify_progress("Loading, please wait...", true);
+
+               new Ajax.Request("backend.php", {
+                       parameters: query,
+                       onComplete: function(transport) {
+                               infobox_callback2(transport);
+                       } });
+
+       } catch (e) {
+               exception_error("editLabel", e);
+       }
+}

diff --git a/tt-rss.css b/tt-rss.css
index 0eba89c1315e95733109d5f97e2d27244d796909..55c1871a7bc45be8f491d61591dd0ca9234c0b48 100644 (file)
--- a/tt-rss.css
+++ b/tt-rss.css
@@ -1284,6 +1284,20 @@ span.labelColorIndicator {
        margin-right : 2px;
 }
 
+span.labelColorIndicator2 {
+       height : 14px;
+       width : 14px;
+       font-height : 9px;
+       display : inline-block;
+       border : 1px solid black;
+       background-color : #fff7d5;     
+       color : #063064;
+       text-align : center;
+       margin-right : 2px;
+       vertical-align : bottom;
+}
+
+
 div.labelColorIndicator {
        height : 14px;
        width : 14px;
@@ -1543,13 +1557,13 @@ img.feedIcon, img.tinyFeedIcon {
        height : 16px;
 }
 
-div#feedlistLoading, div#filterlistLoading {
+div#feedlistLoading, div#filterlistLoading, div#labellistLoading {
        text-align : center;
        padding : 5px;
        color : gray;
 }
 
-div#feedlistLoading img, div#filterlistLoading img {
+div#feedlistLoading img, div#filterlistLoading img, div#labellistLoading {
        margin-right : 5px;
 }