Merge branch 'search-bar' of github.com:driftyco/ionic2 into search-bar

ionic/components/button/button.ts

@@ -1,4 +1,4 @@
-import {Directive, ElementRef} from 'angular2/angular2';
+import {Directive, ElementRef, Renderer} from 'angular2/angular2';
 
 import {IonicConfig} from '../../config/config';
 
@@ -13,7 +13,8 @@ export class Button {
 
   constructor(
     config: IonicConfig,
-    elementRef: ElementRef
+    elementRef: ElementRef,
+    renderer: Renderer
   ) {
     let element = elementRef.nativeElement;
 
@@ -21,6 +22,12 @@ export class Button {
       element.classList.add('disable-hover');
     }
 
+    // TODO this isn't working in the popup
+    if (element.hasAttribute('type')) {
+      let type = element.getAttribute("type");
+      renderer.setElementAttribute(elementRef, type, "");
+    }
+
     if (element.hasAttribute('ion-item')) {
       // no need to put on these icon classes for an ion-item
       return;

ionic/components/popup/popup.ts

@@ -4,6 +4,7 @@ import {FORM_DIRECTIVES, NgControl, NgControlGroup,
 import {Overlay} from '../overlay/overlay';
 import {Animation} from '../../animations/animation';
 import {Ion} from '../ion';
+import {Button} from '../button/button';
 import * as util from 'ionic/util';
 
 
@@ -99,7 +100,7 @@ export class Popup extends Overlay {
    *   template: '', // String (optional). The html template to place in the popup body.
    *   templateUrl: '', // String (optional). The URL of an html template to place in the popup body.
    *   okText: '', // String (default: 'OK'). The text of the OK button.
-   *   okType: '', // String (default: 'primary'). The type of the OK button.
+   *   okType: '', // String (default: ''). The type of the OK button.
    * }
    * ```
    *
@@ -113,7 +114,7 @@ export class Popup extends Overlay {
     }
     let button = {
       text: opts.okText || 'OK',
-      type: opts.okType || 'primary',
+      type: opts.okType || '',
       onTap: (event, popupRef) => {
         // Allow it to close
         //resolve();
@@ -146,9 +147,9 @@ export class Popup extends Overlay {
    *   template: '', // String (optional). The html template to place in the popup body.
    *   templateUrl: '', // String (optional). The URL of an html template to place in the popup body.
    *   cancelText: '', // String (default: 'Cancel'). The text of the Cancel button.
-   *   cancelType: '', // String (default: 'primary'). The type of the Cancel button.
+   *   cancelType: '', // String (default: ''). The type of the Cancel button.
    *   okText: '', // String (default: 'OK'). The text of the OK button.
-   *   okType: '', // String (default: 'primary'). The type of the OK button.
+   *   okType: '', // String (default: ''). The type of the OK button.
    * }
    * ```
    *
@@ -162,14 +163,14 @@ export class Popup extends Overlay {
     }
     let okButton = {
       text: opts.okText || 'OK',
-      type: opts.okType || 'primary',
+      type: opts.okType || '',
       onTap: (event, popupRef) => {
         // Allow it to close
       }
     }
     let cancelButton = {
       text: opts.cancelText || 'Cancel',
-      type: opts.cancelType || 'primary',
+      type: opts.cancelType || '',
       isCancel: true,
       onTap: (event, popupRef) => {
         // Allow it to close
@@ -202,9 +203,9 @@ export class Popup extends Overlay {
    *   inputType: // String (default: 'text'). The type of input to use.
    *   inputPlaceholder: // String (default: ''). A placeholder to use for the input.
    *   cancelText: '', // String (default: 'Cancel'). The text of the Cancel button.
-   *   cancelType: '', // String (default: 'primary'). The type of the Cancel button.
+   *   cancelType: '', // String (default: ''). The type of the Cancel button.
    *   okText: '', // String (default: 'OK'). The text of the OK button.
-   *   okType: '', // String (default: 'primary'). The type of the OK button.
+   *   okType: '', // String (default: ''). The type of the OK button.
    * }
    * ```
    *
@@ -218,7 +219,7 @@ export class Popup extends Overlay {
     }
     let okButton = {
       text: opts.okText || 'OK',
-      type: opts.okType || 'primary',
+      type: opts.okType || '',
       onTap: (event, popupRef) => {
         // Allow it to close
       }
@@ -226,7 +227,7 @@ export class Popup extends Overlay {
 
     let cancelButton = {
       text: opts.cancelText || 'Cancel',
-      type: opts.cancelType || 'primary',
+      type: opts.cancelType || '',
       isCancel: true,
       onTap: (event, popupRef) => {
         // Allow it to close
@@ -262,10 +263,10 @@ export class Popup extends Overlay {
 
 const OVERLAY_TYPE = 'popup';
 
-
 @Component({
   selector: 'ion-popup-default'
 })
+// TODO add button type to button: [type]="button.type"
 @View({
   template:
   '<backdrop (click)="_cancel($event)" tappable disable-activated></backdrop>' +
@@ -282,7 +283,7 @@ const OVERLAY_TYPE = 'popup';
       '<button *ng-for="#button of buttons" (click)="buttonTapped(button, $event)" [inner-html]="button.text"></button>' +
     '</div>' +
   '</popup-wrapper>',
-  directives: [FORM_DIRECTIVES, NgClass, NgIf, NgFor]
+  directives: [FORM_DIRECTIVES, NgClass, NgIf, NgFor, Button]
 })
 
 class StandardPopup {

ionic/components/popup/test/basic/index.ts

@@ -32,8 +32,7 @@ class E2EApp {
       title: "New Album",
       template: "Enter a name for this new album you're so keen on adding",
       inputPlaceholder: "Title",
-      okText: "Save",
+      okText: "Save"
-      okType: "secondary"
     }).then((name) => {
       this.promptResult = name;
       this.promptOpen = false;

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

@@ -2,14 +2,16 @@
 // iOS Search Bar
 // --------------------------------------------------
 
-$search-bar-ios-background-color:     #c9c9ce !default;
+$search-bar-ios-background-color:         rgba(0, 0, 0, 0.2) !default;
-$search-bar-ios-border-color:         $item-ios-border-color !default;
+$search-bar-ios-border-color:             rgba(0, 0, 0, 0.05) !default;
 $search-bar-ios-padding:                  0 8px !default;
 $search-bar-ios-input-height:             28px !default;
-$search-bar-ios-background-svg:       "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='#939398' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='#939398' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default;
+$search-bar-ios-input-text-color:         #9D9D9D !default;
+$search-bar-ios-input-background-color:   #FFFFFF !default;
+$search-bar-ios-input-icon-color:         #767676 !default;
+$search-bar-ios-input-background-svg:     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='" + $search-bar-ios-input-icon-color + "' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='#939398' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default;
 $search-bar-ios-background-size:          13px 13px !default;
 
-
 .search-bar {
   padding: $search-bar-ios-padding;
   background: $search-bar-ios-background-color;
@@ -22,7 +24,7 @@ $search-bar-ios-background-size:      13px 13px !default;
 
   transform: translateX(calc(50% - 60px));
 
-  @include svg-background-image($search-bar-ios-background-svg);
+  @include svg-background-image($search-bar-ios-input-background-svg);
   background-size: $search-bar-ios-background-size;
   background-repeat: no-repeat;
   position: absolute;
@@ -38,20 +40,26 @@ $search-bar-ios-background-size:      13px 13px !default;
   font-weight: 400;
 
   border-radius: 5px;
-  color: #000;
+  color: $search-bar-ios-input-text-color;
-  background-color: #fff;
+  background-color: $search-bar-ios-input-background-color;
   background-repeat: no-repeat;
   background-position: 8px center;
 
   @include calc(padding-left, "50% - 28px");
 }
 
+
+
 .search-bar-input-container.left-align {
   .search-bar-icon {
     transform: translateX(0);
+    -webkit-transition: all 0.3s cubic-bezier(.25, .45, .05, 1);
+    -moz-transition: all 0.3s cubic-bezier(.25, .45, .05, 1);
   }
   .search-bar-input {
     padding-left: 28px;
+    -webkit-transition: all 0.3s cubic-bezier(.25, .45, .05, 1);
+    -moz-transition: all 0.3s cubic-bezier(.25, .45, .05, 1);
   }
 }
 

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

@@ -26,6 +26,7 @@ import {IonicComponent, IonicView} from '../../config/decorators';
     <div class="search-bar-icon"></div>
     <input (focus)="inputFocused()" (blur)="inputBlurred()"
     (input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder">
+    <div class="search-bar-close-icon"></div>
   </div>
   <button class="search-bar-cancel">{{cancelText}}</button>`
 })

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

@@ -0,0 +1,21 @@
+import {NgControl} from 'angular2/angular2';
+import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/forms';
+
+import {App} from 'ionic/ionic';
+import {SearchPipe} from 'ionic/components/search-bar/search-bar';
+
+@App({
+  templateUrl: 'main.html',
+  bindings: [NgControl, FormBuilder],
+  directives: [FORM_DIRECTIVES]
+})
+class IonicApp {
+  constructor(fb: FormBuilder) {
+    this.form = fb.group({
+      searchQuery: ['', Validators.required]
+    });
+    this.toolbarForm = fb.group({
+      toolbarSearchQuery: ['', Validators.required]
+    })
+  }
+}

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

@@ -0,0 +1,13 @@
+<!-- <ion-toolbar>
+  <form [ng-form-model]="toolbarForm">
+    <ion-search-bar ng-control="toolbarSearchQuery"></ion-search-bar>
+  </form>
+</ion-toolbar> -->
+<ion-content>
+  <form [ng-form-model]="form">
+    <label> Default Search </label>
+    <ion-search-bar ng-control="searchQuery"></ion-search-bar>
+    <label> Placeholder Search </label>
+    <ion-search-bar ng-control="searchQuery" placeholder="Filter"></ion-search-bar>
+  </form>
+</ion-content>

ionic/config/config.ts

@@ -38,8 +38,9 @@ export class IonicConfig {
         this._s.platforms[args[0]] = args[1];
         this._c = {}; // clear cache
         break;
-
     }
+
+    return this;
   }
 
  /**
@@ -80,59 +81,79 @@ export class IonicConfig {
   get(key) {
 
     if (!isDefined(this._c[key])) {
+
       // if the value was already set this will all be skipped
       // if there was no user config then it'll check each of
       // the user config's platforms, which already contains
       // settings from default platform configs
-      this._c[key] = null;
 
       let userPlatformValue = undefined;
-      let platformValue = undefined;
       let userDefaultValue = this._s[key];
-      let modeValue = undefined;
+      let userPlatformModeValue = undefined;
+      let userDefaultModeValue = undefined;
+      let platformValue = undefined;
+      let platformModeValue = undefined;
+      let configObj = null;
 
       if (this._platform) {
         // check the platform settings object for this value
         // loop though each of the active platforms
-        let platformObj = null;
 
         // array of active platforms, which also knows the hierarchy,
         // with the last one the most important
         let activePlatformKeys = this._platform.platforms();
 
         // loop through all of the active platforms we're on
-        for (let i = 0; i < activePlatformKeys.length; i++) {
+        for (let i = 0, l = activePlatformKeys.length; i < l; i++) {
 
           // get user defined platform values
           if (this._s.platforms) {
-            platformObj = this._s.platforms[ activePlatformKeys[i] ];
+            configObj = this._s.platforms[activePlatformKeys[i]];
-            if (platformObj && isDefined(platformObj[key])) {
+            if (configObj) {
-              userPlatformValue = platformObj[key];
+              if (isDefined(configObj[key])) {
+                userPlatformValue = configObj[key];
+              }
+              configObj = IonicConfig.getModeConfig(configObj.mode);
+              if (configObj && isDefined(configObj[key])) {
+                userPlatformModeValue = configObj[key];
+              }
             }
           }
 
           // get default platform's setting
-          platformObj = IonicPlatform.get(activePlatformKeys[i]);
+          configObj = IonicPlatform.get(activePlatformKeys[i]);
-          if (platformObj && platformObj.settings) {
+          if (configObj && configObj.settings) {
 
-            if (isDefined(platformObj.settings[key])) {
+            if (isDefined(configObj.settings[key])) {
               // found a setting for this platform
-              platformValue = platformObj.settings[key];
+              platformValue = configObj.settings[key];
             }
 
-            platformObj = IonicConfig.modeConfig(platformObj.settings.mode);
+            configObj = IonicConfig.getModeConfig(configObj.settings.mode);
-            if (platformObj && isDefined(platformObj[key])) {
+            if (configObj && isDefined(configObj[key])) {
               // found setting for this platform's mode
-              modeValue = platformObj[key];
+              platformModeValue = configObj[key];
             }
 
           }
 
         }
+
+      }
+
+      configObj = IonicConfig.getModeConfig(this._s.mode);
+      if (configObj && isDefined(configObj[key])) {
+        userDefaultModeValue = configObj[key];
       }
 
       // cache the value
-      this._c[key] = isDefined(userPlatformValue) ? userPlatformValue : isDefined(platformValue) ? platformValue : isDefined(userDefaultValue) ? userDefaultValue : isDefined(modeValue) ? modeValue : null;
+      this._c[key] = isDefined(userPlatformValue) ? userPlatformValue :
+                     isDefined(userDefaultValue) ? userDefaultValue :
+                     isDefined(userPlatformModeValue) ? userPlatformModeValue :
+                     isDefined(userDefaultModeValue) ? userDefaultModeValue :
+                     isDefined(platformValue) ? platformValue :
+                     isDefined(platformModeValue) ? platformModeValue :
+                     null;
     }
 
     // return key's value
@@ -155,18 +176,12 @@ export class IonicConfig {
     this._platform = platform;
   }
 
-  static modeConfig(mode, config) {
+  static setModeConfig(mode, config) {
-    const args = arguments;
+    modeConfigs[mode] = config;
-
-    if (args.length === 2) {
-      // modeConfig('ios', {...})
-      modeConfigs[mode] = extend(modeConfigs[mode] || {}, config);
-
-    } else {
-      // modeConfig('ios')
-      return modeConfigs[mode];
   }
 
+  static getModeConfig(mode) {
+    return modeConfigs[mode] || null;
   }
 
 }

ionic/config/modes.ts

@@ -3,7 +3,7 @@ import {IonicConfig} from './config';
 
 
 // iOS Mode Settings
-IonicConfig.modeConfig('ios', {
+IonicConfig.setModeConfig('ios', {
 
   actionSheetEnter: 'action-sheet-slide-in',
   actionSheetLeave: 'action-sheet-slide-out',
@@ -27,7 +27,7 @@ IonicConfig.modeConfig('ios', {
 
 
 // Material Design Mode Settings
-IonicConfig.modeConfig('md', {
+IonicConfig.setModeConfig('md', {
 
   actionSheetEnter: 'action-sheet-md-slide-in',
   actionSheetLeave: 'action-sheet-md-slide-out',

ionic/config/test/config.spec.ts

@@ -2,6 +2,70 @@ import {IonicConfig, IonicPlatform} from 'ionic/ionic';
 
 export function run() {
 
+  it('should override mode settings', () => {
+    let config = new IonicConfig({
+      mode: 'md'
+    });
+    let platform = new IonicPlatform(['ios']);
+    config.setPlatform(platform);
+
+    expect(config.get('mode')).toEqual('md');
+    expect(config.get('tabBarPlacement')).toEqual('top');
+  });
+
+  it('should override mode settings from platforms setting', () => {
+    let config = new IonicConfig({
+      platforms: {
+        ios: {
+          mode: 'md'
+        }
+      }
+    });
+    let platform = new IonicPlatform(['ios']);
+    config.setPlatform(platform);
+
+    expect(config.get('mode')).toEqual('md');
+    expect(config.get('tabBarPlacement')).toEqual('top');
+  });
+
+  it('should override mode platform', () => {
+    let config = new IonicConfig({
+      mode: 'modeA',
+      platforms: {
+        mobile: {
+          mode: 'modeB'
+        },
+        ios: {
+          mode: 'modeC'
+        }
+      }
+    });
+    let platform = new IonicPlatform(['mobile']);
+    config.setPlatform(platform);
+
+    expect(config.get('mode')).toEqual('modeB');
+  });
+
+  it('should override mode', () => {
+    let config = new IonicConfig({
+      mode: 'modeA'
+    });
+    let platform = new IonicPlatform(['core']);
+    config.setPlatform(platform);
+
+    expect(config.get('mode')).toEqual('modeA');
+  });
+
+  it('should get user settings after user platform settings', () => {
+    let config = new IonicConfig({
+      hoverCSS: true
+    });
+    let platform = new IonicPlatform(['ios']);
+    config.setPlatform(platform);
+
+    expect(config.get('hoverCSS')).toEqual(true);
+  });
+
   it('should get ios mode for core platform', () => {
     let config = new IonicConfig();
     let platform = new IonicPlatform(['core']);