[checkmk-commits] Check_MK Git: check_mk: Multisite: add animated triangle to foldable sections

Module: check_mk Branch: master Commit: 352f786a3a4496a860e59ae633d4c6a9612a5f2b URL: http://git.mathias-kettner.de/git/?p=check_mk.git;a=commit;h=352f786a3a4496… Author: Mathias Kettner &lt;mk(a)mathias-kettner.de&gt; Date: Mon Oct 21 20:54:28 2013 -0400 Multisite: add animated triangle to foldable sections --- .bugs/1002 | 6 ++++-- ChangeLog | 1 + web/htdocs/check_mk.css | 3 +++ web/htdocs/htmllib.py | 44 ++------------------------------------------ web/htdocs/js/checkmk.js | 2 ++ 5 files changed, 12 insertions(+), 44 deletions(-) diff --git a/.bugs/1002 b/.bugs/1002 index 48608b1..bba30dd 100644 --- a/.bugs/1002 +++ b/.bugs/1002 @@ -1,11 +1,13 @@ Title: Use triangle as indicator that a view is hidden (or not hidden) Component: multisite -State: open +Class: nastiness +State: done Date: 2013-09-11 13:19:55 Targetversion: future -Class: nastiness In the WATO as well as the multisite GUI views/topic can be hidden by clicking on the title. This may confuse a user in some occasions, because it may not be clear if the topic is hidden, or no item were found under that topic. Therefore a triangle as indicator if the topic is hidden or not should be very useful. + +2013-10-21 20:53:20: changed state open -> done diff --git a/ChangeLog b/ChangeLog index 8b5b781..67ab390 100644 --- a/ChangeLog +++ b/ChangeLog @@ -25,6 +25,7 @@ (needs to be confgured per view via the view editor) * Wiki Sidebar Snapin: showing navigation and quicksearch. OMD only. * Sidebar can now be folded. Simply click somewhere at the left 10 pixels. + * Foldable sections now have an animated triangle icon that shows the folding state * FIX: Fixed encoding problem in webservice column output * FIX: Fix output format python for several numeric columns * FIX: Fixed searching hosts by aliases/adresses diff --git a/web/htdocs/check_mk.css b/web/htdocs/check_mk.css index 3a760ad..41169e0 100644 --- a/web/htdocs/check_mk.css +++ b/web/htdocs/check_mk.css @@ -245,6 +245,9 @@ img.treeangle { margin-right: 3px; margin-top: 0px; } +img.treeangle.nform { + margin-left: -5px; +} b.treeangle.title { font-weight: bold; color: #ffffff; diff --git a/web/htdocs/htmllib.py b/web/htdocs/htmllib.py index 88226a1..115fef1 100644 --- a/web/htdocs/htmllib.py +++ b/web/htdocs/htmllib.py @@ -1155,48 +1155,6 @@ class html: def begin_foldable_container(self, treename, id, isopen, title, indent = True, first = False): self.folding_indent = indent # try to get persisted state of tree - tree_state = weblib.get_tree_states(treename) - - if id in tree_state: - isopen = tree_state[id] == "on" - - img_num = isopen and "90" or "00" - onclick = ' onclick="toggle_foldable_container(\'%s\', \'%s\')"' % (treename, id) - onclick += ' onmouseover="this.style.cursor=\'pointer\';" ' - onclick += ' onmouseout="this.style.cursor=\'auto\';" ' - - if indent == "nform": - self.write('<tr class=heading><td id="nform.%s.%s" %s colspan=2>' % (treename, id, onclick)) - self.write('%s</td></tr>' % title) - else: - self.write('<img align=absbottom class="treeangle" id="treeimg.%s.%s" ' - 'src="images/tree_%s.png" %s>' % - (treename, id, img_num, onclick)) - if title.startswith('<'): # custom HTML code - self.write(title) - if indent != "form": - self.write("<br>") - else: - self.write('<b class="treeangle title" class=treeangle %s>%s</b><br>' % - (onclick, title)) - - indent_style = "padding-left: %dpx; " % (indent == True and 15 or 0) - if indent == "form": - self.write("</td></tr></table>") - indent_style += "margin: 0; " - self.write('<ul class="treeangle %s" style="%s" id="tree.%s.%s">' % - (isopen and "open" or "closed", indent_style, treename, id)) - - # give caller information about current toggling state (needed for nform) - return isopen - - def end_foldable_container(self): - if self.folding_indent != "nform": - self.write("</ul>") - - def begin_foldable_container(self, treename, id, isopen, title, indent = True, first = False): - self.folding_indent = indent - # try to get persisted state of tree tree_state = self.get_tree_states(treename) if id in tree_state: @@ -1209,6 +1167,8 @@ class html: if indent == "nform": self.write('<tr class=heading><td id="nform.%s.%s" %s colspan=2>' % (treename, id, onclick)) + self.write('<img align=absbottom class="treeangle nform" src="images/tree_%s.png">' % ( + isopen and "90" or "00")) self.write('%s</td></tr>' % title) else: self.write('<img align=absbottom class="treeangle" id="treeimg.%s.%s" ' diff --git a/web/htdocs/js/checkmk.js b/web/htdocs/js/checkmk.js index 883b29d..929711f 100644 --- a/web/htdocs/js/checkmk.js +++ b/web/htdocs/js/checkmk.js @@ -1055,6 +1055,8 @@ function toggle_foldable_container(treename, id) { // Check, if we fold a NG-Norm var oNform = document.getElementById('nform.' + treename + '.' + id); if (oNform) { + var oImg = oNform.childNodes[0]; + toggle_folding(oImg, oImg.src[oImg.src.length - 6] == '0'); var oTr = oNform.parentNode.nextSibling; toggle_tree_state(treename, id, oTr); }