javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Revert "Added support for badges in TabBar icons."

Browse Source 
This reverts commit 1bd89a86f5.
This commit is contained in:
UniRing
2014-01-31 17:43:58 +01:00
parent 1bd89a86f5
commit 62698fdc69
9 changed files with 10 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
dist/css/ionic.css vendored
View File

@@ -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,

2
dist/css/ionic.min.css vendored
View File

File diff suppressed because one or more lines are too long

17
dist/js/ionic-angular.js vendored
View File

@@ -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();
});
};

4
dist/js/ionic-angular.min.js vendored
View File

File diff suppressed because one or more lines are too long

6
dist/js/ionic.min.js vendored
View File

File diff suppressed because one or more lines are too long

7
js/ext/angular/src/directive/ionicTabBar.js vendored
View File

@@ -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}}' +

6
scss/_mixins.scss
View File

@@ -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
// --------------------------------------------------

22
scss/_tabs.scss
View File

@@ -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 */

3
scss/_variables.scss
View File

@@ -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;