lix-project/hydra
3
0
Fork 6
Code Issues 2 Pull requests 1 Packages Projects Releases Wiki Activity

Simplify the log tree implementation a bit

Browse source 
In particular use the :last-child selector, which is non-standard but
supported by all major browsers.
This commit is contained in:
Eelco Dolstra 2013-02-19 17:14:02 +01:00
parent 8c37f46955
commit 4266632eb0
3 changed files with 45 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/root/layout.tt
View file

@ -34,7 +34,7 @@
/* Set the appearance of the toggle depending on whether the
corresponding subtree is initially shown or hidden. */
$(".logTreeToggle").map(function() {
$(".tree-toggle").map(function() {
if ($(this).siblings("ul:hidden").length == 0) {
$(this).text("-");
} else {
@ -43,7 +43,7 @@
});
/* When a toggle is clicked, show or hide the subtree. */
$(".logTreeToggle").click(function() {
$(".tree-toggle").click(function() {
if ($(this).siblings("ul:hidden").length != 0) {
$(this).siblings("ul").show();
$(this).text("-");
@ -54,16 +54,16 @@
});
/* Implementation of the expand all link. */
$(".logTreeExpandAll").click(function() {
$(".logTreeToggle", $(this).parent().siblings(".toplevel")).map(function() {
$(".tree-expand-all").click(function() {
$(".tree-toggle", $(this).parent().siblings(".tree")).map(function() {
$(this).siblings("ul").show();
$(this).text("-");
});
});
/* Implementation of the collapse all link. */
$(".logTreeCollapseAll").click(function() {
$(".logTreeToggle", $(this).parent().siblings(".toplevel")).map(function() {
$(".tree-collapse-all").click(function() {
$(".tree-toggle", $(this).parent().siblings(".tree")).map(function() {
$(this).siblings("ul").hide();
$(this).text("+");
});

46
src/root/static/css/logfile.css
View file

@ -3,37 +3,34 @@
padding: 0.3em;
}
ul.nesting, ul.toplevel {
ul.tree, ul.subtree {
padding: 0;
margin: 0;
}
ul.toplevel {
list-style-type: none;
}
.line, .head {
padding-top: 0em;
}
ul.nesting li.line, ul.nesting li.lastline {
/* Indent each tree level. */
li.tree-line {
position: relative;
list-style-type: none;
}
ul.nesting li.line {
padding-left: 2.0em;
}
ul.nesting li.lastline {
padding-left: 2.1em; /* for the 0.1em border-left in .lastline > .lineconn */
li.tree-line:last-child {
padding-left: 2.1em; /* for the 0.1em border-left in the last child */
}
li.line {
/* Draw vertical tree lines next to all children except the last. */
li.tree-line {
border-left: 0.1em solid #6185a0;
}
li.line > span.lineconn, li.lastline > span.lineconn {
li.tree-line:last-child {
border-left: 0;
}
/* Draw horizontal tree lines to all children. */
span.tree-conn {
position: absolute;
height: 0.65em;
left: 0em;
@ -41,10 +38,17 @@ li.line > span.lineconn, li.lastline > span.lineconn {
border-bottom: 0.1em solid #6185a0;
}
li.lastline > span.lineconn {
/* Draw the vertical tree line to the last child. */
li.tree-line:last-child > span.tree-conn {
border-left: 0.1em solid #6185a0;
}
.tree-toggle {
text-decoration: none;
font-family: monospace;
font-size: larger;
}
em.storeref {
color: #500000;
@ -75,12 +79,6 @@ em.storeref:hover span.popup {
}
.logTreeToggle {
text-decoration: none;
font-family: monospace;
font-size: larger;
}
span.code {
white-space: pre-wrap;
font-family: monospace;

21
src/xsl/log2html.xsl
View file

@ -8,11 +8,11 @@
<xsl:template match="logfile">
<p>
<a href="javascript:" class="btn btn-info logTreeExpandAll"><i class="icon-plus icon-white"></i> Expand all</a>
<a href="javascript:" class="btn btn-info tree-expand-all"><i class="icon-plus icon-white"></i> Expand all</a>
<xsl:text> </xsl:text>
<a href="javascript:" class="btn btn-info logTreeCollapseAll"><i class="icon-minus icon-white"></i> Collapse all</a>
<a href="javascript:" class="btn btn-info tree-collapse-all"><i class="icon-minus icon-white"></i> Collapse all</a>
</p>
<ul class='toplevel'>
<ul class='tree'>
<xsl:for-each select='line|nest'>
<li>
<xsl:apply-templates select='.'/>
@ -34,7 +34,7 @@
<xsl:variable name="arg"><xsl:choose><xsl:when test="$collapsed">true</xsl:when><xsl:otherwise>false</xsl:otherwise></xsl:choose></xsl:variable>
<xsl:if test="line|nest">
<a href="javascript:" class="logTreeToggle"></a>
<a href="javascript:" class="tree-toggle"></a>
<xsl:text> </xsl:text>
</xsl:if>
@ -43,18 +43,11 @@
<!-- Be careful to only generate <ul>s if there are <li>s, otherwise it’s malformed. -->
<xsl:if test="line|nest">
<ul class='nesting' style="{$style}">
<ul class='subtree' style="{$style}">
<xsl:for-each select='line|nest'>
<!-- Is this the last line? If so, mark it as such so that it
can be rendered differently. -->
<xsl:variable name="class"><xsl:choose><xsl:when test="position() != last()">line</xsl:when><xsl:otherwise>lastline</xsl:otherwise></xsl:choose></xsl:variable>
<li class='{$class}'>
<span class='lineconn' />
<span class='linebody'>
<li class='tree-line'>
<span class='tree-conn' />
<xsl:apply-templates select='.'/>
</span>
</li>
</xsl:for-each>
</ul>