Added support for badges in TabBar icons.

uniring · uniring · commit 1bd89a86f5f0 · 2014-01-31T17:36:36.000+01:00
Added support for TabBar icon badges using the attribute badge in the
tab directive.

Ex: &lt;tab icon-on="icon ion-ios7-person" icon-off="icon
ion-ios7-person-outline" href="#/tab/myprofile" badge="3"&gt;

I’ve used the colors of the TabBar itself but inverted for the badge. I
don’t know if you’ll want to merge this straight on but I think it can
help as a start point for this feature. I’ve tried to do it as
integrated as possible.
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
@@ -3489,51 +3489,81 @@ a.subdued {
   border-top-width: 1px;
   background-size: 0;
   line-height: 49px; }
+  .tabs .tab-item .icon.badge {
+    background-color: #444444;
+    color: #f8f8f8; }
   .tabs.tabs-light {
     background-color: white;
     background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
     border-color: #dddddd;
     color: #444444; }
+    .tabs.tabs-light .tab-item .icon.badge {
+      background-color: #444444;
+      color: white; }
   .tabs.tabs-stable {
     background-color: #f8f8f8;
     background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%);
     border-color: #b2b2b2;
     color: #444444; }
+    .tabs.tabs-stable .tab-item .icon.badge {
+      background-color: #444444;
+      color: #f8f8f8; }
   .tabs.tabs-positive {
     background-color: #4a87ee;
     background-image: linear-gradient(0deg, #145dd7, #145dd7 50%, transparent 50%);
     border-color: #145dd7;
     color: white; }
+    .tabs.tabs-positive .tab-item .icon.badge {
+      background-color: white;
+      color: #4a87ee; }
   .tabs.tabs-calm {
     background-color: #43cee6;
     background-image: linear-gradient(0deg, #1aaac3, #1aaac3 50%, transparent 50%);
     border-color: #1aaac3;
     color: white; }
+    .tabs.tabs-calm .tab-item .icon.badge {
+      background-color: white;
+      color: #43cee6; }
   .tabs.tabs-assertive {
     background-color: #ef4e3a;
     background-image: linear-gradient(0deg, #cc2511, #cc2511 50%, transparent 50%);
     border-color: #cc2511;
     color: white; }
+    .tabs.tabs-assertive .tab-item .icon.badge {
+      background-color: white;
+      color: #ef4e3a; }
   .tabs.tabs-balanced {
     background-color: #66cc33;
     background-image: linear-gradient(0deg, #478f24, #478f24 50%, transparent 50%);
     border-color: #478f24;
     color: white; }
+    .tabs.tabs-balanced .tab-item .icon.badge {
+      background-color: white;
+      color: #66cc33; }
   .tabs.tabs-energized {
     background-color: #f0b840;
     background-image: linear-gradient(0deg, #d39511, #d39511 50%, transparent 50%);
     border-color: #d39511;
     color: white; }
+    .tabs.tabs-energized .tab-item .icon.badge {
+      background-color: white;
+      color: #f0b840; }
   .tabs.tabs-royal {
     background-color: #8a6de9;
     background-image: linear-gradient(0deg, #552bdf, #552bdf 50%, transparent 50%);
     border-color: #552bdf;
     color: white; }
+    .tabs.tabs-royal .tab-item .icon.badge {
+      background-color: white;
+      color: #8a6de9; }
   .tabs.tabs-dark {
     background-color: #444444;
     background-image: linear-gradient(0deg, #111111, #111111 50%, transparent 50%);
     border-color: #111111;
     color: white; }
+    .tabs.tabs-dark .tab-item .icon.badge {
+      background-color: white;
+      color: #444444; }
   @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
     .tabs {
       padding-top: 2px;
@@ -3600,6 +3630,16 @@ a.subdued {
 .tabs-icon-only .icon:before {
   line-height: inherit; }
 
+.tab-item.has-badge {
+  position: relative; }
+
+.tab-item .icon.badge {
+  position: absolute;
+  padding: 2px 6px;
+  top: 2%;
+  right: 10%;
+  font-size: 12px; }
+
 /* Navigational tab */
 /* Active state for tab */
 .tab-item.active,
diff --git a/dist/css/ionic.min.css b/dist/css/ionic.min.css
diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
@@ -2360,6 +2360,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
         $scope.icon = $attr.icon;
         $scope.iconOn = $attr.iconOn;
         $scope.iconOff = $attr.iconOff;
+        $scope.badge = $attr.badge;
         $scope.viewSref = $attr.uiSref;
         $scope.url = $attr.href;
         if($scope.url && $scope.url.indexOf('#') === 0) {
@@ -2449,7 +2450,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
     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}}" 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}}" active="c.isVisible" index="$index" ng-repeat="c in controllers"></tab-controller-item>' + 
     '</div>',
     link: function($scope, $element, $attr, tabsCtrl) {
       $element.addClass($scope.tabsType);
@@ -2468,6 +2469,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
       icon: '@',
       iconOn: '@',
       iconOff: '@',
+      badge: '@',
       active: '=',
       tabSelected: '@',
       index: '='
@@ -2482,7 +2484,8 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
       };
     },
     template: 
-      '<a ng-class="{active:active}" ng-click="selectTab()" class="tab-item">' +
+      '<a ng-class="{active:active, \'has-badge\':badge}" ng-click="selectTab()" class="tab-item">' +
+        '<i class="icon badge" 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> {{iconTitle}}' +
@@ -2756,6 +2759,10 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
         updateHeaderData(data);
       });
 
+      $rootScope.$on('viewState.titleUpdated', function(e, data) {
+        $scope.currentTitle = (data && data.title ? data.title : '');
+      });
+
       // If a nav page changes the left or right buttons, update our scope vars
       $scope.$parent.$on('viewState.leftButtonsChanged', function(e, data) {
         $scope.leftButtons = data;
@@ -2817,10 +2824,16 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
           $scope.$emit('viewState.rightButtonsChanged', $scope.rightButtons);
         });
 
+        // watch for changes in the title
+        var deregTitle = $scope.$watch('title', function(val) {
+          $scope.$emit('viewState.titleUpdated', $scope);
+        });
+
         $scope.$on('$destroy', function(){
           // deregister on destroy
           deregLeftButtons();
           deregRightButtons();
+          deregTitle();
         });
 
       };
diff --git a/dist/js/ionic-angular.min.js b/dist/js/ionic-angular.min.js
diff --git a/dist/js/ionic.min.js b/dist/js/ionic.min.js
diff --git a/js/ext/angular/src/directive/ionicTabBar.js b/js/ext/angular/src/directive/ionicTabBar.js
@@ -147,6 +147,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
         $scope.icon = $attr.icon;
         $scope.iconOn = $attr.iconOn;
         $scope.iconOff = $attr.iconOff;
+        $scope.badge = $attr.badge;
         $scope.viewSref = $attr.uiSref;
         $scope.url = $attr.href;
         if($scope.url && $scope.url.indexOf('#') === 0) {
@@ -236,7 +237,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
     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}}" 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}}" active="c.isVisible" index="$index" ng-repeat="c in controllers"></tab-controller-item>' + 
     '</div>',
     link: function($scope, $element, $attr, tabsCtrl) {
       $element.addClass($scope.tabsType);
@@ -255,6 +256,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
       icon: '@',
       iconOn: '@',
       iconOff: '@',
+      badge: '@',
       active: '=',
       tabSelected: '@',
       index: '='
@@ -269,7 +271,8 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
       };
     },
     template: 
-      '<a ng-class="{active:active}" ng-click="selectTab()" class="tab-item">' +
+      '<a ng-class="{active:active, \'has-badge\':badge}" ng-click="selectTab()" class="tab-item">' +
+        '<i class="icon badge" 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> {{iconTitle}}' +
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
@@ -79,6 +79,12 @@
   color: $color;
 }
 
+@mixin tab-badge-style($bg-color, $color) {
+  .tab-item .icon.badge {
+    background-color: $bg-color;
+    color: $color;
+  }
+}
 
 // Item Mixins
 // --------------------------------------------------
diff --git a/scss/_tabs.scss b/scss/_tabs.scss
@@ -11,6 +11,7 @@
   @include justify-content(center);
 
   @include tab-style($tabs-default-bg, $tabs-default-border, $tabs-default-text);
+  @include tab-badge-style($tabs-default-text, $tabs-default-bg);
 
   position: absolute;
   bottom: 0;
@@ -28,30 +29,39 @@
 
   &.tabs-light {
     @include tab-style($tabs-light-bg, $tabs-light-border, $tabs-light-text);
+    @include tab-badge-style($tabs-light-text, $tabs-light-bg);
   }
   &.tabs-stable {
     @include tab-style($tabs-stable-bg, $tabs-stable-border, $tabs-stable-text);
+    @include tab-badge-style($tabs-stable-text, $tabs-stable-bg);
   }
   &.tabs-positive {
     @include tab-style($tabs-positive-bg, $tabs-positive-border, $tabs-positive-text);
+    @include tab-badge-style($tabs-positive-text, $tabs-positive-bg);
   }
   &.tabs-calm {
     @include tab-style($tabs-calm-bg, $tabs-calm-border, $tabs-calm-text);
+    @include tab-badge-style($tabs-calm-text, $tabs-calm-bg);
   }
   &.tabs-assertive {
     @include tab-style($tabs-assertive-bg, $tabs-assertive-border, $tabs-assertive-text);
+    @include tab-badge-style($tabs-assertive-text, $tabs-assertive-bg);
   }
   &.tabs-balanced {
     @include tab-style($tabs-balanced-bg, $tabs-balanced-border, $tabs-balanced-text);
+    @include tab-badge-style($tabs-balanced-text, $tabs-balanced-bg);
   }
   &.tabs-energized {
     @include tab-style($tabs-energized-bg, $tabs-energized-border, $tabs-energized-text);
+    @include tab-badge-style($tabs-energized-text, $tabs-energized-bg);
   }
   &.tabs-royal {
     @include tab-style($tabs-royal-bg, $tabs-royal-border, $tabs-royal-text);
+    @include tab-badge-style($tabs-royal-text, $tabs-royal-bg);
   }
   &.tabs-dark {
     @include tab-style($tabs-dark-bg, $tabs-dark-border, $tabs-dark-text);
+    @include tab-badge-style($tabs-dark-text, $tabs-dark-bg);
   }
   @media (min--moz-device-pixel-ratio: 1.5),
          (-webkit-min-device-pixel-ratio: 1.5),
@@ -132,6 +142,18 @@
   line-height: inherit;
 }
 
+.tab-item.has-badge {
+  position: relative;
+}
+
+.tab-item .icon.badge {
+  position: absolute;
+  padding: $tabs-badge-padding;
+  top: 2%;
+  right: 10%;
+  font-size: $tabs-badge-font-size;
+}
+
 /* Navigational tab */
 
 /* Active state for tab */
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -231,6 +231,9 @@ $tabs-height:                      49px !default;
 $tabs-text-font-size:              14px !default;
 $tabs-text-font-size-side-icon:    12px !default;
 $tabs-icon-size:                   32px !default;
+$tabs-badge-padding:               2px 6px;
+$tabs-badge-font-size:             12px !default;
+$tabs-text-font-size:              14px !default;
 
 $tabs-light-bg:                    $button-light-bg;
 $tabs-light-border:                $button-light-border;
