From 128c4250c5c44644ba53d1c8bcfc0e697f15a96e Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Mon, 20 Apr 2015 14:00:44 -0500
Subject: [PATCH] toying around w/ layout ideas

---
 src/components.js                            |  1 +
 src/components/layout/layout.js              | 53 ++++++++++++++++++
 src/components/layout/layout.scss            | 58 ++++++++++++++++++++
 src/components/layout/test/basic/main.html   | 15 +++++
 src/components/layout/test/basic/main.js     | 19 +++++++
 src/components/tabs/extensions/material.scss |  2 +-
 src/ionic.scss                               |  1 +
 7 files changed, 148 insertions(+), 1 deletion(-)
 create mode 100644 src/components/layout/layout.js
 create mode 100644 src/components/layout/layout.scss
 create mode 100644 src/components/layout/test/basic/main.html
 create mode 100644 src/components/layout/test/basic/main.js

diff --git a/src/components.js b/src/components.js
index 8f5ce256fd..17e9af0c5c 100644
--- a/src/components.js
+++ b/src/components.js
@@ -7,6 +7,7 @@ export * from 'ionic2/components/checkbox/checkbox'
 export * from 'ionic2/components/content/content'
 export * from 'ionic2/components/icon/icon'
 export * from 'ionic2/components/item/item'
+export * from 'ionic2/components/layout/layout'
 export * from 'ionic2/components/list/list'
 export * from 'ionic2/components/nav-pane/nav-pane'
 export * from 'ionic2/components/nav-viewport/nav-viewport'
diff --git a/src/components/layout/layout.js b/src/components/layout/layout.js
new file mode 100644
index 0000000000..00f43c8cd3
--- /dev/null
+++ b/src/components/layout/layout.js
@@ -0,0 +1,53 @@
+import {NgElement, Component, Template, Parent} from 'angular2/angular2'
+
+
+@Component({
+  selector: 'layout,[layout]'
+})
+@Template({
+  inline: `
+    <content></content>
+    <object class="ele-qry" data="about:blank"></object>
+  `
+})
+export class Layout {
+  constructor(
+    @NgElement() ngElement:NgElement
+  ) {
+    this.domElement = ngElement.domElement
+    this.eqEle = this.domElement.lastElementChild
+
+    window.requestAnimationFrame(() => {
+      this.initLayout()
+    })
+  }
+
+  initLayout() {
+    this.mqs = {}
+
+
+    for (let x = 0; x < this.domElement.attributes.length; x++) {
+      let attr = this.domElement.attributes[x]
+      let val = attr.nodeValue
+      let mqClassname = attr.nodeName
+
+      if (val.indexOf('(') > -1 && val.indexOf(')') > -1) {
+        let mql = this.eqEle.contentDocument.defaultView.matchMedia(val)
+
+        if (mql.media !== 'not all') {
+          this.mqs[mql.media] = (mql) => {
+            console.log(mql.media, mql.matches, mqClassname)
+            window.requestAnimationFrame(() => {
+              this.domElement.classList[mql.matches ? 'add' : 'remove'](mqClassname)
+            })
+          }
+
+          this.mqs[mql.media](mql)
+          mql.addListener(this.mqs[mql.media])
+        }
+      }
+    }
+
+  }
+
+}
diff --git a/src/components/layout/layout.scss b/src/components/layout/layout.scss
new file mode 100644
index 0000000000..c257521054
--- /dev/null
+++ b/src/components/layout/layout.scss
@@ -0,0 +1,58 @@
+
+layout,
+[layout] {
+  position: relative;
+  @include flex-display();
+}
+
+[flex] {
+  flex: 1;
+}
+
+.ele-qry {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 0;
+  padding: 0;
+  margin: 0;
+  border: none;
+  visibility: hidden;
+  pointer-events: none;
+  z-index: -99;
+}
+
+
+@mixin element-query($mq) {
+  $mq: "'" + $mq + "'";
+
+  $attr: str-replace($mq, ':', '-');
+  $attr: str-replace($attr, ' ', '-');
+  $attr: str-replace($attr, '--', '-');
+  $attr: str-replace($attr, '(', '');
+  $attr: str-replace($attr, ')', '');
+
+  &.#{$attr} {
+    @content;
+  }
+
+  .ele-qry {
+    font-family: $mq;
+  }
+
+}
+
+/*
+div {
+
+  @include element-query( (min-width: 300px) ) {
+    background: blue;
+  };
+
+  @include element-query( (min-width: 400px) And (max-width: 800px) ) {
+    background: green;
+  };
+
+}
+*/
diff --git a/src/components/layout/test/basic/main.html b/src/components/layout/test/basic/main.html
new file mode 100644
index 0000000000..cf88977dbd
--- /dev/null
+++ b/src/components/layout/test/basic/main.html
@@ -0,0 +1,15 @@
+
+<layout style="width:80%;"
+        abc="(min-width: 400px)"
+        def="(min-width: 500px)"
+        ghi="(min-width: 600px)">
+
+  <div flex>A</div>
+
+  <div flex>B</div>
+
+  <div flex>C</div>
+
+  <div flex>D</div>
+
+</layout>
diff --git a/src/components/layout/test/basic/main.js b/src/components/layout/test/basic/main.js
new file mode 100644
index 0000000000..784b99381f
--- /dev/null
+++ b/src/components/layout/test/basic/main.js
@@ -0,0 +1,19 @@
+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 {Layout} from 'ionic2/components/layout/layout';
+
+
+@Component({ selector: '[ion-app]' })
+@Template({
+  url: 'main.html',
+  directives: [View, Content, Layout]
+})
+class IonicApp {
+  constructor() {
+    console.log('IonicApp Start')
+  }
+}
+
+bootstrap(IonicApp)
diff --git a/src/components/tabs/extensions/material.scss b/src/components/tabs/extensions/material.scss
index 0bb26f4081..7b76da9ed2 100644
--- a/src/components/tabs/extensions/material.scss
+++ b/src/components/tabs/extensions/material.scss
@@ -2,7 +2,7 @@
 // Material Design Toolbar
 // --------------------------------------------------
 
-$tab-bar-material-min-height:                40px !default;
+$tab-bar-material-min-height:                10px !default;
 $tab-bar-material-item-padding:              4px 10px !default;
 $tab-bar-material-active-border-width:       3px !default;
 $tab-bar-material-active-border-color:       red !default;
diff --git a/src/ionic.scss b/src/ionic.scss
index d5ff635521..79087a76b4 100644
--- a/src/ionic.scss
+++ b/src/ionic.scss
@@ -34,6 +34,7 @@
   "components/checkbox/checkbox",
   "components/content/content",
   "components/item/item",
+  "components/layout/layout",
   "components/list/list",
   "components/modal/modal",
   "components/nav-pane/nav-pane",