Skip to content
Snippets Groups Projects
Commit ed613fb0 authored by Cristina Chumillas's avatar Cristina Chumillas
Browse files

Merge branch '3438046-2nd-level-active' into '1.x' 

Resolve #3438046: "2nd level active state"

See merge request !234
parents c490124c 35bd377c
No related branches found
No related tags found
No related merge requests found
Pipeline #139450 passed with warnings
Stage: build
Stage: validate
Stage: test
Hide whitespace changes
Inline Side-by-side
css/components/admin-toolbar.css
+ 22
− 3
View file @ ed613fb0
......@@ -16,8 +16,8 @@
*/
body {
--admin-toolbar-sidebar-width: calc(4.5 * var(--admin-toolbar-rem));
--admin-toolbar-sidebar-header: calc(3.75 * var(--admin-toolbar-rem));
--admin-toolbar-sidebar-width: var(--admin-toolbar-space-72);
--admin-toolbar-sidebar-header: var(--admin-toolbar-space-56);
}
[data-admin-toolbar="expanded"] body {
......@@ -151,6 +151,7 @@ body {
.admin-toolbar__close-button {
flex-grow: 0;
justify-self: end;
margin-inline-start: auto;
}
@media (min-width: 64rem) {
......@@ -233,12 +234,29 @@ body {
background-color: var(--admin-toolbar-color-white);
}
.admin-toolbar__header + .toolbar-block {
margin-block-start: calc(var(--admin-toolbar-space-10) * -1);
}
@media (min-width: 64rem) {
.admin-toolbar__header + .toolbar-block {
margin-block-start: 0;
}
}
@media (min-width: 64rem) {
.admin-toolbar__header:not(:has(.admin-toolbar__logo)) {
display: none;
}
}
@media (min-width: 64rem) {
.admin-toolbar__header {
position: static;
align-items: start;
margin-block-start: revert;
padding-block-start: revert;
padding-block-end: 0;
}
}
......@@ -293,7 +311,7 @@ body {
.admin-toolbar__content {
display: grid;
gap: var(--admin-toolbar-space-12);
padding: var(--admin-toolbar-space-16);
padding: var(--admin-toolbar-sidebar-header) var(--admin-toolbar-space-16) var(--admin-toolbar-space-16);
}
@media (min-width: 64rem) {
......@@ -303,6 +321,7 @@ body {
overflow-y: auto;
flex-direction: column;
flex-grow: 1;
padding-block-start: var(--admin-toolbar-space-16);
background: linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)), linear-gradient(var(--admin-toolbar-color-white), var(--admin-toolbar-color-white) 80%) 0 100%, radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)), radial-gradient(farthest-side at 50% 100%, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)) 0 100%;
background-color: var(--admin-toolbar-color-white);
background-repeat: no-repeat;
......
css/components/admin-toolbar.pcss.css
+ 20
− 3
View file @ ed613fb0
......@@ -10,8 +10,8 @@
* fallback value to the margin-inline-start property of the layout container.
*/
body {
--admin-toolbar-sidebar-width: calc(4.5 * var(--admin-toolbar-rem));
--admin-toolbar-sidebar-header: calc(3.75 * var(--admin-toolbar-rem));
--admin-toolbar-sidebar-width: var(--admin-toolbar-space-72);
--admin-toolbar-sidebar-header: var(--admin-toolbar-space-56);
[data-admin-toolbar='expanded'] & {
--admin-toolbar-sidebar-width: 80vw;
......@@ -132,6 +132,7 @@ body {
.admin-toolbar__close-button {
flex-grow: 0;
justify-self: end;
margin-inline-start: auto;
@media (--admin-toolbar-desktop) {
display: none;
......@@ -205,11 +206,26 @@ body {
padding-block: var(--admin-toolbar-space-16);
background-color: var(--admin-toolbar-color-white);
& + .toolbar-block {
margin-block-start: calc(var(--admin-toolbar-space-10) * -1);
@media (--admin-toolbar-desktop) {
margin-block-start: 0;
}
}
&:not(:has(.admin-toolbar__logo)) {
@media (--admin-toolbar-desktop) {
display: none;
}
}
@media (--admin-toolbar-desktop) {
position: static;
align-items: start;
margin-block-start: revert;
padding-block-start: revert;
padding-block-end: 0;
}
}
......@@ -262,7 +278,7 @@ body {
.admin-toolbar__content {
display: grid;
gap: var(--admin-toolbar-space-12);
padding: var(--admin-toolbar-space-16);
padding: var(--admin-toolbar-sidebar-header) var(--admin-toolbar-space-16) var(--admin-toolbar-space-16);
@media (--admin-toolbar-desktop) {
display: flex;
......@@ -270,6 +286,7 @@ body {
overflow-y: auto;
flex-direction: column;
flex-grow: 1;
padding-block-start: var(--admin-toolbar-space-16);
background: linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)),
linear-gradient(var(--admin-toolbar-color-white), var(--admin-toolbar-color-white) 80%) 0 100%,
radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)),
......
css/components/toolbar-button.css
+ 5
− 0
View file @ ed613fb0
......@@ -76,6 +76,11 @@
background-color: var(--admin-toolbar-color-gray-050);
}
.toolbar-menu__item--level-1:has(.is-active) .toolbar-button {
color: var(--admin-toolbar-color-gray-950);
background-color: var(--admin-toolbar-color-gray-050);
}
.toolbar-button--large {
padding: var(--admin-toolbar-space-8) var(--admin-toolbar-space-16);
font-size: var(--admin-toolbar-font-size-info-lg);
......
css/components/toolbar-button.pcss.css
+ 6
− 0
View file @ ed613fb0
......@@ -66,6 +66,12 @@
background-color: var(--admin-toolbar-color-gray-050);
}
}
.toolbar-menu__item--level-1:has(.is-active){
.toolbar-button{
color: var(--admin-toolbar-color-gray-950);
background-color: var(--admin-toolbar-color-gray-050);
}
}
.toolbar-button--large {
padding: var(--admin-toolbar-space-8) var(--admin-toolbar-space-16);
......
css/components/toolbar-popover.css
+ 3
− 2
View file @ ed613fb0
......@@ -31,7 +31,7 @@
visibility: hidden;
overflow: auto;
grid-auto-rows: max-content;
padding: var(--admin-toolbar-space-16);
padding: var(--admin-toolbar-space-12) var(--admin-toolbar-space-16) var(--admin-toolbar-space-16);
transition: transform var(--admin-toolbar-transiton), visibility var(--admin-toolbar-transiton);
transform: translateX(-100%);
transform-origin: 0;
......@@ -39,7 +39,7 @@
inline-size: var(--admin-toolbar-sidebar-width);
block-size: 100vh;
gap: var(--admin-toolbar-space-8);
inset-block-start: calc(var(--admin-toolbar-sidebar-header) + var(--admin-toolbar-space-12));
inset-block-start: var(--admin-toolbar-sidebar-header);
inset-inline-start: 0;
/* Hide the drop-shadow on the left side. */
-webkit-clip-path: inset(0 -10rem 0 0);
......@@ -55,6 +55,7 @@
[data-toolbar-popover-wrapper] {
--admin-toolbar-z-index-popover: var(--drupal-admin-z-index-popover, -1);
padding-block-start: var(--admin-toolbar-space-16);
transform: translateX(0);
filter: drop-shadow(0 0 4.5rem rgba(0, 0, 0, 0.2)) drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.04)) drop-shadow(0 0 2.5rem rgba(0, 0, 0, 0.06));
inline-size: var(--admin-toolbar-popover-width);
......
css/components/toolbar-popover.pcss.css
+ 3
− 4
View file @ ed613fb0
......@@ -33,7 +33,7 @@
visibility: hidden;
overflow: auto;
grid-auto-rows: max-content;
padding: var(--admin-toolbar-space-16);
padding: var(--admin-toolbar-space-12) var(--admin-toolbar-space-16) var(--admin-toolbar-space-16) ;
transition: transform var(--admin-toolbar-transiton), visibility var(--admin-toolbar-transiton);
transform: translateX(-100%);
transform-origin: 0;
......@@ -41,9 +41,7 @@
inline-size: var(--admin-toolbar-sidebar-width);
block-size: 100vh;
gap: var(--admin-toolbar-space-8);
inset-block-start: calc(
var(--admin-toolbar-sidebar-header) + var(--admin-toolbar-space-12)
);
inset-block-start: var(--admin-toolbar-sidebar-header);
inset-inline-start: 0;
/* Hide the drop-shadow on the left side. */
clip-path: inset(0 -10rem 0 0);
......@@ -57,6 +55,7 @@
@media (--admin-toolbar-desktop) {
--admin-toolbar-z-index-popover: var(--drupal-admin-z-index-popover, -1);
padding-block-start: var(--admin-toolbar-space-16);
transform: translateX(0);
filter: drop-shadow(0 0 72px rgba(0, 0, 0, 0.2))
drop-shadow(0 0 8px rgba(0, 0, 0, 0.04))
......
js/toolbar-dropdown.js
+ 19
− 0
View file @ ed613fb0
......@@ -47,6 +47,25 @@
});
},
);
// Create an observer instance
const menuObserver = new MutationObserver((mutations) => {
mutations.forEach(mutation => {
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
// Check if the target element has the class
if (mutation.target.classList.contains('toolbar-popover--expanded')) {
let activeSubmenu = mutation.target.querySelector('.is-active')
if (activeSubmenu) {
let activeButton = activeSubmenu.closest('li.toolbar-menu__item--level-1').querySelector('button.toolbar-button');
if (activeButton) {
activeButton.setAttribute('aria-expanded', 'true');
}
}
}
}
})
})
// Start observing the admin toolbar menus for mutations
menuObserver.observe(document.getElementById('admin-toolbar'), { attributes: true, attributeFilter: ['class'], subtree: true, })
},
};
})(Drupal, once, FloatingUIDOM);
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment