UX: adds subtitle support for modals

This commit is contained in:
Joffrey JAFFEUX
2018-05-30 17:14:00 +02:00
committed by GitHub
parent 43b1768987
commit 8128cbd7db
7 changed files with 36 additions and 7 deletions

View File

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

View File

@ -28,6 +28,7 @@ export default Ember.Component.extend({
this.appEvents.on('modal:body-shown', data => { this.appEvents.on('modal:body-shown', data => {
if (this.isDestroying || this.isDestroyed) { return; } if (this.isDestroying || this.isDestroyed) { return; }
if (data.fixed) { if (data.fixed) {
this.$().removeClass('hidden'); this.$().removeClass('hidden');
} }
@ -37,6 +38,16 @@ export default Ember.Component.extend({
} else if (data.rawTitle) { } else if (data.rawTitle) {
this.set('title', 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);
}
}); });
}, },

View File

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

View File

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

View File

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

View File

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

View File

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