feat(tabs): allow tab badge-style attribute to set badge class

ionic-team · Feb 7, 2014 · b11e0f5 · b11e0f5
1 parent c41e537
commit b11e0f5
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 21 deletions.
diff --git a/js/ext/angular/src/directive/ionicTabBar.js b/js/ext/angular/src/directive/ionicTabBar.js
@@ -135,7 +135,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
 }])
 
 // Generic controller directive
-.directive('tab', ['$ionicViewService', '$rootScope', '$parse', function($ionicViewService, $rootScope, $parse) {
+.directive('tab', ['$ionicViewService', '$rootScope', '$parse', '$interpolate', function($ionicViewService, $rootScope, $parse, $interpolate) {
   return {
     restrict: 'E',
     require: '^tabs',
@@ -169,10 +169,14 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
         // tell any parent nav controller to animate
         $scope.animate = $scope.$eval($attr.animate);
 
-        var badge = $parse($attr.badge);
-        $scope.$watch(badge, function(value) {
+        var badgeGet = $parse($attr.badge);
+        $scope.$watch(badgeGet, function(value) {
           $scope.badge = value;
         });
+        var badgeStyleGet = $interpolate(attr.badgeStyle || '');
+        $scope.$watch(badgeStyleGet, function(val) {
+          $scope.badgeStyle = val;
+        });
 
         var leftButtonsGet = $parse($attr.leftButtons);
         $scope.$watch(leftButtonsGet, function(value) {
@@ -246,7 +250,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
     replace: true,
     scope: true,
     template: '<div class="tabs">' +
-      '<tab-controller-item icon-title="{{c.title}}" icon="{{c.icon}}" icon-on="{{c.iconOn}}" icon-off="{{c.iconOff}}" badge="c.badge" active="c.isVisible" index="$index" ng-repeat="c in controllers"></tab-controller-item>' +
+      '<tab-controller-item icon-title="{{c.title}}" icon="{{c.icon}}" icon-on="{{c.iconOn}}" icon-off="{{c.iconOff}}" badge="c.badge" badge-style="c.badgeStyle" active="c.isVisible" index="$index" ng-repeat="c in controllers"></tab-controller-item>' +
     '</div>',
     link: function($scope, $element, $attr, tabsCtrl) {
       $element.addClass($scope.tabsType);
@@ -266,6 +270,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
       iconOn: '@',
       iconOff: '@',
       badge: '=',
+      badgeStyle: '=',
       active: '=',
       tabSelected: '@',
       index: '='
@@ -281,7 +286,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
     },
     template:
       '<a ng-class="{active:active, \'has-badge\':badge}" ng-click="selectTab()" class="tab-item">' +
-        '<i class="badge" ng-if="badge">{{badge}}</i>' +
+        '<i class="badge {{badgeStyle}}" ng-if="badge">{{badge}}</i>' +
         '<i class="icon {{icon}}" ng-if="icon"></i>' +
         '<i class="{{iconOn}}" ng-if="active"></i>' +
         '<i class="{{iconOff}}" ng-if="!active"></i>' +

diff --git a/js/ext/angular/test/directive/ionicTabBar.unit.js b/js/ext/angular/test/directive/ionicTabBar.unit.js
@@ -137,8 +137,9 @@ describe('Tab Item directive', function() {
     scope = $rootScope;
 
     scope.badgeValue = 3;
+    scope.badgeStyle = 'badge-assertive';
     element = compile('<tabs>' +
-      '<tab title="Item" icon="icon-default" badge="badgeValue"></tab>' +
+      '<tab title="Item" icon="icon-default" badge="badgeValue" badge-style="{{badgeStyle}}"></tab>' +
       '</tabs>')(scope);
     scope.$digest();
     $document[0].body.appendChild(element[0]);
@@ -158,9 +159,9 @@ describe('Tab Item directive', function() {
 
   it('Badge works', function() {
     scope.$digest();
-    var i = element[0].querySelectorAll('i')[0];
-    expect(angular.element(i).hasClass('badge')).toEqual(true);
+    var i = element[0].querySelector('.badge');
     expect(i.innerHTML).toEqual('3');
+    expect(i.className).toMatch('badge-assertive');
   });
 
   it('Badge updates', function() {
@@ -192,7 +193,7 @@ describe('Tab Controller Item directive', function() {
     scope.badgeValue = 3;
     scope.isActive = false;
     element = compile('<tabs class="tabs">' +
-      '<tab-controller-item icon-title="Icon <b>title</b>" icon="icon-class" icon-on="icon-on-class" icon-off="icon-off-class" badge="badgeValue" active="isActive" index="0"></tab-controller-item>' +
+      '<tab-controller-item icon-title="Icon <b>title</b>" icon="icon-class" icon-on="icon-on-class" icon-off="icon-off-class" badge="badgeValue" badge-style="badgeStyle" active="isActive" index="0"></tab-controller-item>' +
     '</tabs>')(scope);
     scope.$digest();
     $document[0].body.appendChild(element[0]);
@@ -223,9 +224,13 @@ describe('Tab Controller Item directive', function() {
 
   it('Badge updates', function() {
     scope.badgeValue = 10;
+    scope.badgeStyle = 'badge-assertive';
     scope.$digest();
-    var i = element[0].querySelectorAll('i')[0];
+    var i = element[0].querySelector('.badge');
     expect(i.innerHTML).toEqual('10');
+    expect(i.className).toMatch('badge-assertive');
+    scope.$apply('badgeStyle = "badge-super"');
+    expect(i.className).toMatch('badge-super');
   });
 
 });
diff --git a/js/ext/angular/test/tabs.html b/js/ext/angular/test/tabs.html
@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="stylesheet" href="../../../../dist/css/ionic.css">
     <style>
-      .fade-out > .ng-enter, 
-      .fade-out > .ng-leave, 
+      .fade-out > .ng-enter,
+      .fade-out > .ng-leave,
       .fade-out > .ng-move {
         -webkit-transition: 0.2s linear all;
         transition: 0.4s ease-out all;
@@ -53,7 +53,7 @@
   </head>
   <body ng-controller="RootCtrl">
     <tabs
-          animation="fade-in-out" 
+          animation="fade-in-out"
           tabs-type="tabs-icon-only"
           tabs-style="tabs-top tabs-positive"
           controller-changed="onControllerChanged(oldController, oldIndex, newController, newIndex)">
@@ -68,18 +68,18 @@ <h1 class="title">Tasks</h1>
 
           <refresher></refresher>
 
-          <list scroll="false" 
-               on-reorder="onReorder(el, start, end)" 
+          <list scroll="false"
+               on-reorder="onReorder(el, start, end)"
                can-delete="true"
                can-reorder="true"
                can-swipe="true"
                on-delete="deleteItem(item)"
-               show-delete="isDeletingItems" 
-               animation="fade-out" 
-               delete-icon="ion-minus-circled" 
+               show-delete="isDeletingItems"
+               animation="fade-out"
+               delete-icon="ion-minus-circled"
                reorder-icon="ion-navicon">
 
-            <item ng-repeat="item in items" 
+            <item ng-repeat="item in items"
                   item="item">
               {{item.title}}
             </list-item>
@@ -88,7 +88,7 @@ <h1 class="title">Tasks</h1>
         </content>
       </tab>
 
-      <tab title="Deadlines" icon-on="icon ion-ios7-clock" icon-off="icon ion-ios7-clock-outline" badge="unreadDeadlines">
+      <tab title="Deadlines" icon-on="icon ion-ios7-clock" icon-off="icon ion-ios7-clock-outline" badge-style="badge-light" badge="unreadDeadlines">
         <header class="bar bar-header bar-positive">
           <h1 class="title">Deadlines</h1>
         </header>
@@ -114,7 +114,7 @@ <h1 class="title">Settings</h1>
           <h1>Settings</h1>
         </content>
       </tab>
-      
+
     </tabs>
 
     <script id="newTask.html" type="text/ng-template">

diff --git a/scss/_badge.scss b/scss/_badge.scss
@@ -20,7 +20,11 @@
   &:empty {
     display: none;
   }
+}
 
+//Be sure to override specificity of rule that 'badge color matches tab color by default'
+.tabs .tab-item .badge,
+.badge {
   &.badge-light {
     @include badge-style($badge-light-bg, $badge-light-text);
   }