[checkmk-commits] Check_MK Git: check_mk: Add minimize button in sidebar

Module: check_mk Branch: master Commit: 2d85849563950c87cdce06d85143811a75b123b0 URL: http://git.mathias-kettner.de/git/?p=check_mk.git;a=commit;h=2d85849563950c… Author: Mathias Kettner &lt;mk(a)mathias-kettner.de&gt; Date: Tue Feb 14 16:30:24 2012 +0100 Add minimize button in sidebar --- web/htdocs/images/button_closesnapin_hi.png | Bin 418 -> 229 bytes web/htdocs/images/button_closesnapin_lo.png | Bin 372 -> 229 bytes web/htdocs/images/button_maxisnapin_hi.png | Bin 0 -> 132 bytes web/htdocs/images/button_maxisnapin_lo.png | Bin 0 -> 132 bytes web/htdocs/images/button_minisnapin_hi.png | Bin 0 -> 127 bytes web/htdocs/images/button_minisnapin_lo.png | Bin 0 -> 127 bytes web/htdocs/images/tree_00.png | Bin 6108 -> 265 bytes web/htdocs/images/tree_90.png | Bin 8849 -> 256 bytes web/htdocs/js/sidebar.js | 13 ++++++++- web/htdocs/sidebar.css | 27 ++++++++++++++---- web/htdocs/sidebar.py | 40 ++++++++++++++++++--------- 11 files changed, 60 insertions(+), 20 deletions(-) diff --git a/web/htdocs/images/button_closesnapin_hi.png b/web/htdocs/images/button_closesnapin_hi.png index 0ed3419..93260e6 100644 Binary files a/web/htdocs/images/button_closesnapin_hi.png and b/web/htdocs/images/button_closesnapin_hi.png differ diff --git a/web/htdocs/images/button_closesnapin_lo.png b/web/htdocs/images/button_closesnapin_lo.png index 198c8f2..93260e6 100644 Binary files a/web/htdocs/images/button_closesnapin_lo.png and b/web/htdocs/images/button_closesnapin_lo.png differ diff --git a/web/htdocs/images/button_maxisnapin_hi.png b/web/htdocs/images/button_maxisnapin_hi.png new file mode 100644 index 0000000..6c8bd23 Binary files /dev/null and b/web/htdocs/images/button_maxisnapin_hi.png differ diff --git a/web/htdocs/images/button_maxisnapin_lo.png b/web/htdocs/images/button_maxisnapin_lo.png new file mode 100644 index 0000000..6c8bd23 Binary files /dev/null and b/web/htdocs/images/button_maxisnapin_lo.png differ diff --git a/web/htdocs/images/button_minisnapin_hi.png b/web/htdocs/images/button_minisnapin_hi.png new file mode 100644 index 0000000..71ee36f Binary files /dev/null and b/web/htdocs/images/button_minisnapin_hi.png differ diff --git a/web/htdocs/images/button_minisnapin_lo.png b/web/htdocs/images/button_minisnapin_lo.png new file mode 100644 index 0000000..71ee36f Binary files /dev/null and b/web/htdocs/images/button_minisnapin_lo.png differ diff --git a/web/htdocs/images/tree_00.png b/web/htdocs/images/tree_00.png index c413834..536b367 100644 Binary files a/web/htdocs/images/tree_00.png and b/web/htdocs/images/tree_00.png differ diff --git a/web/htdocs/images/tree_90.png b/web/htdocs/images/tree_90.png index 27b557c..908eb1a 100644 Binary files a/web/htdocs/images/tree_90.png and b/web/htdocs/images/tree_90.png differ diff --git a/web/htdocs/js/sidebar.js b/web/htdocs/js/sidebar.js index f5a3065..927b9e3 100644 --- a/web/htdocs/js/sidebar.js +++ b/web/htdocs/js/sidebar.js @@ -566,7 +566,14 @@ function removeSnapin(id, code) { function toggle_sidebar_snapin(oH2, url) { - var childs = oH2.parentNode.parentNode.childNodes; + // oH2 can also be an <a>. In that case it is the minimize + // image itself + + var childs; + if (oH2.tagName == "A") + childs = oH2.parentNode.parentNode.parentNode.childNodes; + else + childs = oH2.parentNode.parentNode.childNodes; for (var i in childs) { child = childs[i]; if (child.tagName == 'DIV' && child.className == 'content') @@ -576,17 +583,21 @@ function toggle_sidebar_snapin(oH2, url) { else if (child.tagName == 'DIV' && child.className == 'foot') var oFoot = child; } + var oImgMini = oHead.childNodes[0].childNodes[0].childNodes[0]; + // FIXME: Does oContent really exist? var closed = oContent.style.display == "none"; if (closed) { oContent.style.display = "block"; oFoot.style.display = "block"; oHead.className = "head open"; + oImgMini.src = "images/button_minisnapin_lo.png"; } else { oContent.style.display = "none"; oFoot.style.display = "none"; oHead.className = "head closed"; + oImgMini.src = "images/button_maxisnapin_lo.png"; } /* make this persistent -> save */ get_url(url + (closed ? "open" : "closed")); diff --git a/web/htdocs/sidebar.css b/web/htdocs/sidebar.css index f3d52e7..362a23a 100644 --- a/web/htdocs/sidebar.css +++ b/web/htdocs/sidebar.css @@ -189,7 +189,7 @@ div.snapin div.head { width: 260px; text-align: center; color: #fff; - padding-top: 9px; + padding-top: 8px; } div.snapin div.head b { @@ -213,12 +213,27 @@ div.snapin div.closesnapin { margin-right: 10px; margin-top: 2px; } -/* Reload-Button */ -div.snapin div.reloadsnapin { - float: right; - margin-right: 4px; - margin-top: 2px; + +div.snapin div.closesnapin img { + width: 8px; + height: 8px; + position: relative; + top: 1px; } +div.snapin div.minisnapin { + position: relative; + top: 2px; + left: 13px; + width: 0px; + height: 0px; +} +div.snapin div.minisnapin img { + width: 8px; + height: 8px; + position: relative; + top: 1px; +} + div.snapin div.content { background-image: url("images/snapin_background.png"); diff --git a/web/htdocs/sidebar.py b/web/htdocs/sidebar.py index c57c3b6..6340f4e 100644 --- a/web/htdocs/sidebar.py +++ b/web/htdocs/sidebar.py @@ -190,32 +190,46 @@ def render_snapin(name, state): if state == "closed": style = ' style="display:none"' headclass = "closed" + minimaxi = "maxi" else: style = "" headclass = "open" - url = "sidebar_openclose.py?name=%s&state=" % name + minimaxi = "mini" + toggle_url = "sidebar_openclose.py?name=%s&state=" % name html.write('<div class="head %s" ' % headclass) + + # If the user may modify the sidebar then add code for dragging the snapin if config.may("configure_sidebar"): - html.write("onmouseover=\"document.body.style.cursor='move';\" onmouseout=\"document.body.style.cursor='';\"" - " onmousedown=\"snapinStartDrag(event)\" onmouseup=\"snapinStopDrag(event)\">") + html.write("onmouseover=\"document.body.style.cursor='move';\" " + "onmouseout=\"document.body.style.cursor='';\" " + "onmousedown=\"snapinStartDrag(event)\" onmouseup=\"snapinStopDrag(event)\">") else: html.write(">") - if config.may("configure_sidebar"): + + # Icon for mini/maximizing, does not need permission + html.write('<div class="minisnapin">') + iconbutton(minimaxi + "snapin", None, + "side", "toggle_sidebar_snapin(this, '%s')" % toggle_url, 'snapin_'+name) + html.write('</div>') + + if config.may("configure_sidebar"): + # Button for closing (removing) a snapin html.write('<div class="closesnapin">') - iconbutton("closesnapin", "sidebar_openclose.py?name=%s&state=off" % name, "side", "removeSnapin", 'snapin_'+name) + iconbutton("closesnapin", "sidebar_openclose.py?name=%s&state=off" % name, + "side", "removeSnapin", 'snapin_'+name) html.write('</div>') - # # Show reload button, but only for reloadable Snapins - # if snapin.get("reload") or snapin.get("restart"): - # html.write('<div class="reloadsnapin">') - # iconbutton("reloadsnapin", url="sidebar_snapin.py?name=" + name, handler="updateContents", - # name = "snapin_" + name); - # html.write('</div>') - html.write("<b class=heading onclick=\"toggle_sidebar_snapin(this,'%s')\" onmouseover=\"this.style.cursor='pointer'\" " - "onmouseout=\"this.style.cursor='auto'\">%s</b>" % (url, snapin["title"])) + + # The heading. A click on the heading mini/maximizes the snapin + html.write("<b class=heading onclick=\"toggle_sidebar_snapin(this,'%s')\" " + "onmouseover=\"this.style.cursor='pointer'\" " + "onmouseout=\"this.style.cursor='auto'\">%s</b>" % (toggle_url, snapin["title"])) + + # End of header html.write("</div>") + # Now comes the content html.write("<div id=\"snapin_%s\" class=content%s>\n" % (name, style)) refresh_url = '' try: