[PATCH 1 of 5] paper: make actual changeset entries have backgrounds on /graph
Anton Shestakov
av6 at dwimlabs.net
Fri Jan 5 12:32:27 UTC 2018
# HG changeset patch
# User Anton Shestakov <av6 at dwimlabs.net>
# Date 1515149166 -28800
# Fri Jan 05 18:46:06 2018 +0800
# Node ID 3043da1ccea9eb76f562c6f2247d0ca7682887d9
# Parent 45ed821b5ce4a18011070a1eb05c6170c648e65e
paper: make actual changeset entries have backgrounds on /graph
This patch removes a separate container for backgrounds only and puts
backgrounds on changeset elements themselves. This makes it so that JS code
doesn't need to create background elements separately anymore.
There's a bit of manipulating positions of elements: every changeset entry has
a "fg" element that gets a higher z-index than <canvas> element. This
prioritizes text information, so that even if it somehow gets close to the
graph drawn on <canvas> (which has z-index of 5), it'll still be on top of it.
This can happen if commit message has a long first line and browser window is
narrow, for example.
diff --git a/mercurial/templates/paper/graph.tmpl b/mercurial/templates/paper/graph.tmpl
--- a/mercurial/templates/paper/graph.tmpl
+++ b/mercurial/templates/paper/graph.tmpl
@@ -50,21 +50,14 @@
<noscript><p>The revision graph only works with JavaScript-enabled browsers.</p></noscript>
<div id="wrapper">
-<ul id="nodebgs" class="stripes2"></ul>
<canvas id="graph"></canvas>
-<ul id="graphnodes">{nodes%graphentry}</ul>
+<ul id="graphnodes" class="stripes2">{nodes%graphentry}</ul>
</div>
<script type="text/javascript"{if(nonce, ' nonce="{nonce}"')}>
var data = {jsdata|json};
var graph = new Graph();
graph.scale({bg_height});
-
-graph.vertex = function(x, y, radius, color, parity, cur) \{
- Graph.prototype.vertex.apply(this, arguments);
- return ['<li class="bg"></li>', ''];
-}
-
graph.render(data);
</script>
diff --git a/mercurial/templates/paper/graphentry.tmpl b/mercurial/templates/paper/graphentry.tmpl
--- a/mercurial/templates/paper/graphentry.tmpl
+++ b/mercurial/templates/paper/graphentry.tmpl
@@ -1,7 +1,9 @@
<li data-node="{node|short}">
- <span class="desc">
- <a href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">{desc|strip|firstline|escape|nonempty}</a>
- </span>
- {alltags}
- <div class="info"><span class="age">{date|rfc822date}</span>, by {author|person}</div>
+ <div class="fg">
+ <span class="desc">
+ <a href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">{desc|strip|firstline|escape|nonempty}</a>
+ </span>
+ {alltags}
+ <div class="info"><span class="age">{date|rfc822date}</span>, by {author|person}</div>
+ </div>
</li>
diff --git a/mercurial/templates/static/style-paper.css b/mercurial/templates/static/style-paper.css
--- a/mercurial/templates/static/style-paper.css
+++ b/mercurial/templates/static/style-paper.css
@@ -460,22 +460,19 @@ canvas {
}
ul#graphnodes {
- position: absolute;
- z-index: 10;
- top: -1.0em;
- list-style: none inside none;
- padding: 0;
-}
-
-ul#nodebgs {
list-style: none inside none;
padding: 0;
margin: 0;
- top: -0.7em;
}
-ul#graphnodes li, ul#nodebgs li {
+ul#graphnodes li {
height: 39px;
+ overflow: visible;
+}
+
+ul#graphnodes li .fg {
+ position: absolute;
+ z-index: 10;
}
ul#graphnodes li .info {
diff --git a/tests/test-hgweb-empty.t b/tests/test-hgweb-empty.t
--- a/tests/test-hgweb-empty.t
+++ b/tests/test-hgweb-empty.t
@@ -294,21 +294,14 @@ Some tests for hgweb in an empty reposit
<noscript><p>The revision graph only works with JavaScript-enabled browsers.</p></noscript>
<div id="wrapper">
- <ul id="nodebgs" class="stripes2"></ul>
<canvas id="graph"></canvas>
- <ul id="graphnodes"></ul>
+ <ul id="graphnodes" class="stripes2"></ul>
</div>
<script type="text/javascript">
var data = [];
var graph = new Graph();
graph.scale(39);
-
- graph.vertex = function(x, y, radius, color, parity, cur) {
- Graph.prototype.vertex.apply(this, arguments);
- return ['<li class="bg"></li>', ''];
- }
-
graph.render(data);
</script>
diff --git a/tests/test-hgweb-symrev.t b/tests/test-hgweb-symrev.t
--- a/tests/test-hgweb-symrev.t
+++ b/tests/test-hgweb-symrev.t
@@ -59,9 +59,9 @@ Set up the repo
<a href="/graph/tip?revcount=30&style=paper">less</a>
<a href="/graph/tip?revcount=120&style=paper">more</a>
| rev 2: <a href="/graph/43c799df6e75?style=paper">(0)</a> <a href="/graph/tip?style=paper">tip</a>
- <a href="/rev/9d8c40cba617?style=paper">third</a>
- <a href="/rev/a7c1559b7bba?style=paper">second</a>
- <a href="/rev/43c799df6e75?style=paper">first</a>
+ <a href="/rev/9d8c40cba617?style=paper">third</a>
+ <a href="/rev/a7c1559b7bba?style=paper">second</a>
+ <a href="/rev/43c799df6e75?style=paper">first</a>
<a href="/graph/tip?revcount=30&style=paper">less</a>
<a href="/graph/tip?revcount=120&style=paper">more</a>
| rev 2: <a href="/graph/43c799df6e75?style=paper">(0)</a> <a href="/graph/tip?style=paper">tip</a>
@@ -126,8 +126,8 @@ Set up the repo
<a href="/graph/xyzzy?revcount=30&style=paper">less</a>
<a href="/graph/xyzzy?revcount=120&style=paper">more</a>
| rev 1: <a href="/graph/43c799df6e75?style=paper">(0)</a> <a href="/graph/tip?style=paper">tip</a>
- <a href="/rev/a7c1559b7bba?style=paper">second</a>
- <a href="/rev/43c799df6e75?style=paper">first</a>
+ <a href="/rev/a7c1559b7bba?style=paper">second</a>
+ <a href="/rev/43c799df6e75?style=paper">first</a>
<a href="/graph/xyzzy?revcount=30&style=paper">less</a>
<a href="/graph/xyzzy?revcount=120&style=paper">more</a>
| rev 1: <a href="/graph/43c799df6e75?style=paper">(0)</a> <a href="/graph/tip?style=paper">tip</a>
@@ -259,9 +259,9 @@ Set up the repo
<a href="/graph/tip?revcount=30&style=coal">less</a>
<a href="/graph/tip?revcount=120&style=coal">more</a>
| rev 2: <a href="/graph/43c799df6e75?style=coal">(0)</a> <a href="/graph/tip?style=coal">tip</a>
- <a href="/rev/9d8c40cba617?style=coal">third</a>
- <a href="/rev/a7c1559b7bba?style=coal">second</a>
- <a href="/rev/43c799df6e75?style=coal">first</a>
+ <a href="/rev/9d8c40cba617?style=coal">third</a>
+ <a href="/rev/a7c1559b7bba?style=coal">second</a>
+ <a href="/rev/43c799df6e75?style=coal">first</a>
<a href="/graph/tip?revcount=30&style=coal">less</a>
<a href="/graph/tip?revcount=120&style=coal">more</a>
| rev 2: <a href="/graph/43c799df6e75?style=coal">(0)</a> <a href="/graph/tip?style=coal">tip</a>
@@ -326,8 +326,8 @@ Set up the repo
<a href="/graph/xyzzy?revcount=30&style=coal">less</a>
<a href="/graph/xyzzy?revcount=120&style=coal">more</a>
| rev 1: <a href="/graph/43c799df6e75?style=coal">(0)</a> <a href="/graph/tip?style=coal">tip</a>
- <a href="/rev/a7c1559b7bba?style=coal">second</a>
- <a href="/rev/43c799df6e75?style=coal">first</a>
+ <a href="/rev/a7c1559b7bba?style=coal">second</a>
+ <a href="/rev/43c799df6e75?style=coal">first</a>
<a href="/graph/xyzzy?revcount=30&style=coal">less</a>
<a href="/graph/xyzzy?revcount=120&style=coal">more</a>
| rev 1: <a href="/graph/43c799df6e75?style=coal">(0)</a> <a href="/graph/tip?style=coal">tip</a>
More information about the Mercurial-devel
mailing list