Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

development: Update modal in emails page to use micromodal. 

We now use micromodal in the modal on dev server emails page to
make it consistent with other modals in the app and this is
preparatory work for moving away from bootstrap as well.
This commit is contained in:
Sahil Batra 2023-09-28 16:42:05 +05:30 committed by Tim Abbott
parent 8710feb5dd
commit cc4a6d08e7
4 changed files with 64 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
templates/zerver/development/email_log.html
View File

@ -18,7 +18,7 @@
<input type="checkbox" autocomplete="off" id="toggle"/>
<strong>Show text only version</strong>
</label>
<a href="#" data-toggle="modal" data-target="#forward_email_modal">
<a href="#" class="open-forward-email-modal">
<strong>Forward emails to an email account</strong>
</a>
</div>
@ -26,44 +26,52 @@
<div class="emails">
{{ log |safe }}
</div>
<div id="forward_email_modal" class="modal hide" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-body">
<div class="input-group">
<form id="smtp_form">
{{ csrf_input }}
<div class="alert alert-info"
id="smtp_form_status">
Updated successfully.
<div id="forward_email_modal" class="micromodal" aria-hidden="true">
<div class="modal__overlay" tabindex="-1">
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="dialog_title">
<header class="modal__header">
<h1 class="modal__title dialog_heading">
{{ _('Forward emails to an email account') }}
</h1>
<button class="modal__close" aria-label="{{ _('Close modal') }}" data-micromodal-close></button>
</header>
<main class="modal__content">
<div class="input-group">
<form id="smtp_form">
{{ csrf_input }}
<div class="alert alert-info" id="smtp_form_status">
Updated successfully.
</div>
<label for="forward">
Forwards all emails sent in the development environment to an external mail account.
</label>
<label class="radio">
<input name="forward" type="radio" value="enabled" {% if forward_address %}checked{% endif %}/>Yes
</label>
<label class="radio">
<input name="forward" type="radio" value="disabled" {% if not forward_address %}checked{% endif %}/>No
</label>
<div id="forward_address_sections" {% if not forward_address %}class="hide"{% endif %} >
<label for="forward_address"><strong>Address to which emails should be forwarded</strong></label>
<input type="text" id="address" name="forward_address" placeholder="eg: your-email@example.com" value="{{forward_address}}"/>
</div>
<br />
<div class="alert alert-info">
You must set up SMTP as described
<a target="_blank" rel="noopener noreferrer" href="https://zulip.readthedocs.io/en/latest/subsystems/email.html#development-and-testing"> here</a>
first before enabling this.
</div>
</form>
</div>
<label for="forward">
<strong>Forwards all emails sent in the
development environment to an external
mail account.
</strong>
</label>
<label class="radio">
<input name="forward" type="radio" value="enabled" {% if forward_address %}checked{% endif %}/>Yes
</label>
<label class="radio">
<input name="forward" type="radio" value="disabled" {% if not forward_address %}checked{% endif %}/>No
</label>
<div id="forward_address_sections" {% if not forward_address %}class="hide"{% endif %} >
<label for="forward_address"><strong>Address to which emails should be forwarded</strong></label>
<input type="text" id="address" name="forward_address" placeholder="eg: your-email@example.com" value="{{forward_address}}"/>
</div>
<br />
<div class="alert alert-info">
You must set up SMTP as described
<a target="_blank" rel="noopener noreferrer" href="https://zulip.readthedocs.io/en/latest/subsystems/email.html#development-and-testing"> here</a>
first before enabling this.
</div>
</form>
</main>
<footer class="modal__footer">
<button class="modal__btn dialog_exit_button" aria-label="{{ '(Close this dialog window)' }}" data-micromodal-close>{{ _('Close') }}</button>
<button class="modal__btn dialog_submit_button">
<span>{{ _('Update') }}</span>
</button>
</footer>
</div>
</div>
<div class="modal-footer">
<button id='save_smptp_details'>Update</button>
<button data-dismiss="modal">Close</button>
</div>
</div>
</div>
{% endblock %}

8
web/src/portico/email_log.js
View File

@ -2,6 +2,8 @@ import $ from "jquery";
import * as channel from "../channel";
import * as portico_modals from "./portico_modals";
$(() => {
// This code will be executed when the user visits /emails in
// development mode and email_log.html is rendered.
@ -29,7 +31,7 @@ $(() => {
$("#forward_address_sections").hide();
}
});
$("#save_smptp_details").on("click", () => {
$("#forward_email_modal .dialog_submit_button").on("click", () => {
const address =
$("input[name=forward]:checked").val() === "enabled" ? $("#address").val() : "";
const csrf_token = $('input[name="csrfmiddlewaretoken"]').attr("value");
@ -46,4 +48,8 @@ $(() => {
},
});
});
$(".open-forward-email-modal").on("click", (e) => {
e.preventDefault();
portico_modals.open_modal("forward_email_modal");
});
});

12
web/styles/portico/email_log.css
View File

@ -1,3 +1,7 @@
:root {
--color-background-modal: hsl(0deg 0% 98%);
}
#dev-emails-container {
.header {
position: fixed;
@ -17,6 +21,14 @@
}
#forward_email_modal {
.modal__content label {
font-size: 1rem;
}
#forward_address_sections {
margin-top: 20px;
}
& label.radio {
padding-left: 20px;
}

1
web/webpack.dev-assets.json
View File

@ -10,6 +10,7 @@
"dev-email-log": [
"./src/bundles/common",
"./src/portico/email_log",
"./src/portico/portico_modals",
"./styles/portico/email_log.css",
"./src/reload_state",
"./src/channel"