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

src/config/bootstrap.ts

@@ -12,7 +12,7 @@ import {IONIC_DIRECTIVES} from './directives';
 import {isPresent} from '../util/util';
 import {Keyboard} from '../util/keyboard';
 import {MenuController} from '../components/menu/menu-controller';
-import {nativeTimeout, closest} from '../util/dom';
+import {nativeTimeout, closest, nativeRaf} from '../util/dom';
 import {NavRegistry} from '../components/nav/nav-registry';
 import {Platform} from '../platform/platform';
 import {ScrollView} from '../util/scroll-view';
@@ -42,25 +42,27 @@ const _reflect: any = Reflect;
  * ionicBootstrap(MyClass, null, {tabbarPlacement: 'bottom'})
  * ```
  */
-export function ionicBootstrap(appRootComponent: any, customProviders?: Array<any>, config?: any): Promise<ComponentRef<any>> {
+export function ionicBootstrap(appRootComponent: any, customProviders?: Array<any>, config?: any) {
   // get all Ionic Providers
   let providers = ionicProviders(customProviders, config);
 
   // automatically set "ion-app" selector to users root component
   addSelector(appRootComponent, 'ion-app');
 
-  // call angular bootstrap
-  return bootstrap(appRootComponent, providers).then(ngComponentRef => {
-    // ionic app has finished bootstrapping
-    return ionicPostBootstrap(ngComponentRef);
+  cssReady(() => {
+    // call angular bootstrap
+    bootstrap(appRootComponent, providers).then(ngComponentRef => {
+      // ionic app has finished bootstrapping
+      ionicPostBootstrap(ngComponentRef);
+    });
   });
 }
 
 
-  /**
-   * @private
-   */
-export function ionicPostBootstrap(ngComponentRef: ComponentRef<any>): ComponentRef<any> {
+/**
+ * @private
+ */
+export function ionicPostBootstrap(ngComponentRef: ComponentRef<any>) {
   let app: App = ngComponentRef.injector.get(App);
   app.setAppInjector(ngComponentRef.injector);
 
@@ -72,15 +74,28 @@ export function ionicPostBootstrap(ngComponentRef: ComponentRef<any>): Component
   // TODO: Use PLATFORM_INITIALIZER
   ngComponentRef.injector.get(TapClick);
 
-  // TODO: Use Renderer
-  ngComponentRef.location.nativeElement.classList.add('app-init');
-
   return ngComponentRef;
 }
 
-  /**
-   * @private
-   */
+let cssLoadAttempt = 0;
+function cssReady(done: Function) {
+  let appEle = <HTMLElement>document.body.querySelector('ion-app');
+
+  if (!appEle || appEle.clientHeight > 0 || cssLoadAttempt > 300) {
+    done();
+
+  } else {
+    nativeRaf(() => {
+      cssLoadAttempt++;
+      cssReady(done);
+    });
+  }
+}
+
+
+/**
+ * @private
+ */
 export function ionicProviders(customProviders?: Array<any>, config?: any): any[] {
   let directives = IONIC_DIRECTIVES;
 
@@ -148,10 +163,6 @@ function setupDom(window: Window, document: Document, config: Config, platform:
     linkEle.href = href;
   }
 
-  let headStyle = document.createElement('style');
-  headStyle.innerHTML = 'ion-app{display:none}';
-  document.head.appendChild(headStyle);
-
   // set the mode class name
   // ios/md/wp
   bodyEle.classList.add(mode);
@@ -179,11 +190,11 @@ function setupDom(window: Window, document: Document, config: Config, platform:
 
   // touch devices should not use :hover CSS pseudo
   // enable :hover CSS when the "hoverCSS" setting is not false
-  if (config.get('hoverCSS') !== false) {
+  if (config.getBoolean('hoverCSS', true) !== false) {
     bodyEle.classList.add('enable-hover');
   }
 
-  if ( config.getBoolean('clickBlock', true) !== false ) {
+  if (config.getBoolean('clickBlock', true) !== false) {
     clickBlock.enable();
   }
 

src/config/directives.ts

@@ -22,7 +22,9 @@ import {Item} from '../components/item/item';
 import {ItemSliding, ItemOptions} from '../components/item/item-sliding';
 import {VirtualScroll} from '../components/virtual-scroll/virtual-scroll';
 import {VirtualItem, VirtualHeader, VirtualFooter} from '../components/virtual-scroll/virtual-item';
-import {Toolbar, ToolbarTitle, ToolbarItem} from '../components/toolbar/toolbar';
+import {Toolbar, Header, Footer} from '../components/toolbar/toolbar';
+import {ToolbarItem} from '../components/toolbar/toolbar-item';
+import {ToolbarTitle} from '../components/toolbar/toolbar-title';
 import {Icon} from '../components/icon/icon';
 import {Spinner} from '../components/spinner/spinner';
 import {Checkbox} from '../components/checkbox/checkbox';
@@ -83,6 +85,8 @@ import {ShowWhen, HideWhen} from '../components/show-hide-when/show-hide-when';
  * - SlideLazy
  * - Tabs
  * - Tab
+ * - Header
+ * - Footer
  * - Toolbar
  * - ToolbarTitle
  * - ToolbarItem
@@ -153,6 +157,8 @@ export const IONIC_DIRECTIVES: any[] = [
   Tab,
 
   // Toolbar
+  Header,
+  Footer,
   Toolbar,
   ToolbarTitle,
   ToolbarItem,

src/config/modes.ts

@@ -71,7 +71,7 @@ Config.setModeConfig('md', {
   modalLeave: 'modal-md-slide-out',
 
   pageTransition: 'md-transition',
-  pageTransitionDelay: 16,
+  pageTransitionDelay: 64,
 
   pickerEnter: 'picker-slide-in',
   pickerLeave: 'picker-slide-out',