UI fixes

- added expandable commits messages
- ui fixes, icons/graph

development.ini

@@ -74,17 +74,17 b' proxypass_auth_enabled = false'
 ## pattern to get the issues from commit messages
 ## default one used here is #1234
 
-#url_pat = (?:^#|\s#)(\w+)
+url_pat = (?:^#|\s#)(\w+)
 
 ## server url to the issue, each {id} will be replaced with id
 ## fetched from the regex
 
-#issue_server = https://myissueserver.com/issue/{id}
+issue_server = https://myissueserver.com/issue/{id}
 
 ## prefix to add to link to indicate it's an url
 ## #314 will be replaced by <issue_prefix><id>
 
-#issue_prefix = #
+issue_prefix = #
 
 
 ####################################

rhodecode/lib/helpers.py

@@ -758,8 +758,8 b' def urlify_commit(text_):'
             def url_func(match_obj):
                 issue_id = match_obj.groups()[0]
                 tmpl = (
-                '<a class="%(cls)s" href="%(url)s">'
-                ' %(issue-prefix)s%(id-repr)s'
+                ' <a class="%(cls)s" href="%(url)s">'
+                '%(issue-prefix)s%(id-repr)s'
                 '</a>'
                 )
                 return tmpl % (

rhodecode/public/css/style.css

@@ -1130,7 +1130,27 b' tbody .yui-dt-editable { cursor: pointer'
 	clear: both;
 	overflow: hidden;
 	margin: 0;
-	padding: 10px 0;
+	padding: 5px 0;
+    white-space: pre-wrap;
+}
+#content div.box div.expand{
+position:absolute;
+width:inherit;
+height:14px;
+font-size:14px;
+text-align:left;
+cursor: pointer;
+font-family: monospace;
+color:#003367;
+/*
+background:-webkit-gradient(linear,0% 50%,100% 50%,color-stop(0%,rgba(255,255,255,0)),color-stop(100%,rgba(255,255,255,1)));
+background:-webkit-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1));
+background:-moz-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1));
+background:-o-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1));
+background:-ms-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1));
+background:linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1));
+*/
+display: none;
 }
 
 #content div.box div.message a {
@@ -2115,8 +2135,12 b' h3.files_location {'
 	padding: 5px !important;
 }
 
+.tablerow0 {
+	background-color: #F8F8F8;
+}
+
 .tablerow1 {
-	background-color: #F8F8F8;
+    background-color: #FFFFFF;
 }
 
 .changeset_id {
@@ -2246,7 +2270,7 b' h3.files_location {'
 }
 
 #graph_content #rev_range_container {
-	padding: 5px 20px;
+	padding: 7px 20px;
 	float: left;
 }
 
@@ -2276,6 +2300,7 b' h3.files_location {'
 
 #graph_content .container .left .date {
 	color: #444444;
+	padding-left: 22px;
 }
 
 #graph_content .container .left .author {
@@ -2539,7 +2564,10 b' table.code-browser .browser-file {'
     margin-left:1px;
     
 }
-
+.diffblock .diff-actions {
+    padding: 2px 0px 0px 2px;
+    float: left;
+}
 .diffblock  .diff-menu ul li {
 	padding: 0px 0px 0px 0px !important;
 }
@@ -3987,6 +4015,7 b' div.diffblock .code-header-title{'
 div.diffblock .code-header .date{
     float:left;
     text-transform: uppercase;
+    padding: 2px 0px 0px 2px;
 }
 div.diffblock .code-header div{
     margin-left:4px;
@@ -4099,4 +4128,4 b' table.code-difftable .code pre{'
 	cursor: auto !important;
 	background-color: inherit !important;
 	
-}
  No newline at end of file
+}

rhodecode/public/js/graph.js

@@ -63,18 +63,17 b' function BranchRenderer() {'
 		var rela = document.getElementById('graph');
 		var pad = pad;
 		var scale = 22;
-		
+
 		for (var i in data) {
 			this.scale(scale);
+
 			var row = document.getElementById("chg_"+idx);
 			var	next = document.getElementById("chg_"+idx+1);
+			if(row == null){
+				continue
+			}
 			var extra = 0;
 			
-			//skip this since i don't have DATE in my app
-			//if (next.is('.changesets-date')) {
-			//	extra = next.outerHeight();
-			//}
-						
 			this.cell[1] += row.clientWidth;
 			this.bg[1] += this.bg_height;
 			
@@ -82,7 +81,9 b' function BranchRenderer() {'
 			nodeid = cur[0];
 			node = cur[1];
 			in_l = cur[2];
-			
+
+			var pos_ = 26;
+
 			for (var j in in_l) {
 				
 				line = in_l[j];
@@ -99,8 +100,7 b' function BranchRenderer() {'
 				}
 				
 				this.setColor(color, 0.0, 0.65);
-				
-				y = row.offsetTop-rela.offsetTop+row.offsetHeight/2;
+				y = row.offsetTop-rela.offsetTop+pos_;
 				x = pad-((this.cell[0] + this.box_size * start - 1) + this.bg_height-2);
 				
 				this.ctx.lineWidth=this.line_width;
@@ -119,7 +119,7 b' function BranchRenderer() {'
 					var x2 = pad-((1 + this.box_size * end) + this.bg_height-2);
 					var y2 = y + row.offsetHeight;
 					var ymid = (y+y2) / 2;
-					this.ctx.bezierCurveTo (x,ymid,x2,ymid,x2,y2);
+					this.ctx.bezierCurveTo(x,ymid,x2,ymid,x2,y2);
 				}
 				this.ctx.stroke();
 			}
@@ -128,7 +128,7 b' function BranchRenderer() {'
 			color = node[1]
 			
 			radius = this.dot_radius;
-			y = row.offsetTop-rela.offsetTop+row.offsetHeight/2;
+			y = row.offsetTop-rela.offsetTop+pos_;
 			x = pad-(Math.round(this.cell[0] * scale/2 * column + radius) + 15 - (column*4));
 		
 			this.ctx.beginPath();

rhodecode/templates/changelog/changelog.html

@@ -44,11 +44,11 b''
 					</div>
 					
 				%for cnt,cs in enumerate(c.pagination):
-					<div id="chg_${cnt+1}" class="container ${'tablerow1' if cnt%2==0 else 'tablerow2'}">
+					<div id="chg_${cnt+1}" class="container ${'tablerow%s' % (cnt%2)}">
 						<div class="left">
 							<div>
 							${h.checkbox(cs.short_id,class_="changeset_range")}
-							<span class="tooltip" title="${cs.date}"><a href="${h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id)}"><span class="changeset_id">${cs.revision}:<span class="changeset_hash">${h.short_id(cs.raw_id)}</span></span></a></span>
+							<span class="tooltip" title="${h.age(cs.date)}"><a href="${h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id)}"><span class="changeset_id">${cs.revision}:<span class="changeset_hash">${h.short_id(cs.raw_id)}</span></span></a></span>
 							</div>
 							<div class="author">
 								<div class="gravatar">
@@ -56,9 +56,11 b''
 								</div>
 								<div title="${cs.author}" class="user">${h.person(cs.author)}</div>
 							</div>
+                            <div class="date">${cs.date}</div>
 						</div>
 						<div class="mid">
-							<div class="message">${h.link_to(h.wrap_paragraphs(cs.message),h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id))}</div>
+                            <div class="message">${h.urlify_commit(h.wrap_paragraphs(cs.message))}</div>
+                            <div class="expand ${'tablerow%s' % (cnt%2)}">&darr; ${_('show more')} &darr;</div>
 						</div>	
 						<div class="right">
 									<div id="${cs.raw_id}_changes_info" class="changes">
@@ -132,6 +134,34 b''
                         }
                     });					
 					
+                    var msgs = YUQ('.message');
+                    // get firts element height;
+                    var el = YUQ('.container')[0];
+                    var row_h = el.clientHeight;
+                    for(var i=0;i<msgs.length;i++){
+                    	var m = msgs[i];
+
+                    	var h = m.clientHeight;
+                    	var pad = YUD.getStyle(m,'padding');
+                    	if(h > row_h){
+                    		YUD.setStyle(m.nextElementSibling,'display','block');
+                    		YUD.setStyle(m.nextElementSibling,'margin-top',row_h-(h+14)+'px');
+                    		YUD.setAttribute(m.nextElementSibling,'expand',h);
+                    	};
+                    }
+                    YUE.on(YUQ('.expand'),'click',function(e){
+                    	var elem = e.currentTarget.parentElement.parentElement;
+                    	YUD.setStyle(e.currentTarget,'display','none');
+                    	YUD.setStyle(elem,'height',YUD.getAttribute(e.currentTarget,'expand')+'px');
+                    	
+                    	//redraw the graph max_w and jsdata are global vars
+                        set_canvas(max_w);
+                        
+                        var r = new BranchRenderer();
+                        r.render(jsdata,max_w);                    	
+                    	
+                    })
+                    
                     // Fetch changeset details 
                     YUE.on(YUD.getElementsByClassName('changed_total'),'click',function(e){
                     	var id = e.currentTarget.id
@@ -188,4 +218,4 b''
 		%endif  
     </div>
 </div>    
-</%def>
  No newline at end of file
+</%def>

rhodecode/templates/changeset/changeset.html

@@ -27,15 +27,15 b''
     <div class="table">
 		<div class="diffblock">
 			<div class="code-header">
-                <div class="date">${c.changeset.revision}:
-                  ${h.link_to(h.short_id(c.changeset.raw_id),h.url('changeset_home',repo_name=c.repo_name,revision=c.changeset.raw_id))}
+                <div class="date">
+                  R${c.changeset.revision}:${h.link_to(h.short_id(c.changeset.raw_id),h.url('changeset_home',repo_name=c.repo_name,revision=c.changeset.raw_id))}
                   ${c.changeset.date}</div>
-                <span class="diff-actions">
-                  <a href="${h.url('raw_changeset_home',repo_name=c.repo_name,revision=c.changeset.raw_id,diff='show')}" title="${_('raw diff')}"><img class="icon" src="${h.url('/images/icons/page_white_text.png')}"/></a>
-                  <a href="${h.url('raw_changeset_home',repo_name=c.repo_name,revision=c.changeset.raw_id,diff='download')}" title="${_('download diff')}"><img class="icon" src="${h.url('/images/icons/down_16.png')}"/></a>
+                <div class="diff-actions">
+                  <a href="${h.url('raw_changeset_home',repo_name=c.repo_name,revision=c.changeset.raw_id,diff='show')}" title="${_('raw diff')}"><img class="icon" src="${h.url('/images/icons/page_white.png')}"/></a>
+                  <a href="${h.url('raw_changeset_home',repo_name=c.repo_name,revision=c.changeset.raw_id,diff='download')}" title="${_('download diff')}"><img class="icon" src="${h.url('/images/icons/page_white_get.png')}"/></a>
                   ${c.ignorews_url()}
                   ${c.context_url()}
-                </span>
+                </div>
                 <div class="comments-number" style="float:right;padding-right:5px">${len(c.comments)} comment(s) (${c.inline_cnt} ${_('inline')})</div>
 			</div>
 		</div>

rhodecode/templates/changeset/diff_block.html

@@ -15,13 +15,13 b''
                     ${h.link_to_if(change!='removed',h.safe_unicode(filenode.path),h.url('files_home',repo_name=c.repo_name,
                     revision=filenode.changeset.raw_id,f_path=h.safe_unicode(filenode.path)))}
                 </div>
-                <span class="diff-actions">
-                  <a href="${h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(filenode.path),diff2=cs2,diff1=cs1,diff='diff',fulldiff=1)}" title="${_('diff')}"><img class="icon" src="${h.url('/images/icons/page_white_text.png')}"/></a>
-                  <a href="${h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(filenode.path),diff2=cs2,diff1=cs1,diff='raw')}" title="${_('raw diff')}"><img class="icon" src="${h.url('/images/icons/page_white_text.png')}"/></a>
-                  <a href="${h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(filenode.path),diff2=cs2,diff1=cs1,diff='download')}" title="${_('download diff')}"><img class="icon" src="${h.url('/images/icons/down_16.png')}"/></a>
+                <div class="diff-actions">
+                  <a href="${h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(filenode.path),diff2=cs2,diff1=cs1,diff='diff',fulldiff=1)}" title="${_('diff')}"><img class="icon" src="${h.url('/images/icons/page_white_go.png')}"/></a>
+                  <a href="${h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(filenode.path),diff2=cs2,diff1=cs1,diff='raw')}" title="${_('raw diff')}"><img class="icon" src="${h.url('/images/icons/page_white.png')}"/></a>
+                  <a href="${h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(filenode.path),diff2=cs2,diff1=cs1,diff='download')}" title="${_('download diff')}"><img class="icon" src="${h.url('/images/icons/page_white_get.png')}"/></a>
                   ${c.ignorews_url(h.FID(filenode.changeset.raw_id,filenode.path))}
                   ${c.context_url(h.FID(filenode.changeset.raw_id,filenode.path))}
-                </span>
+                </div>
                 <span style="float:right;margin-top:-3px">
                   <label>
                   ${_('show inline comments')}