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")}}

app/assets/stylesheets/common/base/modal.scss

@@ -31,9 +31,17 @@
   align-items: center;
   padding: 10px 15px;
   border-bottom: 1px solid $primary-low;
-  h3 {
-    margin-bottom: 0;
+
+  .title {
+    h3 {
+      margin-bottom: 0;
+    }
+
+    p {
+      margin: 0;
+    }
   }
+
   .modal-close {
     order: 2;
     margin-left: auto;
@@ -81,14 +89,14 @@
 
 .modal-inner-container {
   display: table;
-  width: 100%;  
+  width: 100%;
   min-width: 320px;
   max-width: 700px;
   margin: 0 auto;
   background-color: $secondary;
   background-clip: padding-box;
   box-shadow: shadow("modal");
-  
+
   @media screen and (min-width: 475px) {
     min-width: 475px;
     width: auto;
@@ -511,4 +519,3 @@
   position: absolute;
   width: 95%;
 }
-

plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs

@@ -1,5 +1,6 @@
 {{#d-modal-body
   title="discourse_local_dates.create.modal_title"
+  subtitle="discourse_local_dates.create.modal_subtitle"
   class="discourse-local-dates-create-modal"
   style="overflow: auto"}}
 

plugins/discourse-local-dates/config/locales/client.en.yml

@@ -4,6 +4,7 @@ en:
       title: Insert date
       create:
         modal_title: Insert date
+        modal_subtitle: "We will automatically convert the date and time to the viewer’s local time zone."
         form:
           insert: Insert
           advanced_mode: Advanced mode