From 8128cbd7db95750a4a94e668078e2e5d401ad4e8 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Wed, 30 May 2018 17:14:00 +0200
Subject: [PATCH] UX: adds subtitle support for modals

---
 .../discourse/components/d-modal-body.js.es6    |  4 +++-
 .../discourse/components/d-modal.js.es6         | 11 +++++++++++
 .../discourse/templates/components/d-modal.hbs  |  8 +++++++-
 .../javascripts/discourse/templates/modal.hbs   |  1 +
 app/assets/stylesheets/common/base/modal.scss   | 17 ++++++++++++-----
 .../discourse-local-dates-create-form.hbs       |  1 +
 .../config/locales/client.en.yml                |  1 +
 7 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/d-modal-body.js.es6 b/app/assets/javascripts/discourse/components/d-modal-body.js.es6
index 8de322600d6..04c9754dd88 100644
--- a/app/assets/javascripts/discourse/components/d-modal-body.js.es6
+++ b/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'
       )
     );
   },
diff --git a/app/assets/javascripts/discourse/components/d-modal.js.es6 b/app/assets/javascripts/discourse/components/d-modal.js.es6
index c015ca6ba52..a57f4daea09 100644
--- a/app/assets/javascripts/discourse/components/d-modal.js.es6
+++ b/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);
+      }
     });
   },
 
diff --git a/app/assets/javascripts/discourse/templates/components/d-modal.hbs b/app/assets/javascripts/discourse/templates/components/d-modal.hbs
index 8ed28a6a0e4..852b29f884d 100644
--- a/app/assets/javascripts/discourse/templates/components/d-modal.hbs
+++ b/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>
diff --git a/app/assets/javascripts/discourse/templates/modal.hbs b/app/assets/javascripts/discourse/templates/modal.hbs
index 43c4e79f49b..953578f6efe 100644
--- a/app/assets/javascripts/discourse/templates/modal.hbs
+++ b/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")}}
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index be3a495fcb2..45e45b025d6 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/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%;
 }
-
diff --git a/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs b/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs
index f9ffba54f25..c416dc625c8 100644
--- a/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs
+++ b/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"}}
 
diff --git a/plugins/discourse-local-dates/config/locales/client.en.yml b/plugins/discourse-local-dates/config/locales/client.en.yml
index 5ffb0ecdab2..a65596ceab0 100644
--- a/plugins/discourse-local-dates/config/locales/client.en.yml
+++ b/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