diff --git a/CHANGELOG.md b/CHANGELOG.md index 256df41f9..d2ce19e4e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,8 @@ - [#286](https://github.com/miguelcobain/ember-paper/pull/286) paper-radio no longer has the class `paper-radio` - [#286](https://github.com/miguelcobain/ember-paper/pull/286) paper-radio now uses `groupValue` instead of `selected` - [#286](https://github.com/miguelcobain/ember-paper/pull/286) paper-radio now sends the action `onchange` instead of `changed` and it is mandatory (see ddau) -- [#303](https://github.com/miguelcobain/ember-paper/pull/303) paper-menu template may now specify `dense=true` to display menu items compactly +- [#303](https://github.com/miguelcobain/ember-paper/pull/303) paper-menu template may now specify `dense=true` to display menu items compactly +- [#313](https://github.com/miguelcobain/ember-paper/pull/313) paper-backdrop `tap` action renamed `onTap` and required action closure. ### 0.2.11 diff --git a/addon/components/paper-backdrop.js b/addon/components/paper-backdrop.js index f020297f4..8aad63cdd 100644 --- a/addon/components/paper-backdrop.js +++ b/addon/components/paper-backdrop.js @@ -1,18 +1,24 @@ import Ember from 'ember'; import TransitionMixin from 'ember-css-transitions/mixins/transition-mixin'; -const { computed, run } = Ember; +const { Component, computed, run, String: { htmlSafe } } = Ember; /* global Hammer */ -export default Ember.Component.extend(TransitionMixin, { +export default Component.extend(TransitionMixin, { tagName: 'md-backdrop', classNames: ['md-default-theme'], classNameBindings: ['opaque:md-opaque', 'isLockedOpen:md-locked-open'], + attributeBindings: ['backdropStyle:style'], // TransitionMixin: transitionClass: 'ng', shouldTransition: computed.bool('opaque'), + backdropStyle: computed('fixed', 'translateStyle', function() { + let style = this.get('translateStyle'); + return this.get('fixed') ? htmlSafe(`position:fixed; ${style}`) : style; + }), + addDestroyedElementClone(parent, index, clone) { parent.append(clone); }, diff --git a/addon/components/paper-dialog-container.js b/addon/components/paper-dialog-container.js new file mode 100644 index 000000000..cd6e4c661 --- /dev/null +++ b/addon/components/paper-dialog-container.js @@ -0,0 +1,10 @@ +import Ember from 'ember'; + +export default Ember.Component.extend({ + classNames: ['md-dialog-container'], + + click() { + this.sendAction('outsideClicked'); + } + +}); diff --git a/addon/components/paper-dialog-inner.js b/addon/components/paper-dialog-inner.js index c9e0cbc3a..68730fe2f 100644 --- a/addon/components/paper-dialog-inner.js +++ b/addon/components/paper-dialog-inner.js @@ -4,20 +4,24 @@ import PaperDialog from './paper-dialog'; const { Component, computed } = Ember; -export default Component.extend(Translate3dMixin, { +export default Component.extend(/*Translate3dMixin, TODO */ { tagName: 'md-dialog', - classNames: ['md-default-theme'], + classNames: ['md-default-theme' , 'md-transition-in' /* TODO */ ], classNameBindings: ['contentOverflow:md-content-overflow', 'fullscreen:md-dialog-fullscreen'], - dialogComponent: computed(function() { - return this.nearestOfType(PaperDialog); - }), + translateFromOrigin: computed.reads('openFrom'), - translateFromOrigin: computed.reads('dialogComponent.openFrom'), - - translateToParent: computed.reads('dialogComponent.closeTo'), + translateToParent: computed.reads('closeTo'), onTranslateDestroy(origin) { origin.focus(); + }, + + click(ev) { + if (this.get('clickOutsideToClose')) { + ev.stopPropagation(); + return false; + } } + }); diff --git a/addon/components/paper-dialog-parent.js b/addon/components/paper-dialog-parent.js deleted file mode 100644 index c82f1a401..000000000 --- a/addon/components/paper-dialog-parent.js +++ /dev/null @@ -1,17 +0,0 @@ -import Ember from 'ember'; - -const { Component } = Ember; - -export default Component.extend({ - attributeBindings: ['containerStyles:style'], - - containerStyles: Ember.computed(function() { - return new Ember.Handlebars.SafeString('position: relative;'); - }), - - actions: { - onCancel() { - this.get('dialogIsShowing').sendAction('onCancel'); - } - } -}); diff --git a/addon/components/paper-dialog.js b/addon/components/paper-dialog.js index ae9fe225f..2f5a32924 100644 --- a/addon/components/paper-dialog.js +++ b/addon/components/paper-dialog.js @@ -1,5 +1,4 @@ import Ember from 'ember'; -import PaperDialogParent from './paper-dialog-parent'; const { Component, $ } = Ember; export default Component.extend({ @@ -11,7 +10,7 @@ export default Component.extend({ didInsertElement() { $(window).on('keyup', (e) => { - if (27 === e.keyCode) { + if (27 === e.keyCode && this.get('onClose')) { this.get('onClose')(); } }); @@ -26,10 +25,6 @@ export default Component.extend({ if (this.get('clickOutsideToClose') && this.get('onClose')) { return this.get('onClose')(); } - }, - - dialogClicked(ev) { - // ev.stopPropagation(); } } }); diff --git a/app/components/paper-dialog-container.js b/app/components/paper-dialog-container.js new file mode 100644 index 000000000..4a81e1348 --- /dev/null +++ b/app/components/paper-dialog-container.js @@ -0,0 +1 @@ +export { default } from 'ember-paper/components/paper-dialog-container'; diff --git a/app/components/paper-dialog-parent.js b/app/components/paper-dialog-parent.js deleted file mode 100644 index 552a4035c..000000000 --- a/app/components/paper-dialog-parent.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'ember-paper/components/paper-dialog-parent'; \ No newline at end of file diff --git a/app/templates/components/paper-dialog-container.hbs b/app/templates/components/paper-dialog-container.hbs new file mode 100644 index 000000000..889d9eead --- /dev/null +++ b/app/templates/components/paper-dialog-container.hbs @@ -0,0 +1 @@ +{{yield}} diff --git a/app/templates/components/paper-dialog-parent.hbs b/app/templates/components/paper-dialog-parent.hbs deleted file mode 100644 index 04111eb86..000000000 --- a/app/templates/components/paper-dialog-parent.hbs +++ /dev/null @@ -1,12 +0,0 @@ -{{#if dialogIsShowing}} - {{#if dialogIsShowing.backdrop}} - {{#if dialogIsShowing.parent}} - {{paper-backdrop class="md-dialog-backdrop" opaque=true tap="onCancel"}} - {{else}} - {{#ember-wormhole to="paper-wormhole"}} - {{paper-backdrop class="md-dialog-backdrop" opaque=true tap="onCancel"}} - {{/ember-wormhole}} - {{/if}} - {{/if}} -{{/if}} -{{yield}} diff --git a/app/templates/components/paper-dialog.hbs b/app/templates/components/paper-dialog.hbs index 9e15941ad..aeb35d888 100644 --- a/app/templates/components/paper-dialog.hbs +++ b/app/templates/components/paper-dialog.hbs @@ -2,11 +2,19 @@ {{paper-backdrop locked-open=isLockedOpen opaque=true + fixed=(unless parent true) class="md-dialog-backdrop" + onTap=(action "outsideClicked") }} -
- {{#paper-dialog-inner parent=parent openFrom=openFrom closeTo=closeTo}} + {{#paper-dialog-container outsideClicked=(action "outsideClicked")}} + {{#paper-dialog-inner + parent=parent + openFrom=openFrom + closeTo=closeTo + fullscreen=fullscreen + clickOutsideToClose=clickOutsideToClose + }} {{yield}} {{/paper-dialog-inner}} -
+ {{/paper-dialog-container}} {{/ember-wormhole}} diff --git a/app/templates/components/paper-menu-container.hbs b/app/templates/components/paper-menu-container.hbs index d204c2105..d0c0a02ae 100644 --- a/app/templates/components/paper-menu-container.hbs +++ b/app/templates/components/paper-menu-container.hbs @@ -1,2 +1,2 @@ {{yield this}} -{{paper-backdrop class="md-menu-backdrop" tap="toggleMenu"}} +{{paper-backdrop class="md-menu-backdrop" onTap=(action "toggleMenu")}} diff --git a/app/templates/components/paper-menu-content.hbs b/app/templates/components/paper-menu-content.hbs index e36a689b6..ed848afab 100644 --- a/app/templates/components/paper-menu-content.hbs +++ b/app/templates/components/paper-menu-content.hbs @@ -2,5 +2,5 @@ {{yield this}} {{/paper-menu-content-pane}} {{#ember-wormhole to="paper-wormhole"}} - {{paper-backdrop class="md-menu-backdrop" tap="toggleMenu"}} + {{paper-backdrop class="md-menu-backdrop" onTap=(action "toggleMenu")}} {{/ember-wormhole}} diff --git a/app/templates/components/paper-select-container.hbs b/app/templates/components/paper-select-container.hbs index 075d81170..d52820f7a 100644 --- a/app/templates/components/paper-select-container.hbs +++ b/app/templates/components/paper-select-container.hbs @@ -1,4 +1,4 @@ {{yield this}} {{#ember-wormhole to="paper-wormhole"}} - {{paper-backdrop class="md-select-backdrop" tap="toggleMenu"}} + {{paper-backdrop class="md-select-backdrop" onTap=(action "toggleMenu")}} {{/ember-wormhole}} diff --git a/app/templates/components/paper-sidenav.hbs b/app/templates/components/paper-sidenav.hbs index 029635493..897d55268 100644 --- a/app/templates/components/paper-sidenav.hbs +++ b/app/templates/components/paper-sidenav.hbs @@ -1,6 +1,6 @@ {{yield}} {{#unless closed}} {{#ember-wormhole to="paper-wormhole"}} - {{paper-backdrop locked-open=isLockedOpen opaque=true class="md-sidenav-backdrop" tap="toggleMenu"}} + {{paper-backdrop locked-open=isLockedOpen opaque=true class="md-sidenav-backdrop" onTap=(action "toggleMenu")}} {{/ember-wormhole}} -{{/unless}} \ No newline at end of file +{{/unless}} diff --git a/tests/dummy/app/controllers/dialog.js b/tests/dummy/app/controllers/dialog.js index 02cd35ce9..a9b333e57 100644 --- a/tests/dummy/app/controllers/dialog.js +++ b/tests/dummy/app/controllers/dialog.js @@ -8,7 +8,8 @@ export default Ember.Controller.extend({ this.set('dialogWithParentOrigin', Ember.$(event.currentTarget)); this.set('showDialogWithParent', true); }, - closeDialogWithParent() { + closeDialogWithParent(result) { + this.set('result', result); this.set('showDialogWithParent', false); }, @@ -17,10 +18,25 @@ export default Ember.Controller.extend({ this.set('dialogOrigin', Ember.$(event.currentTarget)); this.set('showDialog', true); }, - closeDialog() { + closeDialog(result) { + this.set('result', result); this.set('showDialog', false); }, + /* Prompt dialog */ + dogName: '', + openPromptDialog(param, event) { + this.set('dialogOrigin', Ember.$(event.currentTarget)); + this.set('showPromptDialog', true); + }, + closePromptDialog(result, dogName) { + if (result === 'ok') { + result = `${result} and dog named ${dogName}`; + } + this.set('result', result); + this.set('showPromptDialog', false); + }, + toggleSourceCode() { this.toggleProperty('showSourceCode'); } diff --git a/tests/dummy/app/templates/dialog.hbs b/tests/dummy/app/templates/dialog.hbs index 66d95fbd8..307eba75a 100644 --- a/tests/dummy/app/templates/dialog.hbs +++ b/tests/dummy/app/templates/dialog.hbs @@ -22,15 +22,16 @@
{{#code-block language="handlebars"}}\{{#if showDialogWithParent}} \{{#paper-dialog - onCancel="closeDialogWithParent" + onClose=(action "closeDialogWithParent" "cancel") parent="paper-dialog-demo" - origin=dialogOrigin as |dialog|}} + origin=dialogOrigin + clickOutsideToClose=true}} <form> \{{#paper-toolbar}} <div class="md-toolbar-tools"> <h2>Mango (Fruit)</h2> <span flex></span> - \{{#paper-button icon-button=true action="closeDialog"}} + \{{#paper-button icon-button=true action=(action "closeDialogWithParent" "cancel")}} \{{paper-icon icon="close"}} \{{/paper-button}} </div> @@ -39,27 +40,27 @@ \{{#paper-dialog-content}} <div style="max-width:800px;max-height:810px;"> <p> - This is a dialog rendered into a specific element. + This is a dialog rendered into a specific element. Clicking outside the dialog will close it. </p> </div> \{{/paper-dialog-content}} <div class="md-actions" layout="row"> <span flex></span> - \{{#paper-button action="closeDialogWithParent"}}Cancel\{{/paper-button}} - \{{#paper-button action="closeDialogWithParent"}}OK\{{/paper-button}} + \{{#paper-button primary=true action=(action "closeDialogWithParent" "cancel")}}Cancel\{{/paper-button}} + \{{#paper-button primary=true action=(action "closeDialogWithParent" "ok")}}OK\{{/paper-button}} </div> </form> \{{/paper-dialog}} \{{/if}} \{{#if showDialog}} - \{{#paper-dialog onCancel="closeDialog" origin=dialogOrigin as |dialog|}} + \{{#paper-dialog onClose=(action "closeDialog" "cancel") origin=dialogOrigin}} \{{#paper-toolbar}} <div class="md-toolbar-tools"> <h2>Mango (Fruit)</h2> <span flex></span> - \{{#paper-button icon-button=true action="closeDialog"}}\{{paper-icon icon="close"}}\{{/paper-button}} + \{{#paper-button icon-button=true action=(action "closeDialog" "cancel")}}\{{paper-icon icon="close"}}\{{/paper-button}} </div> \{{/paper-toolbar}} @@ -74,8 +75,28 @@ <div class="md-actions" layout="row"> <span flex></span> - \{{#paper-button action="closeDialog"}}Cancel\{{/paper-button}} - \{{#paper-button action="closeDialog"}}OK\{{/paper-button}} + \{{#paper-button primary=true action=(action "closeDialog" "cancel")}}Cancel\{{/paper-button}} + \{{#paper-button primary=true action=(action "closeDialog" "ok")}}OK\{{/paper-button}} + </div> + \{{/paper-dialog}} +\{{/if}} + +\{{#if showPromptDialog}} + \{{#paper-dialog fullscreen=fullscreen onClose=(action "closePromptDialog" "cancel") origin=dialogOrigin}} + + \{{#paper-dialog-content}} + <h2 class="md-title">What would you name your dog?</h2> + <p>Bowser is a common name.</p> + \{{paper-input placeholder="dog name" value=dogName}} + <div> + \{{#paper-checkbox checked=fullscreen onchange=(action (mut fullscreen))}}Display fullscreen at small window size breakpoints\{{/paper-checkbox}} + </div> + \{{/paper-dialog-content}} + + <div class="md-actions" layout="row"> + <span flex></span> + \{{#paper-button primary=true action=(action "closePromptDialog" "cancel")}}I'm a cat person\{{/paper-button}} + \{{#paper-button primary=true action=(action "closePromptDialog" "ok" dogName)}}Okay!\{{/paper-button}} </div> \{{/paper-dialog}} \{{/if}} @@ -88,11 +109,16 @@

Open a dialog over the app's content. Press escape or click outside to close the dialog and send focus back to the triggering button.

- {{#paper-button raised=true primary=true action="openDialogWithParent"}}Open dialog with parent{{/paper-button}} - {{#paper-button raised=true primary=true action="openDialog"}}Open full dialog{{/paper-button}} + {{#paper-button raised=true primary=true action="openDialogWithParent"}}Dialog with parent{{/paper-button}} + {{#paper-button raised=true primary=true action="openDialog"}}Custom dialog{{/paper-button}} + {{#paper-button raised=true primary=true action="openPromptDialog"}}Prompt dialog{{/paper-button}}
-

Advanced Usage

+ {{#if result}} +

You dismissed the dialog with a result of "{{result}}".

+ {{/if}} + +

Usage

@@ -103,6 +129,11 @@ + + + + + @@ -141,40 +172,40 @@ {{/paper-content}} {{#if showDialogWithParent}} - {{#paper-dialog onCancel="closeDialogWithParent" parent="paper-dialog-demo" origin=dialogOrigin as |dialog|}} + {{#paper-dialog onClose=(action "closeDialogWithParent" "cancel") parent="paper-dialog-demo" origin=dialogOrigin clickOutsideToClose=true}} {{#paper-toolbar}}

Mango (Fruit)

- {{#paper-button icon-button=true action="closeDialogWithParent"}}{{paper-icon icon="close"}}{{/paper-button}} + {{#paper-button icon-button=true action=(action "closeDialogWithParent" "cancel")}}{{paper-icon icon="close"}}{{/paper-button}}
{{/paper-toolbar}} {{#paper-dialog-content}}

- This is a dialog rendered into a specific element. + This is a dialog rendered into a specific element. Clicking outside the dialog will close it.

{{/paper-dialog-content}}
- {{#paper-button action="closeDialogWithParent"}}Cancel{{/paper-button}} - {{#paper-button action="closeDialogWithParent"}}OK{{/paper-button}} + {{#paper-button action=(action "closeDialogWithParent" "cancel")}}Cancel{{/paper-button}} + {{#paper-button action=(action "closeDialogWithParent" "ok")}}OK{{/paper-button}}
{{/paper-dialog}} {{/if}} {{#if showDialog}} - {{#paper-dialog onCancel="closeDialog" origin=dialogOrigin as |dialog|}} + {{#paper-dialog onClose=(action "closeDialog" "cancel") origin=dialogOrigin}} {{#paper-toolbar}}

Mango (Fruit)

- {{#paper-button icon-button=true action="closeDialog"}}{{paper-icon icon="close"}}{{/paper-button}} + {{#paper-button icon-button=true action=(action "closeDialog" "cancel")}}{{paper-icon icon="close"}}{{/paper-button}}
{{/paper-toolbar}} @@ -189,8 +220,28 @@
- {{#paper-button action="closeDialog"}}Cancel{{/paper-button}} - {{#paper-button action="closeDialog"}}OK{{/paper-button}} + {{#paper-button action=(action "closeDialog" "cancel")}}Cancel{{/paper-button}} + {{#paper-button action=(action "closeDialog" "ok")}}OK{{/paper-button}} +
+ {{/paper-dialog}} +{{/if}} + +{{#if showPromptDialog}} + {{#paper-dialog fullscreen=fullscreen onClose=(action "closePromptDialog" "cancel") origin=dialogOrigin}} + + {{#paper-dialog-content}} +

What would you name your dog?

+

Bowser is a common name.

+ {{paper-input placeholder="dog name" value=dogName}} +
+ {{#paper-checkbox checked=fullscreen onchange=(action (mut fullscreen))}}Display fullscreen at small window size breakpoints{{/paper-checkbox}} +
+ {{/paper-dialog-content}} + +
+ + {{#paper-button primary=true action=(action "closePromptDialog" "cancel")}}I'm a cat person{{/paper-button}} + {{#paper-button primary=true action=(action "closePromptDialog" "ok" dogName)}}Okay!{{/paper-button}}
{{/paper-dialog}} {{/if}} diff --git a/tests/integration/components/paper-dialog-container-test.js b/tests/integration/components/paper-dialog-container-test.js deleted file mode 100644 index 064f5bdbf..000000000 --- a/tests/integration/components/paper-dialog-container-test.js +++ /dev/null @@ -1,26 +0,0 @@ -import { moduleForComponent, test } from 'ember-qunit'; -import hbs from 'htmlbars-inline-precompile'; - -moduleForComponent('paper-dialog-parent', 'Integration | Component | paper dialog container', { - integration: true -}); - -test('it renders', function(assert) { - assert.expect(2); - - // Set any properties with this.set('myProperty', 'value'); - // Handle any actions with this.on('myAction', function(val) { ... }); - - this.render(hbs`{{paper-dialog-parent}}`); - - assert.equal(this.$().text().trim(), ''); - - // Template block usage: - this.render(hbs` - {{#paper-dialog-parent}} - template block text - {{/paper-dialog-parent}} - `); - - assert.equal(this.$().text().trim(), 'template block text'); -});
onCloseaction closurean action to be executed when the dialog is closed, e.g. by pressing escape
parent id