From 9faaf07e0257f622abcaa365408fa836a1cbdea8 Mon Sep 17 00:00:00 2001
From: Maxime Quandalle <maxime@quandalle.com>
Date: Tue, 25 Aug 2015 23:39:00 +0200
Subject: Implement a modal system

I decided to create my own and not to use a community package, because
1. it's straightforward
2. it's better integrated with our others libs such as EscapeActions
3. monitoring third-party packages evolutions (eg, CSS changes) is a
   lot of work.

This is basically the same rationale than for our other generic UI
components such as the Popup/Popover.

This commit also slightly modify the general layout to remove
unnecessary wrapper DOM nodes.
---
 client/components/main/layouts.jade | 14 ++++++++++----
 client/components/main/layouts.js   | 14 +++++++++++---
 client/components/main/layouts.styl | 26 ++++++++++++++++++++++++--
 3 files changed, 45 insertions(+), 9 deletions(-)

(limited to 'client/components/main')

diff --git a/client/components/main/layouts.jade b/client/components/main/layouts.jade
index 2dd3b2f2..7a1fa8a2 100644
--- a/client/components/main/layouts.jade
+++ b/client/components/main/layouts.jade
@@ -11,10 +11,16 @@ template(name="userFormsLayout")
     +Template.dynamic(template=content)
 
 template(name="defaultLayout")
-  #surface
-    +header
-    #content
-      +Template.dynamic(template=content)
+  +header
+  #content
+    +Template.dynamic(template=content)
+  if (Modal.isOpen)
+    #modal
+      .overlay
+      .modal-content
+        a.modal-close-btn.js-close-modal
+          i.fa.fa-times-thin
+        +Template.dynamic(template=Modal.getTemplateName)
 
 template(name="notFound")
   +message(label='page-not-found')
diff --git a/client/components/main/layouts.js b/client/components/main/layouts.js
index 5dbd8c91..11a43313 100644
--- a/client/components/main/layouts.js
+++ b/client/components/main/layouts.js
@@ -1,5 +1,13 @@
-Meteor.subscribe('boards');
+Meteor.subscribe('boards')
+
+BlazeLayout.setRoot('body')
 
 Template.userFormsLayout.onRendered(function() {
-  EscapeActions.executeAll();
-});
+  EscapeActions.executeAll()
+})
+
+Template.defaultLayout.events({
+  'click .js-close-modal': () => {
+    Modal.close()
+  }
+})
diff --git a/client/components/main/layouts.styl b/client/components/main/layouts.styl
index 5160ee8b..42a70310 100644
--- a/client/components/main/layouts.styl
+++ b/client/components/main/layouts.styl
@@ -19,8 +19,6 @@ body
   position: relative
   z-index: 0
   overflow-y: auto
-
-#surface
   display: flex
   flex-direction: column
   min-height: 100vh
@@ -30,6 +28,30 @@ body
   position: relative
   flex: 1
 
+#modal
+  position: absolute
+  top: 0
+  bottom: 0
+  left: 0
+  right: 0
+  background: rgba(0, 0, 0, 0.6)
+  z-index: 100
+  overflow-y: auto
+
+  .modal-content
+    width: 660px
+    min-height: 160px
+    margin: 42px auto
+    border-radius: 4px
+    background: darken(white, 13%)
+    z-index: 110
+
+    .modal-close-btn
+      display: block
+      float: right
+      margin: 12px
+      font-size: 24px
+
 h1
   font-size: 22px
   line-height: 1.2em
-- 
cgit v1.2.3-1-g7c22