changed links with diff options into a pop-up menu. Saves space on long filenames and looks better

rhodecode/public/css/style.css

@@ -2241,19 +2241,43 b' table.code-browser .browser-file {'
 	padding-left: 20px;
 	text-align: left;
 }
-
+.diffblock .changeset_header {
+    height: 16px;
+}
 .diffblock .changeset_file {
 	background: url("../images/icons/file.png") no-repeat scroll 3px;
-	height: 16px;
-	padding-left: 22px;
 	text-align: left;
-	font-size: 14px;
-}
-
-.diffblock .changeset_header {
-	margin-left: 6px !important;
-}
-
+	float: left;
+	padding: 2px 0px 2px 22px;
+}
+.diffblock .diff-menu-wrapper{
+	float: left;
+}
+
+.diffblock .changeset_header .diff-menu{
+    position: absolute;
+    background: none repeat scroll 0 0 #FFFFFF;
+    border-color: #003367 #666666 #666666;
+    border-right: 1px solid #666666;
+    border-style: solid solid solid;
+    border-width: 1px;
+    box-shadow: 2px 8px 4px rgba(0, 0, 0, 0.2);
+    margin-top:5px;
+    margin-left:1px;
+    
+}
+
+.diffblock .changeset_header .diff-menu ul li {
+	padding: 0px 0px 0px 0px !important;
+}
+.diffblock .changeset_header .diff-menu ul li a{
+	display: block;
+	padding: 3px 8px 3px 8px !important;
+}
+.diffblock .changeset_header .diff-menu ul li a:hover{
+    text-decoration: none;
+    background-color: #EEEEEE;
+}
 table.code-browser .browser-dir {
 	background: url("../images/icons/folder_16.png") no-repeat scroll 3px;
 	height: 16px;
@@ -3667,7 +3691,7 b' div.diffblock .code-header{'
     padding:10px 0 10px 0;
 }
 div.diffblock .code-header div{
-    margin-left:10px;
+    margin-left:4px;
     font-weight: bold;
     font-size: 14px;
 }

rhodecode/templates/changeset/changeset.html

@@ -122,16 +122,20 b''
 		<div class="diffblock  margined comm" id="${self.fid(filenode.changeset.raw_id,filenode.path)}">
 			<div class="code-header">
 				<div class="changeset_header">
-					<span class="changeset_file">
+					<div class="changeset_file">
 						${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)))}
-					</span>
-					&raquo; <span>${h.link_to(_('diff'),
-					h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(filenode.path),diff2=cs2,diff1=cs1,diff='diff'))}</span>
-					&raquo; <span>${h.link_to(_('raw diff'),
-					h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(filenode.path),diff2=cs2,diff1=cs1,diff='raw'))}</span>
-					&raquo; <span>${h.link_to(_('download diff'),
-					h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(filenode.path),diff2=cs2,diff1=cs1,diff='download'))}</span>
+					</div>
+                    <div class="diff-menu-wrapper">
+                        <img class="diff-menu-activate" style="margin-bottom:-6px;cursor: pointer" alt="diff-menu" src="${h.url('/images/icons/script_gear.png')}" />
+                        <div class="diff-menu" style="display:none">
+                            <ul>
+                              <li>${h.link_to(_('diff'),h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(filenode.path),diff2=cs2,diff1=cs1,diff='diff'))}</li>
+                              <li>${h.link_to(_('raw diff'),h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(filenode.path),diff2=cs2,diff1=cs1,diff='raw'))}</li>
+                              <li>${h.link_to(_('download diff'),h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(filenode.path),diff2=cs2,diff1=cs1,diff='download'))}</li>
+                            </ul>
+                        </div>                        
+                    </div>
                     <span style="float:right;margin-top:-3px">
                       <label>
                       ${_('show inline comments')}
@@ -205,7 +209,19 b''
       }
 
       YUE.onDOMReady(function(){
-    	  
+          
+    	  YUE.on(YUQ('.diff-menu-activate'),'click',function(e){
+              var act = e.currentTarget.nextElementSibling;
+              
+              if(YUD.hasClass(act,'active')){
+            	  YUD.removeClass(act,'active');
+            	  YUD.setStyle(act,'display','none');
+              }else{
+            	  YUD.addClass(act,'active');
+            	  YUD.setStyle(act,'display','');
+              }
+          });
+              	  
     	  YUE.on(YUQ('.show-inline-comments'),'change',function(e){
     		  var show = 'none';
     		  var target = e.currentTarget;