Merge branch 'picker' into 2.0

ionic/components.ios.scss

@@ -21,6 +21,7 @@
   "components/loading/loading.ios",
   "components/menu/menu.ios",
   "components/modal/modal.ios",
+  "components/picker/picker.ios",
   "components/radio/radio.ios",
   "components/searchbar/searchbar.ios",
   "components/segment/segment.ios",

ionic/components.md.scss

@@ -21,6 +21,7 @@
   "components/loading/loading.md",
   "components/menu/menu.md",
   "components/modal/modal.md",
+  "components/picker/picker.md",
   "components/radio/radio.md",
   "components/searchbar/searchbar.md",
   "components/segment/segment.md",

ionic/components.ts

@@ -1,51 +1,50 @@
-export * from './components/app/app'
-export * from './components/app/id'
-
-export * from './components/action-sheet/action-sheet'
-export * from './components/alert/alert'
-export * from './components/badge/badge'
-export * from './components/button/button'
-export * from './components/checkbox/checkbox'
-export * from './components/content/content'
-export * from './components/icon/icon'
-export * from './components/img/img'
-export * from './components/infinite-scroll/infinite-scroll'
-export * from './components/infinite-scroll/infinite-scroll-content'
-export * from './components/input/input'
-export * from './components/item/item'
-export * from './components/item/item-sliding'
-export * from './components/label/label'
-export * from './components/list/list'
-export * from './components/loading/loading'
-export * from './components/menu/menu-controller'
-export * from './components/menu/menu'
-export * from './components/menu/menu-types'
-export * from './components/menu/menu-toggle'
-export * from './components/menu/menu-close'
-export * from './components/modal/modal'
-export * from './components/nav/nav'
-export * from './components/nav/nav-controller'
-export * from './components/nav/view-controller'
-export * from './components/nav/nav-params'
-export * from './components/nav/nav-push'
-export * from './components/nav/nav-router'
-export * from './components/navbar/navbar'
-export * from './components/option/option'
-export * from './components/radio/radio-button'
-export * from './components/radio/radio-group'
-export * from './components/refresher/refresher'
-export * from './components/refresher/refresher-content'
-export * from './components/scroll/scroll'
-export * from './components/searchbar/searchbar'
-export * from './components/segment/segment'
-export * from './components/select/select'
-export * from './components/show-hide-when/show-hide-when'
-export * from './components/slides/slides'
-export * from './components/spinner/spinner'
-export * from './components/tabs/tabs'
-export * from './components/tabs/tab'
-export * from './components/tap-click/tap-click'
-export * from './components/toggle/toggle'
-export * from './components/toast/toast'
-export * from './components/toolbar/toolbar'
-export * from './components/virtual-scroll/virtual-scroll'
+export * from './components/app/app';
+export * from './components/app/id';
+export * from './components/action-sheet/action-sheet';
+export * from './components/alert/alert';
+export * from './components/badge/badge';
+export * from './components/button/button';
+export * from './components/checkbox/checkbox';
+export * from './components/content/content';
+export * from './components/icon/icon';
+export * from './components/img/img';
+export * from './components/infinite-scroll/infinite-scroll';
+export * from './components/infinite-scroll/infinite-scroll-content';
+export * from './components/input/input';
+export * from './components/item/item';
+export * from './components/item/item-sliding';
+export * from './components/label/label';
+export * from './components/list/list';
+export * from './components/loading/loading';
+export * from './components/menu/menu-controller';
+export * from './components/menu/menu';
+export * from './components/menu/menu-types';
+export * from './components/menu/menu-toggle';
+export * from './components/menu/menu-close';
+export * from './components/modal/modal';
+export * from './components/nav/nav';
+export * from './components/nav/nav-controller';
+export * from './components/nav/view-controller';
+export * from './components/nav/nav-params';
+export * from './components/nav/nav-push';
+export * from './components/nav/nav-router';
+export * from './components/navbar/navbar';
+export * from './components/option/option';
+export * from './components/picker/picker';
+export * from './components/radio/radio-button';
+export * from './components/radio/radio-group';
+export * from './components/refresher/refresher';
+export * from './components/refresher/refresher-content';
+export * from './components/scroll/scroll';
+export * from './components/searchbar/searchbar';
+export * from './components/segment/segment';
+export * from './components/select/select';
+export * from './components/show-hide-when/show-hide-when';
+export * from './components/slides/slides';
+export * from './components/spinner/spinner';
+export * from './components/tabs/tabs';
+export * from './components/tabs/tab';
+export * from './components/tap-click/tap-click';
+export * from './components/toggle/toggle';
+export * from './components/toolbar/toolbar';
+export * from './components/virtual-scroll/virtual-scroll';

ionic/components.wp.scss

@@ -21,6 +21,7 @@
   "components/loading/loading.wp",
   "components/menu/menu.wp",
   "components/modal/modal.wp",
+  "components/picker/picker.wp",
   "components/radio/radio.wp",
   "components/searchbar/searchbar.wp",
   "components/segment/segment.wp",

ionic/components/content/content.ts

@@ -4,7 +4,7 @@ import {Ion} from '../ion';
 import {IonicApp} from '../app/app';
 import {Config} from '../../config/config';
 import {Keyboard} from '../../util/keyboard';
-import {raf, nativeTimeout, transitionEnd}  from '../../util/dom';
+import {nativeRaf, nativeTimeout, transitionEnd}  from '../../util/dom';
 import {ViewController} from '../nav/view-controller';
 import {ScrollView} from '../../util/scroll-view';
 
@@ -198,8 +198,8 @@ export class Content extends Ion {
 
       lastScrollTop = currentScrollTop;
 
-      raf(() => {
-        raf(next);
+      nativeRaf(() => {
+        nativeRaf(next);
       });
     }
 

ionic/components/img/img.ts

@@ -1,6 +1,6 @@
 import {Component, Input, ElementRef, ChangeDetectionStrategy, ViewEncapsulation, NgZone} from 'angular2/core';
 
-import {raf} from '../../util/dom';
+import {nativeRaf} from '../../util/dom';
 import {isPresent} from '../../util/util';
 import {Platform} from '../../platform/platform';
 
@@ -62,7 +62,7 @@ export class Img {
           img.addEventListener('load', () => {
             if (img.src === this._normalizeSrc) {
               this._elementRef.nativeElement.appendChild(img);
-              raf(() => {
+              nativeRaf(() => {
                 this._update();
               });
             }

ionic/components/input/native-input.ts

@@ -2,7 +2,7 @@ import {Directive, Attribute, ElementRef, Renderer, Input, Output, EventEmitter,
 import {NgControl} from 'angular2/common';
 
 import {Config} from '../../config/config';
-import {CSS, hasFocus, raf}  from '../../util/dom';
+import {CSS, hasFocus}  from '../../util/dom';
 
 
 /**

ionic/components/item/item-sliding-gesture.ts

@@ -2,7 +2,7 @@ import {DIRECTION_RIGHT} from '../../gestures/hammer';
 import {DragGesture} from '../../gestures/drag-gesture';
 import {List} from '../list/list';
 
-import {CSS, raf, closest} from '../../util/dom';
+import {CSS, nativeRaf, closest} from '../../util/dom';
 
 
 export class ItemSlidingGesture extends DragGesture {
@@ -108,7 +108,7 @@ export class ItemSlidingGesture extends DragGesture {
       itemData.hasMouseOut = true;
     }
 
-    raf(() => {
+    nativeRaf(() => {
       if (!this.dragEnded && !this.preventDrag) {
         isItemActive(itemContainerEle, true);
         this.open(itemContainerEle, newX, false);
@@ -146,7 +146,7 @@ export class ItemSlidingGesture extends DragGesture {
     itemContainerEle.removeEventListener('mouseout', this.onMouseOut);
     itemData.hasMouseOut = false;
 
-    raf(() => {
+    nativeRaf(() => {
       this.open(itemContainerEle, restingPoint, true);
     });
   }

ionic/components/nav/nav-controller.ts

@@ -8,7 +8,6 @@ import {Keyboard} from '../../util/keyboard';
 import {NavParams} from './nav-params';
 import {pascalCaseToDashCase, isBlank} from '../../util/util';
 import {Portal} from './nav-portal';
-import {raf} from '../../util/dom';
 import {SwipeBackGesture} from './swipe-back';
 import {Transition} from '../../transitions/transition';
 import {ViewController} from './view-controller';

ionic/components/picker/picker.ios.scss

@@ -0,0 +1,155 @@
+@import "../../globals.ios";
+@import "./picker";
+
+// iOS Picker
+// --------------------------------------------------
+
+$picker-ios-height:                            260px !default;
+$picker-ios-border-color:                      $list-ios-border-color !default;
+$picker-ios-background-color:                  $list-ios-background-color !default;
+
+$picker-ios-toolbar-height:                    44px !default;
+$picker-ios-toolbar-background-color:          $picker-ios-background-color !default;
+
+$picker-ios-button-height:                     $picker-ios-toolbar-height !default;
+$picker-ios-button-text-color:                 $link-ios-color !default;
+$picker-ios-button-background-color:           transparent !default;
+
+$picker-ios-column-padding:                    0 12px !default;
+
+$picker-ios-option-padding:                    0 10px !default;
+$picker-ios-option-text-color:                 $list-ios-text-color !default;
+$picker-ios-option-font-size:                  22px !default;
+$picker-ios-option-height:                     42px !default;
+$picker-ios-option-offset-y:                   (($picker-ios-height - $picker-ios-toolbar-height) / 2) - ($picker-ios-option-height / 2) - 10 !default;
+
+$picker-highlight-opacity:                     .8 !default;
+
+
+.picker-wrapper {
+  height: $picker-ios-height;
+
+  border-top: 1px solid $picker-ios-border-color;
+
+  background: $picker-ios-background-color;
+}
+
+.picker-toolbar {
+  display: flex;
+
+  height: $picker-ios-toolbar-height;
+
+  border-bottom: 1px solid $picker-ios-border-color;
+
+  background: $picker-ios-toolbar-background-color;
+}
+
+.hairlines .picker-wrapper,
+.hairlines .picker-toolbar {
+  border-width: $hairlines-width;
+}
+
+.picker-toolbar-button {
+  flex: 1;
+
+  text-align: right;
+}
+
+.picker-toolbar-cancel {
+  font-weight: normal;
+
+  text-align: left;
+}
+
+.picker-button,
+.picker-button.activated {
+  margin: 0;
+
+  height: $picker-ios-button-height;
+
+  color: $picker-ios-button-text-color;
+  background: $picker-ios-button-background-color;
+}
+
+.picker-columns {
+  height: $picker-ios-height - $picker-ios-toolbar-height;
+
+  perspective: 1800px;
+}
+
+.picker-col {
+  padding: $picker-ios-column-padding;
+
+  transform-style: preserve-3d;
+}
+
+.picker-prefix,
+.picker-suffix,
+.picker-opts {
+  top: $picker-ios-option-offset-y;
+
+  font-size: $picker-ios-option-font-size;
+  line-height: $picker-ios-option-height;
+  color: $picker-ios-option-text-color;
+
+  transform-style: preserve-3d;
+
+  pointer-events: none;
+}
+
+.picker-opt {
+  margin: 0;
+  padding: $picker-ios-option-padding;
+
+  width: calc(100% - 24px);
+
+  font-size: $picker-ios-option-font-size;
+  line-height: $picker-ios-option-height;
+
+  background: transparent;
+  transform-origin: center center;
+  transform-style: preserve-3d;
+  transition-timing-function: ease-out;
+
+  backface-visibility: hidden;
+
+  pointer-events: auto;
+}
+
+.picker-above-highlight {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  display: block;
+
+  width: 100%;
+  height: $picker-ios-option-offset-y + 4px;
+
+  border-bottom: 1px solid $picker-ios-border-color;
+
+  background: linear-gradient(to bottom,
+                            rgba($picker-ios-background-color, 1) 20%,
+                            rgba($picker-ios-background-color, .7) 100%);
+
+  transform: translate3d(0, 0, 90px);
+}
+
+.picker-below-highlight {
+  position: absolute;
+  top: $picker-ios-option-offset-y + $picker-ios-option-height - 4;
+  left: 0;
+  z-index: 11;
+  display: block;
+
+  width: 100%;
+  height: $picker-ios-option-offset-y + $picker-ios-option-height;
+
+  border-top: 1px solid $picker-ios-border-color;
+
+  background: linear-gradient(to top,
+                           rgba($picker-ios-background-color, 1) 30%,
+                           rgba($picker-ios-background-color, .7) 100%);
+
+  transform: translate3d(0, 0, 90px);
+}