summary: re-organize order of summary expanded area

- fixed statstics
- made loading of stats dependendt on a size

rhodecode/public/css/tables.less

@@ -1,514 +1,496 b''
 
 // tables.less
 // For use in RhodeCode application tables;
 // see style guide documentation for guidelines.
 
 // TABLES
 
 .rctable,
 table.rctable,
 table.dataTable {
     clear:both;
     width: 100%;
     margin: 0 auto @padding;
     padding: 0;
     vertical-align: baseline;
     line-height:1.5em;
     border: none;
     outline: none;
     border-collapse: collapse;
     border-spacing: 0;
     color: @grey2;
 
     b {
         font-weight: normal;
     }
 
     em {
         font-weight: bold;
         font-style: normal;
     }
 
     th,
     td {
         height: auto;
         max-width: 20%;
         padding: .65em 1em .65em 0;
         vertical-align: middle;
         border-bottom: @border-thickness solid @grey5;
         white-space: normal;
 
         &.td-radio,
         &.td-checkbox {
             padding-right: 0;
             text-align: center;
 
             input {
                 margin: 0 1em;
             }
         }
 
         &.truncate-wrap {
             white-space: nowrap !important;
         }
 
         pre {
             margin: 0;
         }
 
         .show_more {
             height: inherit;
         }
     }
 
     .expired td {
         background-color: @grey7;
     }
     .inactive td {
         background-color: @grey6;
     }
     th {
         text-align: left;
         font-weight: @text-semibold-weight;
         font-family: @text-semibold;
     }
 
     .hl {
         td {
             background-color: lighten(@alert4,25%);
         }
     }
 
 // Special Data Cell Types
 // See style guide for desciptions and examples.
 
     td {
 
         &.user {
             padding-left: 1em;
         }
 
         &.td-rss {
             width: 20px;
             min-width: 0;
             margin: 0;
         }
 
         &.quick_repo_menu {
             width: 15px;
             text-align: center;
 
             &:hover {
                 background-color: @grey5;
             }
         }
 
         &.td-hash {
             min-width: 80px;
             width: 200px;
 
             .obsolete {
                 text-decoration: line-through;
                 color: lighten(@grey2,25%);
             }
         }
 
         &.td-time {
             width: 160px;
             white-space: nowrap;
         }
 
         &.annotate{
             padding-right: 0;
 
             div.annotatediv{
                 margin: 0 0.7em;
             }
         }
 
         &.tags-col {
             padding-right: 0;
         }
 
         &.td-description {
             min-width: 350px;
 
             &.truncate, .truncate-wrap {
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 max-width: 350px;
             }
         }
 
         &.td-grid-name {
             white-space: nowrap;
             min-width: 300px;
         }
 
         &.td-componentname {
             white-space: nowrap;
         }
 
         &.td-name {
 
         }
 
         &.td-journalaction {
             min-width: 300px;
 
             .journal_action_params {
                 // waiting for feedback
             }
         }
 
         &.td-active {
             padding-left: .65em;
         }
 
         &.td-url {
             white-space: nowrap;
         }
 
         &.td-comments {
             min-width: 3em;
         }
 
         &.td-buttons {
             padding: .3em 0;
         }
         &.td-align-top {
             vertical-align: text-top
         }
         &.td-action {
             // this is for the remove/delete/edit buttons
             padding-right: 0;
             min-width: 95px;
             text-transform: capitalize;
 
             i {
                 display: none;
             }
         }
 
         // TODO: lisa: this needs to be cleaned up with the buttons
         .grid_edit,
         .grid_delete {
             display: inline-block;
             margin: 0 @padding/3 0 0;
             font-family: @text-light;
 
             i {
                 display: none;
             }
         }
 
         .grid_edit + .grid_delete {
             border-left: @border-thickness solid @grey5;
             padding-left: @padding/2;
         }
 
         &.td-compare {
 
             input {
                 margin-right: 1em;
             }
 
             .compare-radio-button {
                 margin: 0 1em 0 0;
             }
 
 
         }
 
         &.td-tags {
             padding: .5em 1em .5em 0;
             width: 140px;
 
             .tag {
                 margin: 1px;
                 float: left;
             }
         }
 
         .icon-svn, .icon-hg, .icon-git {
             font-size: 1.4em;
         }
 
         &.collapse_commit,
         &.expand_commit {
             padding-right: 0;
             padding-left: 1em;
             cursor: pointer;
             width: 20px;
         }
     }
 
     .perm_admin_row {
         color: @grey4;
         background-color: @grey6;
     }
 
     .noborder {
         border: none;
 
         td {
             border: none;
         }
     }
 }
 .rctable.audit-log {
     td {
                 vertical-align: top;
     }
 }
 
 // TRUNCATING
 // TODO: lisaq: should this possibly be moved out of tables.less?
 // for truncated text
 // used inside of table cells and in code block headers
 .truncate-wrap {
     white-space: nowrap !important;
 
     //truncated text
     .truncate {
         max-width: 450px;
         width: 300px;
         overflow: hidden;
         text-overflow: ellipsis;
         -o-text-overflow: ellipsis;
         -ms-text-overflow: ellipsis;
 
         &.autoexpand {
             width: 120px;
             margin-right: 200px;
         }
     }
     &:hover .truncate.autoexpand {
         overflow: visible;
     }
 
     .tags-truncate {
         width: 150px;
         height: 22px;
         overflow: hidden;
 
         .tag {
             display: inline-block;
         }
 
         &.truncate {
             height: 22px;
             max-height:2em;
             width: 140px;
         }
     }
 }
 
 .apikeys_wrap {
     margin-bottom: @padding;
 
     table.rctable td:first-child {
         width: 340px;
     }
 }
 
 
 
 // SPECIAL CASES
 
 // Repository Followers
 table.rctable.followers_data {
     width: 75%;
     margin: 0;
 }
 
 // Repository List
 // Group Members List
 table.rctable.group_members,
 table#repo_list_table {
     min-width: 600px;
 }
 
 // Keyboard mappings
 table.keyboard-mappings {
     th {
         text-align: left;
         font-weight: @text-semibold-weight;
         font-family: @text-semibold;
     }
 }
 
 // Branches, Tags, and Bookmarks
 #obj_list_table.dataTable {
     td.td-time {
         padding-right: 1em;
     }
 }
 
 // User Admin
 .rctable.useremails,
 .rctable.account_emails {
     .tag,
     .btn {
         float: right;
     }
     .btn { //to line up with tags
         margin-right: 1.65em;
     }
 }
 
 // User List
 #user_list_table {
 
     td.td-user {
         min-width: 100px;
     }
 }
 
 // Pull Request List Table
 #pull_request_list_table.dataTable {
 
     //TODO: lisa: This needs to be removed once the description is adjusted
     //            for using an expand_commit button (see issue 765)
      td {
          vertical-align: middle;
      }
 }
 
 // Settings (no border)
 table.rctable.dl-settings {
     td {
         border: none;
         vertical-align: baseline;
     }
 }
 
 
 // Statistics
 table.trending_language_tbl {
     width: 100%;
     line-height: 1em;
 
     td div {
         overflow: visible;
     }
 }
 
 .trending_language_tbl, .trending_language_tbl td {
     border: 0;
     margin: 0;
     padding: 0;
     background: transparent;
 }
 
 .trending_language_tbl, .trending_language_tbl tr {
     border-spacing: 0 3px;
 }
 
 .trending_language {
     position: relative;
-    width: 100%;
-    height: 19px;
     overflow: hidden;
-    background-color: @grey6;
+    color: @text-color;
+    width: 400px;
 
-    span, b{
-        position: absolute;
-        display: block;
-        height: 12px;
-        margin-bottom: 0px;
-        white-space: pre;
-        padding: floor(@basefontsize/4);
-        top: 0;
-        left: 0;
-    }
-
-    span{
-        color: @text-color;
-        z-index: 0;
-        min-width: 20px;
-    }
-
-    b {
+    .lang-bar {
         z-index: 1;
         overflow: hidden;
         background-color: @rcblue;
         color: #FFF;
         text-decoration: none;
     }
 
 }
 
 // Changesets
 #changesets.rctable {
 
     // td must be fixed height for graph
     td {
         height: 32px;
         padding: 0 1em 0 0;
         vertical-align: middle;
         white-space: nowrap;
 
         &.td-description {
             white-space: normal;
         }
 
         &.expand_commit {
             padding-right: 0;
             cursor: pointer;
             width: 20px;
         }
     }
 }
 
 // Compare
 table.compare_view_commits {
     margin-top: @space;
 
     td.td-time {
         padding-left: .5em;
     }
 
     // special case to not show hover actions on hidden indicator
     tr.compare_select_hidden:hover {
         cursor: inherit;
 
         td {
             background-color: inherit;
         }
     }
 
     tr:hover {
         cursor: pointer;
 
         td {
             background-color: lighten(@alert4,25%);
         }
     }
 
 
 }
 
 .file_history {
     td.td-actions {
         text-align: right;
     }
 }
 
 
 // Gist List
 #gist_list_table {
     td {
         vertical-align: middle;
 
         div{
             display: inline-block;
             vertical-align: middle;
         }
 
         img{
             vertical-align: middle;
         }
     }
 }

rhodecode/public/js/src/rhodecode.js

@@ -1,579 +1,572 b''
 // # Copyright (C) 2010-2019 RhodeCode GmbH
 // #
 // # This program is free software: you can redistribute it and/or modify
 // # it under the terms of the GNU Affero General Public License, version 3
 // # (only), as published by the Free Software Foundation.
 // #
 // # This program is distributed in the hope that it will be useful,
 // # but WITHOUT ANY WARRANTY; without even the implied warranty of
 // # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // # GNU General Public License for more details.
 // #
 // # You should have received a copy of the GNU Affero General Public License
 // # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // #
 // # This program is dual-licensed. If you wish to learn more about the
 // # RhodeCode Enterprise Edition, including its added features, Support services,
 // # and proprietary license terms, please see https://rhodecode.com/licenses/
 
 /**
 RhodeCode JS Files
 **/
 
 if (typeof console == "undefined" || typeof console.log == "undefined"){
     console = { log: function() {} }
 }
 
 // TODO: move the following function to submodules
 
 /**
  * show more
  */
 var show_more_event = function(){
   $('table .show_more').click(function(e) {
     var cid = e.target.id.substring(1);
     var button = $(this);
     if (button.hasClass('open')) {
       $('#'+cid).hide();
       button.removeClass('open');
     } else {
       $('#'+cid).show();
       button.addClass('open one');
     }
   });
 };
 
 var compare_radio_buttons = function(repo_name, compare_ref_type){
     $('#compare_action').on('click', function(e){
         e.preventDefault();
 
         var source = $('input[name=compare_source]:checked').val();
         var target = $('input[name=compare_target]:checked').val();
         if(source && target){
             var url_data = {
                 repo_name: repo_name,
                 source_ref: source,
                 source_ref_type: compare_ref_type,
                 target_ref: target,
                 target_ref_type: compare_ref_type,
                 merge: 1
             };
             window.location = pyroutes.url('repo_compare', url_data);
         }
     });
     $('.compare-radio-button').on('click', function(e){
         var source = $('input[name=compare_source]:checked').val();
         var target = $('input[name=compare_target]:checked').val();
         if(source && target){
             $('#compare_action').removeAttr("disabled");
             $('#compare_action').removeClass("disabled");
         }
     })
 };
 
 var showRepoSize = function(target, repo_name, commit_id, callback) {
     var container = $('#' + target);
     var url = pyroutes.url('repo_stats',
       {"repo_name": repo_name, "commit_id": commit_id});
 
     container.show();
     if (!container.hasClass('loaded')) {
         $.ajax({url: url})
             .complete(function (data) {
                 var responseJSON = data.responseJSON;
                 container.addClass('loaded');
                 container.html(responseJSON.size);
                 callback(responseJSON.code_stats)
             })
             .fail(function (data) {
                 console.log('failed to load repo stats');
             });
     }
 
 };
 
 var showRepoStats = function(target, data){
     var container = $('#' + target);
 
     if (container.hasClass('loaded')) {
         return
     }
 
     var total = 0;
     var no_data = true;
     var tbl = document.createElement('table');
-    tbl.setAttribute('class', 'trending_language_tbl');
+    tbl.setAttribute('class', 'trending_language_tbl rctable');
 
     $.each(data, function(key, val){
         total += val.count;
     });
 
     var sortedStats = [];
     for (var obj in data){
         sortedStats.push([obj, data[obj]])
     }
     var sortedData = sortedStats.sort(function (a, b) {
         return b[1].count - a[1].count
     });
     var cnt = 0;
     $.each(sortedData, function(idx, val){
         cnt += 1;
         no_data = false;
 
-        var hide = cnt > 2;
         var tr = document.createElement('tr');
-        if (hide) {
-            tr.setAttribute('style', 'display:none');
-            tr.setAttribute('class', 'stats_hidden');
-        }
 
         var key = val[0];
         var obj = {"desc": val[1].desc, "count": val[1].count};
 
-        var percentage = Math.round((obj.count / total * 100), 2);
-
+        // meta language names
         var td1 = document.createElement('td');
-        td1.width = 300;
         var trending_language_label = document.createElement('div');
-        trending_language_label.innerHTML = obj.desc + " (.{0})".format(key);
+        trending_language_label.innerHTML = obj.desc;
         td1.appendChild(trending_language_label);
 
+        // extensions
         var td2 = document.createElement('td');
-        var trending_language = document.createElement('div');
-        var nr_files = obj.count +" "+ _ngettext('file', 'files', obj.count);
-
-        trending_language.title = key + " " + nr_files;
+        var extension = document.createElement('div');
+        extension.innerHTML = ".{0}".format(key)
+        td2.appendChild(extension);
 
-        trending_language.innerHTML = "<span>" + percentage + "% " + nr_files
-                + "</span><b>" + percentage + "% " + nr_files + "</b>";
+        // number of files
+        var td3 = document.createElement('td');
+        var file_count = document.createElement('div');
+        var percentage_num = Math.round((obj.count / total * 100), 2);
+        var label = _ngettext('file', 'files', obj.count);
+        file_count.innerHTML = "{0} {1} ({2}%)".format(obj.count, label, percentage_num) ;
+        td3.appendChild(file_count);
 
-        trending_language.setAttribute("class", 'trending_language');
-        $('b', trending_language)[0].style.width = percentage + "%";
-        td2.appendChild(trending_language);
+        // percentage
+        var td4 = document.createElement('td');
+        td4.setAttribute("class", 'trending_language');
+
+        var percentage = document.createElement('div');
+        percentage.setAttribute('class', 'lang-bar');
+        percentage.innerHTML = "&nbsp;";
+        percentage.style.width = percentage_num + '%';
+        td4.appendChild(percentage);
 
         tr.appendChild(td1);
         tr.appendChild(td2);
+        tr.appendChild(td3);
+        tr.appendChild(td4);
         tbl.appendChild(tr);
-        if (cnt == 3) {
-            var show_more = document.createElement('tr');
-            var td = document.createElement('td');
-            lnk = document.createElement('a');
 
-            lnk.href = '#';
-            lnk.innerHTML = _gettext('Show more');
-            lnk.id = 'code_stats_show_more';
-            td.appendChild(lnk);
-
-            show_more.appendChild(td);
-            show_more.appendChild(document.createElement('td'));
-            tbl.appendChild(show_more);
-        }
     });
 
     $(container).html(tbl);
     $(container).addClass('loaded');
 
     $('#code_stats_show_more').on('click', function (e) {
         e.preventDefault();
         $('.stats_hidden').each(function (idx) {
             $(this).css("display", "");
         });
         $('#code_stats_show_more').hide();
     });
 
 };
 
 // returns a node from given html;
 var fromHTML = function(html){
   var _html = document.createElement('element');
   _html.innerHTML = html;
   return _html;
 };
 
 // Toggle Collapsable Content
 function collapsableContent() {
 
     $('.collapsable-content').not('.no-hide').hide();
 
     $('.btn-collapse').unbind(); //in case we've been here before
     $('.btn-collapse').click(function() {
         var button = $(this);
         var togglename = $(this).data("toggle");
         $('.collapsable-content[data-toggle='+togglename+']').toggle();
         if ($(this).html()=="Show Less")
             $(this).html("Show More");
         else
             $(this).html("Show Less");
     });
 };
 
 var timeagoActivate = function() {
     $("time.timeago").timeago();
 };
 
 
 var clipboardActivate = function() {
     /*
     *
     * <i class="tooltip icon-plus clipboard-action" data-clipboard-text="${commit.raw_id}" title="${_('Copy the full commit id')}"></i>
     * */
     var clipboard = new ClipboardJS('.clipboard-action');
 
     clipboard.on('success', function(e) {
         var callback = function () {
             $(e.trigger).animate({'opacity': 1.00}, 200)
         };
         $(e.trigger).animate({'opacity': 0.15}, 200, callback);
         e.clearSelection();
     });
 };
 
 
 // Formatting values in a Select2 dropdown of commit references
 var formatSelect2SelectionRefs = function(commit_ref){
   var tmpl = '';
   if (!commit_ref.text || commit_ref.type === 'sha'){
     return commit_ref.text;
   }
   if (commit_ref.type === 'branch'){
     tmpl = tmpl.concat('<i class="icon-branch"></i> ');
   } else if (commit_ref.type === 'tag'){
     tmpl = tmpl.concat('<i class="icon-tag"></i> ');
   } else if (commit_ref.type === 'book'){
     tmpl = tmpl.concat('<i class="icon-bookmark"></i> ');
   }
   return tmpl.concat(escapeHtml(commit_ref.text));
 };
 
 // takes a given html element and scrolls it down offset pixels
 function offsetScroll(element, offset) {
     setTimeout(function() {
         var location = element.offset().top;
         // some browsers use body, some use html
         $('html, body').animate({ scrollTop: (location - offset) });
     }, 100);
 }
 
 // scroll an element `percent`% from the top of page in `time` ms
 function scrollToElement(element, percent, time) {
     percent = (percent === undefined ? 25 : percent);
     time = (time === undefined ? 100 : time);
 
     var $element = $(element);
     if ($element.length == 0) {
         throw('Cannot scroll to {0}'.format(element))
     }
     var elOffset = $element.offset().top;
     var elHeight = $element.height();
     var windowHeight = $(window).height();
     var offset = elOffset;
     if (elHeight < windowHeight) {
         offset = elOffset - ((windowHeight / (100 / percent)) - (elHeight / 2));
     }
     setTimeout(function() {
         $('html, body').animate({ scrollTop: offset});
     }, time);
 }
 
 /**
  * global hooks after DOM is loaded
  */
 $(document).ready(function() {
     firefoxAnchorFix();
 
     $('.navigation a.menulink').on('click', function(e){
         var menuitem = $(this).parent('li');
         if (menuitem.hasClass('open')) {
             menuitem.removeClass('open');
         } else {
             menuitem.addClass('open');
             $(document).on('click', function(event) {
                 if (!$(event.target).closest(menuitem).length) {
                     menuitem.removeClass('open');
                 }
             });
         }
     });
 
     $('body').on('click', '.cb-lineno a', function(event) {
         function sortNumber(a,b) {
             return a - b;
         }
 
         var lineNo = $(this).data('lineNo');
         var lineName = $(this).attr('name');
 
         if (lineNo) {
             var prevLine = $('.cb-line-selected a').data('lineNo');
 
             // on shift, we do a range selection, if we got previous line
             if (event.shiftKey && prevLine !== undefined) {
                 var prevLine = parseInt(prevLine);
                 var nextLine = parseInt(lineNo);
                 var pos = [prevLine, nextLine].sort(sortNumber);
                 var anchor = '#L{0}-{1}'.format(pos[0], pos[1]);
 
             // single click
             } else {
                 var nextLine = parseInt(lineNo);
                 var pos = [nextLine, nextLine];
                 var anchor = '#L{0}'.format(pos[0]);
 
             }
             // highlight
             var range = [];
             for (var i = pos[0]; i <= pos[1]; i++) {
                 range.push(i);
             }
             // clear old selected lines
             $('.cb-line-selected').removeClass('cb-line-selected');
 
             $.each(range, function (i, lineNo) {
                 var line_td = $('td.cb-lineno#L' + lineNo);
 
                 if (line_td.length) {
                     line_td.addClass('cb-line-selected'); // line number td
                     line_td.prev().addClass('cb-line-selected'); // line data
                     line_td.next().addClass('cb-line-selected'); // line content
                 }
             });
 
         } else if (lineName !== undefined) { // lineName only occurs in diffs
             // clear old selected lines
             $('td.cb-line-selected').removeClass('cb-line-selected');
             var anchor = '#{0}'.format(lineName);
             var diffmode = templateContext.session_attrs.diffmode || "sideside";
 
             if (diffmode === "unified") {
                 $(this).closest('tr').find('td').addClass('cb-line-selected');
             } else {
                 var activeTd = $(this).closest('td');
                 activeTd.addClass('cb-line-selected');
                 activeTd.next('td').addClass('cb-line-selected');
             }
 
         }
 
         // Replace URL without jumping to it if browser supports.
         // Default otherwise
         if (history.pushState && anchor !== undefined) {
             var new_location = location.href.rstrip('#');
             if (location.hash) {
                 // location without hash
                 new_location = new_location.replace(location.hash, "");
             }
 
             // Make new anchor url
             new_location = new_location + anchor;
             history.pushState(true, document.title, new_location);
 
             return false;
         }
 
     });
 
     $('.collapse_file').on('click', function(e) {
         e.stopPropagation();
         if ($(e.target).is('a')) { return; }
         var node = $(e.delegateTarget).first();
         var icon = $($(node.children().first()).children().first());
         var id = node.attr('fid');
         var target = $('#'+id);
         var tr = $('#tr_'+id);
         var diff = $('#diff_'+id);
         if(node.hasClass('expand_file')){
             node.removeClass('expand_file');
             icon.removeClass('expand_file_icon');
             node.addClass('collapse_file');
             icon.addClass('collapse_file_icon');
             diff.show();
             tr.show();
             target.show();
         } else {
             node.removeClass('collapse_file');
             icon.removeClass('collapse_file_icon');
             node.addClass('expand_file');
             icon.addClass('expand_file_icon');
             diff.hide();
             tr.hide();
             target.hide();
         }
     });
 
     $('#expand_all_files').click(function() {
         $('.expand_file').each(function() {
             var node = $(this);
             var icon = $($(node.children().first()).children().first());
             var id = $(this).attr('fid');
             var target = $('#'+id);
             var tr = $('#tr_'+id);
             var diff = $('#diff_'+id);
             node.removeClass('expand_file');
             icon.removeClass('expand_file_icon');
             node.addClass('collapse_file');
             icon.addClass('collapse_file_icon');
             diff.show();
             tr.show();
             target.show();
         });
     });
 
     $('#collapse_all_files').click(function() {
         $('.collapse_file').each(function() {
             var node = $(this);
             var icon = $($(node.children().first()).children().first());
             var id = $(this).attr('fid');
             var target = $('#'+id);
             var tr = $('#tr_'+id);
             var diff = $('#diff_'+id);
             node.removeClass('collapse_file');
             icon.removeClass('collapse_file_icon');
             node.addClass('expand_file');
             icon.addClass('expand_file_icon');
             diff.hide();
             tr.hide();
             target.hide();
         });
     });
 
     // Mouse over behavior for comments and line selection
 
     // Select the line that comes from the url anchor
     // At the time of development, Chrome didn't seem to support jquery's :target
     // element, so I had to scroll manually
 
     if (location.hash) {
         var result = splitDelimitedHash(location.hash);
         var loc  = result.loc;
         if (loc.length > 1) {
 
             var highlightable_line_tds = [];
 
             // source code line format
             var page_highlights = loc.substring(
                 loc.indexOf('#') + 1).split('L');
 
             if (page_highlights.length > 1) {
                 var highlight_ranges = page_highlights[1].split(",");
                 var h_lines = [];
                 for (var pos in highlight_ranges) {
                     var _range = highlight_ranges[pos].split('-');
                     if (_range.length === 2) {
                         var start = parseInt(_range[0]);
                         var end = parseInt(_range[1]);
                         if (start < end) {
                             for (var i = start; i <= end; i++) {
                                 h_lines.push(i);
                             }
                         }
                     }
                     else {
                         h_lines.push(parseInt(highlight_ranges[pos]));
                     }
                 }
                 for (pos in h_lines) {
                     var line_td = $('td.cb-lineno#L' + h_lines[pos]);
                     if (line_td.length) {
                         highlightable_line_tds.push(line_td);
                     }
                 }
             }
 
             // now check a direct id reference (diff page)
             if ($(loc).length && $(loc).hasClass('cb-lineno')) {
                 highlightable_line_tds.push($(loc));
             }
             $.each(highlightable_line_tds, function (i, $td) {
                 $td.addClass('cb-line-selected'); // line number td
                 $td.prev().addClass('cb-line-selected'); // line data
                 $td.next().addClass('cb-line-selected'); // line content
             });
 
             if (highlightable_line_tds.length) {
                 var $first_line_td = highlightable_line_tds[0];
                 scrollToElement($first_line_td);
                 $.Topic('/ui/plugins/code/anchor_focus').prepareOrPublish({
                     td: $first_line_td,
                     remainder: result.remainder
                 });
             }
         }
     }
     collapsableContent();
 });
 
 var feedLifetimeOptions = function(query, initialData){
     var data = {results: []};
     var isQuery = typeof query.term !== 'undefined';
 
     var section = _gettext('Lifetime');
     var children = [];
 
     //filter results
     $.each(initialData.results, function(idx, value) {
 
         if (!isQuery || query.term.length === 0 || value.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0) {
             children.push({
                 'id': this.id,
                 'text': this.text
             })
         }
 
     });
     data.results.push({
         'text': section,
         'children': children
     });
 
     if (isQuery) {
 
         var now = moment.utc();
 
         var parseQuery = function(entry, now){
             var fmt = 'DD/MM/YYYY H:mm';
             var parsed = moment.utc(entry, fmt);
             var diffInMin = parsed.diff(now, 'minutes');
 
             if (diffInMin > 0){
                 return {
                     id: diffInMin,
                     text: parsed.format(fmt)
                 }
             } else {
                 return {
                     id: undefined,
                     text: parsed.format('DD/MM/YYYY') + ' ' + _gettext('date not in future')
                 }
             }
 
 
         };
 
         data.results.push({
             'text': _gettext('Specified expiration date'),
             'children': [{
                 'id': parseQuery(query.term, now).id,
                 'text': parseQuery(query.term, now).text
             }]
         });
     }
 
     query.callback(data);
 };
 
 
 var storeUserSessionAttr = function (key, val) {
 
     var postData = {
         'key': key,
         'val': val,
         'csrf_token': CSRF_TOKEN
     };
 
     var success = function(o) {
         return true
     };
 
     ajaxPOST(pyroutes.url('store_user_session_value'), postData, success);
     return false;
 };

rhodecode/templates/summary/components.mako

@@ -1,257 +1,267 b''
 <%namespace name="base" file="/base/base.mako"/>
 
 <%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>
       % if len(branches) == 1:
           <span>${len(branches)}</span> ${_('Branch')}
       % else:
           <span>${len(branches)}</span> ${_('Branches')}
       % endif
     </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>
       % if len(closed_branches) == 1:
           <span>${len(closed_branches)}</span> ${_('Closed Branch')}
       % else:
           <span>${len(closed_branches)}</span> ${_('Closed Branches')}
       % endif
       </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>
         % if len(tags) == 1:
             <span>${len(tags)}</span> ${_('Tag')}
         % else:
             <span>${len(tags)}</span> ${_('Tags')}
         % endif
         </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>
         % if len(bookmarks) == 1:
             <span>${len(bookmarks)}</span> ${_('Bookmark')}
         % else:
             <span>${len(bookmarks)}</span> ${_('Bookmarks')}
         % endif
         </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="fieldset">
           <div class="left-content">
             <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="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:
                       <i class="icon-tag"></i>
                       % if commit_rev == -1:
                             <span>0</span> ${_('Commit')}
                         % else:
                             <span>0</span> ${_('Commits')}
                         % endif
                   % else:
                       <a href="${h.route_path('repo_changelog', repo_name=c.repo_name)}">
                         <i class="icon-tag"></i>
                         % if commit_rev == 1:
                             <span>${commit_rev}</span> ${_('Commit')}
                         % else:
                             <span>${commit_rev}</span> ${_('Commits')}
                         % endif
                         </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)}">
                      <i class="icon-code-fork"></i>
                      <span>${c.repository_forks}</span> ${_ungettext('Fork', 'Forks', c.repository_forks)}</a>
                 </span>
                 </div>
             </div>
         </div>
       </div>
+        ## owner, description, downloads, statistics
 
+        ## Owner
         <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
           <div class="left-label-summary">
-            <p>${_('Repository size')}</p>
-
+            <p>${_('Owner')}</p>
             <div class="right-label-summary">
-                <div class="tags">
-                   ## repo size
-                    % if commit_rev == -1:
-                          <span class="stats-bullet">0 B</span>
-                    % else:
-                          <span>
-                              <a href="#showSize" onclick="calculateSize(); $(this).hide(); return false" id="show-repo-size">Show repository size</a>
-                          </span>
-                          <span class="stats-bullet" id="repo_size_container" style="display:none">
-                              ${_('Calculating Repository Size...')}
-                          </span>
-                    % endif
+                ${base.gravatar_with_user(c.rhodecode_db_repo.user.email, 16)}
                 </div>
-            </div>
+
           </div>
         </div>
 
+        ## Description
         <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
           <div class="left-label-summary">
             <p>${_('Description')}</p>
 
             <div class="right-label-summary 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>
 
+        ## Downloads
         % if show_downloads:
           <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
             <div class="left-label-summary">
               <p>${_('Downloads')}</p>
 
               <div class="right-label-summary 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')}.
                     </span>
                     % if c.is_super_admin:
                        ${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
 
+        ## Context Action
+        <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
+          <div class="left-label-summary">
+            <p>${_('Feed')}</p>
+
+            <div class="right-label-summary">
+                %if c.rhodecode_user.username != h.DEFAULT_USER:
+                    <a href="${h.route_path('atom_feed_home', repo_name=c.rhodecode_db_repo.repo_name, _query=dict(auth_token=c.rhodecode_user.feed_token))}" title="${_('RSS Feed')}" class="btn btn-sm"><i class="icon-rss-sign"></i>RSS</a>
+                %else:
+                    <a href="${h.route_path('atom_feed_home', repo_name=c.rhodecode_db_repo.repo_name)}" title="${_('RSS Feed')}" class="btn btn-sm"><i class="icon-rss-sign"></i>RSS</a>
+                %endif
+            </div>
+          </div>
+        </div>
+
+        ## Repo size
+        <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
+          <div class="left-label-summary">
+            <p>${_('Repository size')}</p>
+
+            <div class="right-label-summary">
+                <div class="tags">
+                   ## repo size
+                    % if commit_rev == -1:
+                          <span class="stats-bullet">0 B</span>
+                    % else:
+                          <span>
+                              <a href="#showSize" onclick="calculateSize(); $(this).hide(); return false" id="show-repo-size">Show repository size</a>
+                          </span>
+                          <span class="stats-bullet" id="repo_size_container" style="display:none">
+                              ${_('Calculating Repository Size...')}
+                          </span>
+                    % endif
+                </div>
+            </div>
+          </div>
+        </div>
+
         ## Statistics
         <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
           <div class="left-label-summary">
-            <p>${_('Statistics')}</p>
+            <p>${_('Code Statistics')}</p>
 
             <div class="right-label-summary input ${summary(c.show_stats)} statistics">
               % if c.show_stats:
                 <div id="lang_stats" class="enabled">
-                    ${_('Calculating Code Statistics...')}
+                    <a href="#showSize" onclick="calculateSize(); $('#show-repo-size').hide(); $(this).hide(); return false" id="show-repo-size">Show code statistics</a>
                 </div>
               % else:
                   <span class="disabled">
                       ${_('Statistics are disabled for this repository')}.
                   </span>
                   % if c.is_super_admin:
                      ${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 class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
-          <div class="left-label-summary">
-            <p>${_('Owner')}</p>
-            <div class="right-label-summary">
-                ${base.gravatar_with_user(c.rhodecode_db_repo.user.email, 16)}
-            </div>
-
-          </div>
-        </div>
-
-        ## Context Action
-        <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
-          <div class="left-label-summary">
-            %if c.rhodecode_user.username != h.DEFAULT_USER:
-                <a href="${h.route_path('atom_feed_home', repo_name=c.rhodecode_db_repo.repo_name, _query=dict(auth_token=c.rhodecode_user.feed_token))}" title="${_('RSS Feed')}" class="btn btn-sm"><i class="icon-rss-sign"></i>RSS</a>
-            %else:
-                <a href="${h.route_path('atom_feed_home', repo_name=c.rhodecode_db_repo.repo_name)}" title="${_('RSS Feed')}" class="btn btn-sm"><i class="icon-rss-sign"></i>RSS</a>
-            %endif
-          </div>
-        </div>
 
     </div><!--end summary-detail-->
 
     <div id="summary_details_expand" class="btn-collapse" data-toggle="summary-details">
             ${_('Show More')}
     </div>
 </%def>