Module: check_mk
Branch: master
Commit: aebc6727f245d39e3e300cfcd4d95ad66668b790
URL:
http://git.mathias-kettner.de/git/?p=check_mk.git;a=commit;h=aebc6727f245d3…
Author: Lars Michelsen <lm(a)mathias-kettner.de>
Date: Wed Mar 15 14:05:46 2017 +0100
4500 Graph designer: Hex codes can now be inserted into color picker manually
You can now either choose the color from the picker area or insert it into
the new hex color input field.
Change-Id: I294c8359bad39ada492b4b96839033fc48b53c9d
---
.werks/4500 | 11 +++++++++++
web/htdocs/check_mk.css | 10 ++++++++++
web/htdocs/js/checkmk.js | 15 +++++++++++++++
web/htdocs/valuespec.py | 24 +++++++++++++++++-------
4 files changed, 53 insertions(+), 7 deletions(-)
diff --git a/.werks/4500 b/.werks/4500
new file mode 100644
index 0000000..0234899
--- /dev/null
+++ b/.werks/4500
@@ -0,0 +1,11 @@
+Title: Graph designer: Hex codes can now be inserted into color picker manually
+Level: 1
+Component: metrics
+Compatible: compat
+Edition: cee
+Version: 1.5.0i1
+Date: 1489583045
+Class: feature
+
+You can now either choose the color from the picker area or insert it into
+the new hex color input field.
diff --git a/web/htdocs/check_mk.css b/web/htdocs/check_mk.css
index 6e3f3c7..11a89dc 100644
--- a/web/htdocs/check_mk.css
+++ b/web/htdocs/check_mk.css
@@ -733,6 +733,16 @@ table.data td .cp-preview {
background-color: black;
}
+.cp-input {
+ float: left;
+ margin-top: 2px;
+}
+
+.cp-input input {
+ margin-left: 2px;
+ width: 106px;
+}
+
div.popup_trigger.colorpicker .popup_menu {
top: 17px;
left: 26px;
diff --git a/web/htdocs/js/checkmk.js b/web/htdocs/js/checkmk.js
index 86e716a..454d594 100644
--- a/web/htdocs/js/checkmk.js
+++ b/web/htdocs/js/checkmk.js
@@ -2500,6 +2500,21 @@ function vs_autocomplete_close(input_id)
popup.parentNode.removeChild(popup);
}
+
+var vs_color_pickers = [];
+
+function vs_update_color_picker(varprefix, hex, update_picker) {
+ if (!/^#[0-9A-F]{6}$/i.test(hex))
+ return; // skip invalid/unhandled colors
+
+ document.getElementById(varprefix + "_input").value = hex;
+ document.getElementById(varprefix + "_value").value = hex;
+ document.getElementById(varprefix + "_preview").style.backgroundColor =
hex;
+
+ if (update_picker)
+ vs_color_pickers[varprefix].setHex(hex);
+}
+
//#.
//# .-Help Toggle--------------------------------------------------------.
//# | _ _ _ _____ _ |
diff --git a/web/htdocs/valuespec.py b/web/htdocs/valuespec.py
index ef175a4..e277b0b 100644
--- a/web/htdocs/valuespec.py
+++ b/web/htdocs/valuespec.py
@@ -4196,15 +4196,26 @@ class Color(ValueSpec):
class_="cp-preview",
style="background-color:%s" % value)
+
+ # TODO(rh): Please take a look at this hard coded HTML
# FIXME: Rendering with HTML class causes bug in html popup_trigger function.
# Reason is HTML class and the escaping.
- menu_content = "<div id=\"%s_picker\"
class=\"cp-small\"></div>" % varprefix
+ menu_content = "<div id=\"%s_picker\"
class=\"cp-small\"></div>" % varprefix
+ menu_content += "<div class=\"cp-input\">" \
+ "%s" \
+ "<input id=\"%s_input\"
type=\"text\"></input></div>" % \
+ (_("Hex color:"), varprefix)
+
menu_content += "<script language=\"javascript\">" \
- "ColorPicker(document.getElementById(\"%s_picker\")," \
- " function(hex, hsv, rgb) {" \
- " document.getElementById(\"%s_value\").value =
hex;" \
- "
document.getElementById(\"%s_preview\").style.backgroundColor = hex;" \
- "}).setHex(\"%s\");</script>" % (varprefix,
varprefix, varprefix, value)
+ "vs_color_pickers[\"%s\"] =
ColorPicker(document.getElementById(\"%s_picker\")," \
+ " function(hex, hsv, rgb) {
vs_update_color_picker(\"%s\", hex, false); }" \
+ ");" \
+ "document.getElementById(\"%s_input\").oninput = function() {
" \
+ " vs_update_color_picker(\"%s\", this.value, true); "
\
+ "};" \
+ "vs_update_color_picker(\"%s\", \"%s\", true);"
\
+ "</script>" % \
+ (varprefix, varprefix, varprefix, varprefix, varprefix, varprefix,
value)
html.popup_trigger(indicator, varprefix + '_popup',
menu_content=menu_content,
@@ -4212,7 +4223,6 @@ class Color(ValueSpec):
onclose=self._on_change)
-
def from_html_vars(self, varprefix):
color = html.var(varprefix + '_value')
if color == '':