valvin
/
ttrss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

proper color editor for labels

This commit is contained in:
Andrew Dolgov 2009-01-26 17:46:23 +01:00
parent aec9df485d
commit b6ba48c1fd
3 changed files with 170 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
modules/pref-labels.php
View File

@ -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) {
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,17 +121,30 @@
$label_search = $_SESSION["prefs_label_search"];
}
print "<div id=\"colorPicker\" style=\"display : none\">";
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('#063064', '#fff7d5'),
array('#ffffff', '#00ccff'),
array('#ffffff', '#cc00ff'),
array('#ffffff', '#00ffcc'),
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('#ffffff', '#ff0000'),
array('#394f00', '#ccff00'));
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];
@ -130,13 +152,18 @@
print "<div class='colorPickerEntry'
style='color : $fg_color; background-color : $bg_color;'
onclick=\"colorPickerDo('$fg_color', '$bg_color')\">z</div>";
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>";
}
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>";

109
prefs.js
View File

@ -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,20 +2022,19 @@ 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]);
var e = document.getElementById("LICID-" + id);
if (e) {
if (kind == "fg") {
e.style.color = p;
e.style.color = p
} else {
e.style.backgroundColor = p;
}
}
}
new Ajax.Request(query);
}
@ -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);
}
}

18
tt-rss.css
View File

@ -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;
}