From 6dfde74b99d941773b6a3070c3902c496a27160e Mon Sep 17 00:00:00 2001 From: Dan Chadwick Date: Thu, 17 Mar 2016 13:13:05 -0400 Subject: [PATCH 01/13] Remove unused ember-dialog-parent. --- addon/components/paper-dialog-parent.js | 17 ------------ addon/components/paper-dialog.js | 1 - app/components/paper-dialog-parent.js | 1 - .../components/paper-dialog-container-test.js | 26 ------------------- 4 files changed, 45 deletions(-) delete mode 100644 addon/components/paper-dialog-parent.js delete mode 100644 app/components/paper-dialog-parent.js delete mode 100644 tests/integration/components/paper-dialog-container-test.js 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..903064455 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({ 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/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'); -}); From cf913d5f12fddddc2e5165d542de21094d2d3a1c Mon Sep 17 00:00:00 2001 From: Dan Chadwick Date: Thu, 17 Mar 2016 13:17:20 -0400 Subject: [PATCH 02/13] Use action closures in dummy app. Also display a dismiss result of ok/cancel. --- tests/dummy/app/controllers/dialog.js | 6 +++-- tests/dummy/app/templates/dialog.hbs | 36 +++++++++++++++------------ 2 files changed, 24 insertions(+), 18 deletions(-) diff --git a/tests/dummy/app/controllers/dialog.js b/tests/dummy/app/controllers/dialog.js index 02cd35ce9..7d0de9d4c 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,7 +18,8 @@ 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); }, diff --git a/tests/dummy/app/templates/dialog.hbs b/tests/dummy/app/templates/dialog.hbs index 66d95fbd8..be3c03c1c 100644 --- a/tests/dummy/app/templates/dialog.hbs +++ b/tests/dummy/app/templates/dialog.hbs @@ -22,7 +22,7 @@
{{#code-block language="handlebars"}}\{{#if showDialogWithParent}} \{{#paper-dialog - onCancel="closeDialogWithParent" + onCancel=(action "closeDialogWithParent" "cancel") parent="paper-dialog-demo" origin=dialogOrigin as |dialog|}} <form> @@ -30,7 +30,7 @@ <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> @@ -46,20 +46,20 @@ <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 action=(action "closeDialogWithParent" "cancel")}}Cancel\{{/paper-button}} + \{{#paper-button action=(action "closeDialogWithParent" "ok")}}OK\{{/paper-button}} </div> </form> \{{/paper-dialog}} \{{/if}} \{{#if showDialog}} - \{{#paper-dialog onCancel="closeDialog" origin=dialogOrigin as |dialog|}} + \{{#paper-dialog onCancel=(action "closeDialog" "cancel") origin=dialogOrigin as |dialog|}} \{{#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 +74,8 @@ <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 action=(action "closeDialog" "cancel")}}Cancel\{{/paper-button}} + \{{#paper-button action=(action "closeDialog" "ok")}}OK\{{/paper-button}} </div> \{{/paper-dialog}} \{{/if}} @@ -92,6 +92,10 @@ {{#paper-button raised=true primary=true action="openDialog"}}Open full dialog{{/paper-button}}
+ {{#if result}} +

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

+ {{/if}} +

Advanced Usage

@@ -141,13 +145,13 @@ {{/paper-content}} {{#if showDialogWithParent}} - {{#paper-dialog onCancel="closeDialogWithParent" parent="paper-dialog-demo" origin=dialogOrigin as |dialog|}} + {{#paper-dialog onCancel=(action "closeDialogWithParent" "cancel") parent="paper-dialog-demo" origin=dialogOrigin as |dialog|}} {{#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}} @@ -161,20 +165,20 @@
- {{#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 onCancel=(action "closeDialog" "cancel") origin=dialogOrigin as |dialog|}} {{#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 +193,8 @@
- {{#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}} From d63110f1bf8139f836a79a9a728f8a0e5794323c Mon Sep 17 00:00:00 2001 From: Dan Chadwick Date: Thu, 17 Mar 2016 20:08:46 -0400 Subject: [PATCH 03/13] Resurrect paper-dialog-container to support suppression of click event propagation. --- addon/components/paper-dialog-container.js | 10 +++++++++ addon/components/paper-dialog-inner.js | 8 +++++++ addon/components/paper-dialog.js | 6 +---- app/components/paper-dialog-container.js | 1 + .../components/paper-dialog-container.hbs | 1 + app/templates/components/paper-dialog.hbs | 5 +++-- tests/dummy/app/templates/dialog.hbs | 22 ++++++++++++------- 7 files changed, 38 insertions(+), 15 deletions(-) create mode 100644 addon/components/paper-dialog-container.js create mode 100644 app/components/paper-dialog-container.js create mode 100644 app/templates/components/paper-dialog-container.hbs 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..b0da81217 100644 --- a/addon/components/paper-dialog-inner.js +++ b/addon/components/paper-dialog-inner.js @@ -19,5 +19,13 @@ export default Component.extend(Translate3dMixin, { onTranslateDestroy(origin) { origin.focus(); + }, + + click(ev) { + if (this.get('dialogComponent.clickOutsideToClose')) { + ev.stopPropagation(); + return false; + } } + }); diff --git a/addon/components/paper-dialog.js b/addon/components/paper-dialog.js index 903064455..2f5a32924 100644 --- a/addon/components/paper-dialog.js +++ b/addon/components/paper-dialog.js @@ -10,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')(); } }); @@ -25,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/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.hbs b/app/templates/components/paper-dialog.hbs index 9e15941ad..80a26a06e 100644 --- a/app/templates/components/paper-dialog.hbs +++ b/app/templates/components/paper-dialog.hbs @@ -3,10 +3,11 @@ locked-open=isLockedOpen opaque=true class="md-dialog-backdrop" + onTap=(action "outsideClicked") }} -
+ {{#paper-dialog-container outsideClicked=(action "outsideClicked")}} {{#paper-dialog-inner parent=parent openFrom=openFrom closeTo=closeTo}} {{yield}} {{/paper-dialog-inner}} -
+ {{/paper-dialog-container}} {{/ember-wormhole}} diff --git a/tests/dummy/app/templates/dialog.hbs b/tests/dummy/app/templates/dialog.hbs index be3c03c1c..cc65dda31 100644 --- a/tests/dummy/app/templates/dialog.hbs +++ b/tests/dummy/app/templates/dialog.hbs @@ -22,9 +22,10 @@
{{#code-block language="handlebars"}}\{{#if showDialogWithParent}} \{{#paper-dialog - onCancel=(action "closeDialogWithParent" "cancel") + onClose=(action "closeDialogWithParent" "cancel") parent="paper-dialog-demo" - origin=dialogOrigin as |dialog|}} + origin=dialogOrigin + clickOutsideToClose=true}} <form> \{{#paper-toolbar}} <div class="md-toolbar-tools"> @@ -39,7 +40,7 @@ \{{#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}} @@ -54,7 +55,7 @@ \{{/if}} \{{#if showDialog}} - \{{#paper-dialog onCancel=(action "closeDialog" "cancel") origin=dialogOrigin as |dialog|}} + \{{#paper-dialog onClose=(action "closeDialog" "cancel") origin=dialogOrigin}} \{{#paper-toolbar}} <div class="md-toolbar-tools"> <h2>Mango (Fruit)</h2> @@ -96,7 +97,7 @@

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

{{/if}} -

Advanced Usage

+

Usage

@@ -107,6 +108,11 @@ + + + + + @@ -145,7 +151,7 @@ {{/paper-content}} {{#if showDialogWithParent}} - {{#paper-dialog onCancel=(action "closeDialogWithParent" "cancel") parent="paper-dialog-demo" origin=dialogOrigin as |dialog|}} + {{#paper-dialog onClose=(action "closeDialogWithParent" "cancel") parent="paper-dialog-demo" origin=dialogOrigin clickOutsideToClose=true}} {{#paper-toolbar}}
@@ -158,7 +164,7 @@ {{#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}} @@ -173,7 +179,7 @@ {{/if}} {{#if showDialog}} - {{#paper-dialog onCancel=(action "closeDialog" "cancel") origin=dialogOrigin as |dialog|}} + {{#paper-dialog onClose=(action "closeDialog" "cancel") origin=dialogOrigin}} {{#paper-toolbar}}

Mango (Fruit)

From 9e72fcc1b256759b12abb4d6975e6f1fb56d599d Mon Sep 17 00:00:00 2001 From: Dan Chadwick Date: Fri, 18 Mar 2016 12:41:23 -0400 Subject: [PATCH 04/13] Remove paper-dialog-parent.hbs, missed when rest of defunct component was deleted. --- app/templates/components/paper-dialog-parent.hbs | 12 ------------ 1 file changed, 12 deletions(-) delete mode 100644 app/templates/components/paper-dialog-parent.hbs 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}} From ed2c271c49791419733fd839248890d3b15532c7 Mon Sep 17 00:00:00 2001 From: Dan Chadwick Date: Fri, 18 Mar 2016 12:42:42 -0400 Subject: [PATCH 05/13] Update other components to conform to paper-backdrop tap event API change. tap="close" -> onTap=(action "close") --- app/templates/components/paper-menu-container.hbs | 2 +- app/templates/components/paper-menu-content.hbs | 2 +- app/templates/components/paper-select-container.hbs | 2 +- app/templates/components/paper-sidenav.hbs | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) 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}} From abcd58be4abb2e7b147477997910e445a384e8c8 Mon Sep 17 00:00:00 2001 From: Dan Chadwick Date: Fri, 18 Mar 2016 12:49:12 -0400 Subject: [PATCH 06/13] Add changelog entry for API change to paper-backdrop. --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 From 28f059c3d91cfd1f58031b34cf09ada48eead887 Mon Sep 17 00:00:00 2001 From: Dan Chadwick Date: Fri, 18 Mar 2016 12:50:30 -0400 Subject: [PATCH 07/13] Temporarily disable dialog transitions (broken, prevents operation). Reverse when transitions work. --- addon/components/paper-dialog-inner.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/addon/components/paper-dialog-inner.js b/addon/components/paper-dialog-inner.js index b0da81217..7fd55aecb 100644 --- a/addon/components/paper-dialog-inner.js +++ b/addon/components/paper-dialog-inner.js @@ -4,9 +4,9 @@ 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() { From b74415626bd869902b0f4f211e81bd82ce36b5eb Mon Sep 17 00:00:00 2001 From: Dan Chadwick Date: Sun, 20 Mar 2016 08:57:37 -0400 Subject: [PATCH 08/13] Added prompt dialog example, following Angular Material. --- tests/dummy/app/controllers/dialog.js | 14 ++++++++++++++ tests/dummy/app/templates/dialog.hbs | 22 ++++++++++++++++++++-- 2 files changed, 34 insertions(+), 2 deletions(-) diff --git a/tests/dummy/app/controllers/dialog.js b/tests/dummy/app/controllers/dialog.js index 7d0de9d4c..a9b333e57 100644 --- a/tests/dummy/app/controllers/dialog.js +++ b/tests/dummy/app/controllers/dialog.js @@ -23,6 +23,20 @@ export default Ember.Controller.extend({ 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 cc65dda31..f00cdb05a 100644 --- a/tests/dummy/app/templates/dialog.hbs +++ b/tests/dummy/app/templates/dialog.hbs @@ -89,8 +89,9 @@

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}}
{{#if result}} @@ -204,3 +205,20 @@
{{/paper-dialog}} {{/if}} + +{{#if showPromptDialog}} + {{#paper-dialog 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-dialog-content}} + +
+ + {{#paper-button action=(action "closePromptDialog" "cancel")}}I'm a cat person{{/paper-button}} + {{#paper-button action=(action "closePromptDialog" "ok" dogName)}}Okay!{{/paper-button}} +
+ {{/paper-dialog}} +{{/if}} From d829dd3998e038e1831c76edc4ddbd630c314ca3 Mon Sep 17 00:00:00 2001 From: Dan Chadwick Date: Sun, 20 Mar 2016 10:53:43 -0400 Subject: [PATCH 09/13] Apply fixed positioning to backdrop when there is no parent defined for a dialog. --- addon/components/paper-backdrop.js | 10 ++++++++-- app/templates/components/paper-dialog.hbs | 1 + 2 files changed, 9 insertions(+), 2 deletions(-) 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/app/templates/components/paper-dialog.hbs b/app/templates/components/paper-dialog.hbs index 80a26a06e..462f5eb0b 100644 --- a/app/templates/components/paper-dialog.hbs +++ b/app/templates/components/paper-dialog.hbs @@ -2,6 +2,7 @@ {{paper-backdrop locked-open=isLockedOpen opaque=true + fixed=(unless parent true) class="md-dialog-backdrop" onTap=(action "outsideClicked") }} From 437bf47995dc7d9bcdb8202d6f4ab60d3d731ab7 Mon Sep 17 00:00:00 2001 From: Dan Chadwick Date: Sun, 20 Mar 2016 17:24:16 -0400 Subject: [PATCH 10/13] Fix fullscreen and update dummy app to demonstrate fullscreen and primary-colored buttons. --- addon/components/paper-dialog-inner.js | 2 +- tests/dummy/app/templates/dialog.hbs | 37 +++++++++++++++++++++----- 2 files changed, 31 insertions(+), 8 deletions(-) diff --git a/addon/components/paper-dialog-inner.js b/addon/components/paper-dialog-inner.js index 7fd55aecb..372a0b31b 100644 --- a/addon/components/paper-dialog-inner.js +++ b/addon/components/paper-dialog-inner.js @@ -7,7 +7,7 @@ const { Component, computed } = Ember; export default Component.extend(/*Translate3dMixin, TODO */ { tagName: 'md-dialog', classNames: ['md-default-theme' , 'md-transition-in' /* TODO */ ], - classNameBindings: ['contentOverflow:md-content-overflow', 'fullscreen:md-dialog-fullscreen'], + classNameBindings: ['contentOverflow:md-content-overflow', 'dialogComponent.fullscreen:md-dialog-fullscreen'], dialogComponent: computed(function() { return this.nearestOfType(PaperDialog); diff --git a/tests/dummy/app/templates/dialog.hbs b/tests/dummy/app/templates/dialog.hbs index f00cdb05a..307eba75a 100644 --- a/tests/dummy/app/templates/dialog.hbs +++ b/tests/dummy/app/templates/dialog.hbs @@ -47,8 +47,8 @@ <div class="md-actions" layout="row"> <span flex></span> - \{{#paper-button action=(action "closeDialogWithParent" "cancel")}}Cancel\{{/paper-button}} - \{{#paper-button action=(action "closeDialogWithParent" "ok")}}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}} @@ -75,8 +75,28 @@ <div class="md-actions" layout="row"> <span flex></span> - \{{#paper-button action=(action "closeDialog" "cancel")}}Cancel\{{/paper-button}} - \{{#paper-button action=(action "closeDialog" "ok")}}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}} @@ -207,18 +227,21 @@ {{/if}} {{#if showPromptDialog}} - {{#paper-dialog onClose=(action "closePromptDialog" "cancel") origin=dialogOrigin}} + {{#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 action=(action "closePromptDialog" "cancel")}}I'm a cat person{{/paper-button}} - {{#paper-button action=(action "closePromptDialog" "ok" dogName)}}Okay!{{/paper-button}} + {{#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}} From d056c234afe3362e9de68c9a7a9d9761b3496676 Mon Sep 17 00:00:00 2001 From: Dan Chadwick Date: Mon, 21 Mar 2016 14:42:51 -0400 Subject: [PATCH 11/13] Change onTap to ontap to conform with lowercase action formal argument naming standard. --- CHANGELOG.md | 2 +- addon/components/paper-backdrop.js | 4 ++-- app/templates/components/paper-dialog.hbs | 2 +- app/templates/components/paper-menu-container.hbs | 2 +- app/templates/components/paper-menu-content.hbs | 2 +- app/templates/components/paper-select-container.hbs | 2 +- app/templates/components/paper-sidenav.hbs | 2 +- 7 files changed, 8 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d2ce19e4e..480f6e5fc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,7 +8,7 @@ - [#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 -- [#313](https://github.com/miguelcobain/ember-paper/pull/313) paper-backdrop `tap` action renamed `onTap` and required action closure. +- [#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 8aad63cdd..6c6e98e07 100644 --- a/addon/components/paper-backdrop.js +++ b/addon/components/paper-backdrop.js @@ -38,8 +38,8 @@ export default Component.extend(TransitionMixin, { _onTap(e) { e.preventDefault(); - if (this.get('onTap')) { - this.get('onTap')(e); + if (this.get('ontap')) { + this.get('ontap')(e); } } diff --git a/app/templates/components/paper-dialog.hbs b/app/templates/components/paper-dialog.hbs index 462f5eb0b..c236382b4 100644 --- a/app/templates/components/paper-dialog.hbs +++ b/app/templates/components/paper-dialog.hbs @@ -4,7 +4,7 @@ opaque=true fixed=(unless parent true) class="md-dialog-backdrop" - onTap=(action "outsideClicked") + ontap=(action "outsideClicked") }} {{#paper-dialog-container outsideClicked=(action "outsideClicked")}} {{#paper-dialog-inner parent=parent openFrom=openFrom closeTo=closeTo}} diff --git a/app/templates/components/paper-menu-container.hbs b/app/templates/components/paper-menu-container.hbs index d0c0a02ae..d1c195cd7 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" onTap=(action "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 ed848afab..b5287ba9e 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" onTap=(action "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 d52820f7a..8cf839469 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" onTap=(action "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 897d55268..df5a6f5dc 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" onTap=(action "toggleMenu")}} + {{paper-backdrop locked-open=isLockedOpen opaque=true class="md-sidenav-backdrop" ontap=(action "toggleMenu")}} {{/ember-wormhole}} {{/unless}} From c5480ba75b46427f23998527eb1f329d10dee768 Mon Sep 17 00:00:00 2001 From: Dan Chadwick Date: Mon, 21 Mar 2016 15:52:15 -0400 Subject: [PATCH 12/13] Revert "Change onTap to ontap to conform with lowercase action formal argument naming standard." This reverts commit d056c234afe3362e9de68c9a7a9d9761b3496676. --- CHANGELOG.md | 2 +- addon/components/paper-backdrop.js | 4 ++-- app/templates/components/paper-dialog.hbs | 2 +- app/templates/components/paper-menu-container.hbs | 2 +- app/templates/components/paper-menu-content.hbs | 2 +- app/templates/components/paper-select-container.hbs | 2 +- app/templates/components/paper-sidenav.hbs | 2 +- 7 files changed, 8 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 480f6e5fc..d2ce19e4e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,7 +8,7 @@ - [#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 -- [#313](https://github.com/miguelcobain/ember-paper/pull/313) paper-backdrop `tap` action renamed `ontap` and required action closure. +- [#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 6c6e98e07..8aad63cdd 100644 --- a/addon/components/paper-backdrop.js +++ b/addon/components/paper-backdrop.js @@ -38,8 +38,8 @@ export default Component.extend(TransitionMixin, { _onTap(e) { e.preventDefault(); - if (this.get('ontap')) { - this.get('ontap')(e); + if (this.get('onTap')) { + this.get('onTap')(e); } } diff --git a/app/templates/components/paper-dialog.hbs b/app/templates/components/paper-dialog.hbs index c236382b4..462f5eb0b 100644 --- a/app/templates/components/paper-dialog.hbs +++ b/app/templates/components/paper-dialog.hbs @@ -4,7 +4,7 @@ opaque=true fixed=(unless parent true) class="md-dialog-backdrop" - ontap=(action "outsideClicked") + onTap=(action "outsideClicked") }} {{#paper-dialog-container outsideClicked=(action "outsideClicked")}} {{#paper-dialog-inner parent=parent openFrom=openFrom closeTo=closeTo}} diff --git a/app/templates/components/paper-menu-container.hbs b/app/templates/components/paper-menu-container.hbs index d1c195cd7..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" ontap=(action "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 b5287ba9e..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" ontap=(action "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 8cf839469..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" ontap=(action "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 df5a6f5dc..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" ontap=(action "toggleMenu")}} + {{paper-backdrop locked-open=isLockedOpen opaque=true class="md-sidenav-backdrop" onTap=(action "toggleMenu")}} {{/ember-wormhole}} {{/unless}} From b59d2ab1ef8848843df0bfdc2773db4bc25285dd Mon Sep 17 00:00:00 2001 From: Dan Chadwick Date: Mon, 21 Mar 2016 16:40:58 -0400 Subject: [PATCH 13/13] Bind fullscreen and clickOutsideToClose in paper-dialog-inner, rather than use nearestOfType to find the dialog component. --- addon/components/paper-dialog-inner.js | 12 ++++-------- app/templates/components/paper-dialog.hbs | 8 +++++++- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/addon/components/paper-dialog-inner.js b/addon/components/paper-dialog-inner.js index 372a0b31b..68730fe2f 100644 --- a/addon/components/paper-dialog-inner.js +++ b/addon/components/paper-dialog-inner.js @@ -7,22 +7,18 @@ const { Component, computed } = Ember; export default Component.extend(/*Translate3dMixin, TODO */ { tagName: 'md-dialog', classNames: ['md-default-theme' , 'md-transition-in' /* TODO */ ], - classNameBindings: ['contentOverflow:md-content-overflow', 'dialogComponent.fullscreen:md-dialog-fullscreen'], + 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('dialogComponent.clickOutsideToClose')) { + if (this.get('clickOutsideToClose')) { ev.stopPropagation(); return false; } diff --git a/app/templates/components/paper-dialog.hbs b/app/templates/components/paper-dialog.hbs index 462f5eb0b..aeb35d888 100644 --- a/app/templates/components/paper-dialog.hbs +++ b/app/templates/components/paper-dialog.hbs @@ -7,7 +7,13 @@ onTap=(action "outsideClicked") }} {{#paper-dialog-container outsideClicked=(action "outsideClicked")}} - {{#paper-dialog-inner parent=parent openFrom=openFrom closeTo=closeTo}} + {{#paper-dialog-inner + parent=parent + openFrom=openFrom + closeTo=closeTo + fullscreen=fullscreen + clickOutsideToClose=clickOutsideToClose + }} {{yield}} {{/paper-dialog-inner}} {{/paper-dialog-container}}
onCloseaction closurean action to be executed when the dialog is closed, e.g. by pressing escape
parent id