[checkmk-commits] 5000 Icon selector: Icon names can now be toggled

Module: check_mk Branch: master Commit: 5fa093c0ab43345c5a64fae1e885241f87e9a5a4 URL: http://git.mathias-kettner.de/git/?p=check_mk.git;a=commit;h=5fa093c0ab4334… Author: Lars Michelsen <lm(a)mathias-kettner.de> Date: Mon Jul 17 15:19:10 2017 +0200 5000 Icon selector: Icon names can now be toggled Change-Id: I7db65df928d5a8d78c5418dab91fc3e799dd44ea --- .werks/5000 | 10 ++++++++++ web/htdocs/js/checkmk.js | 9 +++++++++ web/htdocs/pages.css | 32 +++++++++++++++++++++++++++++--- web/htdocs/valuespec.py | 29 +++++++++++++++++++++++------ 4 files changed, 71 insertions(+), 9 deletions(-) diff --git a/.werks/5000 b/.werks/5000 new file mode 100644 index 0000000..982344a --- /dev/null +++ b/.werks/5000 @@ -0,0 +1,10 @@ +Title: Icon selector: Icon names can now be toggled +Level: 1 +Component: multisite +Compatible: compat +Edition: cre +Version: 1.5.0i1 +Date: 1500297511 +Class: feature + + diff --git a/web/htdocs/js/checkmk.js b/web/htdocs/js/checkmk.js index 6f9db43..3b114e8 100644 --- a/web/htdocs/js/checkmk.js +++ b/web/htdocs/js/checkmk.js @@ -2404,6 +2404,15 @@ function vs_iconselector_toggle(varprefix, category_name) { } } +function vs_iconselector_toggle_names(event, varprefix) { + console.log(varprefix+'_icons'); + var icons = document.getElementById(varprefix+'_icons'); + if (has_class(icons, "show_names")) + remove_class(icons, "show_names"); + else + add_class(icons, "show_names"); +} + function vs_listofmultiple_add(varprefix) { var choice = document.getElementById(varprefix + '_choice'); var ident = choice.value; diff --git a/web/htdocs/pages.css b/web/htdocs/pages.css index 9f8918e..51f003a 100644 --- a/web/htdocs/pages.css +++ b/web/htdocs/pages.css @@ -1222,7 +1222,7 @@ body.main table.footer .popup_menu a:hover { color: #000; } -#popup_menu .icons div { +#popup_menu .icons div.icon_container { position: absolute; overflow-y: auto; padding: 5px; @@ -1232,8 +1232,34 @@ body.main table.footer .popup_menu a:hover { bottom: 38px; } -#popup_menu .icons a { +#popup_menu .icons a.icon { display: inline-block; + cursor: pointer; +} + +#popup_menu .icons.show_names a.icon { + width: 100px; +} + +#popup_menu .icons a.icon span { + display: none; +} + +#popup_menu .icons.show_names a.icon span { + display: inline-block; + font-weight: normal; + + text-overflow: ellipsis; + width: 62px; + overflow: hidden; + margin: 0; + white-space: nowrap; + line-height: 19px; + vertical-align: middle; +} + +#popup_menu .icons.show_names a.icon span:hover { + text-decoration: underline; } #popup_menu .icons img.icon { @@ -1241,7 +1267,7 @@ body.main table.footer .popup_menu a:hover { height: 20px; } -#popup_menu .icons .button { +#popup_menu .icons div.buttons { position: absolute; right: 10px; bottom: 10px; diff --git a/web/htdocs/valuespec.py b/web/htdocs/valuespec.py index 2572ae8..a056485 100644 --- a/web/htdocs/valuespec.py +++ b/web/htdocs/valuespec.py @@ -4184,7 +4184,7 @@ class IconSelector(ValueSpec): def render_popup_input(self, varprefix, value): - html.open_div(class_=["icons"]) + html.open_div(class_="icons", id_="%s_icons" % varprefix) icons = self.available_icons() available_icons = self.available_icons_by_category(icons) @@ -4204,15 +4204,30 @@ class IconSelector(ValueSpec): empty = ['empty'] if self._allow_empty else [] for category_name, category_alias, icons in available_icons: html.open_div(id_="%s_%s_container" % (varprefix, category_name), - class_=["%s_container" % varprefix], + class_=["icon_container", "%s_container" % varprefix], style="display:none;" if active_category != category_name else None) - for nr, icon in enumerate(empty + icons): - html.write_html(self.render_icon(icon, - onclick = 'vs_iconselector_select(event, \'%s\', \'%s\')' % (varprefix, icon), - title = _('Choose this icon'), id = varprefix + '_i_' + icon)) + for icon in empty + sorted(icons): + html.open_a( + href=None, + class_="icon", + onclick='vs_iconselector_select(event, \'%s\', \'%s\')' % (varprefix, icon), + title=icon, + ) + + html.write_html(self.render_icon(icon, id=varprefix + '_i_' + icon, title=icon)) + + html.span(icon) + + html.close_a() + html.close_div() + html.open_div(class_="buttons") + + html.jsbutton("_toggle_names", _("Toggle names"), + onclick="vs_iconselector_toggle_names(event, %s)" % json.dumps(varprefix)) + import config# FIXME: Clean this up. But how? if config.user.may('wato.icons'): back_param = '&back='+html.urlencode(html.var('back')) if html.has_var('back') else '' @@ -4220,6 +4235,8 @@ class IconSelector(ValueSpec): html.close_div() + html.close_div() + def from_html_vars(self, varprefix): icon = html.var(varprefix + '_value') if icon == 'empty':