13 Apr
2017
13 Apr
'17
8:30 a.m.
Module: check_mk
Branch: master
Commit: f46065c934175f60b2acd30382694e284edceb96
URL:
http://git.mathias-kettner.de/git/?p=check_mk.git;a=commit;h=f46065c934175f…
Author: Lars Michelsen <lm(a)mathias-kettner.de>
Date: Wed Apr 12 12:28:37 2017 +0200
Refactored on/off toggle swithch to be pure HTML/CSS rendered
Change-Id: Iab136adfc92cb62e40255f675202b185709e679a
---
web/htdocs/check_mk.css | 56 +++++++++++++++++++++++++
web/htdocs/htmllib.py | 20 +++++++++
web/htdocs/images/button_snapin_switch_off.png | Bin 972 -> 0 bytes
web/htdocs/images/button_snapin_switch_on.png | Bin 1085 -> 0 bytes
web/htdocs/wato.css | 1 -
web/htdocs/wato.py | 11 ++---
web/plugins/sidebar/shipped.py | 13 +++---
7 files changed, 89 insertions(+), 12 deletions(-)
diff --git a/web/htdocs/check_mk.css b/web/htdocs/check_mk.css
index 95fdc79..1a4c300 100644
--- a/web/htdocs/check_mk.css
+++ b/web/htdocs/check_mk.css
@@ -205,6 +205,62 @@ input.button.hot:active {
border-color: #6d5723 #d9bf81 #d9bf81 #6d5723;
}
+/* on/off toggle button */
+
+.toggle_switch {
+ border-color: #1b333d #264c18 #1b333d #274141;
+ border-radius: 4px;
+ border-style: solid;
+ border-width: 1px;
+ box-shadow: 0 0 1px rgba(255, 255, 255, 0.8),
+ 1px 1px 0px 0px rgba(0, 0, 0, 0.4) inset;
+
+ background-color: #427b94;
+
+ width: 56px;
+ height: 12px;
+}
+
+.toggle_switch a,
+.wato div.globalvars .toggle_switch a {
+ display: block;
+
+ border-color: #1b333d #264c18 #1b333d #274141;
+ border-radius: 4px;
+ border-style: solid;
+ box-shadow: 1px 1px 1px 0px rgba(255, 255, 255, 0.4) inset;
+
+ width: 30px;
+ height: 12px;
+
+ color: #fff;
+ text-decoration: none;
+ font-size: 7pt;
+ text-align: center;
+ line-height: 10px;
+
+ cursor: pointer;
+}
+
+.toggle_switch.on a {
+ float: right;
+ background-color: #54a626;
+ border-width: 0 0 0 1px;
+}
+
+.toggle_switch.off a {
+ background-color: #f60000;
+ border-width: 0 1px 0 0;
+}
+
+.toggle_switch a:hover {
+ /* TODO: create a better hover effect */
+ text-decoration: none !important;
+ opacity: 0.5;
+ filter: alpha(opacity=50); /* For IE8 and earlier */
+}
+
+
/* pattern / regex input styling */
diff --git a/web/htdocs/htmllib.py b/web/htdocs/htmllib.py
index 675d3b7..547e0e6 100644
--- a/web/htdocs/htmllib.py
+++ b/web/htdocs/htmllib.py
@@ -2210,6 +2210,26 @@ class html(HTMLGenerator, Encoder, RequestHandler):
onclick=onclick, **attrs)
+ def toggle_switch(self, enabled, help, **attrs):
+ # Same API as other elements: class_ can be a list or string/None
+ if "class_" in attrs:
+ if type(attrs["class_"]) != list:
+ attrs["class_"] = [ attrs["class_"] ]
+ else:
+ attrs["class_"] = []
+
+ attrs["class_"] += [ "toggle_switch", "on" if
enabled else "off", ]
+
+ link_attrs = {
+ "href" : attrs.pop("href", None),
+ "onclick" : attrs.pop("onclick", None),
+ }
+
+ self.open_div(**attrs)
+ self.a(_("on") if enabled else _("off"), title=help,
**link_attrs)
+ self.close_div()
+
+
def number_input(self, varname, deflt = "", size=8, style="",
submit=None):
if deflt != None:
deflt = str(deflt)
diff --git a/web/htdocs/images/button_snapin_switch_off.png
b/web/htdocs/images/button_snapin_switch_off.png
deleted file mode 100644
index fc85e83..0000000
Binary files a/web/htdocs/images/button_snapin_switch_off.png and /dev/null differ
diff --git a/web/htdocs/images/button_snapin_switch_on.png
b/web/htdocs/images/button_snapin_switch_on.png
deleted file mode 100644
index 234473d..0000000
Binary files a/web/htdocs/images/button_snapin_switch_on.png and /dev/null differ
diff --git a/web/htdocs/wato.css b/web/htdocs/wato.css
index 0645d2a..5156e39 100644
--- a/web/htdocs/wato.css
+++ b/web/htdocs/wato.css
@@ -1313,7 +1313,6 @@ table.nform.rulesettings td.legend div.title {
max-width: 300px;
}
-
/*--Profile Repl-----------------------------------------------------------.
| ____ __ _ _ ____ _ |
| | _ \ _ __ ___ / _(_) | ___ | _ \ ___ _ __ | | |
diff --git a/web/htdocs/wato.py b/web/htdocs/wato.py
index 39897bc..eaa6ad2 100644
--- a/web/htdocs/wato.py
+++ b/web/htdocs/wato.py
@@ -6757,8 +6757,6 @@ def render_global_configuration_variables(group_names,
default_values, current_s
simple = False
forms.section(title, simple=simple)
- toggle_url = html.makeactionuri([("_action", "toggle"),
("_varname", varname)])
-
if varname in current_settings:
value = current_settings[varname]
modified_cls = "modified"
@@ -6767,9 +6765,12 @@ def render_global_configuration_variables(group_names,
default_values, current_s
modified_cls = None
if is_a_checkbox(valuespec):
- html.icon_button(toggle_url, _("Immediately toggle this
setting"),
- "snapin_switch_" + (value and "on" or
"off"),
- cssclass=modified_cls)
+ html.toggle_switch(
+ enabled=value,
+ help=_("Immediately toggle this setting"),
+ href=html.makeactionuri([("_action", "toggle"),
("_varname", varname)]),
+ class_=modified_cls
+ )
else:
html.a(HTML(to_text), href=edit_url, class_=modified_cls)
diff --git a/web/plugins/sidebar/shipped.py b/web/plugins/sidebar/shipped.py
index 28b72bc..c38b560 100644
--- a/web/plugins/sidebar/shipped.py
+++ b/web/plugins/sidebar/shipped.py
@@ -1228,9 +1228,11 @@ def render_master_control():
html.open_tr()
html.td(title, class_="left")
html.open_td()
- html.icon_button("#", _("Switch %s %s") % (title,
colvalue and "off" or "on"),
- "snapin_switch_" + (colvalue and "on" or
"off"), onclick=onclick)
- # html.write("<a onclick=\"%s\"
href=\"#\">%s</a>" % (title, enabled, onclick, enabled))
+ html.toggle_switch(
+ enabled=colvalue,
+ help=_("Switch '%s' to '%s'") % (title,
_("off") if colvalue else _("on")),
+ onclick=onclick,
+ )
html.close_td()
html.close_tr()
html.close_table()
@@ -1251,9 +1253,8 @@ div.snapin table.master_control {
border-spacing: 0px;
}
-div.snapin table.master_control td {
- padding: 0px 0px;
- text-align: right;
+div.snapin table.master_control td div.toggle_switch {
+ float: right;
}
div.snapin table.master_control td.left a {