refactor(search-bar): Added JS to calculate the margin of the iOS cancel button

References #247

ionic/components/search-bar/modes/ios.scss

@@ -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;
+$search-bar-ios-input-transition:         all 400ms cubic-bezier(.25, .45, .05, 1) !default;
-//cubic-bezier(.25, .45, .05, 1)
+$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-cancel-transition;
-  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;
   padding-left: 8px;
+  min-height: 0;
   padding-right: 0;
 }
 

ionic/components/search-bar/modes/md.scss

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

ionic/components/search-bar/search-bar.ts

@@ -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() {

ionic/components/search-bar/test/floating/main.html

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