1
0
mirror of https://github.com/django/django.git synced 2025-06-30 15:59:11 +00:00

Fixed #36386 -- Added styles and icons for INFO and DEBUG messages in the admin.

This commit is contained in:
michalpokusa 2025-06-18 11:37:35 +02:00 committed by Sarah Boyce
parent 7091801e04
commit 68a45d9a80
7 changed files with 74 additions and 2 deletions

View File

@ -34,6 +34,10 @@ html[data-theme="light"],
--error-fg: #ba2121; --error-fg: #ba2121;
--message-debug-bg: #efefef;
--message-debug-icon: url(../img/icon-debug.svg);
--message-info-bg: #ccefff;
--message-info-icon: url(../img/icon-info.svg);
--message-success-bg: #dfd; --message-success-bg: #dfd;
--message-success-icon: url(../img/icon-yes.svg); --message-success-icon: url(../img/icon-yes.svg);
--message-warning-bg: #ffc; --message-warning-bg: #ffc;
@ -642,13 +646,28 @@ ul.messagelist li {
margin: 0 0 10px 0; margin: 0 0 10px 0;
color: var(--body-fg); color: var(--body-fg);
word-break: break-word; word-break: break-word;
background-color: var(--message-success-bg); background-color: var(--message-info-bg);
background-image: var(--message-success-icon); background-image: var(--message-info-icon);
background-position: 40px 12px; background-position: 40px 12px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 16px auto; background-size: 16px auto;
} }
ul.messagelist li.debug {
background-color: var(--message-debug-bg);
background-image: var(--message-debug-icon);
}
ul.messagelist li.info {
background-color: var(--message-info-bg);
background-image: var(--message-info-icon);
}
ul.messagelist li.success {
background-color: var(--message-success-bg);
background-image: var(--message-success-icon);
}
ul.messagelist li.warning { ul.messagelist li.warning {
background-color: var(--message-warning-bg); background-color: var(--message-warning-bg);
background-image: var(--message-warning-icon); background-image: var(--message-warning-icon);

View File

@ -20,6 +20,11 @@
--border-color: #353535; --border-color: #353535;
--error-fg: #e35f5f; --error-fg: #e35f5f;
--message-debug-bg: #4e4e4e;
--message-debug-icon: url(../img/icon-debug-dark.svg);
--message-info-bg: #265895;
--message-info-icon: url(../img/icon-info-dark.svg);
--message-success-bg: #006b1b; --message-success-bg: #006b1b;
--message-success-icon: url(../img/icon-yes-dark.svg); --message-success-icon: url(../img/icon-yes-dark.svg);
--message-warning-bg: #583305; --message-warning-bg: #583305;
@ -60,6 +65,11 @@ html[data-theme="dark"] {
--border-color: #353535; --border-color: #353535;
--error-fg: #e35f5f; --error-fg: #e35f5f;
--message-debug-bg: #4e4e4e;
--message-debug-icon: url(../img/icon-debug-dark.svg);
--message-info-bg: #265895;
--message-info-icon: url(../img/icon-info-dark.svg);
--message-success-bg: #006b1b; --message-success-bg: #006b1b;
--message-success-icon: url(../img/icon-yes-dark.svg); --message-success-icon: url(../img/icon-yes-dark.svg);
--message-warning-bg: #583305; --message-warning-bg: #583305;

View File

@ -0,0 +1,9 @@
<svg width="13" height="13" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
<!--
Icon Name: bug
Icon Family: classic
Icon Style: solid
-->
<path fill="#bfbfbf" d="M256 0c53 0 96 43 96 96l0 3.6c0 15.7-12.7 28.4-28.4 28.4l-135.1 0c-15.7 0-28.4-12.7-28.4-28.4l0-3.6c0-53 43-96 96-96zM41.4 105.4c12.5-12.5 32.8-12.5 45.3 0l64 64c.7 .7 1.3 1.4 1.9 2.1c14.2-7.3 30.4-11.4 47.5-11.4l112 0c17.1 0 33.2 4.1 47.5 11.4c.6-.7 1.2-1.4 1.9-2.1l64-64c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-64 64c-.7 .7-1.4 1.3-2.1 1.9c6.2 12 10.1 25.3 11.1 39.5l64.3 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c0 24.6-5.5 47.8-15.4 68.6c2.2 1.3 4.2 2.9 6 4.8l64 64c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-63.1-63.1c-24.5 21.8-55.8 36.2-90.3 39.6L272 240c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 239.2c-34.5-3.4-65.8-17.8-90.3-39.6L86.6 502.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l64-64c1.9-1.9 3.9-3.4 6-4.8C101.5 367.8 96 344.6 96 320l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64.3 0c1.1-14.1 5-27.5 11.1-39.5c-.7-.6-1.4-1.2-2.1-1.9l-64-64c-12.5-12.5-12.5-32.8 0-45.3z" />
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,9 @@
<svg width="13" height="13" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
<!--
Icon Name: bug
Icon Family: classic
Icon Style: solid
-->
<path fill="#808080" d="M256 0c53 0 96 43 96 96l0 3.6c0 15.7-12.7 28.4-28.4 28.4l-135.1 0c-15.7 0-28.4-12.7-28.4-28.4l0-3.6c0-53 43-96 96-96zM41.4 105.4c12.5-12.5 32.8-12.5 45.3 0l64 64c.7 .7 1.3 1.4 1.9 2.1c14.2-7.3 30.4-11.4 47.5-11.4l112 0c17.1 0 33.2 4.1 47.5 11.4c.6-.7 1.2-1.4 1.9-2.1l64-64c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-64 64c-.7 .7-1.4 1.3-2.1 1.9c6.2 12 10.1 25.3 11.1 39.5l64.3 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c0 24.6-5.5 47.8-15.4 68.6c2.2 1.3 4.2 2.9 6 4.8l64 64c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-63.1-63.1c-24.5 21.8-55.8 36.2-90.3 39.6L272 240c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 239.2c-34.5-3.4-65.8-17.8-90.3-39.6L86.6 502.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l64-64c1.9-1.9 3.9-3.4 6-4.8C101.5 367.8 96 344.6 96 320l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64.3 0c1.1-14.1 5-27.5 11.1-39.5c-.7-.6-1.4-1.2-2.1-1.9l-64-64c-12.5-12.5-12.5-32.8 0-45.3z" />
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,9 @@
<svg width="13" height="13" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
<!--
Icon Name: circle-info
Icon Family: classic
Icon Style: solid
-->
<path fill="#63b4eb" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
</svg>

After

Width:  |  Height:  |  Size: 630 B

View File

@ -0,0 +1,9 @@
<svg width="13" height="13" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
<!--
Icon Name: circle-info
Icon Family: classic
Icon Style: solid
-->
<path fill="#3f8cc1" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
</svg>

After

Width:  |  Height:  |  Size: 630 B

View File

@ -348,6 +348,13 @@ Miscellaneous
or their templates, you may need to :ref:`update them or their templates, you may need to :ref:`update them
<geometry-widgets-customization>` to match the new layout. <geometry-widgets-customization>` to match the new layout.
* Message levels ``messages.DEBUG`` and ``messages.INFO`` now have distinct
icons and CSS styling in the admin. Previously, these used the same icon and
styling as the ``messages.SUCCESS`` level. Since
:meth:`.ModelAdmin.message_user` uses the ``messages.INFO`` level by default,
set the level to ``messages.SUCCESS`` to retain the previous icon and
styling.
.. _deprecated-features-6.0: .. _deprecated-features-6.0:
Features deprecated in 6.0 Features deprecated in 6.0