From 4d47aa237ef73a00dd35e8dcda0272f6fd595fe6 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 7 Oct 2015 12:59:35 -0400 Subject: [PATCH 1/5] feat(search-bar): Added input blur on the cancelAction function and some awful animation to the cancel button references #247 --- ionic/components/search-bar/modes/ios.scss | 12 +++++++----- ionic/components/search-bar/search-bar.scss | 4 +++- ionic/components/search-bar/search-bar.ts | 5 ++++- 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/ionic/components/search-bar/modes/ios.scss b/ionic/components/search-bar/modes/ios.scss index c9de313a5d..92d1b2e7a8 100644 --- a/ionic/components/search-bar/modes/ios.scss +++ b/ionic/components/search-bar/modes/ios.scss @@ -80,20 +80,22 @@ $search-bar-ios-input-close-icon-size: 17px !default; .search-bar-input-container.left-align { .search-bar-search-icon { margin-left: 0; - transition: $search-bar-ios-input-transition; } .search-bar-input { padding-left: 28px; - transition: $search-bar-ios-input-transition; } } -.search-bar-cancel.left-align { +.search-bar-cancel { @extend button[clear]; - display: block; padding-left: 8px; padding-right: 0; - min-height: 0; + transition: $search-bar-ios-input-transition; +} + +.search-bar-cancel.left-align { + margin-right: 0; + visibility: visible; } &.hairlines .search-bar { diff --git a/ionic/components/search-bar/search-bar.scss b/ionic/components/search-bar/search-bar.scss index 7bff42fe48..d03d43bcb3 100644 --- a/ionic/components/search-bar/search-bar.scss +++ b/ionic/components/search-bar/search-bar.scss @@ -33,5 +33,7 @@ input[type="search"].search-bar-input { } .search-bar-cancel { - display: none; + visibility: hidden; + margin-right: -200px; + min-height: 0; } diff --git a/ionic/components/search-bar/search-bar.ts b/ionic/components/search-bar/search-bar.ts index 78de425796..022e98b82a 100644 --- a/ionic/components/search-bar/search-bar.ts +++ b/ionic/components/search-bar/search-bar.ts @@ -27,10 +27,13 @@ import {IonicComponent, IonicView} from '../../config/decorators'; 'cancelText': 'Cancel', 'placeholder': 'Search', 'cancelAction': function() { + // TODO user will override this if they pass a function + // need to allow user to call these console.log('Default Cancel'); this.isFocused = false; this.shouldLeftAlign = this.value.trim() != ''; - // TODO input blur + this.element = this.elementRef.nativeElement.querySelector('input'); + this.element.blur(); } } }) From 6c5fd796152408b4844afb17c9762783e582417b Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 7 Oct 2015 13:06:45 -0400 Subject: [PATCH 2/5] style(blur): Missing comma --- ionic/config/decorators.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ionic/config/decorators.ts b/ionic/config/decorators.ts index 77f189fd48..9549ebbf4f 100644 --- a/ionic/config/decorators.ts +++ b/ionic/config/decorators.ts @@ -93,7 +93,7 @@ export const IONIC_DIRECTIVES = [ forwardRef(() => IdRef), forwardRef(() => ShowWhen), - forwardRef(() => HideWhen) + forwardRef(() => HideWhen), // Random effects forwardRef(() => Blur) From ef36fc2455bd09ac9275441d3eb7e326fe45acd9 Mon Sep 17 00:00:00 2001 From: Drew Rygh Date: Wed, 7 Oct 2015 10:20:13 -0500 Subject: [PATCH 3/5] docs(demos): icon buttons --- demos/component-docs/main.html | 38 ++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/demos/component-docs/main.html b/demos/component-docs/main.html index e30af01893..91e63e2d53 100644 --- a/demos/component-docs/main.html +++ b/demos/component-docs/main.html @@ -173,6 +173,44 @@ +
+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +
+ +
From 8aa3e3e842d1700f97e956209e3400e0ab17408c Mon Sep 17 00:00:00 2001 From: Drew Rygh Date: Wed, 7 Oct 2015 12:48:39 -0500 Subject: [PATCH 4/5] docs(demos): add basic popup --- demos/component-docs/index.ts | 16 ++++++++++++++-- demos/component-docs/main.html | 31 ++++++++++++++++++++++++------- 2 files changed, 38 insertions(+), 9 deletions(-) diff --git a/demos/component-docs/index.ts b/demos/component-docs/index.ts index 45e30e8635..cd6a301503 100644 --- a/demos/component-docs/index.ts +++ b/demos/component-docs/index.ts @@ -1,6 +1,6 @@ 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 {Popup, Modal, IonicView, IonicConfig, Events, Animation} from 'ionic/ionic'; import {NavigationDetailsPage} from 'navigation'; import {TabsPage} from 'tabs'; @@ -20,12 +20,14 @@ export class MainPage { nav: NavController, actionSheet: ActionSheet, params: NavParams, + popup: Popup, modal: Modal, events: Events) { this.params = params; this.nav = nav; this.modal = modal; + this.popup = popup; this.actionSheet = actionSheet; this.navDetailsPage = NavigationDetailsPage; this.demoModal = DemoModal; @@ -41,7 +43,8 @@ export class MainPage { zone.run(() => { if (e.data) { var data = JSON.parse(e.data); - this.component.title = helpers.toTitleCase(data.hash.replace('-', ' ')); + this.component.title = helpers.toTitleCase(data.hash.replace(/-/g, ' ')); + console.log(this.component.title); if (this.component.title === 'Tabs') { this.nav.setRoot(TabsPage); } @@ -102,6 +105,15 @@ export class MainPage { }); } + // ************************** + // Popup + // ************************** + showPopup() { + this.popup.alert("Popup Title").then(() => { + }); + } + + // ************************** // Form // ************************** diff --git a/demos/component-docs/main.html b/demos/component-docs/main.html index 91e63e2d53..607d451811 100644 --- a/demos/component-docs/main.html +++ b/demos/component-docs/main.html @@ -123,32 +123,43 @@

-
+ -
+

- +

- +

- +

- +

- +

+
+ +

+ +

+ +
+ +

@@ -428,6 +439,12 @@

+ +
From bbdbe823cdc4b510e892a9c4ab1573403dc7bc8e Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 7 Oct 2015 14:38:37 -0400 Subject: [PATCH 5/5] refactor(search-bar): working on animations --- ionic/components/search-bar/modes/ios.scss | 16 +++++++++++----- ionic/components/search-bar/search-bar.scss | 6 ------ .../components/search-bar/test/floating/index.ts | 1 + 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/ionic/components/search-bar/modes/ios.scss b/ionic/components/search-bar/modes/ios.scss index 92d1b2e7a8..2e702ce67a 100644 --- a/ionic/components/search-bar/modes/ios.scss +++ b/ionic/components/search-bar/modes/ios.scss @@ -15,8 +15,8 @@ $search-bar-ios-input-height: 28px !default; $search-bar-ios-input-placeholder-color: #9D9D9D !default; $search-bar-ios-input-text-color: #000 !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-transition: all 0.3s linear !default; +//cubic-bezier(.25, .45, .05, 1) $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; @@ -88,14 +88,20 @@ $search-bar-ios-input-close-icon-size: 17px !default; .search-bar-cancel { @extend button[clear]; - padding-left: 8px; - padding-right: 0; + // transition: all 2s cubic-bezier(.25, .45, .05, 1); transition: $search-bar-ios-input-transition; + transition-duration: 3s !important; + margin-right: calc(-100%); + // transform: translate3d(100px,0,0); + // max-width: 0; + min-height: 0; } .search-bar-cancel.left-align { + max-width: initial; margin-right: 0; - visibility: visible; + padding-left: 8px; + padding-right: 0; } &.hairlines .search-bar { diff --git a/ionic/components/search-bar/search-bar.scss b/ionic/components/search-bar/search-bar.scss index d03d43bcb3..2d719af7e0 100644 --- a/ionic/components/search-bar/search-bar.scss +++ b/ionic/components/search-bar/search-bar.scss @@ -31,9 +31,3 @@ input[type="search"].search-bar-input { line-height: 3rem; @include appearance(none); } - -.search-bar-cancel { - visibility: hidden; - margin-right: -200px; - min-height: 0; -} diff --git a/ionic/components/search-bar/test/floating/index.ts b/ionic/components/search-bar/test/floating/index.ts index f04c84767f..b0b0225da9 100644 --- a/ionic/components/search-bar/test/floating/index.ts +++ b/ionic/components/search-bar/test/floating/index.ts @@ -20,5 +20,6 @@ class IonicApp { } myCancelAction = function() { console.log('myCancelAction'); + alert("My custom action!"); } }