refactor(structure): allow content to scroll under headers/footers

src/components/toolbar/toolbar-item.ts

@@ -0,0 +1,33 @@
+import {Directive, ElementRef, Optional, forwardRef, Inject, ContentChildren} from '@angular/core';
+
+import {Button} from '../button/button';
+import {Navbar} from '../navbar/navbar';
+import {Toolbar} from './toolbar';
+
+
+/**
+ * @private
+ */
+@Directive({
+  selector: 'ion-buttons,[menuToggle]'
+})
+export class ToolbarItem {
+  inToolbar: boolean;
+
+  constructor(
+    elementRef: ElementRef,
+    @Optional() toolbar: Toolbar,
+    @Optional() @Inject(forwardRef(() => Navbar)) navbar: Navbar
+  ) {
+    toolbar && toolbar.addItemRef(elementRef);
+    navbar && navbar.addItemRef(elementRef);
+    this.inToolbar = !!(toolbar || navbar);
+  }
+
+  @ContentChildren(Button)
+  set _buttons(buttons: any) {
+    if (this.inToolbar) {
+      Button.setRoles(buttons, 'bar-button');
+    }
+  }
+}

src/components/toolbar/toolbar-title.ts

@@ -0,0 +1,65 @@
+import {Component, ElementRef, Optional, forwardRef, Inject, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
+
+import {Ion} from '../ion';
+import {Navbar} from '../navbar/navbar';
+import {Toolbar} from './toolbar';
+
+
+/**
+ * @name Title
+ * @description
+ * `ion-title` is a component that sets the title of the `Toolbar` or `Navbar`
+ *
+ * @usage
+ *
+ * ```html
+ * <ion-header>
+ *   <ion-navbar>
+ *     <ion-title>Tab 1</ion-title>
+ *   </ion-navbar>
+ * </ion-header>
+ * ```
+ *
+ * Or to create a navbar with a toolbar as a subheader:
+ *
+ * ```html
+ * <ion-header>
+ *   <ion-navbar>
+ *     <ion-title>Tab 1</ion-title>
+ *   </ion-navbar>
+ * </ion-header>
+ *
+ * <ion-toolbar>
+ *   <ion-title>Subheader</ion-title>
+ * </ion-toolbar>
+ * ```
+ *
+ * @demo /docs/v2/demos/title/
+ */
+@Component({
+  selector: 'ion-title',
+  template:
+    '<div class="toolbar-title">' +
+      '<ng-content></ng-content>' +
+    '</div>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class ToolbarTitle extends Ion {
+  constructor(
+    private _elementRef: ElementRef,
+    @Optional() toolbar: Toolbar,
+    @Optional() @Inject(forwardRef(() => Navbar)) navbar: Navbar
+  ) {
+    super(_elementRef);
+    toolbar && toolbar.setTitleCmp(this);
+    navbar && navbar.setTitleCmp(this);
+  }
+
+  /**
+   * @private
+   */
+  getTitleText() {
+    return this._elementRef.nativeElement.textContent;
+  }
+}

src/components/toolbar/toolbar.scss

@@ -5,17 +5,12 @@
 
 
 .toolbar {
-  position: relative;
-  z-index: $z-index-toolbar;
-
   display: flex;
   overflow: hidden;
 
-  flex: 0;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  order: $flex-order-toolbar-top;
 
   width: 100%;
 }
@@ -35,10 +30,6 @@
   pointer-events: none;
 }
 
-.toolbar[position=bottom] {
-  order: $flex-order-toolbar-bottom;
-}
-
 ion-title {
   display: flex;
 

src/components/toolbar/toolbar.ts

@@ -8,6 +8,48 @@ import {Navbar} from '../navbar/navbar';
 import {ViewController} from '../nav/view-controller';
 
 
+@Directive({
+  selector: 'ion-header'
+})
+export class Header {
+  private _h: number = 0;
+
+  constructor(viewCtr: ViewController, private _elementRef: ElementRef) {
+    viewCtr.setHeader(this);
+  }
+
+  setHeight(heightPixels: number) {
+    this._h = heightPixels;
+    this._elementRef.nativeElement.style.height = (heightPixels > 0 ? heightPixels + 'px' : '');
+  }
+
+  getHeight(): number {
+    return this._h;
+  }
+}
+
+
+@Directive({
+  selector: 'ion-footer'
+})
+export class Footer {
+  private _h: number = 0;
+
+  constructor(viewCtr: ViewController, private _elementRef: ElementRef) {
+    viewCtr.setFooter(this);
+  }
+
+  setHeight(heightPixels: number) {
+    this._h = heightPixels;
+    this._elementRef.nativeElement.style.height = (heightPixels > 0 ? heightPixels + 'px' : '');
+  }
+
+  getHeight(): number {
+    return this._h;
+  }
+}
+
+
 /**
  * @private
  */
@@ -160,90 +202,8 @@ export class Toolbar extends ToolbarBase {
     config: Config
   ) {
     super(elementRef);
-    this._sbPadding = config.getBoolean('statusbarPadding', false);
     viewCtrl && viewCtrl.setToolbarRef(elementRef);
+    this._sbPadding = config.getBoolean('statusbarPadding');
   }
 
 }
-
-/**
- * @name Title
- * @description
- * `ion-title` is a component that sets the title of the `Toolbar` or `Navbar`
- *
- * @usage
- *
- * ```html
- * <ion-navbar *navbar>
- *    <ion-title>Tab 1</ion-title>
- * </ion-navbar>
- * ```
- *
- * Or to create a navbar with a toolbar as a subheader:
- *
- * ```html
- * <ion-navbar *navbar>
- *    <ion-title>Tab 1</ion-title>
- * </ion-navbar>
- *
- * <ion-toolbar>
- *   <ion-title>Subheader</ion-title>
- * </ion-toolbar>
- * ```
- *
- * @demo /docs/v2/demos/title/
- */
-@Component({
-  selector: 'ion-title',
-  template:
-    '<div class="toolbar-title">' +
-      '<ng-content></ng-content>' +
-    '</div>',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class ToolbarTitle extends Ion {
-  constructor(
-    elementRef: ElementRef,
-    @Optional() toolbar: Toolbar,
-    @Optional() @Inject(forwardRef(() => Navbar)) navbar: Navbar
-  ) {
-    super(elementRef);
-    toolbar && toolbar.setTitleCmp(this);
-    navbar && navbar.setTitleCmp(this);
-  }
-  /**
-   * @private
-   */
-  getTitleText() {
-    return this.getNativeElement().textContent;
-  }
-}
-
-
-/**
- * @private
- */
-@Directive({
-  selector: 'ion-buttons,[menuToggle],ion-nav-items'
-})
-export class ToolbarItem {
-  inToolbar: boolean;
-
-  constructor(
-    elementRef: ElementRef,
-    @Optional() toolbar: Toolbar,
-    @Optional() @Inject(forwardRef(() => Navbar)) navbar: Navbar
-  ) {
-    toolbar && toolbar.addItemRef(elementRef);
-    navbar && navbar.addItemRef(elementRef);
-    this.inToolbar = !!(toolbar || navbar);
-  }
-
-  @ContentChildren(Button)
-  set _buttons(buttons: any) {
-    if (this.inToolbar) {
-      Button.setRoles(buttons, 'bar-button');
-    }
-  }
-}