diff --git a/demos/component-docs/index.ts b/demos/component-docs/index.ts index 14ff9d3315..45e30e8635 100644 --- a/demos/component-docs/index.ts +++ b/demos/component-docs/index.ts @@ -1,17 +1,16 @@ +import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/forms'; import {App, IonicApp, ActionSheet, NavController, NavParams} from 'ionic/ionic'; import {Modal, IonicView, IonicConfig, Events, Animation} from 'ionic/ionic'; -import {NgZone} from 'angular2/angular2'; import {NavigationDetailsPage} from 'navigation'; + import {TabsPage} from 'tabs'; import {DemoModal} from 'modal'; - import * as helpers from 'helpers'; - - @IonicView({ - templateUrl: 'main.html' + templateUrl: 'main.html', + bindings: [FormBuilder] }) export class MainPage { @@ -20,7 +19,6 @@ export class MainPage { constructor(app: IonicApp, nav: NavController, actionSheet: ActionSheet, - zone: NgZone, params: NavParams, modal: Modal, events: Events) @@ -31,6 +29,10 @@ export class MainPage { this.actionSheet = actionSheet; this.navDetailsPage = NavigationDetailsPage; this.demoModal = DemoModal; + this.form = new ControlGroup({ + firstName: new Control("", Validators.required), + lastName: new Control("", Validators.required) + }); if (params.data.location) { this.component.title = params.data.location; } else if (window.location.hash) { this.component.title = window.location.hash; } @@ -100,6 +102,14 @@ export class MainPage { }); } + // ************************** + // Form + // ************************** + processForm(event) { + // TODO: display input in a popup + console.log(event); + } + } class FadeIn extends Animation { @@ -128,7 +138,7 @@ Animation.register('my-fade-out', FadeOut); @App({ - template: '' + template: '' }) class DemoApp { diff --git a/demos/component-docs/main.html b/demos/component-docs/main.html index 0a42ef51b9..e30af01893 100644 --- a/demos/component-docs/main.html +++ b/demos/component-docs/main.html @@ -204,7 +204,7 @@ - + @@ -229,9 +229,9 @@ - +
- + @@ -344,7 +344,7 @@ Call Ron -
Maybe later
+ Maybe later @@ -389,9 +389,9 @@
- +
- +
@@ -412,7 +412,19 @@
+
+ + + + + + + + +
+ +
+
- diff --git a/demos/icons/main.html b/demos/icons/main.html index 3ad3e73ac7..db1d77eaa9 100644 --- a/demos/icons/main.html +++ b/demos/icons/main.html @@ -19,17 +19,17 @@ Affection -
+ Very Little -
+ Home -
+ Where the heart is -
+ @@ -40,33 +40,33 @@ Star status -
+ Super -
+ Pizza -
+ Always -
+ Beer -
+ Yes Plz -
+ Wine -
+ All the time -
+ diff --git a/demos/list/main.html b/demos/list/main.html index 02234cf7f5..1e3d7f18d6 100644 --- a/demos/list/main.html +++ b/demos/list/main.html @@ -16,17 +16,17 @@ Affection -
+ Very Little -
+ Home -
+ Where the heart is -
+ @@ -46,9 +46,9 @@ Star status -
+ Super -
+ @@ -63,25 +63,25 @@ Pizza -
+ Always -
+ Beer -
+ Yes Plz -
+ Wine -
+ All the time -
+ diff --git a/ionic/components/item/item.ts b/ionic/components/item/item.ts index 41129534d2..8bf9875156 100644 --- a/ionic/components/item/item.ts +++ b/ionic/components/item/item.ts @@ -12,9 +12,9 @@ import {dom} from 'ionic/util'; * * * {{item.title}} - *
+ * * {{item.note}} - *
+ * * * * ``` diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss index 855325dbd0..3e9b89a20f 100644 --- a/ionic/components/item/modes/ios.scss +++ b/ionic/components/item/modes/ios.scss @@ -134,7 +134,7 @@ $item-ios-divider-padding: 5px 15px !default; margin-bottom: 1px; } - .item-note { + ion-note { color: $item-ios-note-color; } diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss index 384836a2ef..13339401c2 100644 --- a/ionic/components/item/modes/md.scss +++ b/ionic/components/item/modes/md.scss @@ -137,7 +137,7 @@ $item-md-divider-padding: 5px 15px !default; line-height: $item-md-body-text-line-height; } - .item-note { + ion-note { color: $item-md-note-color; } diff --git a/ionic/components/list/test/headers/main.html b/ionic/components/list/test/headers/main.html index 02234cf7f5..1e3d7f18d6 100644 --- a/ionic/components/list/test/headers/main.html +++ b/ionic/components/list/test/headers/main.html @@ -16,17 +16,17 @@ Affection -
+ Very Little -
+ Home -
+ Where the heart is -
+ @@ -46,9 +46,9 @@ Star status -
+ Super -
+ @@ -63,25 +63,25 @@ Pizza -
+ Always -
+ Beer -
+ Yes Plz -
+ Wine -
+ All the time -
+ diff --git a/ionic/components/menu/menu.ts b/ionic/components/menu/menu.ts index eb5f8341fa..59fca885ae 100644 --- a/ionic/components/menu/menu.ts +++ b/ionic/components/menu/menu.ts @@ -85,10 +85,11 @@ export class Menu extends Ion { */ onInit() { super.onInit(); - this._cntEle = (this.content instanceof Node) ? this.content : this.content.getNativeElement(); + let content = this.content; + this._cntEle = (content instanceof Node) ? content : content && content.getNativeElement && content.getNativeElement(); if (!this._cntEle) { - return console.error('Menu: must have a [content] element to listen for drag events on. Example:\n\n\n\n'); + return console.error('Menu: must have a [content] element to listen for drag events on. Example:\n\n\n\n'); } if (!this.id) { diff --git a/ionic/components/search-bar/modes/ios.scss b/ionic/components/search-bar/modes/ios.scss index 53969bd04d..ff446af8e5 100644 --- a/ionic/components/search-bar/modes/ios.scss +++ b/ionic/components/search-bar/modes/ios.scss @@ -2,18 +2,20 @@ // iOS Search Bar // -------------------------------------------------- +$search-bar-ios-padding: 0 8px !default; $search-bar-ios-background-color: rgba(0, 0, 0, 0.2) !default; $search-bar-ios-border-color: rgba(0, 0, 0, 0.05) !default; -$search-bar-ios-padding: 0 8px !default; -$search-bar-ios-input-height: 28px !default; -$search-bar-ios-input-text-color: #9D9D9D !default; -$search-bar-ios-input-background-color: #FFFFFF !default; -$search-bar-ios-input-transition: all 0.3s cubic-bezier(.25, .45, .05, 1) !default; +$search-bar-ios-min-height: 44px !default; $search-bar-ios-input-search-icon-color: #767676 !default; $search-bar-ios-input-search-icon-svg: "" !default; $search-bar-ios-input-search-icon-size: 13px !default; +$search-bar-ios-input-height: 28px !default; +$search-bar-ios-input-text-color: #9D9D9D !default; +$search-bar-ios-input-background-color: #FFFFFF !default; +$search-bar-ios-input-transition: all 0.3s cubic-bezier(.25, .45, .05, 1) !default; + $search-bar-ios-input-close-icon-color: #8F8E94 !default; $search-bar-ios-input-close-icon-svg: "" !default; $search-bar-ios-input-close-icon-size: 17px !default; @@ -23,6 +25,7 @@ $search-bar-ios-input-close-icon-size: 17px !default; padding: $search-bar-ios-padding; background: $search-bar-ios-background-color; border-bottom: 1px solid $search-bar-ios-border-color; + min-height: $search-bar-ios-min-height; } .search-bar-search-icon { diff --git a/ionic/components/search-bar/modes/md.scss b/ionic/components/search-bar/modes/md.scss new file mode 100644 index 0000000000..4605baf186 --- /dev/null +++ b/ionic/components/search-bar/modes/md.scss @@ -0,0 +1,71 @@ + +// Material Design Search Bar +// -------------------------------------------------- + +$search-bar-md-padding: 8px !default; +$search-bar-md-background-color: inherit !default; + +$search-bar-md-input-search-icon-color: #5B5B5B !default; +$search-bar-md-input-search-icon-svg: "" !default; +$search-bar-md-input-search-icon-size: 20px !default; + +$search-bar-md-input-height: 28px !default; +$search-bar-md-input-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; +$search-bar-md-input-placeholder-color: #AEAEAE !default; +$search-bar-md-input-text-color: #141414 !default; +$search-bar-md-input-background-color: #FFFFFF !default; +$search-bar-md-input-border-radius: 2px !default; + +$search-bar-md-input-close-icon-color: #5B5B5B !default; +$search-bar-md-input-close-icon-svg: "" !default; +$search-bar-md-input-close-icon-size: 22px !default; + + +.search-bar { + padding: $search-bar-md-padding; + background: $search-bar-md-background-color; +} + +.search-bar-search-icon { + width: $search-bar-md-input-search-icon-size + 1; + height: $search-bar-md-input-search-icon-size + 1; + + @include svg-background-image($search-bar-md-input-search-icon-svg); + background-size: $search-bar-md-input-search-icon-size; + background-repeat: no-repeat; + position: absolute; + left: 13px; + top: 13px; +} + +.search-bar-input { + padding: 8px 55px; + + height: $search-bar-md-input-height; + box-shadow: $search-bar-md-input-box-shadow; + + font-size: 1.6rem; + font-weight: 400; + + border-radius: $search-bar-md-input-border-radius; + color: $search-bar-md-input-text-color; + background-color: $search-bar-md-input-background-color; + background-repeat: no-repeat; + background-position: 8px center; + + &::placeholder { + color: $search-bar-md-input-placeholder-color; + } +} + +.search-bar-close-icon { + width: $search-bar-md-input-close-icon-size; + height: $search-bar-md-input-close-icon-size; + + @include svg-background-image($search-bar-md-input-close-icon-svg); + background-size: $search-bar-md-input-close-icon-size; + background-repeat: no-repeat; + position: absolute; + right: 13px; + top: 13px; +} diff --git a/ionic/components/search-bar/search-bar.scss b/ionic/components/search-bar/search-bar.scss index 90ab2129a5..7bff42fe48 100644 --- a/ionic/components/search-bar/search-bar.scss +++ b/ionic/components/search-bar/search-bar.scss @@ -2,15 +2,12 @@ // Search Bar // -------------------------------------------------- -$search-bar-min-height: 44px !default; - .search-bar { position: relative; display: flex; align-items: center; width: 100%; - min-height: $search-bar-min-height; } .search-bar-icon { diff --git a/ionic/components/search-bar/search-bar.ts b/ionic/components/search-bar/search-bar.ts index deb843ee57..4e55ab3377 100644 --- a/ionic/components/search-bar/search-bar.ts +++ b/ionic/components/search-bar/search-bar.ts @@ -6,7 +6,14 @@ import {IonicConfig} from '../../config/config'; import {IonicComponent} from '../../config/decorators'; /** - * TODO + * @name Search Bar + * @description + * The Search Bar service adds an input field which can be used to search or filter items. + * + * @usage + * ```html + * + * ``` */ @IonicComponent({ selector: 'ion-search-bar', diff --git a/ionic/components/tabs/test/advanced/e2e.ts b/ionic/components/tabs/test/advanced/e2e.ts index 1a8876aa6c..c5fd91320b 100644 --- a/ionic/components/tabs/test/advanced/e2e.ts +++ b/ionic/components/tabs/test/advanced/e2e.ts @@ -7,14 +7,14 @@ it('should go to Tab1 Page2', function() { element(by.css('#goToTab1Page2')).click(); }); +it('should go back to Tab1 Page1', function() { + element(by.css('#backToTab1Page1')).click(); +}); + it('should go to Tab2 Page1', function() { element(by.css('.tab-button:nth-of-type(2)')).click(); }); -it('should go back to Tab1 Page2', function() { +it('should go back to Tab1 Page1', function() { element(by.css('.tab-button:nth-of-type(1)')).click(); }); - -it('should go back to Tab1 Page1', function() { - element(by.css('#backToTab1Page1')).click(); -}); diff --git a/ionic/components/tabs/test/tab-bar-scenarios/main.html b/ionic/components/tabs/test/tab-bar-scenarios/main.html index 22e09da14e..116754739c 100644 --- a/ionic/components/tabs/test/tab-bar-scenarios/main.html +++ b/ionic/components/tabs/test/tab-bar-scenarios/main.html @@ -1,6 +1,6 @@ - + @@ -8,7 +8,7 @@ - + @@ -16,7 +16,7 @@ - + @@ -24,7 +24,7 @@ - + @@ -32,7 +32,7 @@ - + @@ -40,21 +40,21 @@ - + - + - + diff --git a/ionic/ionic.md.scss b/ionic/ionic.md.scss index 2f4dd37d40..2488864466 100644 --- a/ionic/ionic.md.scss +++ b/ionic/ionic.md.scss @@ -15,6 +15,7 @@ "components/nav-bar/modes/md", "components/popup/modes/md", "components/radio/modes/md", + "components/search-bar/modes/md", "components/switch/modes/md", "components/tabs/modes/md", "components/tap-click/ripple"; diff --git a/scripts/e2e/e2e.template.html b/scripts/e2e/e2e.template.html index 860260d333..27eba2a0c0 100644 --- a/scripts/e2e/e2e.template.html +++ b/scripts/e2e/e2e.template.html @@ -17,9 +17,19 @@ stylesheet.setAttribute('rel', 'stylesheet'); stylesheet.setAttribute('href', '../../../css/' + theme); document.getElementsByTagName('head')[0].appendChild(stylesheet); + + if (location.href.indexOf('snapshot=true') > -1) { + document.documentElement.classList.add('snapshot'); + } else { + document.documentElement.classList.remove('snapshot'); + }