dialog_widget: Simplify rendering logic.

This makes the templates a lot more readable.
This commit is contained in:
Tim Abbott
2021-07-14 13:21:06 -07:00
parent e0135e278d
commit c5b455d5c2
2 changed files with 16 additions and 21 deletions

View File

@@ -85,32 +85,26 @@ export function launch(conf) {
}
}
const html = render_dialog_widget({
fade: conf.fade,
danger_submit_button: conf.danger_submit_button,
});
const dialog = $(html);
conf.parent.append(dialog);
// Close any existing modals--on settings screens you can
// have multiple buttons that need confirmation.
if (overlays.is_modal_open()) {
overlays.close_modal("#dialog_widget_modal");
}
dialog.find(".dialog_heading").html(
render_dialog_heading({
const html_submit_button = conf.html_submit_button || $t_html({defaultMessage: "Save changes"});
const html_dialog_heading = render_dialog_heading({
heading_text: conf.html_heading,
link: conf.help_link,
}),
);
dialog.find(".dialog_body").append(conf.html_body);
const submit_button_span = dialog.find(".dialog_submit_button span");
const html_submit_button = conf.html_submit_button || $t_html({defaultMessage: "Save changes"});
submit_button_span.html(html_submit_button);
});
const html = render_dialog_widget({
fade: conf.fade,
html_submit_button,
html_dialog_heading,
html_body: conf.html_body,
danger_submit_button: conf.danger_submit_button,
});
const dialog = $(html);
conf.parent.append(dialog);
if (conf.post_render !== undefined) {
conf.post_render();

View File

@@ -1,16 +1,17 @@
<div class="modal modal-bg new-style hide {{#if fade}}fade{{/if}}" id="dialog_widget_modal" tabindex="-1" role="dialog" aria-labelledby="dialog_widget_modal" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close close-modal-btn" data-dismiss="modal" aria-label="{{t 'Close' }}"><span aria-hidden="true">&times;</span></button>
<div class="dialog_heading"></div>
<div class="dialog_heading">{{{ html_dialog_heading }}}</div>
</div>
<div class="modal-body dialog_body">
<div id="dialog_error" class="alert"></div>
{{{ html_body }}}
</div>
<div class="modal-footer">
<button class="button rounded close-modal-btn" data-dismiss="modal">{{t "Cancel" }}</button>
<button class="button rounded {{#if danger_submit_button}}btn-danger{{else}}sea-green{{/if}} dialog_submit_button">
<object class="loader" type="image/svg+xml" data="/static/images/loader.svg"></object>
<span></span>
<span>{{{ html_submit_button }}}</span>
</button>
</div>
</div>