diff options
| -rw-r--r-- | PrefLabelTree.js | 51 | ||||
| -rw-r--r-- | modules/pref-labels.php | 299 | ||||
| -rw-r--r-- | prefs.js | 168 | ||||
| -rw-r--r-- | tt-rss.css | 18 |
4 files changed, 243 insertions, 293 deletions
diff --git a/PrefLabelTree.js b/PrefLabelTree.js new file mode 100644 index 000000000..47e18780a --- /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 467928416..386b9c6a2 100644 --- 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')\">α"; - 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')\">α</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>"; - } - ?> @@ -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 0eba89c13..55c1871a7 100644 --- 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; } |