upstream/mercurial-mirror Commit - r20255:b1d65cb8

hgweb: infinite scroll support for monoblue style

Takumi IINO -

r20255:b1d65cb8 default

parent child

mercurial/templates/monoblue/graph.tmpl

0 +11 0

             {header}
                 <title>{repo|escape}: graph</title>
                 <link rel="alternate" type="application/atom+xml" href="{url|urlescape}atom-log" title="Atom feed for {repo|escape}"/>
                 <link rel="alternate" type="application/rss+xml" href="{url|urlescape}rss-log" title="RSS feed for {repo|escape}"/>
                 <!--[if IE]><script type="text/javascript" src="{staticurl|urlescape}excanvas.js"></script><![endif]-->
             </head>
             <body>
             <div id="container">
                 <div class="page-header">
                     <h1 class="breadcrumb"><a href="/">Mercurial</a> {pathdef%breadcrumb} / graph</h1>
                     <form action="{url|urlescape}log">
                         {sessionvars%hiddenformentry}
                         <dl class="search">
                             <dt><label>Search: </label></dt>
                             <dd><input type="text" name="rev" /></dd>
                         </dl>
                     </form>
                     <ul class="page-nav">
                         <li><a href="{url|urlescape}summary{sessionvars%urlparameter}">summary</a></li>
                         <li><a href="{url|urlescape}shortlog{sessionvars%urlparameter}">shortlog</a></li>
                         <li><a href="{url|urlescape}changelog{sessionvars%urlparameter}">changelog</a></li>
                         <li class="current">graph</li>
                         <li><a href="{url|urlescape}tags{sessionvars%urlparameter}">tags</a></li>
                         <li><a href="{url|urlescape}bookmarks{sessionvars%urlparameter}">bookmarks</a></li>
                         <li><a href="{url|urlescape}branches{sessionvars%urlparameter}">branches</a></li>
                         <li><a href="{url|urlescape}file/{node|short}{sessionvars%urlparameter}">files</a></li>
             	    <li><a href="{url|urlescape}help{sessionvars%urlparameter}">help</a></li>
                     </ul>
                 </div>
                 <h2 class="no-link no-border">graph</h2>
                 <div id="noscript">The revision graph only works with JavaScript-enabled browsers.</div>
                 <div id="wrapper">
                     <ul id="nodebgs"></ul>
                     <canvas id="graph" width="480" height="{canvasheight}"></canvas>
                     <ul id="graphnodes"></ul>
                 </div>
                 <script>
                 <!-- hide script content
                 document.getElementById('noscript').style.display = 'none';
                 var data = {jsdata|json};
                 var graph = new Graph();
                 graph.scale({bg_height});
                 graph.vertex = function(x, y, color, parity, cur) \{
                     this.ctx.beginPath();
                     color = this.setColor(color, 0.25, 0.75);
                     this.ctx.arc(x, y, radius, 0, Math.PI * 2, true);
                     this.ctx.fill();
                     var bg = '<li class="bg parity' + parity + '"></li>';
                     var left = (this.bg_height - this.box_size) + (this.columns + 1) * this.box_size;
                     var nstyle = 'padding-left: ' + left + 'px;';
                     var tagspan = '';
                     if (cur[7].length || cur[8].length || (cur[6][0] != 'default' || cur[6][1])) \{
                         tagspan = '<span class="logtags">';
                         if (cur[6][1]) \{
                             tagspan += '<span class="branchtag" title="' + cur[6][0] + '">';
                             tagspan += cur[6][0] + '</span> ';
                         } else if (!cur[6][1] && cur[6][0] != 'default') \{
                             tagspan += '<span class="inbranchtag" title="' + cur[6][0] + '">';
                             tagspan += cur[6][0] + '</span> ';
                         }
                         if (cur[7].length) \{
                             for (var t in cur[7]) \{
                                 var tag = cur[7][t];
                                 tagspan += '<span class="tagtag">' + tag + '</span> ';
                             }
                         }
                         if (cur[8].length) \{
                             for (var t in cur[8]) \{
                                 var bookmark = cur[8][t];
                                 tagspan += '<span class="bookmarktag">' + bookmark + '</span> ';
                             }
                         }
                         tagspan += '</span>';
                     }
                     var item = '<li style="' + nstyle + '"><span class="desc">';
                     item += '<a href="{url|urlescape}rev/' + cur[0] + '{sessionvars%urlparameter}" title="' + cur[0] + '">' + cur[3] + '</a>';
                     item += '</span>' + tagspan + '<span class="info">' + cur[5] + ', by ' + cur[4] + '</span></li>';
                     return [bg, item];
                 }
                 graph.render(data);
                 // stop hiding script -->
                 </script>
                 <div class="page-path">
                     <a href="{url|urlescape}graph/{rev}{lessvars%urlparameter}">less</a>
                     <a href="{url|urlescape}graph/{rev}{morevars%urlparameter}">more</a>
                     | {changenav%navgraph}
                 </div>
+                <script type="text/javascript">
+                ajaxScrollInit(
+                        '{url|urlescape}graph/{rev}?revcount=%next%&style={style}',
+                        {revcount}+60,
+                        function (htmlText, previousVal) \{ return previousVal + 60; },
+                        '#wrapper',
+                        '<div class="%class%" style="text-align: center;">%text%</div>',
+                        'graph'
+                );
+                </script>
             {footer}

mercurial/templates/monoblue/shortlog.tmpl

0 +16 -1

             {header}
                 <title>{repo|escape}: shortlog</title>
                 <link rel="alternate" type="application/atom+xml" href="{url|urlescape}atom-log" title="Atom feed for {repo|escape}"/>
                 <link rel="alternate" type="application/rss+xml" href="{url|urlescape}rss-log" title="RSS feed for {repo|escape}"/>
             </head>
             <body>
             <div id="container">
                 <div class="page-header">
                     <h1 class="breadcrumb"><a href="/">Mercurial</a> {pathdef%breadcrumb} / shortlog</h1>
                     <form action="{url|urlescape}log">
                         {sessionvars%hiddenformentry}
                         <dl class="search">
                             <dt><label>Search: </label></dt>
                             <dd><input type="text" name="rev" /></dd>
                         </dl>
                     </form>
                     <ul class="page-nav">
                         <li><a href="{url|urlescape}summary{sessionvars%urlparameter}">summary</a></li>
                         <li class="current">shortlog</li>
                         <li><a href="{url|urlescape}log{sessionvars%urlparameter}">changelog</a></li>
                         <li><a href="{url|urlescape}graph/{node|short}{sessionvars%urlparameter}">graph</a></li>
                         <li><a href="{url|urlescape}tags{sessionvars%urlparameter}">tags</a></li>
                         <li><a href="{url|urlescape}bookmarks{sessionvars%urlparameter}">bookmarks</a></li>
                         <li><a href="{url|urlescape}branches{sessionvars%urlparameter}">branches</a></li>
                         <li><a href="{url|urlescape}file/{node|short}{sessionvars%urlparameter}">files</a></li>
             	    {archives%archiveentry}
             	    <li><a href="{url|urlescape}help{sessionvars%urlparameter}">help</a></li>
                     </ul>
                 </div>
                 <h2 class="no-link no-border">shortlog</h2>
-                <table>
+                <table class="shortlogtable">
             {entries%shortlogentry}
                 </table>
                 <div class="page-path">
                 {changenav%navshort}
                 </div>
+                <script type="text/javascript">
+                ajaxScrollInit(
+                        '{url|urlescape}shortlog/%next%{sessionvars%urlparameter}',
+                        '{nextentry%"{node}"}', <!-- NEXTHASH
+                        function (htmlText, previousVal) \{
+                            var m = htmlText.match(/'(\w+)', <!-- NEXTHASH/);
+                            return m ? m[1] : null;
+                        },
+                        '.shortlogtable > tbody:nth-of-type(1)',
+                        '<tr class="%class%">\
+                        <td colspan="4" style="text-align: center;">%text%</td>\
+                        </tr>'
+                );
+                </script>
             {footer}

mercurial/templates/spartan/header.tmpl

0 +1 -1

-            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+            <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
             <html>
             <head>
             <link rel="icon" href="{staticurl|urlescape}hgicon.png" type="image/png">
             <meta name="robots" content="index, nofollow" />
             <link rel="stylesheet" href="{staticurl|urlescape}style.css" type="text/css" />
             <script type="text/javascript" src="{staticurl|urlescape}mercurial.js"></script>

mercurial/templates/static/style-monoblue.css

0 +24 0

             /*** Initial Settings ***/
             * {
               margin: 0;
               padding: 0;
               font-weight: normal;
               font-style: normal;
             }
             html {
               font-size: 100%;
               font-family: sans-serif;
             }
             body {
               font-size: 77%;
               margin: 15px 50px;
               background: #4B4B4C;
             }
             a {
               color:#0000cc;
               text-decoration: none;
             }
             /*** end of Initial Settings ***/
             /** common settings **/
             div#container {
               background: #FFFFFF;
               position: relative;
               color: #666;
             }
             div.page-header {
               padding: 50px 20px 0;
               background: #006699 top left repeat-x;
               position: relative;
             }
               div.page-header h1 {
                 margin: 10px 0 30px;
                 font-size: 1.8em;
                 font-weight: bold;
                 font-family: osaka,'MS P Gothic', Georgia, serif;
                 letter-spacing: 1px;
                 color: #DDD;
               }
               div.page-header h1 a {
                 font-weight: bold;
                 color: #FFF;
               }
               div.page-header a {
                 text-decoration: none;
               }
               div.page-header form {
                 position: absolute;
                 margin-bottom: 2px;
                 bottom: 0;
                 right: 20px;
               }
               div.page-header form label {
                 color: #DDD;
               }
               div.page-header form input {
                 padding: 2px;
                 border: solid 1px #DDD;
               }
               div.page-header form dl {
                 overflow: hidden;
               }
               div.page-header form dl dt {
                 font-size: 1.2em;
               }
               div.page-header form dl dt,
               div.page-header form dl dd {
                 margin: 0 0 0 5px;
                 float: left;
                 height: 24px;
                 line-height: 20px;
               }
               ul.page-nav {
                 margin: 10px 0 0 0;
                 list-style-type: none;
                 overflow: hidden;
                 width: 900px;
               }
                 ul.page-nav li {
                   margin: 0 2px 0 0;
                   float: left;
                   width: 80px;
                   height: 24px;
                   font-size: 1.1em;
                   line-height: 24px;
                   text-align: center;
                 }
                 ul.page-nav li.current {
                   background: #FFF;
                 }
                 ul.page-nav li a {
                   height: 24px;
                   color: #666;
                   background: #DDD;
                   display: block;
                   text-decoration: none;
                 }
                 ul.page-nav li a:hover {
                   color:#333;
                   background: #FFF;
                 }
             ul.submenu {
               margin: 10px 0 -10px 20px;
               list-style-type: none;
             }
             ul.submenu li {
               margin: 0 10px 0 0;
               font-size: 1.2em;
               display: inline;
             }
             h2 {
               margin: 20px 0 10px;
               height: 30px;
               line-height: 30px;
               text-indent: 20px;
               background: #FFF;
               font-size: 1.2em;
               border-top: dotted 1px #D5E1E6;
               font-weight: bold;
             }
             h2.no-link {
               color:#006699;
             }
             h2.no-border {
               color: #FFF;
               background: #006699;
               border: 0;
             }
             h2 a {
               font-weight:bold;
               color:#006699;
             }
             div.page-path {
               text-align: right;
               padding: 20px 30px 10px 0;
               border:solid #d9d8d1;
               border-width:0px 0px 1px;
               font-size: 1.2em;
             }
             div.page-footer {
               margin: 50px 0 0;
               position: relative;
             }
               div.page-footer p {
                 position: relative;
                 left: 20px;
                 bottom: 5px;
                 font-size: 1.2em;
               }
               ul.rss-logo {
                 position: absolute;
                 top: -10px;
                 right: 20px;
                 height: 20px;
                 list-style-type: none;
               }
               ul.rss-logo li {
                 display: inline;
               }
               ul.rss-logo li a {
                 padding: 3px 6px;
                 line-height: 10px;
                 border:1px solid;
                 border-color:#fcc7a5 #7d3302 #3e1a01 #ff954e;
                 color:#ffffff;
                 background-color:#ff6600;
                 font-weight:bold;
                 font-family:sans-serif;
                 font-size:10px;
                 text-align:center;
                 text-decoration:none;
               }
               div.rss-logo li a:hover {
                 background-color:#ee5500;
               }
             p.normal {
               margin: 20px 0 20px 30px;
               font-size: 1.2em;
             }
             table {
               margin: 10px 0 0 20px;
               width: 95%;
               border-collapse: collapse;
             }
             table tr td {
               font-size: 1.1em;
             }
             table tr td.nowrap {
               white-space: nowrap;
             }
             table tr td.closed {
               background-color: #99f;
             }
             /*
             table tr.parity0:hover,
             table tr.parity1:hover {
               background: #D5E1E6;
             }
             */
             table tr.parity0 {
               background: #F1F6F7;
             }
             table tr.parity1 {
               background: #FFFFFF;
             }
             table tr td {
               padding: 5px 5px;
             }
             table.annotated tr td {
               padding: 0px 5px;
             }
             span.logtags span {
               padding: 2px 6px;
               font-weight: normal;
               font-size: 11px;
               border: 1px solid;
               background-color: #ffaaff;
               border-color: #ffccff #ff00ee #ff00ee #ffccff;
             }
             span.logtags span.tagtag {
               background-color: #ffffaa;
               border-color: #ffffcc #ffee00 #ffee00 #ffffcc;
             }
             span.logtags span.branchtag {
               background-color: #aaffaa;
               border-color: #ccffcc #00cc33 #00cc33 #ccffcc;
             }
             span.logtags span.inbranchtag {
               background-color: #d5dde6;
               border-color: #e3ecf4 #9398f4 #9398f4 #e3ecf4;
             }
             span.logtags span.bookmarktag {
               background-color: #afdffa;
               border-color: #ccecff #46ace6 #46ace6 #ccecff;
             }
             div.diff pre {
               margin: 10px 0 0 0;
             }
             div.diff pre span {
               font-family: monospace;
               white-space: pre;
               font-size: 1.2em;
               padding: 3px 0;
             }
             td.source {
               white-space: pre;
               font-family: monospace;
               margin: 10px 30px 0;
               font-size: 1.2em;
               font-family: monospace;
             }
               div.source div.parity0,
               div.source div.parity1 {
                 padding: 1px;
                 font-size: 1.2em;
               }
               div.source div.parity0 {
                 background: #F1F6F7;
               }
               div.source div.parity1 {
                 background: #FFFFFF;
               }
             div.parity0:hover,
             div.parity1:hover {
               background: #D5E1E6;
             }
             .linenr {
               color: #999;
               text-align: right;
             }
             .lineno {
               text-align: right;
             }
             .lineno a {
               color: #999;
             }
             td.linenr {
               width: 60px;
             }
             div#powered-by {
               position: absolute;
               width: 75px;
               top: 15px;
               right: 20px;
               font-size: 1.2em;
             }
             div#powered-by a {
               color: #EEE;
               text-decoration: none;
             }
             div#powered-by a:hover {
               text-decoration: underline;
             }
             /*
             div#monoblue-corner-top-left {
               position: absolute;
               top: 0;
               left: 0;
               width: 10px;
               height: 10px;
               background: url(./monoblue-corner.png) top left no-repeat !important;
               background: none;
             }
             div#monoblue-corner-top-right {
               position: absolute;
               top: 0;
               right: 0;
               width: 10px;
               height: 10px;
               background: url(./monoblue-corner.png) top right no-repeat !important;
               background: none;
             }
             div#monoblue-corner-bottom-left {
               position: absolute;
               bottom: 0;
               left: 0;
               width: 10px;
               height: 10px;
               background: url(./monoblue-corner.png) bottom left no-repeat !important;
               background: none;
             }
             div#monoblue-corner-bottom-right {
               position: absolute;
               bottom: 0;
               right: 0;
               width: 10px;
               height: 10px;
               background: url(./monoblue-corner.png) bottom right no-repeat !important;
               background: none;
             }
             */
             /** end of common settings **/
             /** summary **/
             dl.overview {
               margin: 0 0 0 30px;
               font-size: 1.1em;
               overflow: hidden;
             }
               dl.overview dt,
               dl.overview dd {
                 margin: 5px 0;
                 float: left;
               }
               dl.overview dt {
                 clear: left;
                 font-weight: bold;
                 width: 150px;
               }
             /** end of summary **/
             /** chagelog **/
             h3.changelog {
               margin: 20px 0 5px 30px;
               padding: 0 0 2px;
               font-size: 1.4em;
               border-bottom: dotted 1px #D5E1E6;
             }
             ul.changelog-entry {
               margin: 0 0 10px 30px;
               list-style-type: none;
               position: relative;
             }
             ul.changelog-entry li span.revdate {
               font-size: 1.1em;
             }
             ul.changelog-entry li.age {
               position: absolute;
               top: -25px;
               right: 10px;
               font-size: 1.4em;
               color: #CCC;
               font-weight: bold;
               font-style: italic;
             }
             ul.changelog-entry li span.name {
               font-size: 1.2em;
               font-weight: bold;
             }
             ul.changelog-entry li.description {
               margin: 10px 0 0;
               font-size: 1.1em;
             }
             /** end of changelog **/
             /** file **/
             p.files {
               margin: 0 0 0 20px;
               font-size: 2.0em;
               font-weight: bold;
             }
             /** end of file **/
             /** changeset **/
             h3.changeset {
               margin: 20px 0 5px 20px;
               padding: 0 0 2px;
               font-size: 1.6em;
               border-bottom: dotted 1px #D5E1E6;
             }
             p.changeset-age {
               position: relative;
             }
             p.changeset-age span {
               position: absolute;
               top: -25px;
               right: 10px;
               font-size: 1.4em;
               color: #CCC;
               font-weight: bold;
               font-style: italic;
             }
             p.description {
               margin: 10px 30px 0 30px;
               padding: 10px;
               border: solid 1px #CCC;
               font-size: 1.2em;
             }
             /** end of changeset **/
             /** canvas **/
             div#wrapper {
             	position: relative;
                 font-size: 1.2em;
             }
             canvas {
             	position: absolute;
             	z-index: 5;
             	top: -0.7em;
             }
             ul#nodebgs li.parity0 {
                 background: #F1F6F7;
             }
             ul#nodebgs li.parity1 {
                 background: #FFFFFF;
             }
             ul#graphnodes {
             	position: absolute;
             	z-index: 10;
             	top: 7px;
             	list-style: none inside none;
             }
             ul#nodebgs {
             	list-style: none inside none;
             }
             ul#graphnodes li, ul#nodebgs li {
             	height: 39px;
             }
             ul#graphnodes li .info {
             	display: block;
             	position: relative;
             }
             /** end of canvas **/
             /** comparison **/
             .legend {
                 margin-left: 20px;
                 padding: 1.5% 0 1.5% 0;
             }
             .legendinfo {
                 border: 1px solid #999;
                 font-size: 80%;
                 text-align: center;
                 padding: 0.5%;
             }
             .equal {
                 background-color: #ffffff;
             }
             .delete {
                 background-color: #faa;
                 color: #333;
             }
             .insert {
                 background-color: #ffa;
             }
             .replace {
                 background-color: #e8e8e8;
             }
             .comparison {
                 overflow-x: auto;
             }
             .comparison table td {
                 padding: 0px 5px;
             }
             .header th {
                 font-weight: bold;
             }
             .block {
                 border-top: 1px solid #999;
             }
             /** end of comparison **/
             .breadcrumb a:hover {
                 text-decoration:underline;
             }
+            .scroll-loading {
+              -webkit-animation: change_color 1s linear 0s infinite alternate;
+              -moz-animation: change_color 1s linear 0s infinite alternate;
+              -o-animation: change_color 1s linear 0s infinite alternate;
+              animation: change_color 1s linear 0s infinite alternate;
+            }
+            @-webkit-keyframes change_color {
+              from { background-color: #A0CEFF; } to {  }
+            }
+            @-moz-keyframes change_color {
+              from { background-color: #A0CEFF; } to {  }
+            }
+            @-o-keyframes change_color {
+              from { background-color: #A0CEFF; } to {  }
+            }
+            @keyframes change_color {
+              from { background-color: #A0CEFF; } to {  }
+            }
+            .scroll-loading-error {
+                background-color: #FFCCCC !important;
+            }

General Comments 0

Write
Preview

You need to be logged in to leave comments. Login now

No TODOs yet

	Site-wide shortcuts
/	Use quick search box
g h	Goto home page
g g	Goto my private gists page
g G	Goto my public gists page
g 0-9	Goto bookmarked items from 0-9
n r	New repository page
n g	New gist page

	Repositories
g s	Goto summary page
g c	Goto changelog page
g f	Goto files page
g F	Goto files page with file search activated
g p	Goto pull requests page
g o	Goto repository settings
g O	Goto repository access permissions settings
t s	Toggle sidebar on some pages