summary: re-organize order of summary expanded area

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

rhodecode/public/css/tables.less

@@ -408,29 +408,11 b' table.trending_language_tbl {'
 
 .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;

rhodecode/public/js/src/rhodecode.js

@@ -102,7 +102,7 b' var showRepoStats = function(target, dat'
     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;
@@ -120,54 +120,47 b' var showRepoStats = function(target, dat'
         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);

rhodecode/templates/summary/components.mako

@@ -139,30 +139,21 b''
                 </div>
             </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
-                </div>
+                ${base.gravatar_with_user(c.rhodecode_db_repo.user.email, 16)}
             </div>
+
           </div>
         </div>
 
+        ## Description
         <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
           <div class="left-label-summary">
             <p>${_('Description')}</p>
@@ -174,6 +165,7 b''
           </div>
         </div>
 
+        ## Downloads
         % if show_downloads:
           <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
             <div class="left-label-summary">
@@ -205,15 +197,53 b''
           </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">
@@ -228,26 +258,6 b''
           </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-->