Merge branch 'master' of github.com:driftyco/ionic2

ionic/components.ts

@@ -24,7 +24,7 @@ export * from 'ionic/components/nav/nav-controller'
 export * from 'ionic/components/nav/view-controller'
 export * from 'ionic/components/nav/nav-push'
 export * from 'ionic/components/nav/nav-router'
-export * from 'ionic/components/nav-bar/nav-bar'
+export * from 'ionic/components/navbar/navbar'
 export * from 'ionic/components/overlay/overlay'
 export * from 'ionic/components/popup/popup'
 export * from 'ionic/components/slides/slides'

ionic/components/menu/menu-toggle.ts

@@ -3,7 +3,7 @@ import {Directive, ElementRef, Optional} from 'angular2/angular2';
 import {Ion} from '../ion';
 import {IonicApp} from '../app/app';
 import {ViewController} from '../nav/view-controller';
-import {Navbar} from '../nav-bar/nav-bar';
+import {Navbar} from '../navbar/navbar';
 
 
 /**

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

@@ -30,21 +30,6 @@ ion-search-bar {
   min-height: $search-bar-ios-min-height;
 }
 
-.search-bar-search-icon {
-  width: $search-bar-ios-input-search-icon-size + 1;
-  height: $search-bar-ios-input-search-icon-size + 1;
-
-  @include svg-background-image($search-bar-ios-input-search-icon-svg);
-  background-size: $search-bar-ios-input-search-icon-size;
-  background-repeat: no-repeat;
-  position: absolute;
-  left: 10px;
-  top: 8px;
-
-  @include calc(margin-left, "50% - 60px");
-  transition: $search-bar-ios-input-transition;
-}
-
 .search-bar-input {
   height: $search-bar-ios-input-height;
   padding: 0 28px;
@@ -55,8 +40,11 @@ ion-search-bar {
   border-radius: 5px;
   color: $search-bar-ios-input-text-color;
   background-color: $search-bar-ios-input-background-color;
+
+  @include svg-background-image($search-bar-ios-input-search-icon-svg);
+  background-size: $search-bar-ios-input-search-icon-size;
   background-repeat: no-repeat;
-  background-position: 8px center;
+  background-position: calc(50% - 40px);
 
   &::placeholder {
     color: $search-bar-ios-input-placeholder-color;
@@ -96,9 +84,37 @@ ion-search-bar {
   }
   .search-bar-input {
     padding-left: 28px;
+    background-position: 8px;
   }
 }
 
 &.hairlines ion-search-bar {
   border-bottom-width: 0.55px;
 }
+
+ion-toolbar {
+
+  ion-search-bar {
+    background: transparent;
+    border-bottom-width: 0;
+
+    .search-bar-input {
+      background-color: #E5E5E5;
+    }
+  }
+
+}
+
+// Generate Default Search Bar Colors
+// --------------------------------------------------
+
+@each $color, $value in $colors {
+
+  ion-search-bar[#{$color}] {
+    //background-color: $value;
+
+    .search-bar-cancel {
+      color: $value;
+    }
+  }
+}

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

@@ -26,18 +26,6 @@ ion-search-bar {
   background: $search-bar-md-background-color;
 }
 
-.search-bar-search-icon {
-  width: $search-bar-md-input-search-icon-size + 1;
-  height: $search-bar-md-input-search-icon-size + 1;
-
-  @include svg-background-image($search-bar-md-input-search-icon-svg);
-  background-size: $search-bar-md-input-search-icon-size;
-  background-repeat: no-repeat;
-  position: absolute;
-  left: 13px;
-  top: 13px;
-}
-
 .search-bar-input {
   padding: 8px 55px;
 
@@ -50,8 +38,11 @@ ion-search-bar {
   border-radius: $search-bar-md-input-border-radius;
   color: $search-bar-md-input-text-color;
   background-color: $search-bar-md-input-background-color;
+
+  @include svg-background-image($search-bar-md-input-search-icon-svg);
+  background-size: $search-bar-md-input-search-icon-size;
   background-repeat: no-repeat;
-  background-position: 8px center;
+  background-position: 16px center;
 
   &::placeholder {
     color: $search-bar-md-input-placeholder-color;

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

@@ -20,19 +20,18 @@ import {ConfigComponent} from '../../config/decorators';
     'showCancel': false,
     'cancelText': 'Cancel',
     'placeholder': 'Search',
-    'cancelAction': function(event, model) {
+    'cancelAction': function(event, query) {
       // The cancel button now works on its own to blur the input
       console.log('Default Cancel');
     }
   },
   template:
     '<div class="search-bar-input-container" [class.left-align]="shouldLeftAlign">' +
-      '<div class="search-bar-search-icon"></div>' +
       '<input [(value)]="query" (focus)="inputFocused()" (blur)="inputBlurred()" ' +
       '(input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder">' +
       '<button clear *ng-if="query" class="search-bar-close-icon" (click)="clearInput($event)"></button>' +
     '</div>' +
-    '<button *ng-if="showCancel" (click)="cancelAction($event, model)" class="search-bar-cancel" [class.left-align]="shouldLeftAlign">{{cancelText}}</button>',
+    '<button *ng-if="showCancel" (click)="cancelAction($event, query)" class="search-bar-cancel" [class.left-align]="shouldLeftAlign">{{cancelText}}</button>',
   directives: [FORM_DIRECTIVES, NgIf, NgClass]
 })
 

ionic/components/search-bar/test/floating/index.ts

@@ -20,7 +20,8 @@ class IonicApp {
 
   }
 
-  myCancelAction(event, model) {
-    console.log("TODO get app property");
+  myCancelAction(event, query) {
+    console.log("Clicked cancel action with", query);
+    this.clickedCustomAction = true;
   }
 }

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

@@ -3,13 +3,13 @@
   <ion-search-bar [(ng-model)]="defaultSearch" class="e2eDefaultFloatingSearchBar"></ion-search-bar>
 
   <h5 padding-left> Search - Custom Placeholder </h5>
-  <ion-search-bar [(ng-model)]="customPlaceholder" placeholder="Filter" class="e2eCustomPlaceholderFloatingSearchBar"></ion-search-bar>
+  <ion-search-bar [(ng-model)]="customPlaceholder" placeholder="Filter Schedules" class="e2eCustomPlaceholderFloatingSearchBar"></ion-search-bar>
 
   <h5 padding-left> Search - Default Cancel Button </h5>
   <ion-search-bar [(ng-model)]="defaultCancel" show-cancel="true" class="e2eDefaultCancelButtonFloatingSearchBar"></ion-search-bar>
 
-  <h5 padding-left> Search - Custom Cancel Button </h5>
-  <ion-search-bar [(ng-model)]="customCancel" show-cancel="true" cancel-text="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchBar"></ion-search-bar>
+  <h5 padding-left> Search - Custom Cancel Button Danger </h5>
+  <ion-search-bar [(ng-model)]="customCancel" show-cancel="true" cancel-text="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchBar" danger></ion-search-bar>
 
   <h5 padding-left> Search - Custom Cancel Action</h5>
   <ion-search-bar [(ng-model)]="customCancelAction" show-cancel="true" cancel-text="Done" [cancel-action]="myCancelAction" class="e2eCustomCancelActionFloatingSearchBar"></ion-search-bar>

ionic/components/search-bar/test/toolbar/index.ts

@@ -0,0 +1,15 @@
+import {App, NavController} from 'ionic/ionic';
+import {Page, Config, IonicApp} from 'ionic/ionic';
+import {NavParams, NavController, ViewController} from 'ionic/ionic';
+import {SearchPipe} from 'ionic/components/search-bar/search-bar';
+
+@App({
+  templateUrl: 'main.html'
+})
+class IonicApp {
+  toolbarSearch: string;
+
+  constructor() {
+
+  }
+}

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

@@ -0,0 +1,21 @@
+<ion-navbar *navbar>
+  <ion-title>Test</ion-title>
+</ion-navbar>
+
+<ion-content>
+  <h5 padding-left padding-top> Search - Default Toolbar </h5>
+  <ion-toolbar>
+    <ion-search-bar [(ng-model)]="toolbarSearch" show-cancel="true"></ion-search-bar>
+  </ion-toolbar>
+
+  <h5 padding-left padding-top> Search - Primary Toolbar </h5>
+  <ion-toolbar primary>
+    <ion-search-bar [(ng-model)]="toolbarSearch" show-cancel="true"></ion-search-bar>
+  </ion-toolbar>
+
+  <h5 padding-left padding-top> Search - Danger Toolbar </h5>
+  <ion-toolbar danger>
+    <ion-search-bar [(ng-model)]="toolbarSearch" show-cancel="true"></ion-search-bar>
+  </ion-toolbar>
+
+</ion-content>

ionic/components/segment/modes/ios.scss

@@ -13,6 +13,13 @@ $segment-button-ios-text-color:               inverse($segment-button-ios-bg-col
 $segment-button-ios-activated-transition:     100ms all linear !default;
 $segment-button-ios-hover-opacity:            0.16 !default;
 
+$segment-button-ios-toolbar-button-max-width: 100px !default;
+
+
+ion-segment {
+  display: flex;
+  align-items: center;
+}
 
 .ion-segment {
 
@@ -63,6 +70,17 @@ $segment-button-ios-hover-opacity:            0.16 !default;
 
 }
 
+ion-toolbar {
+  .ion-segment {
+    justify-content: center;
+
+    button,
+    [button] {
+      max-width: $segment-button-ios-toolbar-button-max-width;
+    }
+  }
+}
+
 // Generate Default Button Colors
 // --------------------------------------------------
 

ionic/components/segment/modes/md.scss

@@ -34,6 +34,13 @@ $segment-button-md-border-bottom:              2px solid rgba(#000000, 0.10) !de
   }
 }
 
+ion-toolbar {
+  .ion-segment {
+    width: 95%;
+    margin: 0 auto;
+  }
+}
+
 // Generate Default Button Colors
 // --------------------------------------------------
 

ionic/components/segment/segment.scss

@@ -7,6 +7,7 @@ $segment-button-padding:    0 16px !default;
 
 ion-segment {
   display: block;
+  width: 100%;
 }
 
 .ion-segment {

ionic/components/segment/test/basic/main.html

@@ -1,14 +1,12 @@
 <ion-toolbar>
-  <ion-title>
-    <ion-segment [(ng-model)]="relationship">
-      <ion-segment-button value="friends" class="e2eSegmentFriends">
-        Friends
-      </ion-segment-button>
-      <ion-segment-button value="enemies">
-        Enemies
-      </ion-segment-button>
-    </ion-segment>
-  </ion-title>
+  <ion-segment [(ng-model)]="relationship">
+    <ion-segment-button value="friends" class="e2eSegmentFriends">
+      Friends
+    </ion-segment-button>
+    <ion-segment-button value="enemies">
+      Enemies
+    </ion-segment-button>
+  </ion-segment>
 </ion-toolbar>
 
 <ion-toolbar>
@@ -17,16 +15,14 @@
       <icon search></icon>
     </button>
   </ion-nav-items>
-  <ion-title>
-    <ion-segment secondary>
-      <ion-segment-button>
-        Something
-      </ion-segment-button>
-      <ion-segment-button>
-        Else
-      </ion-segment-button>
-    </ion-segment>
-  </ion-title>
+  <ion-segment secondary>
+    <ion-segment-button>
+      Something
+    </ion-segment-button>
+    <ion-segment-button>
+      Else
+    </ion-segment-button>
+  </ion-segment>
 </ion-toolbar>
 
 <ion-content padding>
@@ -87,17 +83,15 @@
 </ion-content>
 
 <ion-toolbar position="bottom">
-  <ion-title>
-    <ion-segment [(ng-model)]="appType" primary>
-      <ion-segment-button value="paid">
-        Paid
-      </ion-segment-button>
-      <ion-segment-button value="free">
-        Free
-      </ion-segment-button>
-      <ion-segment-button value="top" class="e2eSegmentTopGrossing">
-        Top Grossing
-      </ion-segment-button>
-    </ion-segment>
-  </ion-title>
+  <ion-segment [(ng-model)]="appType" primary>
+    <ion-segment-button value="paid">
+      Paid
+    </ion-segment-button>
+    <ion-segment-button value="free">
+      Free
+    </ion-segment-button>
+    <ion-segment-button value="top" class="e2eSegmentTopGrossing">
+      Top Grossing
+    </ion-segment-button>
+  </ion-segment>
 </ion-toolbar>

ionic/components/toolbar/toolbar.ts

@@ -3,7 +3,7 @@ import {Component, Directive, Host, ElementRef, Renderer, Optional, forwardRef,
 import {Ion} from '../ion';
 import {Config} from '../../config/config';
 import {MenuToggle} from '../menu/menu-toggle';
-import {Navbar} from '../nav-bar/nav-bar';
+import {Navbar} from '../navbar/navbar';
 
 
 /**
@@ -60,7 +60,7 @@ export class ToolbarBase extends Ion  {
   template:
     '<div class="toolbar-inner">' +
       '<ng-content select="[menu-toggle]"></ng-content>' +
-      '<ng-content select="ion-title"></ng-content>' +
+      '<ng-content select="ion-title,ion-search-bar,ion-segment"></ng-content>' +
       '<ng-content select="ion-nav-items[primary]"></ng-content>' +
       '<ng-content select="ion-nav-items[secondary]"></ng-content>' +
     '</div>' +

ionic/config/directives.ts

@@ -28,7 +28,7 @@ import {SearchBar} from '../components/search-bar/search-bar';
 import {Nav} from '../components/nav/nav';
 import {NavPush, NavPop} from '../components/nav/nav-push';
 import {NavRouter} from '../components/nav/nav-router';
-import {NavbarTemplate, Navbar} from '../components/nav-bar/nav-bar';
+import {NavbarTemplate, Navbar} from '../components/navbar/navbar';
 import {IdRef} from '../components/app/id';
 import {ShowWhen, HideWhen} from '../components/show-hide-when/show-hide-when';
 

ionic/ionic.core.scss

@@ -35,7 +35,7 @@
   "components/menu/menu",
   "components/menu/menu-types",
   "components/modal/modal",
-  "components/nav-bar/nav-bar",
+  "components/navbar/navbar",
   "components/popup/popup",
   "components/slides/slides",
   "components/radio/radio",

ionic/ionic.ios.scss

@@ -13,7 +13,7 @@
   "components/content/modes/ios",
   "components/list/modes/ios",
   "components/text-input/modes/ios",
-  "components/nav-bar/modes/ios",
+  "components/navbar/modes/ios",
   "components/popup/modes/ios",
   "components/checkbox/modes/ios",
   "components/radio/modes/ios",

ionic/ionic.md.scss

@@ -13,7 +13,7 @@
   "components/card/modes/md",
   "components/checkbox/modes/md",
   "components/text-input/modes/md",
-  "components/nav-bar/modes/md",
+  "components/navbar/modes/md",
   "components/popup/modes/md",
   "components/radio/modes/md",
   "components/search-bar/modes/md",

scripts/docs/templates/api_menu_version.template.html

@@ -330,17 +330,17 @@
 
   <!-- NavBar -->
   <li class="menu-section">
-    <a href="{{ page.versionHref }}/api/components/nav-bar/NavBar/" class="api-section">
+    <a href="{{ page.versionHref }}/api/components/navbar/NavBar/" class="api-section">
       NavBar
     </a>
     <ul>
       <li>
-        <a href="{{ page.versionHref }}/api/components/nav-bar/NavBar/">
+        <a href="{{ page.versionHref }}/api/components/navbar/NavBar/">
           NavBar
         </a>
       </li>
       <li>
-        <a href="{{ page.versionHref }}/api/components/nav-bar/NavbarTemplate/">
+        <a href="{{ page.versionHref }}/api/components/navbar/NavbarTemplate/">
           NavbarTemplate
         </a>
       </li>