Skip to content

Commit

Permalink
bug #5243 Fix responsive appearance menu (javiereguiluz)
Browse files Browse the repository at this point in the history 
This PR was squashed before being merged into the 4.x branch.

Discussion
----------

Fix responsive appearance menu

This is the same PR as #5138, which was created by `@fdiedler` to fix #5077. I couldn't merge the original PR because of some conflicts, so I'm recreating it ... but all the credits for solving this should go to `@fdiedler`. Thanks!

Commits
-------

65e0892 Fix responsive appearance menu
  • Loading branch information
@javiereguiluz
javiereguiluz committed May 21, 2022
2 parents 1b8aa7f + 65e0892 commit 5d4776b
Showing 1 changed file with 73 additions and 26 deletions.
99 changes: 73 additions & 26 deletions src/Resources/views/layout.html.twig
View file
Expand Up @@ -115,6 +115,29 @@
</ul>
{% endset %}

{% set appearance_menu_dropdown %}
<ul class="dropdown-menu dropdown-menu-end dropdown-appearance-menu">
<li class="dropdown-appearance-label">
<span>{{ 'settings.appearance.label'|trans(domain = 'EasyAdminBundle') }}</span>
</li>
<li>
<a href="#" class="dropdown-item" data-ea-color-scheme="light">
<i class="far fa-sun"></i> <span>{{ 'settings.appearance.light'|trans(domain = 'EasyAdminBundle') }}</span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" data-ea-color-scheme="dark">
<i class="far fa-moon"></i> <span>{{ 'settings.appearance.dark'|trans(domain = 'EasyAdminBundle') }}</span>
</a>
</li>
<li>
<a href="#" class="dropdown-item active" data-ea-color-scheme="auto">
<i class="fas fa-desktop"></i> <span>{{ 'settings.appearance.auto'|trans(domain = 'EasyAdminBundle') }}</span>
</a>
</li>
</ul>
{% endset %}

<div class="wrapper">
{% block wrapper %}
<div class="responsive-header">
Expand All @@ -123,15 +146,15 @@
<i class="fa fa-fw fa-bars"></i>
</button>

<div id="responsive-header-logo" class="text-truncate">
<div id="responsive-header-logo" class="text-truncate ms-auto">
{% block responsive_header_logo %}
<a class="responsive-logo" title="{{ ea.dashboardTitle|striptags }}" href="{{ path(ea.dashboardRouteName) }}">
{{ ea.dashboardTitle|raw }}
</a>
{% endblock responsive_header_logo %}
</div>

<div class="dropdown user-menu-wrapper {{ is_granted(impersonator_permission) ? 'user-is-impersonated' }}">
<div class="dropdown user-menu-wrapper {{ is_granted(impersonator_permission) ? 'user-is-impersonated' }} ms-auto">
<a class="user-details" type="button" data-bs-toggle="dropdown" data-bs-offset="0,5" aria-expanded="false">
{# to make the site design consistent, always display the user avatar in responsive header
and hide the user name (because there's no space left) regardless of the user config #}
Expand All @@ -144,6 +167,16 @@

{{ user_menu_dropdown }}
</div>

{% if ea.dashboardHasDarkModeEnabled %}
<div class="dropdown dropdown-appearance">
<a class="dropdown-appearance-button" type="button" data-bs-toggle="dropdown" data-bs-offset="0,5" aria-expanded="false">
<i class="fas fa-adjust"></i>
</a>

{{ appearance_menu_dropdown }}
</div>
{% endif %}
{% endblock responsive_header %}
</div>

Expand Down Expand Up @@ -251,31 +284,14 @@
</div>

{% if ea.dashboardHasDarkModeEnabled %}
<div class="dropdown dropdown-appearance">
<a class="dropdown-appearance-button" type="button" data-bs-toggle="dropdown" data-bs-offset="0,5" aria-expanded="false">
<i class="fas fa-adjust"></i>
</a>
<div class="navbar-custom-menu">
<div class="dropdown dropdown-appearance">
<a class="dropdown-appearance-button" type="button" data-bs-toggle="dropdown" data-bs-offset="0,5" aria-expanded="false">
<i class="fas fa-adjust"></i>
</a>

<ul class="dropdown-menu dropdown-menu-end">
<li class="dropdown-appearance-label">
<span>{{ 'settings.appearance.label'|trans(domain = 'EasyAdminBundle') }}</span>
</li>
<li>
<a href="#" class="dropdown-item" data-ea-color-scheme="light">
<i class="far fa-sun"></i> <span>{{ 'settings.appearance.light'|trans(domain = 'EasyAdminBundle') }}</span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" data-ea-color-scheme="dark">
<i class="far fa-moon"></i> <span>{{ 'settings.appearance.dark'|trans(domain = 'EasyAdminBundle') }}</span>
</a>
</li>
<li>
<a href="#" class="dropdown-item active" data-ea-color-scheme="auto">
<i class="fas fa-desktop"></i> <span>{{ 'settings.appearance.auto'|trans(domain = 'EasyAdminBundle') }}</span>
</a>
</li>
</ul>
{{ appearance_menu_dropdown }}
</div>
</div>
{% endif %}
{% endblock content_top_header %}
Expand Down Expand Up @@ -340,4 +356,35 @@
{% endblock %}
</body>
{% endblock body %}

<script>
function updateDropdownItems()
{
var dropdownItems = document.querySelectorAll('.dropdown-appearance-menu li a');
dropdownItems.forEach(dropdownItem => {
// Get selected dropdown item
if (dropdownItem.className == "dropdown-item active")
{
// Update
var dropdownItemsToUpdate = document.querySelectorAll('[data-ea-color-scheme="' + dropdownItem.dataset.eaColorScheme + '"]');
dropdownItemsToUpdate.forEach(dropdownItemToUpdate => {
dropdownItemToUpdate.classList.add("active");
});
}
})
}
document.addEventListener('DOMContentLoaded', () => {
// Get all dropdown appearance menus
const appearanceDropdownMenus = document.querySelectorAll('.dropdown-appearance-button');
appearanceDropdownMenus.forEach(appareanceDropdownMenu => {
// Attach hide event on this dropdown menu
appareanceDropdownMenu.addEventListener('hide.bs.dropdown', function (event) {
updateDropdownItems();
})
});
updateDropdownItems();
});
</script>
</html>

0 comments on commit 5d4776b

Please sign in to comment.