list updates

src/components/app/ionic.scss

@@ -34,8 +34,7 @@
   "../radio/radio",
   "../switch/switch",
   "../tabs/tabs",
-  "../toolbar/toolbar",
+  "../toolbar/toolbar";
-  "../view/view";
 
 
 // Android Components
@@ -48,6 +47,7 @@
 // iOS Components
 @import
   "../checkbox/extensions/ios",
+  "../content/extensions/ios",
   "../list/extensions/ios",
   "../item/extensions/ios",
   "../radio/extensions/ios",

src/components/checkbox/checkbox.js

@@ -31,13 +31,13 @@ export let CheckboxConfig = new ComponentConfig('checkbox')
 export class Checkbox {
   constructor(
     configFactory: CheckboxConfig,
-    element: NgElement,
+    @NgElement() ngElement: NgElement,
     @PropertySetter('attr.role') setAriaRole: Function,
     @PropertySetter('attr.aria-checked') setAriaChecked: Function,
     @PropertySetter('attr.aria-invalid') setAriaInvalid: Function,
     @PropertySetter('attr.aria-disabled') setAriaDisabled: Function
   ) {
-    this.domElement = element.domElement
+    this.domElement = ngElement.domElement
     this.domElement.classList.add('item')
     this.config = configFactory.create(this)
 

src/components/checkbox/test/basic/main.html

@@ -1,14 +1,12 @@
 
-<div class="pane">
+<ion-view view-title="Checkboxes">
 
-  <div class="pane-container">
+  <ion-content>
 
-    <div class="content" style="background: #efeff4">
+    <div class="list-header">Some Checkboxes</div>
 
     <ion-list>
 
-        <ion-list-header>Some Checkboxes</ion-list-header>
-
       <ion-checkbox [checked]="true">
         Apples
       </ion-checkbox>
@@ -23,8 +21,6 @@
 
     </ion-list>
 
-    </div>
+  </ion-content>
 
-  </div>
+</ion-view>
-
-</div>

src/components/content/content.scss

@@ -2,7 +2,9 @@
 // Content
 // --------------------------------------------------
 
+$content-background-color:         #fff !default;
 
-.content {
+
-  background-color: white;
+.pane-container {
+  background-color: $content-background-color;
 }

src/components/content/extensions/ios.scss

@@ -0,0 +1,10 @@
+
+// iOS Content
+// --------------------------------------------------
+
+$content-ios-background-color:        #efeff4 !default;
+
+
+.view-ios .pane-container {
+  background-color: $content-ios-background-color;
+}

src/components/item/extensions/ios.scss

@@ -2,15 +2,21 @@
 // iOS Item
 // --------------------------------------------------
 
+$item-ios-background-color:      #fff !default;
 $item-ios-min-height:            44px !default;
 $item-ios-padding-left:          15px !default;
 $item-ios-accessory-color:       #8e8e93 !default;
 $item-ios-border-color:          $list-ios-border-color !default;
 
 
-.list-ios {
+.view-ios {
+
+  .list-header {
+    margin-left: $item-ios-padding-left;
+  }
 
   .item {
+    background: $item-ios-background-color;
     min-height: $item-ios-min-height;
     padding-left: $item-ios-padding-left;
   }

src/components/item/item.scss

@@ -5,18 +5,6 @@
 $item-min-height:         44px !default;
 
 
-//  <li class="item">
-//    <div class="item-content">
-//      <div class="item-title">
-//        Item Title
-//      </div>
-//      <div class="item-accessory">
-//        Badge
-//      </div>
-//    </div>
-//  </li>
-
-
 .item {
   position: relative;
 

src/components/list/extensions/ios.scss

@@ -9,19 +9,14 @@ $list-ios-header-margin:         35px 15px 10px 15px !default;
 $list-ios-header-font-size:      1.4rem !default;
 $list-ios-header-color:          #6d6d72 !default;
 
-$list-ios-footer-margin:         10px 0 35px 0 !default;
 $list-ios-footer-padding:        0 15px !default;
 $list-ios-footer-font-size:      1.4rem !default;
 $list-ios-footer-color:          #8f8f94 !default;
 
 
-.list-ios {
+.view-ios {
 
-  .list-content {
+  .list:before {
-    background: $list-ios-background-color;
-  }
-
-  .list-content:before {
     position: absolute;
     top: 0;
     right: auto;
@@ -39,7 +34,7 @@ $list-ios-footer-color:          #8f8f94 !default;
     content: '';
   }
 
-  .list-content:after {
+  .list:after {
     position: absolute;
     top: auto;
     right: auto;
@@ -72,7 +67,6 @@ $list-ios-footer-color:          #8f8f94 !default;
   }
 
   .list-footer {
-    margin: $list-ios-footer-margin;
     padding: $list-ios-footer-padding;
     font-size: $list-ios-footer-font-size;
     color: $list-ios-footer-color;

src/components/list/list.js

@@ -1,31 +1,21 @@
 import {NgElement, Component, Template} from 'angular2/angular2'
 import {ComponentConfig} from 'ionic2/config/component-config';
 
-export let ListConfig = new ComponentConfig('list');
+export let ListConfig = new ComponentConfig('list')
 
 @Component({
   selector: 'ion-list',
   services: [ListConfig]
 })
 @Template({
-  inline: `
+  inline: `<content></content>`
-    <header class="list-header">
-      <content select="ion-list-header"></content>
-    </header>
-    <div class="list-content">
-      <content></content>
-    </div>
-    <footer class="list-footer">
-      <content select="ion-list-footer"></content>
-    </footer>
-  `
 })
 export class List {
   constructor(
     configFactory: ListConfig,
-    element: NgElement
+    ngElement: NgElement
   ) {
-    this.domElement = element.domElement;
+    this.domElement = ngElement.domElement;
     configFactory.create(this);
   }
 }

src/components/list/list.scss

@@ -2,50 +2,29 @@
 // List
 // --------------------------------------------------
 
-$list-margin: 35px             0 !default;
-$list-content-margin:          10px 0 !default;
-
-
-//  <div class="list">
-//    <div class="list-header">
-//      List Header
-//    </div>
-//    <ul class="list-content">
-//      ...
-//    </ul>
-//    <div class="list-footer">
-//      List Footer
-//    </div>
-//  </div>
-
-
-.list {
-  position: relative;
-  display: block;
-  margin: $list-margin;
-  width: 100%;
-}
 
 .list-header {
   position: relative;
-
+  margin-top: 35px;
+  margin-bottom: 10px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-.list-header + .list-content {
+.list {
-  margin: $list-content-margin;
-}
-
-.list-content {
   position: relative;
-  margin: 0;
+  display: block;
+  margin: 35px 0;
   padding: 0;
+  width: 100%;
   list-style-type: none;
 }
 
 .list-footer {
-  margin: 10px 0;
+  margin: -25px 0 10px;
 }
 
+.list-header + .list {
+  margin-top: 0;
+}

src/components/list/test/basic/main.html

@@ -1,3 +1,84 @@
+
+<ion-view view-title="List">
+
+  <ion-content>
+
+
+    <div class="list-header">
+      List Header
+    </div>
+
     <ion-list>
-  <ion-item>Hello</ion-item>
+
+      <div class="item">
+        <div class="item-content">
+          <div class="item-title">
+            Item
+          </div>
+        </div>
+      </div>
+
     </ion-list>
+
+    <div class="list-footer">
+      List Footer
+    </div>
+
+
+    <div class="list-header">
+      List Header
+    </div>
+
+    <ion-list>
+
+      <div class="item">
+        <div class="item-content">
+          <div class="item-title">
+            Item
+          </div>
+        </div>
+      </div>
+
+    </ion-list>
+
+
+    <div class="list-header">
+      List Header
+    </div>
+
+    <ion-list>
+
+      <div class="item">
+        <div class="item-content">
+          <div class="item-title">
+            Item
+          </div>
+        </div>
+      </div>
+
+    </ion-list>
+
+    <ion-list>
+
+      <div class="item">
+        <div class="item-content">
+          <div class="item-title">
+            Item
+          </div>
+        </div>
+      </div>
+
+      <div class="item">
+        <div class="item-content">
+          <div class="item-title">
+            Item
+          </div>
+        </div>
+      </div>
+
+    </ion-list>
+
+
+  </ion-content>
+
+</ion-view>

src/components/list/test/basic/main.js

@@ -1,12 +1,14 @@
 import {bootstrap} from 'angular2/core';
 import {Component, Template} from 'angular2/angular2';
+import {View} from 'ionic2/components/view/view';
+import {Content} from 'ionic2/components/content/content';
 import {List} from 'ionic2/components/list/list';
-import {Item} from 'ionic2/components/item/item';
+
 
 @Component({ selector: '[ion-app]' })
 @Template({
   url: 'main.html',
-  directives: [List, Item]
+  directives: [View, Content, List]
 })
 class IonicApp {
   constructor() {

src/components/radio/radio-group.js

@@ -8,17 +8,7 @@ export let RadioConfig = new ComponentConfig('radio');
   services: [RadioConfig]
 })
 @Template({
-  inline: `
+  inline: `<content></content>`
-    <header class="list-header">
-      <content select="ion-list-header"></content>
-    </header>
-    <div class="list-content radio-group radio-group-ios">
-      <content></content>
-    </div>
-    <footer class="list-footer">
-      <content select="ion-list-footer"></content>
-    </footer>
-  `
 })
 export class RadioGroup {
   constructor(
@@ -27,7 +17,7 @@ export class RadioGroup {
   ) {
     this.domElement = element.domElement
     this.domElement.classList.add('list')
-    this.domElement.classList.add('list-ios')
+    this.domElement.classList.add('radio-group')
     configFactory.create(this)
   }
 }

src/components/radio/test/basic/main.html

@@ -1,16 +1,14 @@
 
-<div class="pane">
+<ion-view view-title="Radio Buttons">
 
-  <div class="pane-container">
+  <ion-content>
 
-    <div class="content" style="background: #efeff4">
+    <div class="list-header">
+      Radio Group
+    </div>
 
     <ion-radio-group>
 
-        <ion-list-header>
-          Radio Group
-        </ion-list-header>
-
       <ion-radio>
         Star Wars
       </ion-radio>
@@ -21,8 +19,6 @@
 
     </ion-radio-group>
 
-    </div>
+  </ion-content>
 
-  </div>
+</ion-view>
-
-</div>

src/components/switch/test/basic/main.html

@@ -1,14 +1,12 @@
 
-<div class="pane">
+<ion-view view-title="Switches">
 
-  <div class="pane-container">
+  <ion-content>
 
-    <div class="content" style="background: #efeff4">
+    <div class="list-header">Some Switches</div>
 
     <ion-list>
 
-        <ion-list-header>Some Switches</ion-list-header>
-
       <ion-switch [checked]="true">
         Apples
       </ion-switch>
@@ -23,8 +21,6 @@
 
     </ion-list>
 
-    </div>
+  </ion-content>
 
-  </div>
+</ion-view>
-
-</div>

src/components/toolbar/extensions/ios.scss

@@ -46,7 +46,7 @@ $toolbar-ios-button-background-color:       transparent !default;
   }
 
   .bar-inner-title {
-    opacity: 0;
+    opacity: 0; // JS will set to 1 after adjusting alignment
   }
 
   .bar-secondary-item {

src/components/toolbar/test/html-title/e2e.js

@@ -0,0 +1 @@
+

src/components/toolbar/test/html-title/main.html

@@ -0,0 +1,18 @@
+
+<ion-view>
+
+  <ion-view-title>
+    <span style="color:red">Awesome</span>
+    <strong style="color:green">HTML</strong>
+    <em style="color:purple">Title</em>
+  </ion-view-title>
+
+  <ion-nav-items side="primary">
+    <button class="button">p1</button>
+  </ion-nav-items>
+
+  <ion-nav-items side="secondary">
+    <button class="button">s1</button>
+  </ion-nav-items>
+
+</ion-view>

src/components/toolbar/test/html-title/main.js

@@ -1,12 +1,11 @@
 import {bootstrap} from 'angular2/core';
 import {Component, Template} from 'angular2/angular2';
 import {View} from 'ionic2/components/view/view';
-import {Content} from 'ionic2/components/content/content';
 
 @Component({ selector: '[ion-app]' })
 @Template({
   url: 'main.html',
-  directives: [View, Content]
+  directives: [View]
 })
 class IonicApp {
   constructor() {

src/components/toolbar/test/long-title/e2e.js

@@ -0,0 +1 @@
+

src/components/toolbar/test/long-title/main.html

@@ -1,9 +1,5 @@
 
-<ion-view view-title="!attr Title!">
+<ion-view view-title="What we have here is an extremely long title that probably would not fit inside of a standard title block that is on top of the view and things.">
-
-  <ion-view-title>
-    !ele Title!
-  </ion-view-title>
 
   <ion-nav-items side="primary">
     <button class="button">p1</button>
@@ -13,11 +9,6 @@
 
   <ion-nav-items side="secondary">
     <button class="button">s1</button>
-    <button class="button">s2</button>
   </ion-nav-items>
 
-  <ion-content>
-    CONTENT!!
-  </ion-content>
-
 </ion-view>

src/components/toolbar/test/long-title/main.js

@@ -0,0 +1,16 @@
+import {bootstrap} from 'angular2/core';
+import {Component, Template} from 'angular2/angular2';
+import {View} from 'ionic2/components/view/view';
+
+@Component({ selector: '[ion-app]' })
+@Template({
+  url: 'main.html',
+  directives: [View]
+})
+class IonicApp {
+  constructor() {
+    console.log('IonicApp Start')
+  }
+}
+
+bootstrap(IonicApp)

src/components/toolbar/test/lopsided-buttons/e2e.js

@@ -0,0 +1 @@
+

src/components/toolbar/test/lopsided-buttons/main.html

@@ -0,0 +1,14 @@
+
+<ion-view view-title="Attribute Title">
+
+  <ion-nav-items side="primary">
+    <button class="button">p1</button>
+    <button class="button">p2</button>
+    <button class="button">p3</button>
+  </ion-nav-items>
+
+  <ion-nav-items side="secondary">
+    <button class="button">s1</button>
+  </ion-nav-items>
+
+</ion-view>

src/components/toolbar/test/lopsided-buttons/main.js

@@ -0,0 +1,16 @@
+import {bootstrap} from 'angular2/core';
+import {Component, Template} from 'angular2/angular2';
+import {View} from 'ionic2/components/view/view';
+
+@Component({ selector: '[ion-app]' })
+@Template({
+  url: 'main.html',
+  directives: [View]
+})
+class IonicApp {
+  constructor() {
+    console.log('IonicApp Start')
+  }
+}
+
+bootstrap(IonicApp)

src/components/view/view.js

@@ -1,11 +1,15 @@
 import {NgElement, Component, Template, Parent} from 'angular2/angular2'
 import {Toolbar} from 'ionic2/components/toolbar/toolbar'
+import {ComponentConfig} from 'ionic2/config/component-config'
+
+export let ViewConfig = new ComponentConfig('view')
 
 @Component({
   selector: 'ion-view',
   bind: {
     title: 'view-title'
-  }
+  },
+  services: [ViewConfig]
 })
 @Template({
   inline: `
@@ -20,8 +24,12 @@ import {Toolbar} from 'ionic2/components/toolbar/toolbar'
   directives: [Toolbar]
 })
 export class View {
-  constructor(@NgElement() ele:NgElement) {
+  constructor(
-    ele.domElement.classList.add('pane')
+    configFactory: ViewConfig,
-    console.log('View constructed', ele.domElement);
+    @NgElement() ngElement:NgElement
+  ) {
+    this.domElement = ngElement.domElement
+    this.domElement.classList.add('pane')
+    this.config = configFactory.create(this)
   }
 }

src/components/view/view.scss

@@ -1,3 +0,0 @@
-.pane-container {
-  flex: 1;
-}