Platform add body classes

ionic/components.js

@@ -6,7 +6,7 @@ export * from 'ionic/components/button/button'
 // export * from 'ionic/components/checkbox/checkbox'
 export * from 'ionic/components/content/content'
 // export * from 'ionic/components/icon/icon'
-// export * from 'ionic/components/item/item'
+export * from 'ionic/components/item/item'
 export * from 'ionic/components/form/form'
 export * from 'ionic/components/input/input'
 // export * from 'ionic/components/layout/layout'

ionic/components/card/extensions/ios.scss

@@ -8,7 +8,7 @@ $card-ios-border-radius:             2px !default;
 $card-ios-font-size:                 1.4rem !default;
 $card-ios-item-content-padding:      15px !default;
 
-.view-ios .card {
+.platform-ios .card {
   background: $card-ios-background-color;
   box-shadow: $card-ios-box-shadow;
   border-radius: $card-ios-border-radius;
@@ -37,4 +37,3 @@ $card-ios-item-content-padding:      15px !default;
   }
 
 }
-

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

@@ -1,9 +1,11 @@
-<form (^submit)="doSubmit($event)" [control-group]="form">
-  <ion-input>
-    <input control="email" type="email" placeholder="Your email">
-  </ion-input>
-  <ion-input>
-    <input control="password" type="password" placeholder="Your password">
-  </ion-input>
-  <button ion-button stable block type="submit">Submit</button>
-</form>
+<ion-content class="padding">
+  <form (^submit)="doSubmit($event)" [control-group]="form" ion-list>
+    <ion-input ion-item>
+      <input control="email" type="email" placeholder="Your email">
+    </ion-input ion-item>
+    <ion-input>
+      <input control="password" type="password" placeholder="Your password">
+    </ion-input ion-item>
+    <button ion-button stable block type="submit">Submit</button>
+  </form>
+</ion-content>

ionic/components/form/test/basic/main.js

@@ -1,11 +1,11 @@
 import {Component, View, bootstrap} from 'angular2/angular2'
 import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
-import {Button, Form, Input, Content} from 'ionic/ionic';
+import {Button, Form, Item, Input, Content} from 'ionic/ionic';
 
 @Component({ selector: '[ion-app]' })
 @View({
   templateUrl: 'main.html',
-  directives: [FormDirectives, Button, Input, Content]
+  directives: [FormDirectives, Item, Button, Input, Content]
 })
 class IonicApp {
   constructor() {

ionic/components/item/extensions/ios.scss

@@ -9,7 +9,7 @@ $item-ios-accessory-color:       #8e8e93 !default;
 $item-ios-border-color:          $list-ios-border-color !default;
 
 
-.view-ios {
+.platform-ios {
 
   .list-header {
     margin-left: $item-ios-padding-left;

ionic/components/item/item.js

@@ -1,8 +1,12 @@
 import {NgElement, Component, View} from 'angular2/angular2'
+
+import {dom} from 'ionic/util'
 import {IonicComponent} from 'ionic/config/component'
+
 import {
   ItemPrimaryOptions, ItemSecondaryOptions
 } from 'ionic/components/item/item-options'
+
 import {
   ItemPrimarySwipeButtons, ItemSecondarySwipeButtons
 } from 'ionic/components/item/item-swipe-buttons'
@@ -57,7 +61,6 @@ function clsSetter(el, name) {
   return (isSet) => el.classList[isSet?'add':'remove'](name)
 }
 
-import {dom} from 'ionic/util'
 
 class Slideable {
   constructor(slideElement: Element) {

ionic/components/list/extensions/ios.scss

@@ -14,7 +14,7 @@ $list-ios-footer-font-size:      1.4rem !default;
 $list-ios-footer-color:          #8f8f94 !default;
 
 
-.view-ios {
+.platform-ios {
 
   .list {
     @include hairline(top, $list-ios-border-color, $z-index-list-border);

ionic/platform/platform.js

@@ -29,6 +29,8 @@ class PlatformController {
 
   set(platform) {
     activePlatform = platform;
+
+    this._applyBodyClasses();
   }
 
   setDefault(platform) {
@@ -49,6 +51,16 @@ class PlatformController {
     }
     return null;
   }
+
+  _applyBodyClasses() {
+    if(!activePlatform) {
+      return;
+    }
+
+    util.dom.raf(() => {
+      document.body.classList.add('platform-' + activePlatform.name);
+    });
+  }
 }
 
 export let Platform = new PlatformController();