diff options
| -rw-r--r-- | .jshintrc | 1 | ||||
| -rw-r--r-- | client/components/lists/main.js | 2 | ||||
| -rw-r--r-- | client/components/main/layouts.jade | 14 | ||||
| -rw-r--r-- | client/components/main/layouts.js | 14 | ||||
| -rw-r--r-- | client/components/main/layouts.styl | 26 | ||||
| -rw-r--r-- | client/lib/escapeActions.js | 1 | ||||
| -rw-r--r-- | client/lib/modal.js | 31 |
7 files changed, 79 insertions, 10 deletions
@@ -76,6 +76,7 @@ "Filter": true, "Filter": true, "Mixins": true, + "Modal": true, "MultiSelection": true, "Popup": true, "Sidebar": true, diff --git a/client/components/lists/main.js b/client/components/lists/main.js index e6491f0a..3b602f43 100644 --- a/client/components/lists/main.js +++ b/client/components/lists/main.js @@ -30,7 +30,7 @@ BlazeComponent.extendComponent({ $cards.sortable({ connectWith: '.js-minicards', tolerance: 'pointer', - appendTo: '#surface', + appendTo: 'body', helper: function(evt, item) { var helper = item.clone(); if (MultiSelection.isActive()) { 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 diff --git a/client/lib/escapeActions.js b/client/lib/escapeActions.js index 04e7f3f3..b3d4efe0 100644 --- a/client/lib/escapeActions.js +++ b/client/lib/escapeActions.js @@ -13,6 +13,7 @@ EscapeActions = { 'popup-close', 'inlinedForm', 'detailsPane', + 'modalWindow', 'multiselection', 'sidebarView' ], diff --git a/client/lib/modal.js b/client/lib/modal.js new file mode 100644 index 00000000..04a9b8b2 --- /dev/null +++ b/client/lib/modal.js @@ -0,0 +1,31 @@ +const closedValue = null + +Modal = new class { + constructor() { + this._currentModal = new ReactiveVar(closedValue) + } + + getTemplateName() { + return this._currentModal.get() + } + + isOpen() { + return this.getTemplateName() !== closedValue + } + + close() { + this._currentModal.set(closedValue) + } + + open(modalName) { + this._currentModal.set(modalName) + } +}; + +Blaze.registerHelper('Modal', Modal) + +EscapeActions.register('modalWindow', + () => Modal.close(), + () => Modal.isOpen(), + { noClickEscapeOn: '.modal-content' } +); |