UX: adds subtitle support for modals

app/assets/javascripts/discourse/components/d-modal-body.js.es6

@@ -42,7 +42,9 @@ export default Ember.Component.extend({
       this.getProperties(
         'title',
         'rawTitle',
-        'fixed'
+        'fixed',
+        'subtitle',
+        'rawSubtitle'
       )
     );
   },

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

@@ -28,6 +28,7 @@ export default Ember.Component.extend({
 
     this.appEvents.on('modal:body-shown', data => {
       if (this.isDestroying || this.isDestroyed) { return; }
+
       if (data.fixed) {
         this.$().removeClass('hidden');
       }
@@ -37,6 +38,16 @@ export default Ember.Component.extend({
       } else if (data.rawTitle) {
         this.set('title', data.rawTitle);
       }
+
+      if (data.subtitle) {
+        this.set('subtitle', I18n.t(data.subtitle));
+      } else if (data.rawSubtitle) {
+        this.set('subtitle', data.rawSubtitle);
+      } else {
+        // if no subtitle provided, makes sure the previous subtitle
+        // of another modal is not used
+        this.set('subtitle', null);
+      }
     });
   },
 

app/assets/javascripts/discourse/templates/components/d-modal.hbs

@@ -6,7 +6,13 @@
           <a class="close" {{action closeModal}}>{{d-icon "times"}}</a>
         </div>
 
-        <h3>{{title}}</h3>
+        <div class="title">
+          <h3>{{title}}</h3>
+
+          {{#if subtitle}}
+            <p>{{subtitle}}</p>
+          {{/if}}
+        </div>
       </div>
 
       <div id='modal-alert'></div>

app/assets/javascripts/discourse/templates/modal.hbs

@@ -1,6 +1,7 @@
 {{#d-modal
   modalClass=modalClass
   title=title
+  subtitle=subtitle
   class="hidden"
   errors=errors
   closeModal=(route-action "closeModal")}}