[checkmk-commits] Check_MK Git: check_mk: WATO: Implemented new layout for the breadcrumb navigation

Module: check_mk Branch: master Commit: 731ccee2f18a9bc979d472655e7a9c5c74dec7c8 URL: http://git.mathias-kettner.de/git/?p=check_mk.git;a=commit;h=731ccee2f18a9b… Author: Lars Michelsen &lt;lm(a)mathias-kettner.de&gt; Date: Tue Apr 24 16:18:44 2012 +0200 WATO: Implemented new layout for the breadcrumb navigation --- web/htdocs/images/breadcrumb_c_hi.png | Bin 0 -> 178 bytes web/htdocs/images/breadcrumb_c_lo.png | Bin 0 -> 178 bytes web/htdocs/images/breadcrumb_l_hi.png | Bin 0 -> 446 bytes web/htdocs/images/breadcrumb_l_lo.png | Bin 0 -> 458 bytes web/htdocs/images/breadcrumb_lm_hi.png | Bin 0 -> 866 bytes web/htdocs/images/breadcrumb_lm_lo.png | Bin 0 -> 866 bytes web/htdocs/images/breadcrumb_r_hi.png | Bin 0 -> 481 bytes web/htdocs/images/breadcrumb_r_lo.png | Bin 0 -> 483 bytes web/htdocs/images/breadcrumb_rm_hi.png | Bin 0 -> 847 bytes web/htdocs/images/breadcrumb_rm_lo.png | Bin 0 -> 887 bytes web/htdocs/wato.css | 99 ++++++++++++++++++++++++++++++- web/htdocs/wato.py | 41 +++++++++++--- 12 files changed, 128 insertions(+), 12 deletions(-) diff --git a/web/htdocs/images/breadcrumb_c_hi.png b/web/htdocs/images/breadcrumb_c_hi.png new file mode 100644 index 0000000..00a02f1 Binary files /dev/null and b/web/htdocs/images/breadcrumb_c_hi.png differ diff --git a/web/htdocs/images/breadcrumb_c_lo.png b/web/htdocs/images/breadcrumb_c_lo.png new file mode 100644 index 0000000..f92e6a2 Binary files /dev/null and b/web/htdocs/images/breadcrumb_c_lo.png differ diff --git a/web/htdocs/images/breadcrumb_l_hi.png b/web/htdocs/images/breadcrumb_l_hi.png new file mode 100644 index 0000000..dc9eaa3 Binary files /dev/null and b/web/htdocs/images/breadcrumb_l_hi.png differ diff --git a/web/htdocs/images/breadcrumb_l_lo.png b/web/htdocs/images/breadcrumb_l_lo.png new file mode 100644 index 0000000..34fc2e8 Binary files /dev/null and b/web/htdocs/images/breadcrumb_l_lo.png differ diff --git a/web/htdocs/images/breadcrumb_lm_hi.png b/web/htdocs/images/breadcrumb_lm_hi.png new file mode 100644 index 0000000..4a29324 Binary files /dev/null and b/web/htdocs/images/breadcrumb_lm_hi.png differ diff --git a/web/htdocs/images/breadcrumb_lm_lo.png b/web/htdocs/images/breadcrumb_lm_lo.png new file mode 100644 index 0000000..4b83a06 Binary files /dev/null and b/web/htdocs/images/breadcrumb_lm_lo.png differ diff --git a/web/htdocs/images/breadcrumb_r_hi.png b/web/htdocs/images/breadcrumb_r_hi.png new file mode 100644 index 0000000..be6b4a4 Binary files /dev/null and b/web/htdocs/images/breadcrumb_r_hi.png differ diff --git a/web/htdocs/images/breadcrumb_r_lo.png b/web/htdocs/images/breadcrumb_r_lo.png new file mode 100644 index 0000000..e9aa000 Binary files /dev/null and b/web/htdocs/images/breadcrumb_r_lo.png differ diff --git a/web/htdocs/images/breadcrumb_rm_hi.png b/web/htdocs/images/breadcrumb_rm_hi.png new file mode 100644 index 0000000..2fb11e8 Binary files /dev/null and b/web/htdocs/images/breadcrumb_rm_hi.png differ diff --git a/web/htdocs/images/breadcrumb_rm_lo.png b/web/htdocs/images/breadcrumb_rm_lo.png new file mode 100644 index 0000000..50e5dfe Binary files /dev/null and b/web/htdocs/images/breadcrumb_rm_lo.png differ diff --git a/web/htdocs/wato.css b/web/htdocs/wato.css index fe20dc6..12f5d06 100644 --- a/web/htdocs/wato.css +++ b/web/htdocs/wato.css @@ -260,9 +260,102 @@ table.validationerror img { /* Path to current folder at top of screen */ .wato div.folderpath { margin-bottom: 10px; + height: 30px; } -.wato div.folderpath a, .wato div.folderpath b, .wato div.folderpath i { +.wato div.folderpath ul { + list-style-type:none; + padding-left:0; +} + +.wato div.folderpath li { + float:left; + display:block; + height:26px; + + position:relative; + + /* spacing for the image divs left/right */ + padding-left: 20px; + padding-right: 20px; + + /* move left border of all items 22px left to make the items overlap */ + margin-left: -13px; + + color: #fff; +} + +.wato div.folderpath li a { + color: #fff; + text-decoration: none; +} + +.wato div.folderpath li div.content { + height: 18px; + background-image: url('images/breadcrumb_c_lo.png'); + + padding:4px 2px; + line-height:18px; +} + +.wato div.folderpath li:hover div.content { + background-image: url('images/breadcrumb_c_hi.png'); +} + +.wato div.folderpath li select { + padding-top: 1px; + padding-bottom: 1px; + background-color: #6da1b8; +} + +.wato div.folderpath li:hover select { + background-color: #7fb0c6; +} + +.wato div.folderpath li div.left, +.wato div.folderpath li div.right { + position: absolute; + width: 20px; + height: 100%; +} + +.wato div.folderpath li div.left { + top: 0; + left: 0; + background-image: url('images/breadcrumb_lm_lo.png'); +} + +.wato div.folderpath li:hover div.left { + background-image: url('images/breadcrumb_lm_hi.png'); +} + +.wato div.folderpath li div.left.end { + background-image: url('images/breadcrumb_l_lo.png'); +} + +.wato div.folderpath li:hover div.left.end { + background-image: url('images/breadcrumb_l_hi.png'); +} + +.wato div.folderpath li div.right { + top: 0; + right: 0; + background-image: url('images/breadcrumb_rm_lo.png'); +} + +.wato div.folderpath li:hover div.right { + background-image: url('images/breadcrumb_rm_hi.png'); +} + +.wato div.folderpath li div.right.end { + background-image: url('images/breadcrumb_r_lo.png'); +} + +.wato div.folderpath li:hover div.right.end { + background-image: url('images/breadcrumb_r_hi.png'); +} + +/*.wato div.folderpath a, .wato div.folderpath b, .wato div.folderpath i { float: left; } @@ -281,14 +374,12 @@ table.validationerror img { font-weight: normal; } .wato div.folderpath a { -/* color: #46c; */ text-decoration: none; } .wato div.folderpath a:hover { color: #fff; background-color: #9bc; - /* text-decoration: underline; */ -} +}*/ .wato select.folderpath { background-color: #8ab; diff --git a/web/htdocs/wato.py b/web/htdocs/wato.py index 680210e..fe2801f 100644 --- a/web/htdocs/wato.py +++ b/web/htdocs/wato.py @@ -10656,11 +10656,18 @@ def render_folder_path(the_folder = 0, link_to_last = False, keepvarnames = ["mo the_folder = g_folder keepvars = [ (name, html.var(name)) for name in keepvarnames ] + def render_component(folder): return '<a href="%s">%s</a>' % ( html.makeuri_contextless([ ("folder", folder[".path"])] + keepvars), folder["title"]) + def bc_el_start(end = '', z_index = 0): + html.write('<li style="z-index:%d;"><div class="left %s"></div>' % (z_index, end)) + + def bc_el_end(end = ''): + html.write('<div class="right %s"></div></li>' % end) + folders = [] folder = the_folder.get(".parent") while folder: @@ -10670,24 +10677,42 @@ def render_folder_path(the_folder = 0, link_to_last = False, keepvarnames = ["mo parts = [] for folder in folders[::-1]: parts.append(render_component(folder)) + + # The current folder (with link or without link) if link_to_last: parts.append(render_component(the_folder)) else: - parts.append("<b>" + the_folder["title"] + "</b>") + parts.append(the_folder["title"]) - html.write("<div class=folderpath>%s\n" % "<i> / </i>".join(parts)) + # Render the folder path + html.write("<div class=folderpath><ul>\n") + num = 0 + for part in parts: + if num == 0: + bc_el_start('end', z_index = 100 + num) + else: + bc_el_start(z_index = 100 + num) + html.write('<div class=content>%s</div>\n' % part) + bc_el_end() + num += 1 + # Render the current folder when having subfolders subfolders = the_folder[".folders"] if len(subfolders) > 0 and not link_to_last: - html.write("<i> / </i>") - html.write("<form method=GET name=folderpath>") + bc_el_start(z_index = 100 + num) + html.write("<div class=content><form method=GET name=folderpath>") options = [ (sf[".path"], sf["title"]) for sf in subfolders.values() ] - html.sorted_select("folder", [ ("", "") ] + options, onchange="folderpath.submit();", attrs={"class" : "folderpath"}) + html.sorted_select( + "folder", [ ("", "") ] + options, + onchange = "folderpath.submit();", + attrs = {"class" : "folderpath"} + ) for var in keepvarnames: html.hidden_field(var, html.var(var)) - html.write("</form>") - html.write("<div style='clear: both;'></div>") - html.write("</div>") + html.write("</form></div>") + bc_el_end('end') + + html.write("</ul></div>\n") def may_see_hosts(): return config.may("wato.use") and \