From ecb35c7c6cf325d73030056f86ca389607dec62b Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 10 Dec 2015 13:26:19 -0600 Subject: [PATCH 001/102] feat(img): default to max-width: 100% --- ionic/components/app/normalize.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/ionic/components/app/normalize.scss b/ionic/components/app/normalize.scss index 1e2ac8e403..35616127fd 100644 --- a/ionic/components/app/normalize.scss +++ b/ionic/components/app/normalize.scss @@ -36,6 +36,7 @@ strong { // Remove border when inside `a` element in IE 8/9/10. img { border: 0; + max-width: 100%; } // Correct overflow not hidden in IE 9/10/11. From 025176d67c49ee81193e92e30dacd4d129c3d000 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 10 Dec 2015 13:49:20 -0600 Subject: [PATCH 002/102] refactor(headings): update heading sizes --- ionic/components/app/test/typography/index.ts | 11 +++++++ .../components/app/test/typography/main.html | 32 +++++++++++++++++++ ionic/components/app/typography.scss | 19 +++++++---- 3 files changed, 56 insertions(+), 6 deletions(-) create mode 100644 ionic/components/app/test/typography/index.ts create mode 100644 ionic/components/app/test/typography/main.html diff --git a/ionic/components/app/test/typography/index.ts b/ionic/components/app/test/typography/index.ts new file mode 100644 index 0000000000..ff6f299c59 --- /dev/null +++ b/ionic/components/app/test/typography/index.ts @@ -0,0 +1,11 @@ +import {App, IonicApp} from 'ionic/ionic'; + + +@App({ + templateUrl: 'main.html' +}) +class E2EApp { + constructor(app: IonicApp) { + app.setTitle('Basic Buttons'); + } +} diff --git a/ionic/components/app/test/typography/main.html b/ionic/components/app/test/typography/main.html new file mode 100644 index 0000000000..ac073f04a1 --- /dev/null +++ b/ionic/components/app/test/typography/main.html @@ -0,0 +1,32 @@ + + + Typography + + + + +

H1: The quick brown fox jumps over the lazy dog

+ +

H2: The quick brown fox jumps over the lazy dog

+ +

H3: The quick brown fox jumps over the lazy dog

+ +

H4: The quick brown fox jumps over the lazy dog

+ +
H5: The quick brown fox jumps over the lazy dog
+ +
H6: The quick brown fox jumps over the lazy dog
+ +

+ p: The quick brown fox jumps over the lazy dog. + The quick brown fox jumps over the lazy dog. + The quick brown fox jumps over the lazy dog. + The quick brown fox jumps over the lazy dog. + The quick brown fox jumps over the lazy dog. + The quick brown fox jumps over the lazy dog. + The quick brown fox jumps over the lazy dog. + The quick brown fox jumps over the lazy dog. + The quick brown fox jumps over the lazy dog. +

+ +
diff --git a/ionic/components/app/typography.scss b/ionic/components/app/typography.scss index b6ef131a17..436be3a32b 100644 --- a/ionic/components/app/typography.scss +++ b/ionic/components/app/typography.scss @@ -11,6 +11,13 @@ $font-size-root: 62.5% !default; $headings-font-weight: 500 !default; $headings-line-height: 1.2 !default; +$h1-font-size: 3.6rem !default; +$h2-font-size: 3.0rem !default; +$h3-font-size: 2.4rem !default; +$h4-font-size: 2.0rem !default; +$h5-font-size: 1.6rem !default; +$h6-font-size: 1.4rem !default; + html { font-size: $font-size-root; @@ -42,29 +49,29 @@ h2 + h3 { } h1 { - font-size: 3.6rem; + font-size: $h1-font-size; margin-top: 2rem; } h2 { - font-size: 3rem; + font-size: $h2-font-size; margin-top: 1.8rem; } h3 { - font-size: 2.4rem; + font-size: $h3-font-size; } h4 { - font-size: 2rem; + font-size: $h4-font-size; } h5 { - font-size: 1.6rem; + font-size: $h5-font-size; } h6 { - font-size: 1.4rem; + font-size: $h6-font-size; } small { From 59c7aab15fa44d21ffbffe892969558496d38970 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 10 Dec 2015 14:54:53 -0500 Subject: [PATCH 003/102] refactor(headings): update heading sizes --- ionic/components/app/typography.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/ionic/components/app/typography.scss b/ionic/components/app/typography.scss index 436be3a32b..e4843e315d 100644 --- a/ionic/components/app/typography.scss +++ b/ionic/components/app/typography.scss @@ -11,12 +11,12 @@ $font-size-root: 62.5% !default; $headings-font-weight: 500 !default; $headings-line-height: 1.2 !default; -$h1-font-size: 3.6rem !default; -$h2-font-size: 3.0rem !default; -$h3-font-size: 2.4rem !default; +$h1-font-size: 2.6rem !default; +$h2-font-size: 2.4rem !default; +$h3-font-size: 2.2rem !default; $h4-font-size: 2.0rem !default; -$h5-font-size: 1.6rem !default; -$h6-font-size: 1.4rem !default; +$h5-font-size: 1.8rem !default; +$h6-font-size: 1.6rem !default; html { From b6fc63aaba39de66d1e4cc0a401447e9bcefe8cd Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 10 Dec 2015 15:21:01 -0500 Subject: [PATCH 004/102] fix(text-input): fix floating labels by getting the value of the ngControl if it exists Added some test cases for this to the floating labels example. Closes #710 --- .../text-input/test/floating-labels/index.ts | 10 +++++++++- .../text-input/test/floating-labels/main.html | 8 +++++--- ionic/components/text-input/text-input.ts | 8 ++++++-- 3 files changed, 20 insertions(+), 6 deletions(-) diff --git a/ionic/components/text-input/test/floating-labels/index.ts b/ionic/components/text-input/test/floating-labels/index.ts index 43aed36502..79de5a9b12 100644 --- a/ionic/components/text-input/test/floating-labels/index.ts +++ b/ionic/components/text-input/test/floating-labels/index.ts @@ -4,4 +4,12 @@ import {App} from 'ionic/ionic'; @App({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EApp { + constructor() { + this.myValues = { + value1: 'Dynamic Input', + value2: 'Dynamic Textarea' + }; + } + +} diff --git a/ionic/components/text-input/test/floating-labels/main.html b/ionic/components/text-input/test/floating-labels/main.html index ca011371cc..24e6be3c58 100644 --- a/ionic/components/text-input/test/floating-labels/main.html +++ b/ionic/components/text-input/test/floating-labels/main.html @@ -8,10 +8,11 @@ Floating Label 1 - + + Value: {{ myValues.value1 }} - + Floating Label 2 @@ -23,8 +24,9 @@ Floating Label 4 - + + Value: {{ myValues.value2 }} Floating Label 5 diff --git a/ionic/components/text-input/text-input.ts b/ionic/components/text-input/text-input.ts index a4ae10c534..48543eea0c 100644 --- a/ionic/components/text-input/text-input.ts +++ b/ionic/components/text-input/text-input.ts @@ -1,4 +1,4 @@ -import {Component, Directive, Attribute, NgIf, forwardRef, Host, Optional, ElementRef, Renderer, Attribute} from 'angular2/angular2'; +import {Component, Directive, Attribute, NgIf, forwardRef, Host, Optional, ElementRef, Renderer, Attribute, NgControl} from 'angular2/angular2'; import {NavController} from '../nav/nav-controller'; import {Config} from '../../config/config'; @@ -469,7 +469,8 @@ export class TextInputElement { @Attribute('type') type: string, elementRef: ElementRef, renderer: Renderer, - @Optional() wrapper: TextInput + @Optional() wrapper: TextInput, + @Optional() ngControl: NgControl ) { this.type = type; this.elementRef = elementRef; @@ -484,9 +485,12 @@ export class TextInputElement { renderer.setElementClass(elementRef, 'item-input', true); wrapper.registerInput(this); } + + if (ngControl) this.ngControl = ngControl; } ngOnInit() { + if (this.ngControl) this.value = this.ngControl.value; this.wrapper && this.wrapper.hasValue(this.value); } From 27ec57b9076a28708ac912adfe602b1fa9ff4810 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 10 Dec 2015 15:33:47 -0500 Subject: [PATCH 005/102] chore(CHANGELOG): add life cycle hook names to changelog --- CHANGELOG.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e33a501d05..6889a40452 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -43,3 +43,12 @@ ##### Features * Upgraded to Angular alpha.50 + * Life cycle hooks are now prefixed with `ng` + * ngOnChanges + * ngOnInit + * ngDoCheck + * ngAfterContentInit + * ngAfterContentChecked + * ngAfterViewInit + * ngAfterViewChecked + * ngOnDestroy From 7f94b33c542fbf122f99df54a906a629f060b256 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 10 Dec 2015 14:50:49 -0600 Subject: [PATCH 006/102] refactor(toggle): renamed ion-switch to ion-toggle --- CHANGELOG.md | 7 +- .../inputs/switch/template.html | 48 ++--- demos/component-docs/lists/icon/template.html | 8 +- demos/icons/main.html | 8 +- demos/list/basic-list.html | 8 +- demos/list/inset-list.html | 8 +- demos/list/no-lines-list.html | 8 +- demos/switch/main.html | 48 ++--- ionic/components.ios.scss | 2 +- ionic/components.md.scss | 2 +- ionic/components/card/test/list/main.html | 12 +- ionic/components/list/test/headers/main.html | 8 +- ionic/components/list/test/inset/main.html | 6 +- ionic/components/list/test/no-lines/main.html | 4 +- ionic/components/switch/switch.ios.scss | 184 ------------------ ionic/components/switch/switch.md.scss | 140 ------------- .../{switch => toggle}/test/basic/e2e.ts | 2 +- .../{switch => toggle}/test/basic/index.ts | 0 .../{switch => toggle}/test/basic/main.html | 26 +-- ionic/components/toggle/toggle.ios.scss | 182 +++++++++++++++++ ionic/components/toggle/toggle.md.scss | 140 +++++++++++++ .../{switch/switch.ts => toggle/toggle.ts} | 91 +++++---- ionic/config/directives.ts | 4 +- 23 files changed, 478 insertions(+), 468 deletions(-) delete mode 100644 ionic/components/switch/switch.ios.scss delete mode 100644 ionic/components/switch/switch.md.scss rename ionic/components/{switch => toggle}/test/basic/e2e.ts (81%) rename ionic/components/{switch => toggle}/test/basic/index.ts (100%) rename ionic/components/{switch => toggle}/test/basic/main.html (74%) create mode 100644 ionic/components/toggle/toggle.ios.scss create mode 100644 ionic/components/toggle/toggle.md.scss rename ionic/components/{switch/switch.ts => toggle/toggle.ts} (67%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6889a40452..07e4ec2e6a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,7 +24,6 @@ * searchbar: class `focused` has become `searchbar-focused` - ##### `` renamed to `` * `primary` attribute `` now `` @@ -35,6 +34,12 @@ * If a menu is not given an `id`, then it is automatically assigned an id, such as `leftMenu` or `rightMenu`. * If the menu toggle/close directives are not given a value then it tries the menu ids of `leftMenu` then `rightMenu`. +##### `` renamed to `` + +* Consistent naming with Ionic v1 +* Reduce potential confusion with `ng-switch` + + ##### Bug Fixes * **item-sliding**: fixed item-sliding, onDragEnd on mouseout of sliding element [f9199fb](https://github.com/driftyco/ionic2/commit/f9199fb3be6ce6b0a693e2e3b944b47ed8575531), closes [#702](https://github.com/driftyco/ionic2/issues/702) diff --git a/demos/component-docs/inputs/switch/template.html b/demos/component-docs/inputs/switch/template.html index e9dc444909..f84f900273 100644 --- a/demos/component-docs/inputs/switch/template.html +++ b/demos/component-docs/inputs/switch/template.html @@ -10,53 +10,53 @@ - + Frodo Baggins - + - + Sam - + - + Éowyn - + - + Legolas - + - + Gimli - + - + Saruman - + - + Gandalf - + - + Arwen - + - + Treebeard - + - + Boromir - + - + Gollum - + - + Galadriel - + diff --git a/demos/component-docs/lists/icon/template.html b/demos/component-docs/lists/icon/template.html index b70d4e2045..ab2e9207a3 100644 --- a/demos/component-docs/lists/icon/template.html +++ b/demos/component-docs/lists/icon/template.html @@ -18,10 +18,10 @@ - + Muggle Studies - + @@ -54,10 +54,10 @@ Crucio! - + Quidditch Practice - + diff --git a/demos/icons/main.html b/demos/icons/main.html index 03246be55c..496b8eb773 100644 --- a/demos/icons/main.html +++ b/demos/icons/main.html @@ -11,10 +11,10 @@ Favorite Icons - + Wifi - + @@ -32,10 +32,10 @@ - + Magic - + diff --git a/demos/list/basic-list.html b/demos/list/basic-list.html index 857f63fc19..103400da27 100644 --- a/demos/list/basic-list.html +++ b/demos/list/basic-list.html @@ -19,10 +19,10 @@ List Header - + Wifi - + @@ -40,10 +40,10 @@ - + Magic - + diff --git a/demos/list/inset-list.html b/demos/list/inset-list.html index dc56d52d6c..9f54b77548 100644 --- a/demos/list/inset-list.html +++ b/demos/list/inset-list.html @@ -19,10 +19,10 @@ List Header - + Wifi - + @@ -40,10 +40,10 @@ - + Magic - + diff --git a/demos/list/no-lines-list.html b/demos/list/no-lines-list.html index 088124fac6..ba3fb78953 100644 --- a/demos/list/no-lines-list.html +++ b/demos/list/no-lines-list.html @@ -19,10 +19,10 @@ List Header - + Wifi - + @@ -40,10 +40,10 @@ - + Magic - + diff --git a/demos/switch/main.html b/demos/switch/main.html index 2862acac89..0b233fd475 100644 --- a/demos/switch/main.html +++ b/demos/switch/main.html @@ -4,53 +4,53 @@ - + Frodo Baggins - + - + Sam - + - + Éowyn - + - + Legolas - + - + Gimli - + - + Saruman - + - + Gandalf - + - + Arwen - + - + Treebeard - + - + Boromir - + - + Gollum - + - + Galadriel - + diff --git a/ionic/components.ios.scss b/ionic/components.ios.scss index 23d2e93074..d996f55c20 100644 --- a/ionic/components.ios.scss +++ b/ionic/components.ios.scss @@ -20,7 +20,7 @@ "components/radio/radio.ios", "components/searchbar/searchbar.ios", "components/segment/segment.ios", - "components/switch/switch.ios", "components/tabs/tabs.ios", "components/text-input/text-input.ios", + "components/toggle/toggle.ios", "components/toolbar/toolbar.ios"; diff --git a/ionic/components.md.scss b/ionic/components.md.scss index fa01a3ae44..c23171cd42 100644 --- a/ionic/components.md.scss +++ b/ionic/components.md.scss @@ -21,7 +21,7 @@ "components/tap-click/ripple", "components/searchbar/searchbar.md", "components/segment/segment.md", - "components/switch/switch.md", "components/tabs/tabs.md", "components/text-input/text-input.md", + "components/toggle/toggle.md", "components/toolbar/toolbar.md"; diff --git a/ionic/components/card/test/list/main.html b/ionic/components/card/test/list/main.html index 75d7978682..83f89ea809 100644 --- a/ionic/components/card/test/list/main.html +++ b/ionic/components/card/test/list/main.html @@ -11,10 +11,10 @@ Card List - + Wifi - + @@ -44,10 +44,10 @@ Card List Without Lines - + Wifi - + @@ -75,10 +75,10 @@ Card With Items (No List) - + Wifi - + diff --git a/ionic/components/list/test/headers/main.html b/ionic/components/list/test/headers/main.html index ee99360090..f34b0f1a2d 100644 --- a/ionic/components/list/test/headers/main.html +++ b/ionic/components/list/test/headers/main.html @@ -8,10 +8,10 @@ List Header - + Wifi - + @@ -38,10 +38,10 @@ List Header - + Magic - + diff --git a/ionic/components/list/test/inset/main.html b/ionic/components/list/test/inset/main.html index 7c8e6735ee..5a22689aff 100644 --- a/ionic/components/list/test/inset/main.html +++ b/ionic/components/list/test/inset/main.html @@ -20,9 +20,9 @@ List Link Item 2 - - Switch - + + Toggle + Checkbox diff --git a/ionic/components/list/test/no-lines/main.html b/ionic/components/list/test/no-lines/main.html index 6c78172f03..47df913df1 100644 --- a/ionic/components/list/test/no-lines/main.html +++ b/ionic/components/list/test/no-lines/main.html @@ -6,10 +6,10 @@ List With No Lines - + Wifi - + diff --git a/ionic/components/switch/switch.ios.scss b/ionic/components/switch/switch.ios.scss deleted file mode 100644 index 81e783bb9f..0000000000 --- a/ionic/components/switch/switch.ios.scss +++ /dev/null @@ -1,184 +0,0 @@ -@import "../../globals.ios"; - -// iOS Switch -// -------------------------------------------------- - -$switch-ios-width: 51px !default; -$switch-ios-height: 32px !default; -$switch-ios-border-width: 2px !default; -$switch-ios-border-radius: $switch-ios-height / 2 !default; - -$switch-ios-background-color-off: $list-ios-background-color !default; -$switch-ios-border-color-off: grayscale(lighten($list-ios-border-color, 11%)) !default; - -$switch-ios-background-color-on: map-get($colors-ios, primary) !default; - -$switch-ios-handle-width: $switch-ios-height - ($switch-ios-border-width * 2) !default; -$switch-ios-handle-height: $switch-ios-handle-width !default; -$switch-ios-handle-border-radius: $switch-ios-handle-height / 2 !default; -$switch-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1) !default; - -$switch-ios-handle-background-color: $switch-ios-background-color-off !default; - -$switch-ios-media-margin: 0 !default; -$switch-ios-media-padding: 6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default; - -$switch-ios-transition-duration: 300ms !default; - -$switch-ios-disabled-opacity: 0.5 !default; -$switch-ios-disabled-text-color: $subdued-text-ios-color !default; - - -// Switch -// ----------------------------------------- - -ion-switch { - display: block; - @include user-select-none(); - - &.item.activated { - background: $list-ios-background-color; - } -} - - -// Switch Wrapper -// ----------------------------------------- - -.switch-media { - margin: $switch-ios-media-margin; - padding: $switch-ios-media-padding; - cursor: pointer; -} - - -// Switch Background Track -// ----------------------------------------- - -.switch-icon { - // bg track, when not checked - position: relative; - display: block; - width: $switch-ios-width; - height: $switch-ios-height; - border-radius: $switch-ios-border-radius; - pointer-events: none; - - background-color: $switch-ios-border-color-off; - transition: background-color $switch-ios-transition-duration; -} - - -// Switch Background Track, Inner Oval -// ----------------------------------------- - -.switch-icon:before { - // inner bg track's oval, when not checked - content: ''; - position: absolute; - top: $switch-ios-border-width; - right: $switch-ios-border-width; - left: $switch-ios-border-width; - bottom: $switch-ios-border-width; - - border-radius: $switch-ios-border-radius; - background-color: $switch-ios-background-color-off; - - transform: scale3d(1, 1, 1); - transition: transform $switch-ios-transition-duration; -} - - -// Switch Knob -// ----------------------------------------- - -.switch-icon:after { - // knob, when not checked - content: ''; - position: absolute; - top: $switch-ios-border-width; - left: $switch-ios-border-width; - - width: $switch-ios-handle-width; - height: $switch-ios-handle-height; - - border-radius: $switch-ios-handle-border-radius; - background-color: $switch-ios-handle-background-color; - box-shadow: $switch-ios-handle-box-shadow; - - transition: transform $switch-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms; -} - - -// Switch Checked -// ----------------------------------------- - -ion-switch[aria-checked=true] { - .switch-icon { - // bg track, when checked - background-color: $switch-ios-background-color-on; - - &:before { - // inner bg track's oval, when checked - transform: scale3d(0, 0, 0); - } - - &:after { - // knob, when checked - transform: translate3d($switch-ios-width - $switch-ios-handle-width - ($switch-ios-border-width * 2), 0, 0); - } - } - - .switch-activated .switch-icon { - &:before { - // inner bg track's oval, when checked - transform: scale3d(0, 0, 0); - } - - &:after { - // when pressing down on the switch and IS checked - // make the knob wider and move it left a bit - left: $switch-ios-border-width - 6; - - // when pressing down on the switch and NOT checked - // then make the knob wider - width: $switch-ios-handle-width + 6; - } - } -} - - -// Switch Disabled -// ----------------------------------------- - -ion-switch[aria-disabled=true] { - opacity: $switch-ios-disabled-opacity; - color: $switch-ios-disabled-text-color; - pointer-events: none; -} - - -// iOS Switch Color Mixin -// -------------------------------------------------- - -@mixin switch-theme-ios($color-name, $bg-on) { - - ion-switch[#{$color-name}] { - - &[aria-checked=true] .switch-icon { - background-color: $bg-on; - } - - } - -} - - -// Generate iOS Switch Auxiliary Colors -// -------------------------------------------------- - -@each $color-name, $value in $colors-ios { - - @include switch-theme-ios($color-name, $value); - -} diff --git a/ionic/components/switch/switch.md.scss b/ionic/components/switch/switch.md.scss deleted file mode 100644 index 4200de3b3c..0000000000 --- a/ionic/components/switch/switch.md.scss +++ /dev/null @@ -1,140 +0,0 @@ -@import "../../globals.md"; - -// Material Design Switch -// -------------------------------------------------- - -$switch-md-active-color: map-get($colors-md, primary) !default; - -$switch-md-track-width: 36px !default; -$switch-md-track-height: 14px !default; -$switch-md-track-background-color-off: $list-md-border-color !default; -$switch-md-track-background-color-on: lighten($switch-md-active-color, 25%) !default; - -$switch-md-handle-width: 20px !default; -$switch-md-handle-height: 20px !default; -$switch-md-handle-background-color-off: $background-md-color !default; -$switch-md-handle-background-color-on: $switch-md-active-color !default; -$switch-md-handle-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default; -$switch-md-handle-border-radius: 50% !default; - -$switch-md-media-margin: 0 !default; -$switch-md-media-padding: 12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default; - -$switch-md-transition-duration: 300ms !default; - -$switch-md-disabled-opacity: 0.5 !default; -$switch-md-disabled-text-color: $subdued-text-md-color !default; - - -// Switch -// ----------------------------------------- - -ion-switch { - display: block; - @include user-select-none(); -} - - -// Switch Wrapper -// ----------------------------------------- - -.switch-media { - margin: $switch-md-media-margin; - padding: $switch-md-media-padding; - cursor: pointer; -} - - -// Switch Background Track -// ----------------------------------------- - -.switch-icon { - // bg track, when not checked - position: relative; - display: block; - width: $switch-md-track-width; - height: $switch-md-track-height; - pointer-events: none; - border-radius: $switch-md-track-height; - - background-color: $switch-md-track-background-color-off; - transition: background-color $switch-md-transition-duration -} - - -// Switch Knob -// ----------------------------------------- - -.switch-icon:after { - // knob, when not checked - content: ''; - position: absolute; - top: ($switch-md-handle-height - $switch-md-track-height) / -2; - left: 0; - - width: $switch-md-handle-width; - height: $switch-md-handle-height; - - border-radius: $switch-md-handle-border-radius; - box-shadow: $switch-md-handle-box-shadow; - - background-color: $switch-md-handle-background-color-off; - - transition-property: transform, background-color; - transition-duration: $switch-md-transition-duration; -} - - -// Switch Checked -// ----------------------------------------- - -ion-switch[aria-checked=true] .switch-icon { - // bg track, when not checked - background-color: $switch-md-track-background-color-on; - - &:after { - // knob, when not checked - background-color: $switch-md-handle-background-color-on; - transform: translate3d($switch-md-track-width - $switch-md-handle-width, 0, 0); - } -} - - -// Switch Disabled -// ----------------------------------------- - -ion-switch[aria-disabled=true] { - opacity: $switch-md-disabled-opacity; - color: $switch-md-disabled-text-color; - pointer-events: none; -} - - -// Material Design Color Mixin -// -------------------------------------------------- - -@mixin switch-theme-md($color-name, $bg-on) { - - ion-switch[#{$color-name}] { - - &[aria-checked=true] .switch-icon { - background-color: lighten($bg-on, 25%); - } - - &[aria-checked=true] .switch-icon:after { - background-color: $bg-on; - } - - } - -} - - -// Generate Material Design Switch Auxiliary Colors -// -------------------------------------------------- - -@each $color-name, $value in $colors-md { - - @include switch-theme-md($color-name, $value); - -} diff --git a/ionic/components/switch/test/basic/e2e.ts b/ionic/components/toggle/test/basic/e2e.ts similarity index 81% rename from ionic/components/switch/test/basic/e2e.ts rename to ionic/components/toggle/test/basic/e2e.ts index 6c4ea1b431..ad46dc3984 100644 --- a/ionic/components/switch/test/basic/e2e.ts +++ b/ionic/components/toggle/test/basic/e2e.ts @@ -1,6 +1,6 @@ it('should check apple via switch element click', function() { - element(by.css('[ng-control=appleCtrl] .switch-media')).click(); + element(by.css('[ng-control=appleCtrl] .toggle-media')).click(); }); diff --git a/ionic/components/switch/test/basic/index.ts b/ionic/components/toggle/test/basic/index.ts similarity index 100% rename from ionic/components/switch/test/basic/index.ts rename to ionic/components/toggle/test/basic/index.ts diff --git a/ionic/components/switch/test/basic/main.html b/ionic/components/toggle/test/basic/main.html similarity index 74% rename from ionic/components/switch/test/basic/main.html rename to ionic/components/toggle/test/basic/main.html index c640bfeb06..6f8bc74bd9 100644 --- a/ionic/components/switch/test/basic/main.html +++ b/ionic/components/toggle/test/basic/main.html @@ -1,5 +1,5 @@ -Switches +Toggles @@ -8,29 +8,29 @@ - + Apple, value=apple, init checked - + - + Banana, init no checked/value attributes - + - + Cherry, value=cherry, init disabled - + - + Grape, value=grape, init checked, disabled - + - + Secondary color - + - + I'm an NgModel - + diff --git a/ionic/components/toggle/toggle.ios.scss b/ionic/components/toggle/toggle.ios.scss new file mode 100644 index 0000000000..e222eae2f4 --- /dev/null +++ b/ionic/components/toggle/toggle.ios.scss @@ -0,0 +1,182 @@ +@import "../../globals.ios"; + +// iOS Toggle +// -------------------------------------------------- + +$toggle-ios-width: 51px !default; +$toggle-ios-height: 32px !default; +$toggle-ios-border-width: 2px !default; +$toggle-ios-border-radius: $toggle-ios-height / 2 !default; + +$toggle-ios-background-color-off: $list-ios-background-color !default; +$toggle-ios-border-color-off: grayscale(lighten($list-ios-border-color, 11%)) !default; + +$toggle-ios-background-color-on: map-get($colors-ios, primary) !default; + +$toggle-ios-handle-width: $toggle-ios-height - ($toggle-ios-border-width * 2) !default; +$toggle-ios-handle-height: $toggle-ios-handle-width !default; +$toggle-ios-handle-border-radius: $toggle-ios-handle-height / 2 !default; +$toggle-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1) !default; + +$toggle-ios-handle-background-color: $toggle-ios-background-color-off !default; + +$toggle-ios-media-margin: 0 !default; +$toggle-ios-media-padding: 6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default; + +$toggle-ios-transition-duration: 300ms !default; + +$toggle-ios-disabled-opacity: 0.5 !default; +$toggle-ios-disabled-text-color: $subdued-text-ios-color !default; + + +// Toggle +// ----------------------------------------- + +ion-toggle { + display: block; + @include user-select-none(); + + &.item.activated { + background: $list-ios-background-color; + } +} + + +// Toggle Wrapper +// ----------------------------------------- + +.toggle-media { + margin: $toggle-ios-media-margin; + padding: $toggle-ios-media-padding; + cursor: pointer; +} + + +// Toggle Background Track +// ----------------------------------------- + +.toggle-icon { + // bg track, when not checked + position: relative; + display: block; + width: $toggle-ios-width; + height: $toggle-ios-height; + border-radius: $toggle-ios-border-radius; + pointer-events: none; + + background-color: $toggle-ios-border-color-off; + transition: background-color $toggle-ios-transition-duration; +} + + +// Toggle Background Track, Inner Oval +// ----------------------------------------- + +.toggle-icon:before { + // inner bg track's oval, when not checked + content: ''; + position: absolute; + top: $toggle-ios-border-width; + right: $toggle-ios-border-width; + left: $toggle-ios-border-width; + bottom: $toggle-ios-border-width; + + border-radius: $toggle-ios-border-radius; + background-color: $toggle-ios-background-color-off; + + transform: scale3d(1, 1, 1); + transition: transform $toggle-ios-transition-duration; +} + + +// Toggle Knob +// ----------------------------------------- + +.toggle-icon:after { + // knob, when not checked + content: ''; + position: absolute; + top: $toggle-ios-border-width; + left: $toggle-ios-border-width; + + width: $toggle-ios-handle-width; + height: $toggle-ios-handle-height; + + border-radius: $toggle-ios-handle-border-radius; + background-color: $toggle-ios-handle-background-color; + box-shadow: $toggle-ios-handle-box-shadow; + + transition: transform $toggle-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms; +} + + +// Toggle Checked +// ----------------------------------------- + +ion-toggle[aria-checked=true] { + .toggle-icon { + // bg track, when checked + background-color: $toggle-ios-background-color-on; + + &:before { + // inner bg track's oval, when checked + transform: scale3d(0, 0, 0); + } + + &:after { + // knob, when checked + transform: translate3d($toggle-ios-width - $toggle-ios-handle-width - ($toggle-ios-border-width * 2), 0, 0); + } + } + + .toggle-activated .toggle-icon { + &:before { + // inner bg track's oval, when checked + transform: scale3d(0, 0, 0); + } + + &:after { + // 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; + + // when pressing down on the toggle and NOT checked + // then make the knob wider + width: $toggle-ios-handle-width + 6; + } + } +} + + +// Toggle Disabled +// ----------------------------------------- + +ion-toggle[aria-disabled=true] { + opacity: $toggle-ios-disabled-opacity; + color: $toggle-ios-disabled-text-color; + pointer-events: none; +} + + +// iOS Toggle Color Mixin +// -------------------------------------------------- + +@mixin ios-toggle-theme($color-name, $bg-on) { + + ion-toggle[#{$color-name}] { + + &[aria-checked=true] .toggle-icon { + background-color: $bg-on; + } + + } + +} + + +// Generate iOS Toggle Colors +// -------------------------------------------------- + +@each $color-name, $value in $colors-ios { + @include ios-toggle-theme($color-name, $value); +} diff --git a/ionic/components/toggle/toggle.md.scss b/ionic/components/toggle/toggle.md.scss new file mode 100644 index 0000000000..230dbb6476 --- /dev/null +++ b/ionic/components/toggle/toggle.md.scss @@ -0,0 +1,140 @@ +@import "../../globals.md"; + +// Material Design Toggle +// -------------------------------------------------- + +$toggle-md-active-color: map-get($colors-md, primary) !default; + +$toggle-md-track-width: 36px !default; +$toggle-md-track-height: 14px !default; +$toggle-md-track-background-color-off: $list-md-border-color !default; +$toggle-md-track-background-color-on: lighten($toggle-md-active-color, 25%) !default; + +$toggle-md-handle-width: 20px !default; +$toggle-md-handle-height: 20px !default; +$toggle-md-handle-background-color-off: $background-md-color !default; +$toggle-md-handle-background-color-on: $toggle-md-active-color !default; +$toggle-md-handle-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default; +$toggle-md-handle-border-radius: 50% !default; + +$toggle-md-media-margin: 0 !default; +$toggle-md-media-padding: 12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default; + +$toggle-md-transition-duration: 300ms !default; + +$toggle-md-disabled-opacity: 0.5 !default; +$toggle-md-disabled-text-color: $subdued-text-md-color !default; + + +// Toggle +// ----------------------------------------- + +ion-toggle { + display: block; + @include user-select-none(); +} + + +// Toggle Wrapper +// ----------------------------------------- + +.toggle-media { + margin: $toggle-md-media-margin; + padding: $toggle-md-media-padding; + cursor: pointer; +} + + +// Toggle Background Track +// ----------------------------------------- + +.toggle-icon { + // bg track, when not checked + position: relative; + display: block; + width: $toggle-md-track-width; + height: $toggle-md-track-height; + pointer-events: none; + border-radius: $toggle-md-track-height; + + background-color: $toggle-md-track-background-color-off; + transition: background-color $toggle-md-transition-duration +} + + +// Toggle Knob +// ----------------------------------------- + +.toggle-icon:after { + // knob, when not checked + content: ''; + position: absolute; + top: ($toggle-md-handle-height - $toggle-md-track-height) / -2; + left: 0; + + width: $toggle-md-handle-width; + height: $toggle-md-handle-height; + + border-radius: $toggle-md-handle-border-radius; + box-shadow: $toggle-md-handle-box-shadow; + + background-color: $toggle-md-handle-background-color-off; + + transition-property: transform, background-color; + transition-duration: $toggle-md-transition-duration; +} + + +// Toggle Checked +// ----------------------------------------- + +ion-toggle[aria-checked=true] .toggle-icon { + // bg track, when not checked + background-color: $toggle-md-track-background-color-on; + + &:after { + // knob, when not checked + background-color: $toggle-md-handle-background-color-on; + transform: translate3d($toggle-md-track-width - $toggle-md-handle-width, 0, 0); + } +} + + +// Toggle Disabled +// ----------------------------------------- + +ion-toggle[aria-disabled=true] { + opacity: $toggle-md-disabled-opacity; + color: $toggle-md-disabled-text-color; + pointer-events: none; +} + + +// Material Design Color Mixin +// -------------------------------------------------- + +@mixin toggle-theme-md($color-name, $bg-on) { + + ion-toggle[#{$color-name}] { + + &[aria-checked=true] .toggle-icon { + background-color: lighten($bg-on, 25%); + } + + &[aria-checked=true] .toggle-icon:after { + background-color: $bg-on; + } + + } + +} + + +// Generate Material Design Toggle Auxiliary Colors +// -------------------------------------------------- + +@each $color-name, $value in $colors-md { + + @include toggle-theme-md($color-name, $value); + +} diff --git a/ionic/components/switch/switch.ts b/ionic/components/toggle/toggle.ts similarity index 67% rename from ionic/components/switch/switch.ts rename to ionic/components/toggle/toggle.ts index bdbce9c3cf..de620b9e67 100644 --- a/ionic/components/switch/switch.ts +++ b/ionic/components/toggle/toggle.ts @@ -9,69 +9,69 @@ import {pointerCoord} from '../../util/dom'; * @private */ @Directive({ - selector: '.switch-media', + selector: '.toggle-media', host: { - '[class.switch-activated]': 'swtch.isActivated' + '[class.toggle-activated]': 'toggle.isActivated' } }) -class MediaSwitch { +class MediaToggle { /** * TODO - * @param {Switch} swtch TODO + * @param {Toggle} toggle TODO * @param {} elementRef TODO * @param {Config} config TODO */ constructor( - @Host() @Inject(forwardRef(() => Switch)) swtch: Switch, + @Host() @Inject(forwardRef(() => Toggle)) toggle: Toggle, elementRef: ElementRef ) { - swtch.switchEle = elementRef.nativeElement; - this.swtch = swtch; + toggle.toggleEle = elementRef.nativeElement; + this.toggle = toggle; } } /** - * @name Switch + * @name Toggle * @description - * A switch technically is the same thing as an HTML checkbox input, except it looks different and is easier to use on a touch device. Ionic prefers to wrap the checkbox input with the `