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

refactor(searchbar): updating animations for cancel button

Browse Source 
removed margin right and added transform instead. closes #584
This commit is contained in:
Brandy Carney
2015-11-23 18:40:43 -05:00
parent 023fd1753e
commit b4a2402d4f
2 changed files with 17 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,8 @@
// iOS Search Bar
// --------------------------------------------------
$searchbar-ios-padding: 0 8px !default;
$searchbar-ios-padding-top-bottom: 0 !default;
$searchbar-ios-padding-left-right: 8px !default;
$searchbar-ios-background-color: rgba(0, 0, 0, 0.2) !default;
$searchbar-ios-border-color: rgba(0, 0, 0, 0.05) !default;
$searchbar-ios-min-height: 44px !default;
@ -25,7 +26,7 @@ $searchbar-ios-input-close-icon-size: 18px !default;
ion-searchbar {
padding: $searchbar-ios-padding;
padding: $searchbar-ios-padding-top-bottom $searchbar-ios-padding-left-right;
background: $searchbar-ios-background-color;
border-bottom: 1px solid $searchbar-ios-border-color;
min-height: $searchbar-ios-min-height;
@ -82,10 +83,12 @@ ion-searchbar {
transition: $searchbar-ios-cancel-transition;
min-height: 30px;
padding-left: 8px;
padding-right: 0;
margin-left: 0;
margin-right: -100%;
padding: 0;
visibility: hidden;
transform: translateX(calc(100% + #{$searchbar-ios-padding-left-right}));
flex: 0 0 0%;
}
ion-searchbar.left-align {
@ -95,6 +98,12 @@ ion-searchbar.left-align {
.searchbar-input {
padding-left: 30px;
}
.searchbar-cancel {
transform: translateX(0);
flex: 0 0 auto;
padding-left: 8px;
visibility: visible;
}
}
&.hairlines ion-searchbar {
@ -112,13 +121,12 @@ ion-searchbar.left-align {
}
.searchbar-cancel {
padding-left: 8px;
right: -10px;
padding: 0;
}
}
.focused .searchbar-cancel {
right: 0px;
.left-align .searchbar-cancel {
padding-left: 8px;
}
}

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

@ -69,13 +69,6 @@ export class SearchBar extends Ion {
* @private
*/
afterViewInit() {
this.cancelButton = this.elementRef.nativeElement.querySelector('.searchbar-cancel');
if (this.cancelButton) {
this.cancelWidth = this.cancelButton.offsetWidth;
this.cancelButton.style.marginRight = "-" + this.cancelWidth + "px";
}
// If the user passes in a value to the model we should left align
this.shouldLeftAlign = this.ngControl.value && this.ngControl.value.trim() != '';
this.query = this.ngControl.value || '';
@ -118,10 +111,6 @@ export class SearchBar extends Ion {
inputFocused() {
this.isFocused = true;
this.shouldLeftAlign = true;
if (this.cancelButton) {
this.cancelButton.style.marginRight = "0px";
}
}
/**
@ -130,10 +119,6 @@ export class SearchBar extends Ion {
inputBlurred() {
this.isFocused = false;
this.shouldLeftAlign = this.ngControl.value && this.ngControl.value.trim() != '';
if (this.cancelButton) {
this.cancelButton.style.marginRight = "-" + this.cancelWidth + "px";
}
}
clearInput(event) {