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-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 {

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

@ -33,5 +33,7 @@ input[type="search"].search-bar-input {
}
.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',
'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();
}
}
})