Issue #3100083 by finnsky, Zsuffa Dávid, ankithashetty, _utsavsharma, gauravvvv, smustgrave, zrpnr, markconroy: Add js message theme override to match Umami message markup
nod_
parent
5f1bd5ffbd
commit
0e07179f7b
|
|
@ -28,7 +28,7 @@ class AssetAggregationAcrossPagesTest extends PerformanceTestBase {
|
|||
$this->assertSame(6, $performance_data->getStylesheetCount());
|
||||
$this->assertLessThan(125000, $performance_data->getStylesheetBytes());
|
||||
$this->assertSame(1, $performance_data->getScriptCount());
|
||||
$this->assertLessThan(7500, $performance_data->getScriptBytes());
|
||||
$this->assertLessThan(12000, $performance_data->getScriptBytes());
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -75,9 +75,9 @@ class OpenTelemetryFrontPagePerformanceTest extends PerformanceTestBase {
|
|||
$this->assertSame(1, $performance_data->getCacheTagIsValidCount());
|
||||
$this->assertSame(0, $performance_data->getCacheTagInvalidationCount());
|
||||
$this->assertSame(1, $performance_data->getScriptCount());
|
||||
$this->assertLessThan(7500, $performance_data->getScriptBytes());
|
||||
$this->assertLessThan(12000, $performance_data->getScriptBytes());
|
||||
$this->assertSame(2, $performance_data->getStylesheetCount());
|
||||
$this->assertLessThan(40400, $performance_data->getStylesheetBytes());
|
||||
$this->assertLessThan(42000, $performance_data->getStylesheetBytes());
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -3,13 +3,12 @@
|
|||
* This file is used to style the layout builder.
|
||||
*/
|
||||
|
||||
.layout-builder__message--defaults .messages,
|
||||
.layout-builder__message--overrides .messages {
|
||||
.layout-builder__message .messages {
|
||||
background-image: none;
|
||||
}
|
||||
.layout-builder__message--defaults .messages__content {
|
||||
background-image: url("../../../../../../../misc/icons/73b355/globe.svg");
|
||||
--umami-message-icon: url("../../../../../../../misc/icons/73b355/globe.svg");
|
||||
}
|
||||
.layout-builder__message--overrides .messages__content {
|
||||
background-image: url("../../../../../../../misc/icons/73b355/location.svg");
|
||||
--umami-message-icon: url("../../../../../../../misc/icons/73b355/location.svg");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,49 +4,39 @@
|
|||
*/
|
||||
|
||||
.messages {
|
||||
margin-bottom: 1em;
|
||||
padding: 20px;
|
||||
word-wrap: break-word;
|
||||
color: inherit;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
[dir="rtl"] .messages {
|
||||
text-align: right;
|
||||
background-position: right 10px top 17px;
|
||||
}
|
||||
.messages + .messages {
|
||||
margin-top: 1.538em;
|
||||
}
|
||||
.messages__content {
|
||||
padding-left: 24px; /* LTR */
|
||||
background: no-repeat 0 center; /* LTR */
|
||||
padding-inline-start: 24px;
|
||||
background-image: var(--umami-message-icon);
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: left;
|
||||
background-position-y: center;
|
||||
}
|
||||
[dir="rtl"] .messages__content {
|
||||
padding-right: 24px;
|
||||
padding-left: 0;
|
||||
background-position: right;
|
||||
background-position-x: right;
|
||||
}
|
||||
.messages--status {
|
||||
--umami-message-icon: url(/core/misc/icons/73b355/check.svg);
|
||||
|
||||
border: 1px solid #cbdebc;
|
||||
background-color: #e6eee0;
|
||||
}
|
||||
.messages--status .messages__content {
|
||||
background-image: url(/core/misc/icons/73b355/check.svg);
|
||||
}
|
||||
.messages--warning {
|
||||
--umami-message-icon: url(/core/misc/icons/e29700/warning.svg);
|
||||
|
||||
border: 1px solid #fae2a4;
|
||||
background-color: #fcf1d4;
|
||||
}
|
||||
.messages--warning .messages__content {
|
||||
background-image: url(/core/misc/icons/e29700/warning.svg);
|
||||
}
|
||||
.messages--error {
|
||||
--umami-message-icon: url(/core/misc/icons/e32700/error.svg);
|
||||
|
||||
border: 1px solid #f8c8d5;
|
||||
background-color: #f9e6eb;
|
||||
}
|
||||
.messages--error .messages__content {
|
||||
background-image: url(/core/misc/icons/e32700/error.svg);
|
||||
}
|
||||
.messages--error .error {
|
||||
color: inherit;
|
||||
}
|
||||
|
|
@ -61,3 +51,7 @@
|
|||
.messages__item + .messages__item {
|
||||
margin-top: 0.769em;
|
||||
}
|
||||
.messages__wrapper {
|
||||
display: grid;
|
||||
gap: 1.538em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
messageWrapper.setAttribute('data-drupal-message-type', type);
|
||||
|
||||
messageWrapper.innerHTML = `
|
||||
<div class="messages__content container">
|
||||
<div class="messages__content">
|
||||
<h2 class="visually-hidden">
|
||||
${messagesTypes[type]}
|
||||
</h2>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
*/
|
||||
#}
|
||||
<div data-drupal-messages>
|
||||
<div class="messages__wrapper container">
|
||||
{% block messages %}
|
||||
{% for type, messages in message_list %}
|
||||
{%
|
||||
|
|
@ -28,11 +29,12 @@
|
|||
'messages--' ~ type,
|
||||
]
|
||||
%}
|
||||
<div role="contentinfo" aria-label="{{ status_headings[type] }}"{{ attributes.addClass(classes)|without('role', 'aria-label') }}>
|
||||
<div class="messages__content container">
|
||||
{% if type == 'error' %}
|
||||
<div role="alert">
|
||||
{% endif %}
|
||||
<div
|
||||
aria-label="{{ status_headings[type] }}"
|
||||
{{ attributes.addClass(classes)|without('aria-label') }}
|
||||
role={{ type == 'error' or type == 'warning' ? 'alert' : 'status' }}
|
||||
>
|
||||
<div class="messages__content">
|
||||
{% if status_headings[type] %}
|
||||
<h2 class="visually-hidden">{{ status_headings[type] }}</h2>
|
||||
{% endif %}
|
||||
|
|
@ -45,9 +47,6 @@
|
|||
{% else %}
|
||||
<span class="messages__item">{{ messages|first }}</span>
|
||||
{% endif %}
|
||||
{% if type == 'error' %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{# Remove type specific classes. #}
|
||||
|
|
@ -55,3 +54,4 @@
|
|||
{% endfor %}
|
||||
{% endblock messages %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ version: VERSION
|
|||
libraries:
|
||||
- umami/classy.base
|
||||
- core/normalize
|
||||
- core/drupal.message
|
||||
- umami/global
|
||||
|
||||
libraries-override:
|
||||
|
|
|
|||
Loading…
Reference in New Issue