Pretty quota status bar

app/static/app/css/sb-admin-2.css

@@ -50,11 +50,26 @@ body {
     margin-right: 0;
 }
 
-.navbar-top-links .dropdown-menu li a {
+.navbar-top-links .dropdown-menu li a{
     padding: 3px 20px;
     min-height: 0;
 }
 
+.navbar-top-links .dropdown-menu li div.info-item{
+    padding: 3px 8px;
+    min-height: 0;
+}
+
+.navbar-top-links .dropdown-menu li div.info-item.quotas{
+    min-width: 190px;
+}
+
+.navbar-top-links .dropdown-menu li .progress{
+    margin-bottom: 0;
+    margin-top: 6px;
+}
+
+
 .navbar-top-links .dropdown-menu li a div {
     white-space: normal;
 }

app/templates/app/logged_in_base.html

@@ -12,17 +12,31 @@
             </a>
             <ul class="dropdown-menu dropdown-user">
                 <li class="user-profile">
-                    {% blocktrans with user=user.username %}Hello, {{ user }}!{% endblocktrans %}<br/>
-                    <span class="email">{{ user.email }}</span>
+                    <div class="info-item">
+                        {% blocktrans with user=user.username %}Hello, {{ user }}!{% endblocktrans %}<br/>
+                        <span class="email">{{ user.email }}</span>
+                    </div>
                 </li>
                 {% if user.profile.has_quota %}
-                <li class="divider"></li>
+                    <li class="divider"></li>
+                    
                     {% with tot_quota=user.profile.quota %}
                     {% with used_quota=user.profile.used_quota_cached %}
-                    {% percentage 0 tot_quota as perc_quota %}
-
-                    Tot: {{ tot_quota }} Used: {{ used_quota }}
-                    Perc: {{ perc_quota|floatformat:0 }}
+                    {% percentage used_quota tot_quota as perc_quota %}
+                    {% percentage used_quota tot_quota 100 as bar_width %}
+                    
+                    <li>
+                        <div class="info-item quotas">
+                            {% with usage=perc_quota|floatformat:0 used=used_quota|storage_size total=tot_quota|storage_size %}
+                            <i class="fa fa-database fa-fw"></i> {% blocktrans %}{{used}} of {{total}} used{% endblocktrans %}
+                            <div class="progress">
+                                <div class="progress-bar progress-bar-{% if perc_quota <= 100 %}success{% else %}warning{% endif %} active" style="width: {{ bar_width }}%">
+                                    {{usage}}%
+                                </div>
+                            </div>
+                            {% endwith %}
+                        </div>
+                    </li>
 
                     {% endwith %}{% endwith %}
                 {% endif %}

app/templatetags/settings.py

@@ -1,5 +1,5 @@
 import datetime
-
+import math
 import logging
 from django import template
 from webodm import settings
@@ -7,6 +7,18 @@ from webodm import settings
 register = template.Library()
 logger = logging.getLogger('app.logger')
 
+@register.filter
+def storage_size(megabytes):
+    k = 1000
+    k2 = k ** 2
+    k3 = k ** 3
+    if megabytes <= k2:
+        return str(round(megabytes / k, 2)) + ' GB'
+    elif megabytes <= k3:
+        return str(round(megabytes / k2, 2)) + ' TB'
+    else:
+        return str(round(megabytes / k3, 2)) + ' PB'
+
 @register.simple_tag
 def percentage(num, den, maximum=None):
     if den == 0: