Mercurial > hg-stable

changeset 35533:5afe0ca59b07

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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.
author Anton Shestakov <av6@dwimlabs.net>
date Fri, 05 Jan 2018 18:46:06 +0800
parents fb2e59e92651
children acd8a2454b47
files mercurial/templates/paper/graph.tmpl mercurial/templates/paper/graphentry.tmpl mercurial/templates/static/style-paper.css tests/test-hgweb-empty.t tests/test-hgweb-symrev.t
diffstat 5 files changed, 26 insertions(+), 41 deletions(-) [+]
line wrap: on
line diff
--- a/mercurial/templates/paper/graph.tmpl	Thu Jan 04 12:34:40 2018 +0100
+++ b/mercurial/templates/paper/graph.tmpl	Fri Jan 05 18:46:06 2018 +0800
@@ -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>
 
--- a/mercurial/templates/paper/graphentry.tmpl	Thu Jan 04 12:34:40 2018 +0100
+++ b/mercurial/templates/paper/graphentry.tmpl	Fri Jan 05 18:46:06 2018 +0800
@@ -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>
--- a/mercurial/templates/static/style-paper.css	Thu Jan 04 12:34:40 2018 +0100
+++ b/mercurial/templates/static/style-paper.css	Fri Jan 05 18:46:06 2018 +0800
@@ -460,22 +460,19 @@
 }
 
 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 {
--- a/tests/test-hgweb-empty.t	Thu Jan 04 12:34:40 2018 +0100
+++ b/tests/test-hgweb-empty.t	Fri Jan 05 18:46:06 2018 +0800
@@ -294,21 +294,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"></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>
   
--- a/tests/test-hgweb-symrev.t	Thu Jan 04 12:34:40 2018 +0100
+++ b/tests/test-hgweb-symrev.t	Fri Jan 05 18:46:06 2018 +0800
@@ -59,9 +59,9 @@
   <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 @@
   <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 @@
   <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 @@
   <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>