fix(ui): fixed issues with hover menus and diff download items.

- the diff ops are now moved into context menu
- the diff ops could be now used in PR context
- fixed various UI problems with the old solution

rhodecode/public/css/code-block.less

@@ -863,7 +863,6 b' input.filediff-collapse-state {'
 
 .pill-group {
     .pill {
-        opacity: .8;
         margin-right: 3px;
         font-size: 12px;
         font-weight: normal;

rhodecode/public/css/main.less

@@ -3236,3 +3236,23 b' details:not([open]) > :not(summary) {'
 .old-comments-marker td {
   padding-top: 15px;
 }
+
+.inline-menu {
+    display: inline-flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.inline-menu-item {
+    display: inline-flex;
+    justify-content: center;
+    position: relative;
+}
+
+.inline-menu-item-ellipsis {
+    overflow: hidden;
+    white-space: nowrap; /* Don't forget this one */
+    text-overflow: ellipsis;
+    width: 130px;
+}

rhodecode/templates/changeset/changeset.mako

@@ -124,24 +124,6 b''
       </div>
 
       <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
-        <div class="left-label-summary">
-          <p>${_('Diff options')}:</p>
-          <div class="right-label-summary">
-            <div class="diff-actions">
-              <a href="${h.route_path('repo_commit_raw',repo_name=c.repo_name,commit_id=c.commit.raw_id)}">
-                ${_('Raw Diff')}
-              </a>
-               |
-              <a href="${h.route_path('repo_commit_patch',repo_name=c.repo_name,commit_id=c.commit.raw_id)}">
-                ${_('Patch Diff')}
-              </a>
-               |
-              <a href="${h.route_path('repo_commit_download',repo_name=c.repo_name,commit_id=c.commit.raw_id,_query=dict(diff='download'))}">
-                ${_('Download Diff')}
-              </a>
-            </div>
-          </div>
-        </div>
       </div>
 
       <div class="clear-fix"></div>

rhodecode/templates/codeblocks/diffs.mako

@@ -277,12 +277,16 b" return '%s_%s_%i' % (h.md5_safe(commit+f"
             %>
             <div class="filediff-collapse-indicator icon-"></div>
 
-            ## Comments/Options PILL
-            <span class="pill-group pull-right">
-                <span class="pill" op="comments">
-                    <i class="icon-comment"></i> ${len(total_file_comments)}
+            <%
+                from rhodecode.lib.diffs import NEW_FILENODE, DEL_FILENODE, MOD_FILENODE, RENAMED_FILENODE, CHMOD_FILENODE, BIN_FILENODE, COPIED_FILENODE
+            %>
+            <span class="pill">
+                <i class="icon-file-text"></i>
+                ${final_file_name}
                 </span>
 
+            ## Options PILL
+            <span class="pill-group pull-right">
                 <details class="details-reset details-inline-block">
                   <summary class="noselect">
                       <i class="pill icon-options cursor-pointer" op="options"></i>
@@ -290,24 +294,77 b" return '%s_%s_%i' % (h.md5_safe(commit+f"
                   <details-menu class="details-dropdown">
 
                     <div class="dropdown-item">
-                        <span>${final_path}</span>
-                        <span class="pull-right icon-clipboard clipboard-action" data-clipboard-text="${final_path}" title="Copy file path"></span>
+                        <ul class="inline-menu">
+                            <li class="inline-menu-item"><span class="inline-menu-item-ellipsis">${final_path}</span></li>
+                            <li class="inline-menu-item"><span class="pull-right icon-clipboard clipboard-action" data-clipboard-text="${final_path}" title="Copy file path"></span></li>
+                        </ul>
                     </div>
 
                     <div class="dropdown-divider"></div>
 
                    <div class="dropdown-item">
                         <% permalink = request.current_route_url(_anchor='a_{}'.format(h.FID(filediff.raw_id, filediff.patch['filename']))) %>
-                        <a href="${permalink}">¶ permalink</a>
-                        <span class="pull-right icon-clipboard clipboard-action" data-clipboard-text="${permalink}" title="Copy permalink"></span>
+                       <ul class="inline-menu">
+                           <li class="inline-menu-item"><a href="${permalink}">¶ permalink</a></li>
+                           <li class="inline-menu-item"><span class="pull-right icon-clipboard clipboard-action" data-clipboard-text="${permalink}" title="Copy permalink"></span></li>
+                       </ul>
                    </div>
 
                   </details-menu>
                 </details>
+            </span>
 
+            ## Comments PILL
+            <span class="pill-group pull-right">
+                <span class="pill" op="comments">
+                    <i class="icon-comment"></i> ${len(total_file_comments)}
+                </span>
             </span>
 
-            ${diff_ops(final_file_name, filediff)}
+            ## DIFF STATS PILL
+            <span class="pill-group pull-right">
+
+                ## ops pills
+                %if filediff.limited_diff:
+                    <span class="pill tooltip" op="limited"
+                          title="The stats for this diff are not complete">limited diff</span>
+                %endif
+
+                %if NEW_FILENODE in filediff.patch['stats']['ops']:
+                    <span class="pill" op="created">created</span>
+                %if filediff['target_mode'].startswith('120'):
+                    <span class="pill" op="symlink">symlink</span>
+                %else:
+                    <span class="pill" op="mode">${nice_mode(filediff['target_mode'])}</span>
+                %endif
+                %endif
+
+                %if RENAMED_FILENODE in filediff.patch['stats']['ops']:
+                    <span class="pill" op="renamed">renamed</span>
+                %endif
+
+                %if COPIED_FILENODE in filediff.patch['stats']['ops']:
+                    <span class="pill" op="copied">copied</span>
+                %endif
+
+                %if DEL_FILENODE in filediff.patch['stats']['ops']:
+                    <span class="pill" op="removed">removed</span>
+                %endif
+
+                %if CHMOD_FILENODE in filediff.patch['stats']['ops']:
+                    <span class="pill" op="mode"> ${nice_mode(filediff['source_mode'])} ➡ ${nice_mode(filediff['target_mode'])}</span>
+                %endif
+
+                %if BIN_FILENODE in filediff.patch['stats']['ops']:
+                    <span class="pill" op="binary">binary</span>
+                %if MOD_FILENODE in filediff.patch['stats']['ops']:
+                    <span class="pill" op="modified">modified</span>
+                %endif
+                %endif
+
+                <span class="pill" op="added">${('+' if filediff.patch['stats']['added'] else '')}${filediff.patch['stats']['added']}</span>
+                <span class="pill" op="deleted">${((h.safe_int(filediff.patch['stats']['deleted']) or 0) * -1)}</span>
+            </span>
 
         </label>
 
@@ -506,64 +563,6 b" return '%s_%s_%i' % (h.md5_safe(commit+f"
 </div>
 </%def>
 
-<%def name="diff_ops(file_name, filediff)">
-    <%
-    from rhodecode.lib.diffs import NEW_FILENODE, DEL_FILENODE, \
-        MOD_FILENODE, RENAMED_FILENODE, CHMOD_FILENODE, BIN_FILENODE, COPIED_FILENODE
-    %>
-    <span class="pill">
-        <i class="icon-file-text"></i>
-        ${file_name}
-    </span>
-
-    <span class="pill-group pull-right">
-
-        ## ops pills
-        %if filediff.limited_diff:
-        <span class="pill tooltip" op="limited" title="The stats for this diff are not complete">limited diff</span>
-        %endif
-
-        %if NEW_FILENODE in filediff.patch['stats']['ops']:
-        <span class="pill" op="created">created</span>
-            %if filediff['target_mode'].startswith('120'):
-        <span class="pill" op="symlink">symlink</span>
-            %else:
-        <span class="pill" op="mode">${nice_mode(filediff['target_mode'])}</span>
-            %endif
-        %endif
-
-        %if RENAMED_FILENODE in filediff.patch['stats']['ops']:
-        <span class="pill" op="renamed">renamed</span>
-        %endif
-
-        %if COPIED_FILENODE in filediff.patch['stats']['ops']:
-        <span class="pill" op="copied">copied</span>
-        %endif
-
-        %if DEL_FILENODE in filediff.patch['stats']['ops']:
-        <span class="pill" op="removed">removed</span>
-        %endif
-
-        %if CHMOD_FILENODE in filediff.patch['stats']['ops']:
-        <span class="pill" op="mode">
-            ${nice_mode(filediff['source_mode'])} ➡ ${nice_mode(filediff['target_mode'])}
-        </span>
-        %endif
-
-        %if BIN_FILENODE in filediff.patch['stats']['ops']:
-        <span class="pill" op="binary">binary</span>
-            %if MOD_FILENODE in filediff.patch['stats']['ops']:
-        <span class="pill" op="modified">modified</span>
-            %endif
-        %endif
-
-        <span class="pill" op="added">${('+' if filediff.patch['stats']['added'] else '')}${filediff.patch['stats']['added']}</span>
-        <span class="pill" op="deleted">${((h.safe_int(filediff.patch['stats']['deleted']) or 0) * -1)}</span>
-
-    </span>
-
-</%def>
-
 <%def name="nice_mode(filemode)">
     ${(filemode.startswith('100') and filemode[3:] or filemode)}
 </%def>
@@ -968,7 +967,6 b' def get_comments_for(diff_type, comments'
                         <i class="icon-options cursor-pointer" op="options"></i>
                   </summary>
 
-                  <div>
                   <details-menu class="details-dropdown" style="top: 35px;">
 
                     <div class="dropdown-item">
@@ -991,8 +989,28 b' def get_comments_for(diff_type, comments'
                         </div>
                    </div>
 
+                   % if commit:
+                   <div class="dropdown-item">
+                    <a href="${h.route_path('repo_commit_raw',repo_name=c.repo_name,commit_id=c.commit.raw_id)}">
+                        ${_('Raw Diff')}
+                    </a>
+                   </div>
+
+                   <div class="dropdown-item">
+                    <a href="${h.route_path('repo_commit_patch',repo_name=c.repo_name,commit_id=c.commit.raw_id)}">
+                        ${_('Patch Diff')}
+                    </a>
+                   </div>
+
+                   <div class="dropdown-item">
+                    <a href="${h.route_path('repo_commit_download',repo_name=c.repo_name,commit_id=c.commit.raw_id,_query=dict(diff='download'))}">
+                        ${_('Download Diff')}
+                    </a>
+                   </div>
+                    % endif
+
                   </details-menu>
-                  </div>
+
                 </details>
 
                 </div>