summary-page: re-organize summary page info for better UX.

- added more flat type strucutre, use bagdges
- add copy commit id clipboard
- move elements arround

rhodecode/public/css/summary.less

@@ -167,6 +167,11 b''
         padding: 0;
         font-family: @text-semibold;
     }
+
+    .left-label-summary {
+        .left-label;
+        width: 150px;
+    }
     
     .right-content { // similar to form fields
         float: left;

rhodecode/templates/summary/components.mako

@@ -84,7 +84,56 b''
         </div>
 
         <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
-          <div class="left-label">
+          <div class="left-label-summary">
+            ${_('Information')}:
+          </div>
+          <div class="right-content">
+            <div class="commit-info">
+                <div class="tags">
+                <% commit_rev = c.rhodecode_db_repo.changeset_cache.get('revision') %>
+                % if c.rhodecode_repo:
+                    ${refs_counters(
+                        c.rhodecode_repo.branches,
+                        c.rhodecode_repo.branches_closed,
+                        c.rhodecode_repo.tags,
+                        c.rhodecode_repo.bookmarks)}
+                % else:
+                    ## missing requirements can make c.rhodecode_repo None
+                    ${refs_counters([], [], [], [])}
+                % endif
+
+                ## commits
+                <span class="tag">
+                  % if commit_rev == -1:
+                      ${_ungettext('%(num)s Commit', '%(num)s Commits', 0) % {'num': 0}},
+                  % else:
+                      <a href="${h.route_path('repo_changelog', repo_name=c.repo_name)}">
+                        ${_ungettext('%(num)s Commit', '%(num)s Commits', commit_rev) % {'num': commit_rev}}</a>,
+                  % endif
+                </span>
+
+                ## forks
+                <span class="tag">
+                  <a title="${_('Number of Repository Forks')}" href="${h.route_path('repo_forks_show_all', repo_name=c.repo_name)}">
+                     ${c.repository_forks} ${_ungettext('Fork', 'Forks', c.repository_forks)}</a>,
+                </span>
+
+                ## repo size
+                % if commit_rev == -1:
+                      <span class="stats-bullet">0 B</span>
+                % else:
+                      <span class="stats-bullet" id="repo_size_container">
+                          ${_('Calculating Repository Size...')}
+                      </span>
+                % endif
+
+                </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
+          <div class="left-label-summary">
             ${_('Description')}:
           </div>
           <div class="right-content">
@@ -95,81 +144,9 b''
           </div>
         </div>
 
-        <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
-          <div class="left-label">
-            ${_('Information')}:
-          </div>
-          <div class="right-content">
-
-              <div class="repo-size">
-                  <% commit_rev = c.rhodecode_db_repo.changeset_cache.get('revision') %>
-
-                  ## commits
-                  % if commit_rev == -1:
-                      ${_ungettext('%(num)s Commit', '%(num)s Commits', 0) % {'num': 0}},
-                  % else:
-                      <a href="${h.route_path('repo_changelog', repo_name=c.repo_name)}">
-                        ${_ungettext('%(num)s Commit', '%(num)s Commits', commit_rev) % {'num': commit_rev}}</a>,
-                  % endif
-
-                  ## forks
-                  <a title="${_('Number of Repository Forks')}" href="${h.route_path('repo_forks_show_all', repo_name=c.repo_name)}">
-                     ${c.repository_forks} ${_ungettext('Fork', 'Forks', c.repository_forks)}</a>,
-
-                  ## repo size
-                  % if commit_rev == -1:
-                      <span class="stats-bullet">0 B</span>
-                  % else:
-                      <span class="stats-bullet" id="repo_size_container">
-                          ${_('Calculating Repository Size...')}
-                      </span>
-                  % endif
-              </div>
-
-            <div class="commit-info">
-                <div class="tags">
-                % if c.rhodecode_repo:
-                    ${refs_counters(
-                        c.rhodecode_repo.branches,
-                        c.rhodecode_repo.branches_closed,
-                        c.rhodecode_repo.tags,
-                        c.rhodecode_repo.bookmarks)}
-                % else:
-                    ## missing requirements can make c.rhodecode_repo None
-                    ${refs_counters([], [], [], [])}
-                % endif
-                </div>
-            </div>
-
-          </div>
-        </div>
-
-        <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
-          <div class="left-label">
-            ${_('Statistics')}:
-          </div>
-          <div class="right-content">
-            <div class="input ${summary(c.show_stats)} statistics">
-              % if c.show_stats:
-                <div id="lang_stats" class="enabled">
-                    ${_('Calculating Code Statistics...')}
-                </div>
-              % else:
-                  <span class="disabled">
-                      ${_('Statistics are disabled for this repository')}
-                  </span>
-                  % if h.HasPermissionAll('hg.admin')('enable stats on from summary'):
-                     , ${h.link_to(_('enable statistics'),h.route_path('edit_repo',repo_name=c.repo_name, _anchor='repo_enable_statistics'))}
-                  % endif
-              % endif
-            </div>
-            
-          </div>
-        </div>
-
         % if show_downloads:
           <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
-            <div class="left-label">
+            <div class="left-label-summary">
               ${_('Downloads')}:
             </div>
             <div class="right-content">
@@ -180,10 +157,10 b''
                   </span>
                 % elif not c.enable_downloads:
                     <span class="disabled">
-                        ${_('Downloads are disabled for this repository')}
+                        ${_('Downloads are disabled for this repository')}.
                     </span>
                     % if h.HasPermissionAll('hg.admin')('enable downloads on from summary'):
-                       , ${h.link_to(_('enable downloads'),h.route_path('edit_repo',repo_name=c.repo_name, _anchor='repo_enable_downloads'))}
+                       ${h.link_to(_('Enable downloads'),h.route_path('edit_repo',repo_name=c.repo_name, _anchor='repo_enable_downloads'))}
                     % endif
                 % else:
                     <span class="enabled">
@@ -199,6 +176,30 b''
           </div>
         % endif
 
+        ## Statistics
+        <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
+          <div class="left-label-summary">
+            ${_('Statistics')}:
+          </div>
+          <div class="right-content">
+            <div class="input ${summary(c.show_stats)} statistics">
+              % if c.show_stats:
+                <div id="lang_stats" class="enabled">
+                    ${_('Calculating Code Statistics...')}
+                </div>
+              % else:
+                  <span class="disabled">
+                      ${_('Statistics are disabled for this repository')}.
+                  </span>
+                  % if h.HasPermissionAll('hg.admin')('enable stats on from summary'):
+                     ${h.link_to(_('Enable statistics'),h.route_path('edit_repo',repo_name=c.repo_name, _anchor='repo_enable_statistics'))}
+                  % endif
+              % endif
+            </div>
+
+          </div>
+        </div>
+
     </div><!--end summary-detail-->
 </%def>
 

rhodecode/templates/summary/summary_commits.mako

@@ -45,7 +45,10 b''
             %endif
         </td>
         <td class="td-commit">
-            <pre><a href="${h.route_path('repo_commit', repo_name=c.repo_name, commit_id=cs.raw_id)}">${h.show_id(cs)}</a></pre>
+            <code>
+                <a href="${h.route_path('repo_commit', repo_name=c.repo_name, commit_id=cs.raw_id)}">${h.show_id(cs)}</a>
+                <i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${cs.raw_id}" title="${_('Copy the full commit id')}"></i>
+            </code>
         </td>
 
         <td class="td-description mid">