From 92b614b6455e1189c5e906e158a64d0be17dc11f Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Wed, 18 Mar 2015 13:28:55 -0500
Subject: [PATCH] Modal

---
 .gitignore                         |   1 -
 src/components/modal/modal.html    |   3 +
 src/components/modal/modal.js      |  21 +++++
 src/components/modal/modal.scss    | 121 +++++++++++++++++++++++++++++
 src/components/modal/modal.spec.js |   0
 5 files changed, 145 insertions(+), 1 deletion(-)
 create mode 100644 src/components/modal/modal.html
 create mode 100644 src/components/modal/modal.js
 create mode 100644 src/components/modal/modal.scss
 create mode 100644 src/components/modal/modal.spec.js

diff --git a/.gitignore b/.gitignore
index a40e064be8..4224271a09 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,7 +19,6 @@ UserInterfaceState.xcuserstate
 *.sublime-workspace
 
 bower_components/
-components/
 tmp
 temp
 dist
diff --git a/src/components/modal/modal.html b/src/components/modal/modal.html
new file mode 100644
index 0000000000..32a64138ad
--- /dev/null
+++ b/src/components/modal/modal.html
@@ -0,0 +1,3 @@
+<div class="modal">
+  <h2>I'm a modal!</h2>
+</div>
diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
new file mode 100644
index 0000000000..3f3abcdb97
--- /dev/null
+++ b/src/components/modal/modal.js
@@ -0,0 +1,21 @@
+import {Component, Template} from 'angular2/angular2';
+import {Ion} from '../ion';
+
+@Component({
+  selector: 'ion-modal'
+})
+@Template({
+  inline: `
+    <div class="modal-backdrop">
+      <div class="modal-backdrop-bg"></div>
+      <div class="modal-wrapper"><content></content></div>
+    </div>`
+})
+export class Modal extends Ion {
+  constructor() {
+  }
+  show() {
+  }
+  hide() {
+  }
+}
diff --git a/src/components/modal/modal.scss b/src/components/modal/modal.scss
new file mode 100644
index 0000000000..626e1756f5
--- /dev/null
+++ b/src/components/modal/modal.scss
@@ -0,0 +1,121 @@
+$modal-z-index: 10 !default;
+
+$modal-bg-color:                  #fff !default;
+$modal-backdrop-bg-active:        #000 !default;
+$modal-backdrop-bg-inactive:      rgba(0,0,0,0) !default;
+
+$modal-inset-mode-break-point:    680px !default;  // @media min-width
+$modal-inset-mode-top:            20% !default;
+$modal-inset-mode-right:          20% !default;
+$modal-inset-mode-bottom:         20% !default;
+$modal-inset-mode-left:           20% !default;
+$modal-inset-mode-min-height:     240px !default;
+
+// TODO: REMOVE THESE
+$bar-height: 40;
+$bar-subheader-height: 40;
+$tabs-height: 40;
+
+/**
+ * Modals
+ * --------------------------------------------------
+ * Modals are independent windows that slide in from off-screen.
+ */
+
+.modal-backdrop,
+.modal-backdrop-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: $modal-z-index;
+  width: 100%;
+  height: 100%;
+}
+
+.modal-backdrop-bg {
+  pointer-events: none;
+}
+
+modal {
+  display: block;
+  position: absolute;
+  top: 0;
+  z-index: $modal-z-index;
+  overflow: hidden;
+  min-height: 100%;
+  width: 100%;
+  background-color: $modal-bg-color;
+}
+
+@media (min-width: $modal-inset-mode-break-point) {
+  // inset mode is when the modal doesn't fill the entire
+  // display but instead is centered within a large display
+  .modal {
+    top: $modal-inset-mode-top;
+    right: $modal-inset-mode-right;
+    bottom: $modal-inset-mode-bottom;
+    left: $modal-inset-mode-left;
+    overflow: visible;
+    min-height: $modal-inset-mode-min-height;
+    width: (100% - $modal-inset-mode-left - $modal-inset-mode-right);
+  }
+
+  .modal.ng-leave-active {
+    bottom: 0;
+  }
+
+  // remove ios header padding from inset header
+  .platform-ios.platform-cordova .modal-wrapper .modal {
+    .bar-header:not(.bar-subheader) {
+      height: $bar-height;
+      > * {
+        margin-top: 0;
+      }
+    }
+    .tabs-top > .tabs,
+    .tabs.tabs-top {
+      top: $bar-height;
+    }
+    .has-header,
+    .bar-subheader {
+      top: $bar-height;
+    }
+    .has-subheader {
+      top: $bar-height + $bar-subheader-height;
+    }
+    .has-tabs-top {
+      top: $bar-height + $tabs-height;
+    }
+    .has-header.has-subheader.has-tabs-top {
+      top: $bar-height + $bar-subheader-height + $tabs-height;
+    }
+  }
+
+  .modal-backdrop-bg {
+    @include transition(opacity 300ms ease-in-out);
+    background-color: $modal-backdrop-bg-active;
+    opacity: 0;
+  }
+
+  .active .modal-backdrop-bg {
+    opacity: 0.5;
+  }
+}
+
+// disable clicks on all but the modal
+.modal-open {
+  pointer-events: none;
+
+  .modal,
+  .modal-backdrop {
+    pointer-events: auto;
+  }
+  // prevent clicks on modal when loading overlay is active though
+  &.loading-active {
+    .modal,
+    .modal-backdrop {
+      pointer-events: none;
+    }
+  }
+}
+
diff --git a/src/components/modal/modal.spec.js b/src/components/modal/modal.spec.js
new file mode 100644
index 0000000000..e69de29bb2