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

@@ -1,284 +1,289 b''
 // summary.less
 // For use in RhodeCode applications;
 // Used for headers and file detail summary screens.
 
 .summary {
     float: left;
     position: relative;
     width: 100%;
     margin: 0;
     padding: 0;
 
     .summary-detail-header {
         float: left;
         display: block;
         width: 100%;
         margin-bottom: @textmargin;
         padding: 0 0 .5em 0;
         border-bottom: @border-thickness solid @border-default-color;
 
         .breadcrumbs {
             float: left;
             display: inline;
             margin: 0;
             padding: 0;
         }
         h4 {
             float: left;
             margin: 0 1em 0 0;
             padding: 0;
             line-height: 1.2em;
             font-size: @basefontsize;
         }
 
         .action_link {
             float: right;
         }
 
         .new-file {
             float: right;
             margin-top: -1.5em;
         }
     }
 
     .summary-detail {
         float: left;
         position: relative;
         width: 73%;
         margin: 0 3% @space 0;
         padding: 0;
 
         .file_diff_buttons {
             margin-top: @space;
         }
 
         // commit message
         .commit {
           white-space: pre-wrap;
         }
 
         .left-clone {
             float: left;
             height: 30px;
             margin: 0;
             padding: 0;
             font-family: @text-semibold;
         }
 
         .right-clone {
             float: right;
             width: 83%;
         }
 
         .clone_url_input {
             width: ~"calc(100% - 35px)";
             padding:  5px;
         }
 
         &.directory {
             margin-bottom: 0;
         }
 
         .desc {
             white-space: pre-wrap;
         }
         .disabled {
             opacity: .5;
             cursor: inherit;
         }
         .help-block {
             color: inherit;
             margin: 0;
         }
     }
 
     .sidebar-right {
         float: left;
         width: 24%;
         margin: 0;
         padding: 0;
 
         ul {
             margin-left: 0;
             padding-left: 0;
 
             li {
 
                 &:before {
                     content: none;
                     width: 0;
                 }
             }
         }
     }
 
     #clone_by_name, #clone_by_id{
         display: inline-block;
         margin-left: 0px;
     }
 
     .codeblock {
         border: none;
         background-color: transparent;
     }
 
     .code-body {
         border: @border-thickness solid @border-default-color;
         .border-radius(@border-radius);
     }
 }
 
 // this is used outside of just the summary
 .fieldset, // similar to form fieldset
 .summary .sidebar-right-content { // these have to match
     clear: both;
     float: left;
     position: relative;
     display:block;
     width: 100%;
     min-height: 1em;
     margin-bottom: @textmargin;
     padding: 0;
     line-height: 1.2em;
 
     &:after { // clearfix
         content: "";
         clear: both;
         width: 100%;
         height: 1em;
     }
 }
 
 .summary .sidebar-right-content {
     margin-bottom: @space;
 
     .rc-user {
         min-width: 0;
     }
 }
 
 .fieldset {
 
     .left-label { // similar to form legend
         float: left;
         display: block;
         width: 25%;
         margin: 0;
         padding: 0;
         font-family: @text-semibold;
     }
+
+    .left-label-summary {
+        .left-label;
+        width: 150px;
+    }
     
     .right-content { // similar to form fields
         float: left;
         display: block;
         width: 75%;
         margin: 0 0 0 -15%;
         padding: 0 0 0 15%;
 
         .truncate-wrap,
         .truncate {
             max-width: 100%;
             width: 100%;
         }
 
         .commit-long {
             overflow-x: auto;
         }
     }
     .commit.truncate-wrap {
         overflow:hidden;
         text-overflow: ellipsis;
     }
 }
 
 // expand commit message
 #message_expand {
     clear: both;
     display: block;
     color: @rcblue;
     cursor: pointer;
 }
 
 #trimmed_message_box {
     max-height: floor(2 * @basefontsize * 1.2);  // 2 lines * line-height
     overflow: hidden;
 }
 
 // show/hide comments button
 .show-inline-comments {
     display: inline;
     cursor: pointer;
 
     .comments-show { display: inline; }
     .comments-hide { display: none; }
     
     &.comments-visible {
         .comments-show { display: none; }
         .comments-hide { display: inline; }
     }
 }
     
 // Quick Start section
 .quick_start {
     float: left;
     display: block;
     position: relative;
     width: 100%;
 
     // adds some space to make copy and paste easier
     .left-label,
     .right-content {
         line-height: 1.6em;
     }
 }
 
 .submodule {
     .summary-detail {
         width: 100%;
 
         .btn-collapse {
             display: none;
         }
     }
 }
 
 .codeblock-header {
     float: left;
     display: block;
     width: 100%;
     margin: 0;
     padding: @space 0 10px 0;
     border-top: @border-thickness solid @border-default-color; 
 
     .stats {
         float: left;
         width: 50%;
     }
     .stats-filename {
         font-size: 120%;
     }
     .stats-first-item {
         padding: 0px 0px 0px 3px;
     }
 
     .buttons {
         float: right;
         width: 50%;
         text-align: right;
         color: @grey4;
     }
 }
 
 #summary-menu-stats {
 
     .stats-bullet {
         color: @grey3;
         min-width: 3em;
     }
 
     .repo-size {
         margin-bottom: .5em;
     }
     
 }
 

rhodecode/templates/summary/components.mako

@@ -1,216 +1,217 b''
 <%def name="refs_counters(branches, closed_branches, tags, bookmarks)">
     <span class="branchtag tag">
     <a href="${h.route_path('branches_home',repo_name=c.repo_name)}" class="childs">
       <i class="icon-branch"></i>${_ungettext(
       '%(num)s Branch','%(num)s Branches', len(branches)) % {'num': len(branches)}}</a>
     </span>
 
     %if closed_branches:
     <span class="branchtag tag">
     <a href="${h.route_path('branches_home',repo_name=c.repo_name)}" class="childs">
       <i class="icon-branch"></i>${_ungettext(
       '%(num)s Closed Branch', '%(num)s Closed Branches', len(closed_branches)) % {'num': len(closed_branches)}}</a>
     </span>
     %endif
 
     <span class="tagtag tag">
     <a href="${h.route_path('tags_home',repo_name=c.repo_name)}" class="childs">
         <i class="icon-tag"></i>${_ungettext(
         '%(num)s Tag', '%(num)s Tags', len(tags)) % {'num': len(tags)}}</a>
     </span>
 
     %if bookmarks:
     <span class="booktag tag">
     <a href="${h.route_path('bookmarks_home',repo_name=c.repo_name)}" class="childs">
         <i class="icon-bookmark"></i>${_ungettext(
         '%(num)s Bookmark', '%(num)s Bookmarks', len(bookmarks)) % {'num': len(bookmarks)}}</a>
     </span>
     %endif
 </%def>
 
 <%def name="summary_detail(breadcrumbs_links, show_downloads=True)">
     <% summary = lambda n:{False:'summary-short'}.get(n) %>
 
     <div id="summary-menu-stats" class="summary-detail">
         <div class="summary-detail-header">
             <div class="breadcrumbs files_location">
                 <h4>
                   ${breadcrumbs_links}
                 </h4>
             </div>
             <div id="summary_details_expand" class="btn-collapse" data-toggle="summary-details">
                 ${_('Show More')}
             </div>
         </div>
 
         <div class="fieldset">
 
             <div class="left-clone">
                 <select id="clone_option" name="clone_option">
                     <option value="http" selected="selected">HTTP</option>
                     <option value="http_id">HTTP UID</option>
                     % if c.ssh_enabled:
                         <option value="ssh">SSH</option>
                     % endif
                 </select>
             </div>
             <div class="right-clone">
                 <%
                     maybe_disabled = ''
                     if h.is_svn_without_proxy(c.rhodecode_db_repo):
                         maybe_disabled = 'disabled'
                 %>
 
                 <span id="clone_option_http">
                 <input type="text" class="input-monospace clone_url_input" ${maybe_disabled} readonly="readonly" value="${c.clone_repo_url}"/>
                 <i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${c.clone_repo_url}" title="${_('Copy the clone url')}"></i>
                 </span>
 
                 <span style="display: none;" id="clone_option_http_id">
                 <input type="text" class="input-monospace clone_url_input" ${maybe_disabled} readonly="readonly" value="${c.clone_repo_url_id}"/>
                 <i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${c.clone_repo_url_id}" title="${_('Copy the clone by id url')}"></i>
                 </span>
 
                 <span style="display: none;" id="clone_option_ssh">
                 <input type="text" class="input-monospace clone_url_input" ${maybe_disabled} readonly="readonly" value="${c.clone_repo_url_ssh}"/>
                 <i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${c.clone_repo_url_ssh}" title="${_('Copy the clone by ssh url')}"></i>
                 </span>
 
                 % if maybe_disabled:
                     <p class="help-block">${_('SVN Protocol is disabled. To enable it, see the')} <a href="${h.route_url('enterprise_svn_setup')}" target="_blank">${_('documentation here')}</a>.</p>
                 % endif
 
             </div>
         </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">
             <div class="input ${summary(c.show_stats)}">
                 <%namespace name="dt" file="/data_table/_dt_elements.mako"/>
                 ${dt.repo_desc(c.rhodecode_db_repo.description_safe, c.visual.stylify_metatags)}
             </div>
           </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">
               <div class="input ${summary(c.show_stats)} downloads">
                 % if c.rhodecode_repo and len(c.rhodecode_repo.commit_ids) == 0:
                   <span class="disabled">
                     ${_('There are no downloads yet')}
                   </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">
                         <a id="archive_link" class="btn btn-small" href="${h.route_path('repo_archivefile',repo_name=c.rhodecode_db_repo.repo_name,fname='tip.zip')}">
                             <i class="icon-archive"></i> tip.zip
                             ## replaced by some JS on select
                         </a>
                     </span>
                     ${h.hidden('download_options')}
                 % endif
               </div>
             </div>
           </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>
 
 <%def name="summary_stats(gravatar_function)">
     <div class="sidebar-right">
       <div class="summary-detail-header">
         <h4 class="item">
              ${_('Owner')}
         </h4>
       </div>
       <div class="sidebar-right-content">
         ${gravatar_function(c.rhodecode_db_repo.user.email, 16)}
       </div>
     </div><!--end sidebar-right-->
 </%def>

rhodecode/templates/summary/summary_commits.mako

@@ -1,142 +1,145 b''
 ## -*- coding: utf-8 -*-
 <%namespace name="base" file="/base/base.mako"/>
 %if c.repo_commits:
 <table class="rctable repo_summary table_disp">
     <tr>
 
         <th class="status" colspan="2"></th>
         <th>${_('Commit')}</th>
         <th>${_('Commit message')}</th>
         <th>${_('Age')}</th>
         <th>${_('Author')}</th>
         <th>${_('Refs')}</th>
     </tr>
 
 ## to speed up lookups cache some functions before the loop
 <%
     active_patterns = h.get_active_pattern_entries(c.repo_name)
     urlify_commit_message = h.partial(h.urlify_commit_message, active_pattern_entries=active_patterns)
 %>
 %for cnt,cs in enumerate(c.repo_commits):
     <tr class="parity${cnt%2}">
 
         <td class="td-status">
             %if c.statuses.get(cs.raw_id):
                 <div class="changeset-status-ico shortlog">
                     %if c.statuses.get(cs.raw_id)[2]:
                     <a class="tooltip" title="${_('Commit status: %s\nClick to open associated pull request #%s') % (c.statuses.get(cs.raw_id)[0], c.statuses.get(cs.raw_id)[2])}" href="${h.route_path('pullrequest_show',repo_name=c.statuses.get(cs.raw_id)[3],pull_request_id=c.statuses.get(cs.raw_id)[2])}">
                         <div class="${'flag_status {}'.format(c.statuses.get(cs.raw_id)[0])}"></div>
                     </a>
                     %else:
                     <a class="tooltip" title="${_('Commit status: {}').format(h.commit_status_lbl(c.statuses.get(cs.raw_id)[0]))}" href="${h.route_path('repo_commit',repo_name=c.repo_name,commit_id=cs.raw_id,_anchor='comment-%s' % c.comments[cs.raw_id][0].comment_id)}">
                         <div class="${'flag_status {}'.format(c.statuses.get(cs.raw_id)[0])}"></div>
                     </a>
                     %endif
                 </div>
             %else:
                 <div class="tooltip flag_status not_reviewed" title="${_('Commit status: Not Reviewed')}"></div>
             %endif
         </td>
         <td class="td-comments">
             %if c.comments.get(cs.raw_id,[]):
             <a title="${_('Commit has comments')}" href="${h.route_path('repo_commit',repo_name=c.repo_name,commit_id=cs.raw_id,_anchor='comment-%s' % c.comments[cs.raw_id][0].comment_id)}">
                 <i class="icon-comment"></i> ${len(c.comments[cs.raw_id])}
             </a>
             %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">
           <div class="log-container truncate-wrap">
               <div class="message truncate" id="c-${cs.raw_id}">${urlify_commit_message(cs.message, c.repo_name)}</div>
           </div>
         </td>
 
         <td class="td-time">
             ${h.age_component(cs.date)}
         </td>
         <td class="td-user author">
             ${base.gravatar_with_user(cs.author)}
         </td>
 
         <td class="td-tags">
           <div class="autoexpand">
             %if h.is_hg(c.rhodecode_repo):
                 %for book in cs.bookmarks:
                      <span class="booktag tag" title="${h.tooltip(_('Bookmark %s') % book)}">
                      <a href="${h.route_path('repo_files:default_path',repo_name=c.repo_name,commit_id=cs.raw_id, _query=dict(at=book))}"><i class="icon-bookmark"></i>${h.shorter(book)}</a>
                      </span>
                 %endfor
             %endif
             ## tags
             %for tag in cs.tags:
              <span class="tagtag tag" title="${h.tooltip(_('Tag %s') % tag)}">
              <a href="${h.route_path('repo_files:default_path',repo_name=c.repo_name,commit_id=cs.raw_id, _query=dict(at=tag))}"><i class="icon-tag"></i>${h.shorter(tag)}</a>
              </span>
             %endfor
 
             ## branch
             %if cs.branch:
              <span class="branchtag tag" title="${h.tooltip(_('Branch %s') % cs.branch)}">
               <a href="${h.route_path('repo_changelog',repo_name=c.repo_name,_query=dict(branch=cs.branch))}"><i class="icon-code-fork"></i>${h.shorter(cs.branch)}</a>
              </span>
             %endif
           </div>
         </td>
     </tr>
 %endfor
 
 </table>
 
 <script type="text/javascript">
   $(document).pjax('#shortlog_data .pager_link','#shortlog_data', {timeout: 2000, scrollTo: false, push: false});
   $(document).on('pjax:success', function(){ timeagoActivate(); });
 </script>
 
 <div class="pagination-wh pagination-left">
 ${c.repo_commits.pager('$link_previous ~2~ $link_next')}
 </div>
 %else:
 
 %if h.HasRepoPermissionAny('repository.write','repository.admin')(c.repo_name):
 <div class="quick_start">
   <div class="fieldset">
     <div class="left-label">${_('Add or upload files directly via RhodeCode:')}</div>
     <div class="right-content">
       <div id="add_node_id" class="add_node">
           <a href="${h.route_path('repo_files_add_file',repo_name=c.repo_name,commit_id=0, f_path='', _anchor='edit')}" class="btn btn-default">${_('Add New File')}</a>
       </div>
     </div>
     %endif
   </div>
 
   %if not h.is_svn(c.rhodecode_repo):
   <div class="fieldset">
     <div class="left-label">${_('Push new repo:')}</div>
     <div class="right-content">
       <pre>
 ${c.rhodecode_repo.alias} clone ${c.clone_repo_url}
 ${c.rhodecode_repo.alias} add README # add first file
 ${c.rhodecode_repo.alias} commit -m "Initial" # commit with message
 ${c.rhodecode_repo.alias} push ${'origin master' if h.is_git(c.rhodecode_repo) else ''} # push changes back
       </pre>
     </div>
   </div>
   <div class="fieldset">
     <div class="left-label">${_('Existing repository?')}</div>
     <div class="right-content">
       <pre>
       %if h.is_git(c.rhodecode_repo):
 git remote add origin ${c.clone_repo_url}
 git push -u origin master
       %else:
 hg push ${c.clone_repo_url}
       %endif
       </pre>
     </div>
   </div>
   %endif
 </div>
 %endif