diff options
author | Maxime Quandalle <maxime@quandalle.com> | 2015-08-25 23:39:00 +0200 |
---|---|---|
committer | Maxime Quandalle <maxime@quandalle.com> | 2015-08-26 16:49:41 +0200 |
commit | 9faaf07e0257f622abcaa365408fa836a1cbdea8 (patch) | |
tree | 8d214055307f66534d442bc2be8493f38a7e0334 /client | |
parent | 46a5e08aa7556b57d6c9b782eb1500811f2c3e6d (diff) | |
download | wekan-9faaf07e0257f622abcaa365408fa836a1cbdea8.tar.gz wekan-9faaf07e0257f622abcaa365408fa836a1cbdea8.tar.bz2 wekan-9faaf07e0257f622abcaa365408fa836a1cbdea8.zip |
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.
Diffstat (limited to 'client')
-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 |
6 files changed, 78 insertions, 10 deletions
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' } +); |