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.

3 files changed, 45 insertions, 9 deletions

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