scuml · scuml · May 21, 2025 · May 21, 2025 · Jul 4, 2025
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,4 @@ Pipfile
 Pipfile.lock
 .coverage
 .tox/
+.env
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -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

diff --git a/README.md b/README.md
@@ -114,11 +114,26 @@ original_outbox = len(mail.outbox)
 assert(len(mail.outbox) == original_outbox + 1)
 ```
 
-Shameless Plugs
-=======
-Like Django Mail Panel?  Be sure to check out and support these other tools for Mac that will improve your workflow:
+Contributing
+============
+
+Install the development dependencies:
 
-**[Kubermagic](https://echodot.com/kubermagic/)** - Automate, and script away tedious kubectl commands with Kubermagic; a UI for developers, QA teams, and those starting to learn the ins-and-outs of Kubernetes.     
+```bash
+poetry install --with dev
+```
 
+Run the tests on your current python:
+
+```bash
+pytest .
+```
+
+
+
+
+Shameless Plugs
+=======
+Like Django Mail Panel?  Be sure to check out and support this other tool for Mac that will improve your workflow:
 
 **[Red](https://echodot.com/red/)** - A visual and interactive Redis client, featuring live updating keys, an interactive console, pub/sub, lua script support and much more.
diff --git a/mail_panel/static/debug_toolbar/mail/mail_toolbar.css b/mail_panel/static/debug_toolbar/mail/mail_toolbar.css
@@ -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%;
@@ -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;
@@ -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;
@@ -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{
@@ -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;
+}
+
diff --git a/mail_panel/templates/mail_panel/message_overview.html b/mail_panel/templates/mail_panel/message_overview.html
@@ -38,4 +38,4 @@ <h4>Mail message could not be found</h4>
     {% endfor %}
     </span>
 </div>
-{% endif %}
+{% endif %}
diff --git a/mail_panel/templates/mail_panel/panel.html b/mail_panel/templates/mail_panel/panel.html
@@ -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 %}
@@ -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>
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,3 +8,4 @@ Pipfile @@
     Pipfile.lock
     .coverage
     .tox/
+    .env