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): checked/activated classes are applied to the host

Browse Source
This commit is contained in:
Manuel Mtz-Almeida
2017-04-06 23:55:03 +02:00
parent 17c0543a39
commit c792ab69ae
6 changed files with 37 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/toggle/test/basic/pages/root-page/root-page.html
View File

@@ -60,6 +60,9 @@
</ion-list>
<p padding>
<ion-toggle></ion-toggle>
</p>
</form>
<p aria-hidden="true" text-center>

14
src/components/toggle/toggle.ios.scss
View File

@@ -123,7 +123,7 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i
// iOS Toggle Background Track: Checked
// -----------------------------------------
.toggle-ios .toggle-checked {
.toggle-ios.toggle-checked .toggle-icon {
background-color: $toggle-ios-background-color-on;
}
@@ -131,8 +131,8 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i
// iOS Toggle Background Oval: Activated or Checked
// -----------------------------------------
.toggle-ios .toggle-activated::before,
.toggle-ios .toggle-checked::before {
.toggle-ios.toggle-activated .toggle-icon::before,
.toggle-ios.toggle-checked .toggle-icon::before {
transform: scale3d(0, 0, 0);
}
@@ -140,7 +140,7 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i
// iOS Toggle Inner Knob: Checked
// -----------------------------------------
.toggle-ios .toggle-checked .toggle-inner {
.toggle-ios.toggle-checked .toggle-inner {
transform: translate3d($toggle-ios-width - $toggle-ios-handle-width - ($toggle-ios-border-width * 2), 0, 0);
}
@@ -148,7 +148,7 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i
// iOS Toggle Background Oval: Activated and Checked
// -----------------------------------------
.toggle-ios .toggle-activated.toggle-checked::before {
.toggle-ios.toggle-activated.toggle-checked .toggle-inner::before {
transform: scale3d(0, 0, 0);
}
@@ -156,7 +156,7 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i
// iOS Toggle Inner Knob: Activated and Unchecked
// -----------------------------------------
.toggle-ios .toggle-activated .toggle-inner {
.toggle-ios.toggle-activated .toggle-inner {
width: $toggle-ios-handle-width + 6;
}
@@ -164,7 +164,7 @@ $toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($i
// iOS Toggle Inner Knob: Activated and Checked
// -----------------------------------------
.toggle-ios .toggle-activated.toggle-checked .toggle-inner {
.toggle-ios.toggle-activated.toggle-checked .toggle-inner {
// when pressing down on the toggle and IS checked
// make the knob wider and move it left a bit
left: $toggle-ios-border-width - 6;

20
src/components/toggle/toggle.md.scss
View File

@@ -45,6 +45,9 @@ $toggle-md-transition-duration: 300ms !default;
/// @prop - Opacity of the disabled toggle
$toggle-md-disabled-opacity: .3 !default;
/// @prop - Padding of standalone toggle
$toggle-md-padding: 12px !default;
/// @prop - Padding of the toggle positioned on the left in an item
$toggle-md-item-left-padding: 12px 18px 12px 2px !default;
@@ -57,6 +60,13 @@ $toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px
.toggle-md {
position: relative;
width: $toggle-md-track-width;
height: $toggle-md-track-height;
padding: $toggle-md-padding;
box-sizing: content-box;
}
@@ -67,8 +77,8 @@ $toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px
position: relative;
display: block;
width: $toggle-md-track-width;
height: $toggle-md-track-height;
width: 100%;
height: 100%;
border-radius: $toggle-md-track-height;
background-color: $toggle-md-track-background-color-off;
@@ -111,7 +121,7 @@ $toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px
// Material Design Toggle Inner Knob: Checked
// -----------------------------------------
.toggle-md .toggle-checked .toggle-inner {
.toggle-md.toggle-checked .toggle-inner {
background-color: $toggle-md-handle-background-color-on;
transform: translate3d($toggle-md-track-width - $toggle-md-handle-width, 0, 0);
}
@@ -156,11 +166,11 @@ $toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px
@mixin toggle-theme-md($color-name, $color-base) {
.toggle-md-#{$color-name} .toggle-checked {
.toggle-md-#{$color-name}.toggle-checked .toggle-icon {
background-color: lighten($color-base, 25%);
}
.toggle-md-#{$color-name} .toggle-checked .toggle-inner {
.toggle-md-#{$color-name}.toggle-checked .toggle-inner {
background-color: $color-base;
}

15
src/components/toggle/toggle.ts
View File

@@ -60,7 +60,7 @@ export const TOGGLE_VALUE_ACCESSOR: any = {
@Component({
selector: 'ion-toggle',
template:
'<div class="toggle-icon" [class.toggle-checked]="_value" [class.toggle-activated]="_activated">' +
'<div class="toggle-icon">' +
'<div class="toggle-inner"></div>' +
'</div>' +
'<button role="checkbox" ' +
@@ -73,7 +73,9 @@ export const TOGGLE_VALUE_ACCESSOR: any = {
'class="item-cover" disable-activated>' +
'</button>',
host: {
'[class.toggle-disabled]': '_disabled'
'[class.toggle-disabled]': '_disabled',
'[class.toggle-checked]': '_value',
'[class.toggle-activated]': '_activated',
},
providers: [TOGGLE_VALUE_ACCESSOR],
encapsulation: ViewEncapsulation.None,
@@ -124,16 +126,13 @@ export class Toggle extends BaseInput<boolean> implements IonicTapInput, AfterVi
/**
* @hidden
*/
_inputNormalize(val: any): boolean {
return isTrueProperty(val);
}
_inputCheckHasValue() {}
/**
* @hidden
*/
_inputUpdated() {
this._item && this._item.setElementClass('item-toggle-checked', this.value);
this._cd.detectChanges();
_inputNormalize(val: any): boolean {
return isTrueProperty(val);
}
/**

8
src/components/toggle/toggle.wp.scss
View File

@@ -115,7 +115,7 @@ $toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px
// Windows Toggle Background Track: Checked
// -----------------------------------------
.toggle-wp .toggle-checked {
.toggle-wp.toggle-checked .toggle-icon {
border-color: $toggle-wp-track-background-color-on;
background-color: $toggle-wp-track-background-color-on;
}
@@ -124,7 +124,7 @@ $toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px
// Windows Toggle Inner Knob: Checked
// -----------------------------------------
.toggle-wp .toggle-checked .toggle-inner {
.toggle-wp.toggle-checked .toggle-inner {
background-color: $toggle-wp-handle-background-color-on;
// transform: translate3d(23px, 0, 0);
transform: translate3d($toggle-wp-track-width - $toggle-wp-handle-width - ($toggle-wp-track-border-width * 2) - ($toggle-wp-handle-left * 2), 0, 0);
@@ -170,12 +170,12 @@ $toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px
@mixin toggle-theme-wp($color-name, $color-base, $color-contrast) {
.toggle-wp-#{$color-name} .toggle-checked {
.toggle-wp-#{$color-name}.toggle-checked .toggle-icon {
border-color: $color-base;
background-color: $color-base;
}
.toggle-wp-#{$color-name} .toggle-checked .toggle-inner {
.toggle-wp-#{$color-name}.toggle-checked .toggle-inner {
background-color: $color-contrast;
}
}

2
src/tap-click/tap-click.ts
View File

@@ -18,7 +18,7 @@ import { UIEventManager } from '../gestures/ui-event-manager';
*/
@Injectable()
export class TapClick {
private disableClick: number = 0;
private usePolyfill: boolean;
private activator: ActivatorBase;