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

refactor(toggle): platform config toggle styles

Browse Source
This commit is contained in:
Adam Bradley
2015-01-21 12:55:11 -06:00
parent 65aa2af95d
commit 0e11a087a2
5 changed files with 97 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
js/angular/directive/toggle.js vendored
View File

@@ -24,9 +24,9 @@
*/
IonicModule
.directive('ionToggle', [
'$ionicGesture',
'$timeout',
function($ionicGesture, $timeout) {
'$ionicConfig',
function($timeout, $ionicConfig) {
return {
restrict: 'E',
@@ -65,34 +65,32 @@ function($ionicGesture, $timeout) {
element[0].getElementsByTagName('label')[0].classList.add(attr.toggleClass);
}
return function($scope, $element, $attr) {
var el, checkbox, track, handle;
element.addClass('toggle-' + $ionicConfig.form.toggle());
el = $element[0].getElementsByTagName('label')[0];
checkbox = el.children[0];
track = el.children[1];
handle = track.children[0];
return function($scope, $element) {
var el = $element[0].getElementsByTagName('label')[0];
var checkbox = el.children[0];
var track = el.children[1];
var handle = track.children[0];
var ngModelController = jqLite(checkbox).controller('ngModel');
var ngModelController = jqLite(checkbox).controller('ngModel');
$scope.toggle = new ionic.views.Toggle({
el: el,
track: track,
checkbox: checkbox,
handle: handle,
onChange: function() {
if(checkbox.checked) {
ngModelController.$setViewValue(true);
} else {
ngModelController.$setViewValue(false);
}
$scope.$apply();
}
});
$scope.toggle = new ionic.views.Toggle({
el: el,
track: track,
checkbox: checkbox,
handle: handle,
onChange: function() {
if (ngModelController) {
ngModelController.$setViewValue(checkbox.checked);
$scope.$apply();
}
}
});
$scope.$on('$destroy', function() {
$scope.toggle.destroy();
});
$scope.$on('$destroy', function() {
$scope.toggle.destroy();
});
};
}

25
js/angular/service/ionicConfig.js vendored
View File

@@ -113,6 +113,22 @@
* @returns {boolean}
*/
/**
* @ngdoc method
* @name $ionicConfigProvider#form.checkbox
* @description Checkbox style. Android defaults to `square` and iOS defaults to `circle`.
* @param {string} value
* @returns {string}
*/
/**
* @ngdoc method
* @name $ionicConfigProvider#form.toggle
* @description Toggle item style. Android defaults to `small` and iOS defaults to `large`.
* @param {string} value
* @returns {string}
*/
/**
* @ngdoc method
* @name $ionicConfigProvider#tabs.style
@@ -220,7 +236,8 @@ IonicModule
previousTitleText: PLATFORM
},
form: {
checkbox: PLATFORM
checkbox: PLATFORM,
toggle: PLATFORM
},
scrolling: {
jsScrolling: PLATFORM
@@ -262,7 +279,8 @@ IonicModule
},
form: {
checkbox: 'circle'
checkbox: 'circle',
toggle: 'large'
},
scrolling: {
@@ -309,7 +327,8 @@ IonicModule
},
form: {
checkbox: 'square'
checkbox: 'square',
toggle: 'small'
},
tabs: {

2
scss/_mixins.scss
View File

@@ -150,7 +150,7 @@
background-color: $on-bg-color;
}
}
@mixin toggle-android-style($on-bg-color) {
@mixin toggle-small-style($on-bg-color) {
// the track when the toggle is "on"
& input:checked + .track {
background-color: rgba($on-bg-color, .5);

71
scss/_toggle.scss
View File

@@ -56,36 +56,6 @@
}
}
.platform-android .toggle {
&.toggle-light {
@include toggle-android-style($toggle-on-light-bg);
}
&.toggle-stable {
@include toggle-android-style($toggle-on-stable-bg);
}
&.toggle-positive {
@include toggle-android-style($toggle-on-positive-bg);
}
&.toggle-calm {
@include toggle-android-style($toggle-on-calm-bg);
}
&.toggle-assertive {
@include toggle-android-style($toggle-on-assertive-bg);
}
&.toggle-balanced {
@include toggle-android-style($toggle-on-balanced-bg);
}
&.toggle-energized {
@include toggle-android-style($toggle-on-energized-bg);
}
&.toggle-royal {
@include toggle-android-style($toggle-on-royal-bg);
}
&.toggle-dark {
@include toggle-android-style($toggle-on-dark-bg);
}
}
.toggle input {
// hide the actual input checkbox
display: none;
@@ -172,28 +142,57 @@
opacity: .6;
}
.platform-android {
.toggle .track {
.toggle-small {
.track {
border: 0;
width: 34px;
height: 15px;
background: #9e9e9e;
}
.toggle input:checked + .track {
input:checked + .track {
background: rgba(0,150,137,.5);
}
.toggle .handle {
.handle {
top: 2px;
left: 4px;
width: 21px;
height: 21px;
box-shadow: 0 2px 5px rgba(0,0,0,.25);
}
.toggle input:checked + .track .handle {
input:checked + .track .handle {
@include translate3d(16px, 0, 0);
background: rgb(0,150,137);
}
.item-toggle .toggle {
&.item-toggle .toggle {
top: 19px;
}
.toggle-light {
@include toggle-small-style($toggle-on-light-bg);
}
.toggle-stable {
@include toggle-small-style($toggle-on-stable-bg);
}
.toggle-positive {
@include toggle-small-style($toggle-on-positive-bg);
}
.toggle-calm {
@include toggle-small-style($toggle-on-calm-bg);
}
.toggle-assertive {
@include toggle-small-style($toggle-on-assertive-bg);
}
.toggle-balanced {
@include toggle-small-style($toggle-on-balanced-bg);
}
.toggle-energized {
@include toggle-small-style($toggle-on-energized-bg);
}
.toggle-royal {
@include toggle-small-style($toggle-on-royal-bg);
}
.toggle-dark {
@include toggle-small-style($toggle-on-dark-bg);
}
}

16
test/unit/angular/directive/toggle.unit.js
View File

@@ -66,7 +66,6 @@ describe('Ionic Toggle', function() {
expect(toggle.val()).toBe(true);
ionic.trigger('click', {target: label});
expect(toggle.val()).toBe(false);
});
it('Should have toggle class', function() {
@@ -80,4 +79,19 @@ describe('Ionic Toggle', function() {
expect(label.hasClass('toggle-dark')).toEqual(true);
});
it('Should add config class', inject(function($ionicConfig){
el = compile('<ion-toggle>')(rootScope);
expect(el.hasClass('toggle-large')).toBe(true);
$ionicConfig.form.toggle('small');
el = compile('<ion-toggle>')(rootScope);
expect(el.hasClass('toggle-small')).toBe(true);
$ionicConfig.form.toggle('whatever');
el = compile('<ion-toggle>')(rootScope);
expect(el.hasClass('toggle-large')).toBe(false);
expect(el.hasClass('toggle-sall')).toBe(false);
expect(el.hasClass('toggle-whatever')).toBe(true);
}));
});