collapsable diff container in changeset, makes quick review easier

rhodecode/public/css/style.css

@@ -244,7 +244,6 b' div:hover > a.permalink {'
 
 #header {
 }
-
 #header ul#logged-user {
     margin-bottom: 5px !important;
     -webkit-border-radius: 0px 0px 8px 8px;
@@ -4639,6 +4638,23 b' PULL REQUESTS'
 /*****************************************************************************
                                   DIFFS CSS
 ******************************************************************************/
+.diff-collapse{
+	text-align: center;
+}
+.diff-collapse-button{
+	cursor: pointer;
+	color: #666;
+	font-size: 16px;
+}
+.diff-container {
+	margin-bottom: -15px;
+}
+
+.diff-container.hidden{
+	display: none;
+	overflow: hidden;
+}
+
 
 div.diffblock {
     overflow: auto;

rhodecode/public/js/rhodecode.js

@@ -2161,3 +2161,26 b' var MultiSelectWidget = function(selecte'
 		});
 	}
 }
+
+
+// global hooks after DOM is loaded
+
+YUE.onDOMReady(function(){
+	YUE.on(YUQ('.diff-collapse-button'), 'click', function(e){
+		var button = e.currentTarget;
+		var t = YUD.get(button).getAttribute('target');
+	    console.log(t);
+		if(YUD.hasClass(t, 'hidden')){
+			YUD.removeClass(t, 'hidden');
+			YUD.get(button).innerHTML = "↑ {0} ↑".format(_TM['collapse diff']);
+		}
+		else if(!YUD.hasClass(t, 'hidden')){
+			YUD.addClass(t, 'hidden');
+			YUD.get(button).innerHTML = "↓ {0} ↓".format(_TM['expand diff']);
+		}
+	});
+	
+	
+	
+});
+

rhodecode/templates/base/root.html

@@ -51,6 +51,8 b''
                 'Open new pull request for selected changesets':  "${_('Open new pull request for selected changesets')}",
                 'Show selected changes __S -> __E': "${_('Show selected changes __S -> __E')}",
                 'Selection link': "${_('Selection link')}",
+                'collapse diff': "${_('collapse diff')}",
+                'expand diff': "${_('expand diff')}",
             };
             var _TM = TRANSLATION_MAP;
 

rhodecode/templates/changeset/diff_block.html

@@ -4,7 +4,10 b''
 ## ${diff_block.diff_block(change)}
 ##
 <%def name="diff_block(change)">
-
+<div class="diff-collapse">
+    <span target="${'diff-container-%s' % (id(change))}" class="diff-collapse-button">&uarr; ${_('collapse diff')} &uarr;</span>
+</div>
+<div class="diff-container" id="${'diff-container-%s' % (id(change))}">
 %for FID,(cs1, cs2, change, path, diff, stats) in change.iteritems():
     ##%if op !='removed':
     <div id="${FID}_target" style="clear:both;margin-top:25px"></div>
@@ -37,7 +40,7 b''
     </div>
     ##%endif
 %endfor
-
+</div>
 </%def>
 
 <%def name="diff_block_simple(change)">