From 1ada75014ef4bf20a99d1d32b723f1f89547de18 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 12 Jul 2017 16:03:20 -0400
Subject: [PATCH] refactor(content): add ion-fixed component and move from
 content

---
 .../core/src/components/content/content.scss  | 18 ----------
 .../core/src/components/content/content.tsx   | 22 +-----------
 packages/core/src/components/fixed/fixed.scss | 19 +++++++++++
 packages/core/src/components/fixed/fixed.tsx  | 34 +++++++++++++++++++
 packages/core/src/utils/helpers.ts            | 19 +++++++++++
 5 files changed, 73 insertions(+), 39 deletions(-)
 create mode 100644 packages/core/src/components/fixed/fixed.scss
 create mode 100644 packages/core/src/components/fixed/fixed.tsx

diff --git a/packages/core/src/components/content/content.scss b/packages/core/src/components/content/content.scss
index 21ee556c4e..3a6d59833c 100644
--- a/packages/core/src/components/content/content.scss
+++ b/packages/core/src/components/content/content.scss
@@ -62,24 +62,6 @@ ion-content.has-refresher ion-scroll {
   background-color: inherit;
 }
 
-// Fixed Content (ion-fixed and ion-fab)
-// --------------------------------------------------
-
-.fixed-content {
-  @include position(0, 0, 0, 0);
-
-  position: absolute;
-  display: block;
-}
-
-[ion-fixed] {
-  position: absolute;
-
-  z-index: $z-index-fixed-content;
-
-  transform: translateZ(0);
-}
-
 
 // Content Padding
 // --------------------------------------------------
diff --git a/packages/core/src/components/content/content.tsx b/packages/core/src/components/content/content.tsx
index f402606a78..d42111d5c0 100644
--- a/packages/core/src/components/content/content.tsx
+++ b/packages/core/src/components/content/content.tsx
@@ -1,6 +1,6 @@
 import { Component, h, Ionic, Prop } from '@stencil/core';
 import { createThemedClasses } from '../../utils/theme';
-import { getParentElement } from '../../utils/helpers';
+import { getParentElement, getToolbarHeight } from '../../utils/helpers';
 import { Scroll } from '../scroll/scroll-interface';
 import { ScrollDetail } from '../../utils/interfaces';
 
@@ -112,23 +112,3 @@ export class Content {
     );
   }
 }
-
-
-function getToolbarHeight(toolbarTagName: string, pageChildren: HTMLElement[], mode: string, iosHeight: string, defaultHeight: string) {
-  for (var i = 0; i < pageChildren.length; i++) {
-    if (pageChildren[i].tagName === toolbarTagName) {
-      var headerHeight = pageChildren[i].getAttribute(`${mode}-height`);
-      if (headerHeight) {
-        return headerHeight;
-      }
-
-      if (mode === 'ios') {
-        return iosHeight;
-      }
-
-      return defaultHeight;
-    }
-  }
-
-  return '';
-}
diff --git a/packages/core/src/components/fixed/fixed.scss b/packages/core/src/components/fixed/fixed.scss
new file mode 100644
index 0000000000..7228aaa379
--- /dev/null
+++ b/packages/core/src/components/fixed/fixed.scss
@@ -0,0 +1,19 @@
+@import "../../themes/ionic.globals";
+
+// Fixed Content (ion-fixed)
+// --------------------------------------------------
+
+ion-fixed {
+  @include position(0, 0, 0, 0);
+
+  position: absolute;
+  display: block;
+}
+
+[ion-fixed] {
+  position: absolute;
+
+  z-index: $z-index-fixed-content;
+
+  transform: translateZ(0);
+}
diff --git a/packages/core/src/components/fixed/fixed.tsx b/packages/core/src/components/fixed/fixed.tsx
new file mode 100644
index 0000000000..4b39816ac1
--- /dev/null
+++ b/packages/core/src/components/fixed/fixed.tsx
@@ -0,0 +1,34 @@
+import { Component, h, Ionic, VNodeData } from '@stencil/core';
+import { getParentElement, getToolbarHeight } from '../../utils/helpers';
+
+
+@Component({
+  tag: 'ion-fixed',
+  styleUrl: 'fixed.scss'
+})
+export class Fixed {
+  $el: HTMLElement;
+  mode: string;
+
+  hostData(): VNodeData {
+    const pageChildren: HTMLElement[] = getParentElement(this.$el).children;
+    const headerHeight = getToolbarHeight('ION-HEADER', pageChildren, this.mode, '44px', '56px');
+    const footerHeight = getToolbarHeight('ION-FOOTER', pageChildren, this.mode, '50px', '48px');
+
+    return {
+      class: {
+        'statusbar-padding': Ionic.config.getBoolean('statusbarPadding')
+      },
+      style: {
+        'margin-top': headerHeight,
+        'margin-bottom': footerHeight
+      }
+    };
+  }
+
+  render() {
+    return (
+      <slot></slot>
+    );
+  }
+}
diff --git a/packages/core/src/utils/helpers.ts b/packages/core/src/utils/helpers.ts
index aef8bb93ee..a3548b1d7d 100644
--- a/packages/core/src/utils/helpers.ts
+++ b/packages/core/src/utils/helpers.ts
@@ -93,3 +93,22 @@ export function applyStyles(elm: HTMLElement, styles: {[styleProp: string]: stri
     }
   }
 }
+
+export function getToolbarHeight(toolbarTagName: string, pageChildren: HTMLElement[], mode: string, iosHeight: string, defaultHeight: string) {
+  for (var i = 0; i < pageChildren.length; i++) {
+    if (pageChildren[i].tagName === toolbarTagName) {
+      var headerHeight = pageChildren[i].getAttribute(`${mode}-height`);
+      if (headerHeight) {
+        return headerHeight;
+      }
+
+      if (mode === 'ios') {
+        return iosHeight;
+      }
+
+      return defaultHeight;
+    }
+  }
+
+  return '';
+}
\ No newline at end of file