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(search-bar): Added JS to calculate the margin of the iOS cancel button

Browse Source 
References #247
This commit is contained in:
Brandy Carney
2015-10-08 14:04:18 -04:00
parent a1155b4663
commit b07a3760e5
4 changed files with 29 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,8 +15,9 @@ $search-bar-ios-input-height: 28px !default;
$search-bar-ios-input-placeholder-color: #9D9D9D !default;
$search-bar-ios-input-text-color: #000 !default;
$search-bar-ios-input-background-color: #FFFFFF !default;
$search-bar-ios-input-transition: all 0.3s linear !default;
//cubic-bezier(.25, .45, .05, 1)
$search-bar-ios-input-transition: all 400ms cubic-bezier(.25, .45, .05, 1) !default;
$search-bar-ios-cancel-transition: all 400ms cubic-bezier(.25, .45, .05, 1) !default;
$search-bar-ios-input-close-icon-color: #8F8E94 !default;
$search-bar-ios-input-close-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $search-bar-ios-input-close-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
$search-bar-ios-input-close-icon-size: 17px !default;
@ -88,19 +89,9 @@ $search-bar-ios-input-close-icon-size: 17px !default;
.search-bar-cancel {
@extend button[clear];
// transition: all 2s cubic-bezier(.25, .45, .05, 1);
transition: $search-bar-ios-input-transition;
transition-duration: 3s !important;
margin-right: calc(-100%);
// transform: translate3d(100px,0,0);
// max-width: 0;
min-height: 0;
}
.search-bar-cancel.left-align {
max-width: initial;
margin-right: 0;
transition: $search-bar-ios-cancel-transition;
padding-left: 8px;
min-height: 0;
padding-right: 0;
}

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

@ -69,3 +69,7 @@ $search-bar-md-input-close-icon-size: 22px !default;
right: 13px;
top: 13px;
}
.search-bar-cancel {
display: none;
}

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

@ -74,6 +74,16 @@ export class SearchBar extends Ion {
this.query = '';
}
// Add the margin for iOS
afterViewInit() {
this.cancelButton = this.elementRef.nativeElement.querySelector('.search-bar-cancel');
if (this.cancelButton) {
this.cancelWidth = this.cancelButton.offsetWidth;
this.cancelButton.style.marginRight = "-" + this.cancelWidth + "px";
}
}
/**
* Much like ngModel, this is called from our valueAccessor for the attached
* ControlDirective to update the value internally.
@ -99,10 +109,18 @@ export class SearchBar extends Ion {
inputFocused() {
this.isFocused = true;
this.shouldLeftAlign = true;
if (this.cancelButton) {
this.cancelButton.style.marginRight = "0px";
}
}
inputBlurred() {
this.isFocused = false;
this.shouldLeftAlign = this.value.trim() != '';
if (this.cancelButton) {
this.cancelButton.style.marginRight = "-" + this.cancelWidth + "px";
}
}
clearInput() {

2
ionic/components/search-bar/test/floating/main.html
View File

@ -13,6 +13,8 @@
<ion-search-bar ng-control="searchQuery" show-cancel="true"></ion-search-bar>
<label> Search - Custom Cancel Button </label>
<ion-search-bar ng-control="searchQuery" show-cancel="true" cancel-text="Done"></ion-search-bar>
<label> Search - Custom Cancel Button Long Text</label>
<ion-search-bar ng-control="searchQuery" show-cancel="true" cancel-text="I Am So Done"></ion-search-bar>
<label> Search - Custom Cancel Action</label>
<ion-search-bar ng-control="searchQuery" show-cancel="true" cancel-text="Done" [cancel-action]="myCancelAction"></ion-search-bar>
</form>