[checkmk-commits] 4999 Icon selector: The popup menu is now resizable

Module: check_mk Branch: master Commit: 3733a94bd891fca19f4d84b7861d99351a7844ec URL: http://git.mathias-kettner.de/git/?p=check_mk.git;a=commit;h=3733a94bd891fc… Author: Lars Michelsen &lt;lm(a)mathias-kettner.de&gt; Date: Mon Jul 17 14:36:11 2017 +0200 4999 Icon selector: The popup menu is now resizable Change-Id: I2d3ad80ed2a051d5bca96443adaf0a3cd40e6f3c --- .werks/4999 | 10 ++++++++++ web/htdocs/htmllib.py | 20 ++++++++++--------- web/htdocs/js/checkmk.js | 51 +++++++++++++++++++++++++++++++++++------------- web/htdocs/pages.css | 48 +++++++++++++++++++++++++++++++++++++++------ web/htdocs/valuespec.py | 21 ++++++++++++-------- 5 files changed, 113 insertions(+), 37 deletions(-) diff --git a/.werks/4999 b/.werks/4999 new file mode 100644 index 0000000..f0417b3 --- /dev/null +++ b/.werks/4999 @@ -0,0 +1,10 @@ +Title: Icon selector: The popup menu is now resizable +Level: 1 +Component: multisite +Compatible: compat +Edition: cre +Version: 1.5.0i1 +Date: 1500294953 +Class: feature + + diff --git a/web/htdocs/htmllib.py b/web/htdocs/htmllib.py index 0eacf82..735347c 100644 --- a/web/htdocs/htmllib.py +++ b/web/htdocs/htmllib.py @@ -2764,15 +2764,17 @@ class html(HTMLGenerator, RequestHandler): def render_popup_trigger(self, content, ident, what=None, data=None, url_vars=None, - style=None, menu_content=None, cssclass=None, onclose=None): - - onclick = 'toggle_popup(event, this, %s, %s, %s, %s, %s, %s);' % \ - ("'%s'" % ident,\ - "'%s'" % what if what else 'null',\ - json.dumps(data) if data else 'null',\ - "'%s'" % self.urlencode_vars(url_vars) if url_vars else 'null',\ - "'%s'" % menu_content if menu_content else 'null',\ - "'%s'" % onclose.replace("'", "\\'") if onclose else 'null') + style=None, menu_content=None, cssclass=None, onclose=None, + resizable=False): + + onclick = 'toggle_popup(event, this, %s, %s, %s, %s, %s, %s, %s);' % \ + ("'%s'" % ident, + "'%s'" % what if what else 'null', + json.dumps(data) if data else 'null', + "'%s'" % self.urlencode_vars(url_vars) if url_vars else 'null', + "'%s'" % menu_content if menu_content else 'null', + "'%s'" % onclose.replace("'", "\\'") if onclose else 'null', + json.dumps(resizable)) #TODO: Check if HTML'ing content is correct and necessary! atag = self.render_a(HTML(content), class_="popup_trigger", diff --git a/web/htdocs/js/checkmk.js b/web/htdocs/js/checkmk.js index ba7b081..6f9db43 100644 --- a/web/htdocs/js/checkmk.js +++ b/web/htdocs/js/checkmk.js @@ -823,7 +823,9 @@ function create_pnp_graph(data, params) { ['pnpgraph', { 'host': host, 'service': service }, { 'timerange': view, 'source': source }], - "add_type=pnpgraph" + "add_type=pnpgraph", + null, + false ); } }(data['host'], data['service'], view, source); @@ -3023,8 +3025,9 @@ function handle_popup_close(event) { // The static content of the menu is given in the "menu_content" parameter. // data: json data which can be used by actions in popup menus // url_vars: vars are added to ajax_popup_*.py calls for rendering the popup menu +// resizable: Allow the user to resize the popup by drag/drop (not persisted) var on_popup_close = null; -function toggle_popup(event, trigger_obj, ident, what, data, url_vars, menu_content, onclose) +function toggle_popup(event, trigger_obj, ident, what, data, url_vars, menu_content, onclose, resizable) { on_popup_close = onclose; @@ -3045,17 +3048,36 @@ function toggle_popup(event, trigger_obj, ident, what, data, url_vars, menu_cont add_event_handler('click', handle_popup_close); - menu = document.createElement('div'); + var menu = document.createElement('div'); menu.setAttribute('id', 'popup_menu'); menu.className = 'popup_menu'; + + if (resizable) + add_class(menu, 'resizable'); + container.appendChild(menu); fix_popup_menu_position(event, menu); + var wrapper = document.createElement("div"); + wrapper.className = 'wrapper'; + menu.appendChild(wrapper) + + var content = document.createElement('div'); + content.className = 'content'; + wrapper.appendChild(content); + + if (resizable) { + // Add a handle because we can not customize the styling of the default resize handle using css + var resize = document.createElement('div'); + resize.className = "resizer"; + wrapper.appendChild(resize); + } + // update the menus contents using a webservice if (what) { popup_data = data; - menu.innerHTML = '<img src="images/icon_reload.png" class="icon reloading">'; + content.innerHTML = '<img src="images/icon_reload.png" class="icon reloading">'; // populate the menu using a webservice, because the list of dashboards // is not known in the javascript code. But it might have been cached @@ -3066,22 +3088,23 @@ function toggle_popup(event, trigger_obj, ident, what, data, url_vars, menu_cont // menu.innerHTML = popup_contents[ident]; //else var url_vars = !url_vars ? '' : '?'+url_vars; - get_url('ajax_popup_'+what+'.py'+url_vars, handle_render_popup_contents, [ident, event]); + get_url('ajax_popup_'+what+'.py'+url_vars, handle_render_popup_contents, { + ident: ident, + content: content, + event: event, + }); } else { - menu.innerHTML = menu_content; - executeJSbyObject(menu); + content.innerHTML = menu_content; + executeJSbyObject(content); } } function handle_render_popup_contents(data, response_text) { - var ident = data[0]; - var event = data[1]; - popup_contents[ident] = response_text; - var menu = document.getElementById('popup_menu'); - if (menu) { - menu.innerHTML = response_text; - fix_popup_menu_position(event, menu); + popup_contents[data.ident] = response_text; + if (data.content) { + data.content.innerHTML = response_text; + fix_popup_menu_position(data.event, data.content); } } diff --git a/web/htdocs/pages.css b/web/htdocs/pages.css index e438a40..9f8918e 100644 --- a/web/htdocs/pages.css +++ b/web/htdocs/pages.css @@ -1106,7 +1106,6 @@ body.main .popup_menu { left: 15px; z-index: 50; - padding: 5px 8px; min-width: 300px; color: #fff; @@ -1119,6 +1118,32 @@ body.main .popup_menu { white-space: normal; } +body.main .popup_menu div.wrapper { + position: relative; +} + +body.main .popup_menu div.content { + padding: 5px 8px; +} + +body.main .popup_menu.resizable div.resizer { + width: 15px; + height: 15px; + bottom: 0; + right: 0; + background-color: #508AA1; + position: absolute; + pointer-events: none; + cursor: se-resize; +} + +body.main div.popup_menu.resizable div.content { + resize: both; + overflow: auto; + min-height: 150px; + min-width: 312px; +} + body.main .popup_menu img { width: 12px; height: auto; @@ -1158,6 +1183,14 @@ body.main table.footer .popup_menu a:hover { text-decoration: underline; } +#popup_menu .icons { + position: relative; + height: 100%; + width: 100%; + min-height: 150px; + min-width: 312px; +} + #popup_menu .icons ul { list-style: none; height: 21px; @@ -1190,11 +1223,13 @@ body.main table.footer .popup_menu a:hover { } #popup_menu .icons div { - clear: left; - height: 150px; + position: absolute; overflow-y: auto; padding: 5px; - width: 312px; + top: 26px; + left: 0; + right: 0; + bottom: 38px; } #popup_menu .icons a { @@ -1207,8 +1242,9 @@ body.main table.footer .popup_menu a:hover { } #popup_menu .icons .button { - float: right; - margin: 4px; + position: absolute; + right: 10px; + bottom: 10px; } /*--Various----------------------------------------------------------------. diff --git a/web/htdocs/valuespec.py b/web/htdocs/valuespec.py index 0146a12..2572ae8 100644 --- a/web/htdocs/valuespec.py +++ b/web/htdocs/valuespec.py @@ -4170,13 +4170,18 @@ class IconSelector(ValueSpec): content = self.render_icon(value, '', _('Choose another Icon'), id = varprefix + '_img') else: content = _('Select an Icon') - html.popup_trigger(content, varprefix + '_icon_selector', 'icon_selector', - url_vars = [ - ('value', value), - ('varprefix', varprefix), - ('allow_empty', '1' if self._allow_empty else '0'), - ('back', html.makeuri([])), - ]) + + html.popup_trigger( + content, varprefix + '_icon_selector', 'icon_selector', + url_vars=[ + ('value', value), + ('varprefix', varprefix), + ('allow_empty', '1' if self._allow_empty else '0'), + ('back', html.makeuri([])), + ], + resizable=True, + ) + def render_popup_input(self, varprefix, value): html.open_div(class_=["icons"]) @@ -4209,7 +4214,7 @@ class IconSelector(ValueSpec): html.close_div() import config# FIXME: Clean this up. But how? - if config.omd_site() and config.user.may('wato.icons'): + if config.user.may('wato.icons'): back_param = '&back='+html.urlencode(html.var('back')) if html.has_var('back') else '' html.buttonlink('wato.py?mode=icons' + back_param, _('Manage'))