From 6515d36ceed7c237d7eaed75083e12696b9392d7 Mon Sep 17 00:00:00 2001 From: Stephen Mitchell Date: Wed, 21 May 2025 12:23:15 -0400 Subject: [PATCH 1/2] Makes the font size larger and other nice graphical enhancements. --- CHANGELOG.md | 7 ++- .../debug_toolbar/mail/mail_toolbar.css | 50 +++++++++++++++---- mail_panel/templates/mail_panel/panel.html | 6 +-- 3 files changed, 48 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1011377..dde407c 100644 --- 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/mail_panel/static/debug_toolbar/mail/mail_toolbar.css b/mail_panel/static/debug_toolbar/mail/mail_toolbar.css index 6020139..eb50ef4 100644 --- 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%, /* Light gray at the top */ + #fcfcfc 20%, /* Light gray at the top */ + #f9f9f9 80%, /* Mid-tone gray */ + #f5f5f5 100% /* Slightly darker at the bottom */ + ); + +} #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; @@ -114,7 +137,7 @@ #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{ @@ -143,6 +166,11 @@ 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/panel.html b/mail_panel/templates/mail_panel/panel.html index 725cf30..82d1ef1 100644 --- a/mail_panel/templates/mail_panel/panel.html +++ b/mail_panel/templates/mail_panel/panel.html @@ -19,8 +19,8 @@ To Subject Date Sent - - + + {% endspaceless %} @@ -32,7 +32,7 @@ {{message.subject}} {{message.date_sent}} {% if message.attachments %}{{message.attachments|length}} items{% endif %} - + {% endfor %} From c221bff52edb9bd2c7f441a518b3ab527316e776 Mon Sep 17 00:00:00 2001 From: Stephen Mitchell Date: Wed, 21 May 2025 13:01:18 -0400 Subject: [PATCH 2/2] Message type styles --- .../debug_toolbar/mail/mail_toolbar.css | 24 ++++++++++++------- .../mail_panel/message_overview.html | 2 +- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/mail_panel/static/debug_toolbar/mail/mail_toolbar.css b/mail_panel/static/debug_toolbar/mail/mail_toolbar.css index eb50ef4..8b7ead2 100644 --- a/mail_panel/static/debug_toolbar/mail/mail_toolbar.css +++ b/mail_panel/static/debug_toolbar/mail/mail_toolbar.css @@ -22,10 +22,10 @@ #djDebug .djm-mail-toolbar thead{ background: linear-gradient( to bottom, - #fff 0%, /* Light gray at the top */ - #fcfcfc 20%, /* Light gray at the top */ - #f9f9f9 80%, /* Mid-tone gray */ - #f5f5f5 100% /* Slightly darker at the bottom */ + #fff 0%, + #fcfcfc 20%, + #f9f9f9 80%, + #f5f5f5 100% ); @@ -124,15 +124,22 @@ 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, @@ -156,10 +163,9 @@ #djDebug .djm-mail-toolbar span.djm-attachment{ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAvCAYAAAChd5n0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAbrSURBVGiBzZptsFVlFcd/+3rNFBQyCrNMy+hFs9SZ1MIXUBEE38qzQMK3wmIqsWYaDYnEfEEZ+2Iv1iBDIlyE8wdJEQWUJnWoSRwsm8ZqxtKwDxa3jHCGzLm7D2vtznOP556z773nkOvL2XutZz9n/c5a63nW3vtkvEnFzE4EpgMTgTHATmArUJX0+2JcnucAZP8HH5uKmY0F5uMQhzUY8iLQAyyS9OqbEsTMTgDWA0cm6r8AvTjUOxP9DuDCarX6EkDXvnKylZjZx4Et1CDWAuOBDwInAEcDU4BHw34isGn69OkjAbr3sbNjJO1qoD8ed3BMqK6V9J26YXuAzcBmM/suMBc4FpgHLNgnqWVmXcAKYBLwdUkrElsZiEZzbon5XgZO63hqmVk3sA74LPAOPFUK2/HAJmoQ15WBCFkA5MBYYHZHQQKiClwUqp8Cd4TtYzjE2LDNk3THIKbfDvwpjs/pGIiZ7QesBj4dqp8BF0rabWYfxfO9gLhe0uLBzC8pB16I07d3pNgrlUqGQ1wcqieA8yXtMbNjgcfoD3H7EL/q0Pj8d0cikmXZGqASp08C0wLiOHx3HjaEmR2Jr1oAT7U1IrE63QdYqJ4Apkp6NSDSdJo/jEgAXA3sD+wFVrZt+Q2I1dQgHgfOS9JpC3B42BZIunUY33UBcD+wH7BOUqUtqRUQq6hBPAlcEBDH4JEoIL7VBoh1OMRrwPw8z9vWovQAM+J4Gx6J3Wb2IXyze3fYFkq6pYSzowfQnw8I70j6gJnVavUP0Iam0cx68M0O4BfAuZL+aWYfxlenAuIGSTe3mOtQvMc6CbhM0vrENhVPpwNCNUNSteh+h1XsTSA+EhBFOi0sAfE24JGAADgqsZ3bCCK9fsipZWYrE4ifA5MTiLQmbpR0U4u5RgMPJxArgbsSiPUB0dcIAoYQkUqlkmVZtgKYlUBMk/SvqIlNwBFhu0nSt1tAjMIjcUqoeiRdFrapwE/wZbYPmNkIAoYQkSzLlicQv8QL+xUzG4cvse8N282SFraAGB3XFBArJV0atiKd9sebw1kDQcAgi93MlgOXx+l2PJ3+YWYfwHfsFOKGFnONwlPw5FCtkjQrbJPxSLw1bLMkrWo0T1HspSNiZvckEE8nEOPwrnawEA8nEPclEJPwmiggLh0IIpVSIAFxRZxuB85JIB6lVhO3loA4BNgIfCpUq4Einc7GI3FgAtFTxseWIHUQTwFTknTaTO0ee5GkBS3mGhkQ40NVxdOmLyLxIHAQXhOlIaDFqmVmy+gfiamS/m5mRwfE+8J2m6RvtpjrYHx1KiDWSLokbJOAB6hF4vLBQECTYjezpcDsON2B18QuMzsKr4kCYrGkeYOEqEqaEbazqEUC4ApJ95YFaFrsZnZ3AvGrBOI9dRC3l4CoTyfleV5EYiIeiQLiysFApPKG1DKzJcBVCcTZknrjfDn9I3F9C4gRAXFaqNYBM9euXZub2Rl4JEaE7XOSlg8FAupSy8x+BMyJ0x346tQbtlPx9hxgiaQ5NJGAeAiYEKr78fbidTObELYU4p6hALwhtczsugTiGbwB7E2umRKfr+CPYppBHNQAYnpATKyD+PxQIVLpji8+BrgtdL/DIf5aN7Zox/8o6W9NIIp0OqOAyPO8Euk0gf7pNFvSj4cLAbWIXBvHe4FLJL3cYGwRncPN7IAG9jSdCoj1gAXE6TjEyLB9QdKyNjAA0BXPmM6L86WSfj3A2Mfj8zDgq/VGMzswHJ0QqgfwdOozs/HABuDgsH1R0tI2+P8/6QZmUntk2SzMm4HfAMcBi8LxZcBu/LHMYuDUGPsgYFET4/G+6pAE4u52QoCn05lxvBN4dqCBkl7D95bd+I3/jcBzcc02ahAbgIqk/8RK9wgdhgAHKYr4RUmvNxssaTtwFt79ghdt0fXuxaPymQRiI7V0mtMpCPDUyuO4r8wFkp6uVConZVl2Ot7BjgD+DGyV9DxApNND1CLxJUlL2up5nWRmti0c2gm8v1VUWomZfRKvieKRzpcl/XB4bg4s6Ya4NXRH4K+4hixmdjL9Ib7SSYhUuvDnSMUecVWTsU0lIDbRH+Ku4blXXrokPYv/igBXxlukQYmZnYIvzwXE1fsSAmo7+2K82N8CVKNdLyUBsREYFaq5kn7QVi9LSBeApN8CxR3eOOAxM/tEq4vN7GJ8nyheuFwj6fudcLSV1LfxdwLXxGmO79z3As/keb4ny7IuvFeaiN8CX5Rc/jVJd3be5f4y4D8fzOwbwC30v+nqxZfnbnx1G5XYduE1saZTzjaTpn/hiBczc4FpwED18jx+x/c9SS91wMdSUuq/KPG6bBowGXhXjH8O33s2SHqho16WkALkv7214dCxBdIOAAAAAElFTkSuQmCC); - 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; diff --git a/mail_panel/templates/mail_panel/message_overview.html b/mail_panel/templates/mail_panel/message_overview.html index c998389..db923e2 100644 --- a/mail_panel/templates/mail_panel/message_overview.html +++ b/mail_panel/templates/mail_panel/message_overview.html @@ -38,4 +38,4 @@

Mail message could not be found

{% endfor %} -{% endif %} \ No newline at end of file +{% endif %}