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

feat(checkbox): checkbox-square/platform updates

Browse Source
This commit is contained in:
Adam Bradley
2014-11-24 13:37:09 -06:00
parent 0951b97f06
commit 0c1b23d980
7 changed files with 76 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
js/angular/directive/checkbox.js vendored
View File

@@ -17,7 +17,7 @@
*/
IonicModule
.directive('ionCheckbox', function() {
.directive('ionCheckbox', ['$ionicConfig', function($ionicConfig) {
return {
restrict: 'E',
replace: true,
@@ -47,7 +47,8 @@ IonicModule
input.attr(name, value);
}
});
var checkboxWrapper = element[0].querySelector('.checkbox');
checkboxWrapper.classList.add('checkbox-' + $ionicConfig.form.checkbox());
}
};
});
}]);

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

@@ -220,6 +220,9 @@ IonicModule
text: PLATFORM,
previousTitleText: PLATFORM
},
form: {
checkbox: PLATFORM
},
tabs: {
style: PLATFORM,
position: PLATFORM
@@ -255,6 +258,10 @@ IonicModule
previousTitleText: true
},
form: {
checkbox: 'circle'
},
tabs: {
style: 'standard',
position: 'bottom'
@@ -294,6 +301,10 @@ IonicModule
previousTitleText: false
},
form: {
checkbox: 'square'
},
tabs: {
style: 'striped',
position: 'top'

55
scss/_checkbox.scss
View File

@@ -6,7 +6,7 @@
.checkbox {
// set the color defaults
@include checkbox-style($checkbox-off-border-default, $checkbox-on-bg-default);
@include checkbox-style($checkbox-off-border-default, $checkbox-on-bg-default, $checkbox-on-border-default);
position: relative;
display: inline-block;
@@ -14,31 +14,31 @@
cursor: pointer;
}
.checkbox-light {
@include checkbox-style($checkbox-off-border-light, $checkbox-on-bg-light);
@include checkbox-style($checkbox-off-border-light, $checkbox-on-bg-light, $checkbox-off-border-light);
}
.checkbox-stable {
@include checkbox-style($checkbox-off-border-stable, $checkbox-on-bg-stable);
@include checkbox-style($checkbox-off-border-stable, $checkbox-on-bg-stable, $checkbox-off-border-stable);
}
.checkbox-positive {
@include checkbox-style($checkbox-off-border-positive, $checkbox-on-bg-positive);
@include checkbox-style($checkbox-off-border-positive, $checkbox-on-bg-positive, $checkbox-off-border-positive);
}
.checkbox-calm {
@include checkbox-style($checkbox-off-border-calm, $checkbox-on-bg-calm);
@include checkbox-style($checkbox-off-border-calm, $checkbox-on-bg-calm, $checkbox-off-border-calm);
}
.checkbox-assertive {
@include checkbox-style($checkbox-off-border-assertive, $checkbox-on-bg-assertive);
@include checkbox-style($checkbox-off-border-assertive, $checkbox-on-bg-assertive, $checkbox-off-border-assertive);
}
.checkbox-balanced {
@include checkbox-style($checkbox-off-border-balanced, $checkbox-on-bg-balanced);
@include checkbox-style($checkbox-off-border-balanced, $checkbox-on-bg-balanced, $checkbox-off-border-balanced);
}
.checkbox-energized{
@include checkbox-style($checkbox-off-border-energized, $checkbox-on-bg-energized);
@include checkbox-style($checkbox-off-border-energized, $checkbox-on-bg-energized, $checkbox-off-border-energized);
}
.checkbox-royal {
@include checkbox-style($checkbox-off-border-royal, $checkbox-on-bg-royal);
@include checkbox-style($checkbox-off-border-royal, $checkbox-on-bg-royal, $checkbox-off-border-royal);
}
.checkbox-dark {
@include checkbox-style($checkbox-off-border-dark, $checkbox-on-bg-dark);
@include checkbox-style($checkbox-off-border-dark, $checkbox-on-bg-dark, $checkbox-off-border-dark);
}
.checkbox input:disabled:before,
@@ -77,7 +77,7 @@
border-radius: $checkbox-border-radius;
background: $checkbox-off-bg-color;
content: ' ';
transition: background-color 20ms ease-in-out;
@include transition(background-color 20ms ease-in-out);
}
}
@@ -92,11 +92,11 @@ input:checked + .checkbox-icon:before {
@include transition(opacity .05s ease-in-out);
@include rotate(-45deg);
position: absolute;
top: 30%;
left: 26%;
top: 33%;
left: 25%;
display: table;
width: ($checkbox-width / 2) + 1;
height: ($checkbox-width / 3) + 1;
width: ($checkbox-width / 2);
height: ($checkbox-width / 4) - 1;
border: $checkbox-check-width solid $checkbox-check-color;
border-top: 0;
border-right: 0;
@@ -104,6 +104,29 @@ input:checked + .checkbox-icon:before {
opacity: 0;
}
.platform-android .checkbox-platform input:before,
.platform-android .checkbox-platform .checkbox-icon:before,
.checkbox-square input:before,
.checkbox-square .checkbox-icon:before {
border-radius: 2px;
width: 72%;
height: 72%;
margin-top: 14%;
margin-left: 14%;
border-width: 2px;
}
.platform-android .checkbox-platform input:after,
.platform-android .checkbox-platform .checkbox-icon:after,
.checkbox-square input:after,
.checkbox-square .checkbox-icon:after {
border-width: 2px;
top: 19%;
left: 25%;
width: ($checkbox-width / 2) - 1;
height: 7px;
}
.grade-c .checkbox input:after,
.grade-c .checkbox-icon:after {
@include rotate(0);
@@ -150,4 +173,4 @@ input:checked + .checkbox-icon:after {
.item-checkbox-right .checkbox input,
.item-checkbox-right .checkbox-icon {
float: right;
}
}

3
scss/_mixins.scss
View File

@@ -125,7 +125,7 @@
// Checkbox Mixins
// --------------------------------------------------
@mixin checkbox-style($off-border-color, $on-bg-color) {
@mixin checkbox-style($off-border-color, $on-bg-color, $on-border-color) {
& input:before,
& .checkbox-icon:before {
border-color: $off-border-color;
@@ -135,6 +135,7 @@
& input:checked:before,
& input:checked + .checkbox-icon:before {
background: $on-bg-color;
border-color: $on-border-color;
}
}

5
scss/_variables.scss
View File

@@ -505,10 +505,11 @@ $checkbox-off-border-royal: $royal !default;
$checkbox-on-bg-royal: $royal !default;
$checkbox-off-border-dark: $dark !default;
$checkbox-on-bg-dark: $dark !default;
$checkbox-off-border-default: $positive !default;
$checkbox-off-border-default: $button-light-border !default;
$checkbox-on-bg-default: $positive !default;
$checkbox-on-border-default: $positive !default;
$checkbox-check-width: 3px !default;
$checkbox-check-width: 1px !default;
$checkbox-check-color: #fff !default;

10
test/css/input-checkbox.html
View File

@@ -18,22 +18,22 @@
<h1 class="title">Input: Checkbox</h1>
</header>
<main class="content has-header">
<ion-content class="content has-header">
<ul class="list" ng-controller="MainCtrl">
<li class="item item-checkbox">
<li class="item item-checkbox checkbox-circle">
<label class="checkbox">
<input type="checkbox" checked>
</label>
Flux Capacitor
</li>
<li class="item item-checkbox">
<li class="item item-checkbox checkbox-square">
<label class="checkbox">
<input type="checkbox" checked>
</label>
1.21 Gigawatts
</li>
<li class="item item-checkbox">
<li class="item item-checkbox checkbox-platform">
<label class="checkbox">
<input type="checkbox" checked>
</label>
@@ -70,7 +70,7 @@
<ion-checkbox ng-model="test" ng-checked="test" class="checkbox-dark">Dark Directive</ion-checkbox>
</ul>
</main>
</ion-content>
<script type="text/javascript">
angular.module('ionicApp', ['ionic'])

13
test/unit/angular/directive/checkbox.unit.js
View File

@@ -49,7 +49,6 @@ describe('Ionic Checkbox', function() {
expect(input[0].hasAttribute('checked')).toBe(true);
scope.$apply('shouldCheck = false');
expect(input[0].hasAttribute('checked')).toBe(false);
});
it('should ngChange properly', function() {
@@ -72,4 +71,16 @@ describe('Ionic Checkbox', function() {
expect(scope.change).toHaveBeenCalledWith(false);
});
it('should add config setting class', inject(function($ionicConfig){
$ionicConfig.form.checkbox('square');
el = compile('<ion-checkbox>')(scope);
scope.$apply();
expect(el[0].querySelector('.checkbox').classList.contains('checkbox-square')).toBe(true);
$ionicConfig.form.checkbox('circle');
el = compile('<ion-checkbox>')(scope);
scope.$apply();
expect(el[0].querySelector('.checkbox').classList.contains('checkbox-circle')).toBe(true);
}));
});