Simple dashboard notifications style

ckan · Nov 7, 2012 · f440d8d · f440d8d
1 parent a91b625
commit f440d8d
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/ckan/public/base/less/masthead.less b/ckan/public/base/less/masthead.less
@@ -164,17 +164,30 @@
       .border-radius(100px);
       .box-shadow(0 -2px 4px rgba(0, 0, 0, 0.3))
     }
-    i {
+    .icon {
       position: absolute;
       top: 0;
       left: 30px;
       line-height: 25px;
     }
+    .notifications {
+      position: absolute;
+      top: -2px;
+      right: 8px;
+      width: 8px;
+      height: 8px;
+      background-color: #B55457;
+      border: 1px solid #E2B5B6;
+      overflow: hidden;
+      text-indent: -10000px;
+      .box-shadow(0 1px 2px rgba(0, 0, 0, 0.75));
+      .border-radius(100px);
+    }
     &:hover {
       opacity: 1;
+      text-decoration: none;
       i {
         font-weight: normal;
-        text-decoration: none;
       }
     }
   }
@@ -215,8 +228,18 @@
     i {
       margin-right: 5px;
     }
+    .label {
+      float: right;
+      margin-left: 10px;
+      padding-right: 6px;
+      .border-radius(100px);
+    }
     &:hover {
       color: @mastheadLinkColor;
+      .label {
+        background-color: @mastheadLinkColor;
+        color: @layoutLinkColor;
+      }
     }
   }
 }

diff --git a/ckan/templates/header.html b/ckan/templates/header.html
@@ -19,12 +19,19 @@ <h1>
         <div class="account section avatar authed dropdown" data-me="{{ c.userobj.id }}">
           <a href="#" class="image dropdown-toggle" data-toggle="dropdown">
             {{ h.gravatar((c.userobj.email_hash if c and c.userobj else ''),size=25) }}
-            <i class="icon-caret-down"></i>
+            {% if c.new_activities > 0 %}
+              <span class="notifications" title="{{ _('New items in your dashboard') }}">{{ c.new_activities }}</span>
+            {% endif %}
+            <i class="icon icon-caret-down"></i>
           </a>
           <ul class="dropdown-menu pull-right" role="menu">
             <li>
               <a href="{{ h.url_for(controller='user', action='dashboard') }}">
-                <i class="icon-dashboard"></i> {{ _('Dashboard') }}
+                {% if c.new_activities > 0 %}
+                  <span class="label label-important" title="{{ _('New items in your dashboard') }}">{{ c.new_activities }}</span>
+                {% endif %}
+                <i class="icon-dashboard"></i>
+                {{ _('Dashboard') }}
               </a>
             </li>
             <li>