Revert "Added support for badges in TabBar icons."

uniring · uniring · commit 62698fdc69b4 · 2014-01-31T17:43:58.000+01:00
This reverts commit 1bd89a8.
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
@@ -3489,81 +3489,51 @@ 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;
@@ -3630,16 +3600,6 @@ 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,7 +2360,6 @@ 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) {
@@ -2450,7 +2449,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}}" 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}}" active="c.isVisible" index="$index" ng-repeat="c in controllers"></tab-controller-item>' + 
     '</div>',
     link: function($scope, $element, $attr, tabsCtrl) {
       $element.addClass($scope.tabsType);
@@ -2469,7 +2468,6 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
       icon: '@',
       iconOn: '@',
       iconOff: '@',
-      badge: '@',
       active: '=',
       tabSelected: '@',
       index: '='
@@ -2484,8 +2482,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
       };
     },
     template: 
-      '<a ng-class="{active:active, \'has-badge\':badge}" ng-click="selectTab()" class="tab-item">' +
-        '<i class="icon badge" ng-if="badge">{{badge}}</i>' +
+      '<a ng-class="{active:active}" ng-click="selectTab()" class="tab-item">' +
         '<i class="icon {{icon}}" ng-if="icon"></i>' +
         '<i class="{{iconOn}}" ng-if="active"></i>' +
         '<i class="{{iconOff}}" ng-if="!active"></i> {{iconTitle}}' +
@@ -2759,10 +2756,6 @@ 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;
@@ -2824,16 +2817,10 @@ 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,7 +147,6 @@ 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) {
@@ -237,7 +236,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}}" 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}}" active="c.isVisible" index="$index" ng-repeat="c in controllers"></tab-controller-item>' + 
     '</div>',
     link: function($scope, $element, $attr, tabsCtrl) {
       $element.addClass($scope.tabsType);
@@ -256,7 +255,6 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
       icon: '@',
       iconOn: '@',
       iconOff: '@',
-      badge: '@',
       active: '=',
       tabSelected: '@',
       index: '='
@@ -271,8 +269,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
       };
     },
     template: 
-      '<a ng-class="{active:active, \'has-badge\':badge}" ng-click="selectTab()" class="tab-item">' +
-        '<i class="icon badge" ng-if="badge">{{badge}}</i>' +
+      '<a ng-class="{active:active}" ng-click="selectTab()" class="tab-item">' +
         '<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,12 +79,6 @@
   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,7 +11,6 @@
   @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;
@@ -29,39 +28,30 @@
 
   &.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),
@@ -142,18 +132,6 @@
   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,9 +231,6 @@ $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;
