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

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

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