diff options
| author | Kenneth Graunke <kenneth@whitecape.org> | 2013-06-06 21:02:17 -0700 |
|---|---|---|
| committer | Kenneth Graunke <kenneth@whitecape.org> | 2013-06-07 18:06:35 -0700 |
| commit | 92e5cc2fff064745fc492265c009d898c8d0af5b (patch) | |
| tree | a19ffd5a7109ae83b1a085ea3ae37e8b5d9387a9 | |
| parent | 3ea36d6d221fa83ee5400b841bcef7ca623e0a32 (diff) | |
Add initial XSLT and CSS stylesheets.
This makes it possible to view a pretty version of the task lists by
loading the XML file directly in the browser. No scripts or external
programs are necessary; simply pointing a browser at the files in a git
repository will do.
Ideally, it would be possible to view these via cgit's tree/plain
feature as well. Unfortunately, cgit.freedesktop.org doesn't appear to
return the correct mime-types (application/xml, application/xslt+xml,
and text/css) to make that happen.
Signed-off-by: Kenneth Graunke <kenneth@whitecape.org>
| -rw-r--r-- | tasks.css | 112 | ||||
| -rw-r--r-- | tasks.xsl | 127 |
2 files changed, 239 insertions, 0 deletions
diff --git a/tasks.css b/tasks.css new file mode 100644 index 0000000..7b03dfd --- /dev/null +++ b/tasks.css @@ -0,0 +1,112 @@ +/** + * This file is public domain. Do whatever you like with it. + */ +body { + margin-left: 2em; + margin-right: 2em; + background-color: #ffffff; +} + +/** + * Overlays (Lightboxes): + */ +.overlay { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: 0; + padding-top: 2em; + padding-left: 2em; + padding-right: 2em; + background: rgba(0,0,0,0.5); +} + +.overlay h2 { + margin-top: 0; +} + +.overlay > div { + margin-left: auto; + margin-right: auto; + margin-top: auto; + margin-bottom: auto; + overflow: auto; + width: 80%; + height: 80%; + border: 0.2em solid #000000; + background-color: #ffffff; + padding: 2em; +} + +/** + * Task tables: + */ +div.table { + display: table; + border-collapse: collapse; + width: 100%; + table-layout: fixed; +} + +div.table > * { + display: table-row; + color: black; + text-decoration: none; + border-bottom: 1px solid #777777; +} + +div.table > div:first-child { + font-weight: bold; + border-bottom: 1px solid black; +} + +div.table > * > span { + display: table-cell; + padding: 0.3em; +} + +/* Status columns */ +div.table > * > span { + width: 4em; + text-align: center; +} + +/* "Task Name" column */ +div.table > * > span:first-child { + width: 15em; + text-align: left; +} + +/* "Description" column */ +div.table > * > span:nth-child(2) { + width: 100%; + text-align: left; +} + +div.table > :nth-child(odd) { background-color: #f0f0f0 } +div.table > :nth-child(even) { background-color: #e0e0e0 } + +/* Green */ +div.table > .done:nth-child(odd) { background-color: #e6f9e6; } +div.table > .done:nth-child(even) { background-color: #cef1ce; } +div.table > :nth-child(odd) > .done { background-color: #e6f9e6; } +div.table > :nth-child(even) > .done { background-color: #cef1ce; } + +/* Yellow */ +div.table > .partial:nth-child(odd) { background-color: #fef8e2; } +div.table > .partial:nth-child(even) { background-color: #fbefc5; } +div.table > :nth-child(odd) > .partial { background-color: #fef8e2; } +div.table > :nth-child(even) > .partial { background-color: #fbefc5; } + +/* Red */ +div.table > .missing:nth-child(odd) { background-color: #f9e6e6; } +div.table > .missing:nth-child(even) { background-color: #f1cece; } +div.table > :nth-child(odd) > .missing { background-color: #f9e6e6; } +div.table > :nth-child(even) > .missing { background-color: #f1cece; } + +b { + font-weight: bold; +} diff --git a/tasks.xsl b/tasks.xsl new file mode 100644 index 0000000..ea2ab32 --- /dev/null +++ b/tasks.xsl @@ -0,0 +1,127 @@ +<?xml version="1.0" encoding="utf-8" ?> +<!-- + - This file is public domain. Do whatever you like with it. + --> +<xsl:stylesheet version="1.1" + xmlns:xsl="http://www.w3.org/1999/XSL/Transform" + xmlns="http://www.w3.org/1999/xhtml"> + <xsl:output method="xml" media-type="application/xhtml+xml" encoding="utf-8" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" indent="yes"/> + <xsl:template match="/"> + <html> + <head> + <title><xsl:value-of select="tasks/@name"/></title> + <link rel="stylesheet" type="text/css" href="tasks.css" /> + <script language="javascript" type="text/javascript"> + function showOverlay(id) { + var overlay = document.getElementById(id); + overlay.style.display = 'block'; + } + </script> + </head> + <body> + <h1><xsl:value-of select="tasks/@name"/></h1> + <!-- emit overlays for task details --> + <xsl:apply-templates select="tasks/category/task" mode="detail"/> + + <!-- emit main body --> + <xsl:apply-templates select="tasks/category"/> + </body> + </html> + </xsl:template> + <xsl:variable name="newline"><xsl:text> +</xsl:text></xsl:variable> + + <!-- + - Emit an overlay containing the full details of a task. + --> + <xsl:template match="task" mode="detail"> + <div class="overlay" onclick="this.style.display = 'none';"> + <xsl:attribute name="id"><xsl:value-of select="@name"/>:info</xsl:attribute> + <div> + <h2><xsl:value-of select="../@name"/> ยป <xsl:value-of select="@name"/></h2> + <div><b>Description:</b> + <xsl:choose> + <xsl:when test="contains(., '

')"> + <p><xsl:value-of select="substring-before(., '

')"/></p> + <p><xsl:value-of select="substring-after(., '

')"/></p> + </xsl:when> + <xsl:otherwise> + <p><xsl:copy-of select="."/></p> + </xsl:otherwise> + </xsl:choose> + </div> + <div><b>See specification:</b><p><xsl:value-of select="@specref"/></p></div> + </div> + </div> + </xsl:template> + + <!-- + - Emit a category overview, containing a table of all subtasks. + --> + <xsl:template match="category"> + <h2><xsl:value-of select="@name"/></h2> + <div class="table"> + <div> + <span>Task Name</span> + <span>Description</span> + <span>Piglit</span> + <span>Mesa</span> + </div> + <xsl:apply-templates select="task" mode="table"/> + </div> + </xsl:template> + + <xsl:template name="statuscolumn"> + <xsl:param name="attr"/> + <span> + <xsl:choose> + <xsl:when test="$attr = 'done'"> + <xsl:attribute name="class">done</xsl:attribute>✓ + </xsl:when> + <xsl:otherwise> + <xsl:value-of select="$attr"/> + </xsl:otherwise> + </xsl:choose> + </span> + </xsl:template> + + <!-- + - Emit a table row for a task. + --> + <xsl:template match="task" mode="table"> + <a> + <xsl:attribute name="href"> + javascript:showOverlay('<xsl:value-of select="@name"/>:info') + </xsl:attribute> + <xsl:if test="@mesa and @piglit = 'done'"> + <xsl:attribute name="class">done</xsl:attribute> + </xsl:if> + <xsl:if test="@mesa or @piglit"> + <xsl:attribute name="class">partial</xsl:attribute> + </xsl:if> + <span> + <xsl:value-of select="@name"/> + </span> + <span> + <!-- + - Display a short description: text before two consecutive newlines. + - This is similar to how git commit messages work. + --> + <xsl:choose> + <xsl:when test="contains(., '

')"> + <xsl:value-of select="substring-before(., '

')"/> ... ▸ + </xsl:when> + <xsl:otherwise> + <xsl:copy-of select="."/> + </xsl:otherwise> + </xsl:choose> + </span> + <xsl:call-template name="statuscolumn"> + <xsl:with-param name="attr" select="@piglit"/> + </xsl:call-template> + <xsl:call-template name="statuscolumn"> + <xsl:with-param name="attr" select="@mesa"/> + </xsl:call-template> + </a> + </xsl:template> +</xsl:stylesheet> |