Skip to content

Increase font size, add some UI depth back, and attachment icon. #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Increase font size, add some UI depth back, and attachment icon. #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6515d36
Makes the font size larger and other nice graphical enhancements.
scuml May 21, 2025
c221bff
Message type styles
scuml May 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
# Changelog

* 4.0.5 Updates panel to work with upcoming `serializable` branch.
* 4.1
- Updates panel to work with upcoming `serializable` branch. (Thanks @tim-schilling for the heads up on this.)
- Adds async support (Thanks @dchukhin)
- Increases font-size now that screens are larger and adds subtle depth back to UI.


* 4.0.4 Patches issue with missing alternatives attribute in mail object.
* 4.0.2 Mail panel is added by default to the debug toolbar.
* 4.0.0 Adds support for Django 4.0
Expand Down
66 changes: 50 additions & 16 deletions mail_panel/static/debug_toolbar/mail/mail_toolbar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,21 @@
border: 0;
margin: 0;
}
#djDebug .djm-mail-toolbar .t-center{
text-align: center;
vertical-align: middle;
}
#djDebug .djm-mail-toolbar thead{
background: linear-gradient(
to bottom,
#fff 0%,
#fcfcfc 20%,
#f9f9f9 80%,
#f5f5f5 100%
);


}
#djDebug .djm-mail-toolbar tr{
display:table-row;
width: 100%;
Expand All @@ -26,34 +40,42 @@
color: white;
}
#djDebug .djm-mail-toolbar tbody tr:hover{
background-color: #f5f5f5;
background-color: #f5f5f5!important;
}
#djDebug .djm-mail-toolbar thead th{
font-weight:300;
font-size: 12px;
border-bottom: 1px solid #d5d6d5;
border-left: 1px solid #e5e5e5;
font-size: 12px;
padding: 5px;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

#djDebug .djm-mail-toolbar thead th:first-child{
border-left: 0px;
}
#djDebug .djm-mail-toolbar th,#djDebug .djm-mail-toolbar td{
display:table-cell;
#djDebug .djm-mail-toolbar th,#djDebug .djm-mail-toolbar tbody td{
display: table-cell;
font-size: 14px;
padding: 4px;
}
#djDebug .djm-mail-toolbar .djm-unread-cell{
width: 18px;
width: 24px;
}

#djDebug .djm-mail-toolbar .djm-unread{
display:block;
background-color: #6cadf0 !important;
height: 8px;
width: 8px;
height: 9px;
width: 9px;
margin: 5px 5px 0px 5px;
border-radius:10px;
box-shadow: -1px -1px 3px rgba(0,0,0,.25) inset;

box-shadow:
1px 1px 2px rgba(255, 255, 255, 0.2), /* Outer highlight for raised effect */
inset -1px -1px 1px rgba(0, 0, 0, 0.1), /* Inner shadow for bevel */
inset 1px 1px 1px rgba(255, 255, 255, 0.3); /* Inner highlight for bevel */
}

#djDebug .djm-mail-toolbar .djm-message-list {
max-height: 500px;
overflow: scroll;
Expand All @@ -80,6 +102,7 @@
#djDebug .djm-mail-toolbar .djm-date-sent{
float: right;
color: #888 !important;
font-size:14px;
}
#djDebug .djm-mail-toolbar .djm-extra-headers{
border-top: 1px solid #f5f5f5;
Expand All @@ -101,20 +124,27 @@
cursor:pointer;
border: 1px solid #f5f5f5;
background: white;
color: #777;
color: #333;
float: right;
margin-top:-15px;
margin-left: 5px;
position:relative;
z-index:99;
background-image: linear-gradient(179deg, #FFFFFF 5%, #f9f9f9f9 47%, #f0f0f0f0 52%, #F3F3F3 100%);
border: 1px solid #939393;
box-shadow: 0px 1px 0 0 rgba(255,255,255,.35);
border-radius: 5px;

}
#djDebug .djm-mail-toolbar span.djm-multipart-tab.djm-multipart-tab-select{
color: black;
color: white;
background-image: linear-gradient(180deg, #888 5%, #999 40%, #aa9 60%, #ccc 100%);
box-shadow: inset 0px 2px 3px 0 rgba(0,0,0,.15) ;
}

#djDebug .djm-mail-toolbar #plain_text_message,
#djDebug .djm-mail-toolbar #raw_message{
font-size: 12px;
font-size: 14px;
margin: 10px 0px;
}
#djDebug .djm-mail-toolbar #plain_text_message{
Expand All @@ -133,16 +163,20 @@

#djDebug .djm-mail-toolbar span.djm-attachment{
background: url(data:image/png;base64,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);
no-repeat
center;
background-repeat: no-repeat;
background-position: center;
background-size: 15px 15px;
border: 2px solid #blue;
display:inline-block;
width: 15px;
height: 15px;
margin-right: 5px;
}
#djDebug .djm-mail-toolbar .table-icon{
height: 14px;
height: 16px;
margin-top: 2px;
}

#djm_message_overview span, #djm_message_overview b , #djm_message_overview div{
font-size: 14px;
}

2 changes: 1 addition & 1 deletion mail_panel/templates/mail_panel/message_overview.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,4 +38,4 @@ <h4>Mail message could not be found</h4>
{% endfor %}
</span>
</div>
{% endif %}
{% endif %}
6 changes: 3 additions & 3 deletions mail_panel/templates/mail_panel/panel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@
<th>To</th>
<th>Subject</th>
<th>Date Sent</th>
<th></th>
<th style="text-align:center"><img jsmethod="clear_all_messages" url="{% url 'djdt:clear_all_messages' %}" class="table-icon" src="{% static 'debug_toolbar/mail/trash.png' %}" alt=""></th>
<th class="t-center"><svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill=#aaa d="M375 73c-26-26-68.1-26-94.1 0L89 265C45.3 308.6 45.3 379.4 89 423s114.4 43.6 158.1 0L399 271c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9L281 457c-62.4 62.4-163.5 62.4-225.9 0S-7.4 293.4 55 231L247 39C291.7-5.7 364.3-5.7 409 39s44.7 117.2 0 161.9L225.2 384.7c-31.6 31.6-83.6 28.7-111.5-6.2c-23.8-29.8-21.5-72.8 5.5-99.8L271 127c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9L153.2 312.7c-9.7 9.7-10.6 25.1-2 35.8c10 12.5 28.7 13.6 40 2.2L375 167c26-26 26-68.1 0-94.1z"/></svg></th>
<th class="t-center"><img jsmethod="clear_all_messages" url="{% url 'djdt:clear_all_messages' %}" class="table-icon" src="{% static 'debug_toolbar/mail/trash.png' %}" alt=""></th>
</tr>
</thead>
{% endspaceless %}
Expand All @@ -32,7 +32,7 @@
<td>{{message.subject}}</td>
<td>{{message.date_sent}}</td>
<td style='text-align:right'>{% if message.attachments %}<span class='djm-attachment'></span>{{message.attachments|length}} items{% endif %}</td>
<td style="text-align:center"><img jsmethod="clear_message" url="{% url 'djdt:clear_message' message_id %}" class="table-icon" src="{% static 'debug_toolbar/mail/trash.png' %}" alt=""></td>
<td class="t-center"><img jsmethod="clear_message" url="{% url 'djdt:clear_message' message_id %}" class="table-icon" src="{% static 'debug_toolbar/mail/trash.png' %}" alt=""></td>
</tr>
{% endfor %}
</tbody>
Expand Down