javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(searchbar): UI fixes for searchbar, added clear input to the default cancel action

Browse Source 
references #247
This commit is contained in:
Brandy Carney
2015-11-03 17:04:26 -05:00
parent 955c110fbf
commit d0385aa95d
3 changed files with 30 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
ionic/components/searchbar/modes/ios.scss
View File

@ -38,7 +38,7 @@ ion-searchbar {
background-size: $searchbar-ios-input-search-icon-size; background-size: $searchbar-ios-input-search-icon-size;
background-repeat: no-repeat; background-repeat: no-repeat;
position: absolute; position: absolute;
left: 10px; left: 9px;
top: 9px; top: 9px;
@include calc(margin-left, "50% - 60px"); @include calc(margin-left, "50% - 60px");
@ -92,8 +92,7 @@ ion-searchbar.left-align {
margin-left: 0; margin-left: 0;
} }
.searchbar-input { .searchbar-input {
padding-left: 28px; padding-left: 30px;
background-position: 8px;
} }
} }
@ -117,7 +116,7 @@ ion-searchbar.left-align {
} }
} }
.left-align .searchbar-cancel { .focused .searchbar-cancel {
right: 0px; right: 0px;
} }
@ -133,10 +132,10 @@ ion-searchbar.left-align {
@each $color, $value in $colors { @each $color, $value in $colors {
ion-searchbar[#{$color}] { ion-searchbar[#{$color}] {
//background-color: $value;
.searchbar-cancel { .searchbar-cancel {
color: $value; color: $value;
} }
} }
} }

41
ionic/components/searchbar/modes/md.scss
View File

@ -25,10 +25,6 @@ ion-searchbar {
background: $searchbar-md-background-color; background: $searchbar-md-background-color;
} }
.toolbar ion-searchbar {
padding: 3px;
}
.searchbar-search-icon, .searchbar-search-icon,
.searchbar-cancel-icon { .searchbar-cancel-icon {
width: $searchbar-md-input-search-icon-size + 1; width: $searchbar-md-input-search-icon-size + 1;
@ -53,18 +49,6 @@ ion-searchbar {
left: 10px; left: 10px;
} }
.focused {
.searchbar-search-icon {
display: none;
}
.searchbar-cancel-icon {
display: inline-flex;
}
}
.searchbar-input { .searchbar-input {
padding: 6px 55px; padding: 6px 55px;
@ -99,3 +83,28 @@ ion-searchbar {
.searchbar-cancel { .searchbar-cancel {
display: none; display: none;
} }
.focused {
.searchbar-search-icon {
display: none;
}
.searchbar-cancel-icon {
display: inline-flex;
}
}
.toolbar {
ion-searchbar {
padding: 3px;
}
.searchbar-cancel-icon {
left: 14px;
}
}

2
ionic/components/searchbar/searchbar.ts
View File

@ -22,9 +22,9 @@ import {Icon} from '../icon/icon';
'cancelText': 'Cancel', 'cancelText': 'Cancel',
'placeholder': 'Search', 'placeholder': 'Search',
'cancelAction': function(event, query) { 'cancelAction': function(event, query) {
console.log('Default Cancel');
this.element = this.elementRef.nativeElement.querySelector('input'); this.element = this.elementRef.nativeElement.querySelector('input');
this.element.blur(); this.element.blur();
this.clearInput();
} }
}, },
host: { host: {