mirror of https://tt-rss.org/git/tt-rss.git
proper color editor for labels
This commit is contained in:
Andrew Dolgov
parent
aec9df485d
commit
b6ba48c1fd
|
|
@ -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 "<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'));
|
||||
function print_color_picker($id) {
|
||||
|
||||
foreach ($color_picker_pairs as $c) {
|
||||
$fg_color = $c[0];
|
||||
$bg_color = $c[1];
|
||||
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')\">α</div>";
|
||||
|
||||
}
|
||||
|
||||
print "<br clear='both'>";
|
||||
|
||||
print "<div class='colorPickerEntry'
|
||||
style='color : $fg_color; background-color : $bg_color;'
|
||||
onclick=\"colorPickerDo('$fg_color', '$bg_color')\">z</div>";
|
||||
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 "<br clear='both'>";
|
||||
|
||||
print "</div>";
|
||||
|
||||
print "<div class=\"feedEditSearch\">
|
||||
<input id=\"label_search\" size=\"20\" type=\"search\"
|
||||
onfocus=\"javascript:disableHotkeys();\"
|
||||
|
|
@ -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')\">α</div> ";
|
||||
onclick=\"colorPicker('$id', '$fg_color', '$bg_color')\">α";
|
||||
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 " ";
|
||||
print __("Color:");
|
||||
print " <input type=\"submit\" class=\"button\" disabled=\"true\"
|
||||
print " ";
|
||||
/* print " <input type=\"submit\" class=\"button\" disabled=\"true\"
|
||||
onclick=\"labelColorSet('fg')\" value=\"".__('Fg')."\"> ";
|
||||
print "<input type=\"submit\" class=\"button\" disabled=\"true\"
|
||||
onclick=\"labelColorSet('bg')\" value=\"".__('Bg')."\"> ";
|
||||
onclick=\"labelColorSet('bg')\" value=\"".__('Bg')."\"> "; */
|
||||
print "<input type=\"submit\" class=\"button\" disabled=\"true\"
|
||||
onclick=\"labelColorReset()\" value=\"".__('Clear')."\">";
|
||||
onclick=\"labelColorReset()\" value=\"".__('Clear colors')."\">";
|
||||
|
||||
print "</p>";
|
||||
|
||||
|
|
|
|||
117
prefs.js
117
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
18
tt-rss.css
18
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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue