javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(search-bar): Added input blur on the cancelAction function and some awful animation to the cancel button

Browse Source 
references #247
This commit is contained in:
Brandy Carney
2015-10-07 12:59:35 -04:00
parent 19aa828846
commit 4d47aa237e
3 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
ionic/components/search-bar/modes/ios.scss
View File

@ -80,20 +80,22 @@ $search-bar-ios-input-close-icon-size: 17px !default;
.search-bar-input-container.left-align { .search-bar-input-container.left-align {
.search-bar-search-icon { .search-bar-search-icon {
margin-left: 0; margin-left: 0;
transition: $search-bar-ios-input-transition;
} }
.search-bar-input { .search-bar-input {
padding-left: 28px; padding-left: 28px;
transition: $search-bar-ios-input-transition;
} }
} }
.search-bar-cancel.left-align { .search-bar-cancel {
@extend button[clear]; @extend button[clear];
display: block;
padding-left: 8px; padding-left: 8px;
padding-right: 0; 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 { &.hairlines .search-bar {

4
ionic/components/search-bar/search-bar.scss
View File

@ -33,5 +33,7 @@ input[type="search"].search-bar-input {
} }
.search-bar-cancel { .search-bar-cancel {
display: none; visibility: hidden;
margin-right: -200px;
min-height: 0;
} }

5
ionic/components/search-bar/search-bar.ts
View File

@ -27,10 +27,13 @@ import {IonicComponent, IonicView} from '../../config/decorators';
'cancelText': 'Cancel', 'cancelText': 'Cancel',
'placeholder': 'Search', 'placeholder': 'Search',
'cancelAction': function() { 'cancelAction': function() {
// TODO user will override this if they pass a function
// need to allow user to call these
console.log('Default Cancel'); console.log('Default Cancel');
this.isFocused = false; this.isFocused = false;
this.shouldLeftAlign = this.value.trim() != ''; this.shouldLeftAlign = this.value.trim() != '';
// TODO input blur this.element = this.elementRef.nativeElement.querySelector('input');
this.element.blur();
} }
} }
}) })