Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Use a template for the `d-modal` component

This commit is contained in:
Robin Ward 2017-08-30 15:08:23 -04:00
parent e7885c20cb
commit 8fcd5af5b1
3 changed files with 43 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/assets/javascripts/discourse/components/d-modal.js.es6
View File

@ -1,10 +1,20 @@
import { on } from "ember-addons/ember-computed-decorators"; import { on } from "ember-addons/ember-computed-decorators";
export default Ember.Component.extend({ export default Ember.Component.extend({
elementId: 'discourse-modal', classNameBindings: [':modal', ':d-modal', 'modalClass', 'modalStyle'],
classNameBindings: [':modal', 'modalClass'],
attributeBindings: ['data-keyboard'], attributeBindings: ['data-keyboard'],
init() {
this._super(...arguments);
// If we need to render a second modal for any reason, we can't
// use `elementId`
if (this.get('modalStyle') !== 'inline-modal') {
this.set('elementId', 'discourse-modal');
this.set('modalStyle', 'popup-modal');
}
},
// We handle ESC ourselves // We handle ESC ourselves
'data-keyboard': 'false', 'data-keyboard': 'false',

24
app/assets/javascripts/discourse/templates/components/d-modal.hbs Normal file
View File

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

28
app/assets/javascripts/discourse/templates/modal.hbs
View File

@ -1,24 +1,10 @@
{{#d-modal modalClass=modalClass title=title class="hidden"}} {{#d-modal
<div class="modal-outer-container"> modalClass=modalClass
<div class="modal-middle-container"> title=title
<div class="modal-inner-container"> class="hidden"
<div class="modal-header"> errors=errors
<div class='modal-close'> closeModal=(route-action "closeModal")}}
<a class="close" {{action "closeModal"}}>{{d-icon "times"}}</a>
</div>
<h3>{{title}}</h3>
</div>
<div id='modal-alert'></div>
{{outlet "modalBody"}} {{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}} {{/d-modal}}