# HG changeset patch
# User domruf <dominikruf@gmail.com>
# Date 1474480724 -7200
# Node ID 71acaf87e5a25a1a88828a9d6159324a07a4b99f
# Parent  990eb49eac0dc85cfd0c2459b3226860acb30c0b
templates: use bootstrap for progress bars

Based on work form Andrew Shadura <andrew@shadura.me>.

Further modified by Mads Kiilerich.

diff -r 990eb49eac0d -r 71acaf87e5a2 kallithea/lib/helpers.py
--- a/kallithea/lib/helpers.py	Tue Jan 10 01:29:05 2017 +0100
+++ b/kallithea/lib/helpers.py	Wed Sep 21 19:58:44 2016 +0200
@@ -883,26 +883,6 @@
     from kallithea.lib.diffs import NEW_FILENODE, DEL_FILENODE, \
         MOD_FILENODE, RENAMED_FILENODE, CHMOD_FILENODE, BIN_FILENODE
 
-    def cgen(l_type, a_v, d_v):
-        mapping = {'tr': 'top-right-rounded-corner-mid',
-                   'tl': 'top-left-rounded-corner-mid',
-                   'br': 'bottom-right-rounded-corner-mid',
-                   'bl': 'bottom-left-rounded-corner-mid'}
-        map_getter = lambda x: mapping[x]
-
-        if l_type == 'a' and d_v:
-            #case when added and deleted are present
-            return ' '.join(map(map_getter, ['tl', 'bl']))
-
-        if l_type == 'a' and not d_v:
-            return ' '.join(map(map_getter, ['tr', 'br', 'tl', 'bl']))
-
-        if l_type == 'd' and a_v:
-            return ' '.join(map(map_getter, ['tr', 'br']))
-
-        if l_type == 'd' and not a_v:
-            return ' '.join(map(map_getter, ['tr', 'br', 'tl', 'bl']))
-
     a, d = stats['added'], stats['deleted']
     width = 100
 
@@ -933,9 +913,9 @@
             lbl += _org_lbl if lbl.endswith('+') else '+%s' % _org_lbl
 
         #import ipdb;ipdb.set_trace()
-        b_d = '<div class="bin bin%s %s" style="width:100%%">%s</div>' % (bin_op, cgen('a', a_v='', d_v=0), lbl)
+        b_d = '<div class="bin bin%s progress-bar" style="width:100%%">%s</div>' % (bin_op, lbl)
         b_a = '<div class="bin bin1" style="width:0%"></div>'
-        return literal('<div style="width:%spx">%s%s</div>' % (width, b_a, b_d))
+        return literal('<div style="width:%spx" class="progress">%s%s</div>' % (width, b_a, b_d))
 
     t = stats['added'] + stats['deleted']
     unit = float(width) / (t or 1)
@@ -955,13 +935,13 @@
     a_v = a if a > 0 else ''
     d_v = d if d > 0 else ''
 
-    d_a = '<div class="added %s" style="width:%s%%">%s</div>' % (
-        cgen('a', a_v, d_v), a_p, a_v
+    d_a = '<div class="added progress-bar" style="width:%s%%">%s</div>' % (
+        a_p, a_v
     )
-    d_d = '<div class="deleted %s" style="width:%s%%">%s</div>' % (
-        cgen('d', a_v, d_v), d_p, d_v
+    d_d = '<div class="deleted progress-bar" style="width:%s%%">%s</div>' % (
+        d_p, d_v
     )
-    return literal('<div style="width:%spx">%s%s</div>' % (width, d_a, d_d))
+    return literal('<div class="pull-right progress" style="width:%spx">%s%s</div>' % (width, d_a, d_d))
 
 
 _URLIFY_RE = re.compile(r'''
diff -r 990eb49eac0d -r 71acaf87e5a2 kallithea/public/css/style.css
--- a/kallithea/public/css/style.css	Tue Jan 10 01:29:05 2017 +0100
+++ b/kallithea/public/css/style.css	Wed Sep 21 19:58:44 2016 +0200
@@ -1699,7 +1699,7 @@
     border-spacing: 1px;
 }
 
-.trending_language {
+#lang_stats .progress-bar {
     background-color: #577632;
     color: #FFF;
     display: block;
@@ -1710,6 +1710,13 @@
     margin-left: 5px;
     white-space: pre;
     padding: 3px;
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+}
+
+#lang_stats table td {
+    border-bottom: none !important;
+    padding: 1px 0 !important;
 }
 
 h3.files_location {
diff -r 990eb49eac0d -r 71acaf87e5a2 kallithea/templates/summary/summary.html
--- a/kallithea/templates/summary/summary.html	Tue Jan 10 01:29:05 2017 +0100
+++ b/kallithea/templates/summary/summary.html	Wed Sep 21 19:58:44 2016 +0200
@@ -308,7 +308,7 @@
     var total = 0;
     var no_data = true;
     var tbl = document.createElement('table');
-    tbl.setAttribute('class','trending_language_tbl');
+    tbl.setAttribute('class','table');
     var cnt = 0;
     for (var i=0;i<data.length;i++){
         total+= data[i][1].count;
@@ -328,7 +328,7 @@
         var percentage = Math.round((obj.count/total*100),2);
 
         var td1 = document.createElement('td');
-        td1.width = 150;
+        td1.width = 250;
         var trending_language_label = document.createElement('div');
         trending_language_label.innerHTML = obj.desc+" ("+k+")";
         td1.appendChild(trending_language_label);
@@ -341,14 +341,16 @@
         trending_language.title = k+" "+nr_files;
 
         if (percentage>22){
-            trending_language.innerHTML = "<b style='font-size:0.8em'>"+percentage+"% "+nr_files+ "</b>";
+            trending_language.innerHTML = "<b class='progress-bar' role='progressbar'"
+                + "aria-valuemin='0' aria-valuemax='100' aria-valuenow='" + percentage
+                + "' style='width: " + percentage + "%;'>" + percentage + "%, " + nr_files + "</b>";
         }
         else{
-            trending_language.innerHTML = "<b style='font-size:0.8em'>"+percentage+"%</b>";
+            trending_language.innerHTML = "<b class='progress-bar' role='progressbar'"
+                + "aria-valuemin='0' aria-valuemax='100' aria-valuenow='" + percentage
+                + "' style='width: " + percentage + "%;'>" + percentage + "%</b>";
         }
 
-        trending_language.setAttribute("class", 'trending_language top-right-rounded-corner bottom-right-rounded-corner');
-        trending_language.style.width=percentage+"%";
         td2.appendChild(trending_language);
 
         tr.appendChild(td1);