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

email-log: Update CSS styles for dev environment email log. 

Removes reliance on bootstrap alert and label rules/styles that
were used or expected for this email log page.
This commit is contained in:
Lauryn Menard 2024-02-09 22:04:45 +01:00 committed by Tim Abbott
parent 07ccd29a9b
commit 831381f160
5 changed files with 77 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,24 +6,21 @@
{% endblock %}
{% block content %}
<div class="container" id="dev-emails-container">
<div class="header">
<div class="alert">
All the emails sent in the Zulip development environment are logged here. You can also
manually generate most of the emails by clicking <a href="/emails/generate">here</a>.
To clear this log click <a href="/emails/clear">here</a>
<div class="container" id="dev-email-log-container">
<div class="dev-email-log-header">
<div class="dev-email-log-actions">
All emails sent in the Zulip development environment are logged here. <a href="/emails/clear">Clear this log</a>
| <a href="/emails/generate">Manually generate most emails</a>
| <a href="#" class="open-forward-email-modal">Forward emails to an email account</a>
</div>
<div class="config-options">
<div class="dev-email-log-text-only">
<label>
<input type="checkbox" autocomplete="off" id="toggle"/>
<strong>Show text only version</strong>
</label>
<a href="#" class="open-forward-email-modal">
<strong>Forward emails to an email account</strong>
</a>
</div>
</div>
<div class="emails">
<div class="dev-email-log-content">
{{ log |safe }}
</div>
<div id="forward_email_modal" class="micromodal" aria-hidden="true">
@ -39,7 +36,7 @@
<div class="input-group">
<form id="smtp_form">
{{ csrf_input }}
<div class="alert alert-info" id="smtp_form_status">
<div class="dev-forward-email-alert" id="smtp_form_status">
Updated successfully.
</div>
<label for="forward">
@ -55,8 +52,7 @@
<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">
<div class="dev-forward-email-alert">
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.

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

@ -2,17 +2,70 @@
--color-background-modal: hsl(0deg 0% 98%);
}
#dev-emails-container {
.header {
#dev-email-log-container {
.dev-email-log-header {
position: fixed;
font-family: sans-serif;
font-size: 14px;
}
.config-options {
.dev-email-log-header,
.dev-forward-email-alert {
padding: 10px;
border: 1px solid hsl(190deg 65% 84%);
border-radius: 4px;
background-color: hsl(200deg 65% 91%);
color: hsl(200deg 50% 45%);
}
.dev-email-log-actions,
.dev-forward-email-alert {
& a {
color: hsl(200deg 50% 45%);
&:hover {
color: hsl(200deg 56% 33%);
}
}
}
.dev-email-log-actions {
padding-bottom: 5px;
}
.dev-email-log-text-only {
text-align: right;
}
.emails {
.dev-email-log-content {
padding-top: 100px;
max-width: 1000px;
& h4 {
color: hsl(0deg 0% 20%);
margin: 2px 10px;
}
.email-text,
.email-html {
margin: 10px;
}
.email-text pre {
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
color: hsl(0deg 0% 20%);
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 20px;
word-break: break-all;
word-wrap: break-word;
white-space: pre-wrap;
background-color: hsl(0deg 0% 96%);
border: 1px solid hsl(0deg 0% 75%);
border-radius: 4px;
}
}
#smtp_form_status,
@ -23,10 +76,14 @@
#forward_email_modal {
.modal__content label {
font-size: 1rem;
display: block;
margin-bottom: 5px;
cursor: pointer;
}
#forward_address_sections {
margin-top: 20px;
#forward_address_sections,
.dev-forward-email-alert {
margin: 5px 0;
}
& label.radio {

2
zerver/tests/test_docs.py
View File

@ -240,7 +240,7 @@ class DocPageTest(ZulipTestCase):
def test_dev_environment_endpoints(self) -> None:
self._test("/devlogin/", ["Normal users"])
self._test("/devtools/", ["Useful development URLs"])
self._test("/emails/", ["manually generate most of the emails by clicking"])
self._test("/emails/", ["Manually generate most emails"])
def test_error_endpoints(self) -> None:
self._test("/errors/404/", ["Page not found"])

4
zerver/tests/test_email_log.py
View File

@ -17,12 +17,12 @@ class EmailLogTest(ZulipTestCase):
self.assertIn("emails", result["Location"])
result = self.client_get("/emails/")
self.assert_in_success_response(["All the emails sent in the Zulip"], result)
self.assert_in_success_response(["All emails sent in the Zulip"], result)
result = self.client_get("/emails/clear/")
self.assertEqual(result.status_code, 302)
result = self.client_get(result["Location"])
self.assertIn("manually generate most of the emails by clicking", str(result.content))
self.assertIn("Manually generate most emails", str(result.content))
output_log = (
"INFO:root:Emails sent in development are available at http://testserver/emails"
)

2
zerver/tests/test_example.py
View File

@ -413,7 +413,7 @@ class TestDevelopmentEmailsLog(ZulipTestCase):
# assert_in_success_response() is another helper that is commonly used to ensure
# we are on the right page by verifying a string exists in the page's content.
self.assert_in_success_response(["All the emails sent in the Zulip"], result)
self.assert_in_success_response(["All emails sent in the Zulip"], result)
class TestMocking(ZulipTestCase):