Migrate `ModalView` to Component

This commit is contained in:
Robin Ward 2016-11-21 15:18:43 -05:00
parent 2c585783ff
commit 3d8cfac8bf
3 changed files with 24 additions and 23 deletions

View File

@ -1,9 +1,8 @@
import { on } from "ember-addons/ember-computed-decorators"; import { on } from "ember-addons/ember-computed-decorators";
export default Ember.View.extend({ export default Ember.Component.extend({
elementId: 'discourse-modal', elementId: 'discourse-modal',
templateName: 'modal/modal', classNameBindings: [':modal', ':hidden', 'modalClass'],
classNameBindings: [':modal', ':hidden', 'controller.modalClass'],
attributeBindings: ['data-keyboard'], attributeBindings: ['data-keyboard'],
// We handle ESC ourselves // We handle ESC ourselves
@ -19,7 +18,7 @@ export default Ember.View.extend({
this.appEvents.on('modal:body-shown', data => { this.appEvents.on('modal:body-shown', data => {
if (data.title) { if (data.title) {
this.set('controller.title', I18n.t(data.title)); this.set('title', I18n.t(data.title));
} }
}); });
}, },

View File

@ -0,0 +1,21 @@
{{#d-modal modalClass=modalClass title=title}}
<div class="modal-outer-container">
<div class="modal-middle-container">
<div class="modal-inner-container">
<div class="modal-header">
<a class="close" {{action "closeModal"}}>{{fa-icon "times"}}</a>
<h3>{{title}}</h3>
<div class="clearfix"></div>
</div>
<div id='modal-alert'></div>
{{outlet "modalBody"}}
{{#each errors as |error|}}
<div class="alert alert-error">
<button class="close" data-dismiss="alert">×</button>
{{error}}
</div>
{{/each}}
</div>
</div>
</div>
{{/d-modal}}

View File

@ -1,19 +0,0 @@
<div class="modal-outer-container">
<div class="modal-middle-container">
<div class="modal-inner-container">
<div class="modal-header">
<a class="close" {{action "closeModal"}}>{{fa-icon "times"}}</a>
<h3>{{title}}</h3>
<div class="clearfix"></div>
</div>
<div id='modal-alert'></div>
{{outlet "modalBody"}}
{{#each errors as |error|}}
<div class="alert alert-error">
<button class="close" data-dismiss="alert">×</button>
{{error}}
</div>
{{/each}}
</div>
</div>
</div>