feature #5426 Merged all options under a new settings menu (javieregu…

…iluz) This PR was merged into the 4.x branch. Discussion ---------- Merged all options under a new settings menu With the recent introduction of the language selector menu, I think it's better to merge all option menus into a single "settings menu". This is how it looks with the light color scheme: <img width="326" alt="settings-menu" src="https://user-images.githubusercontent.com/73419/193415296-c0c1772b-d507-496a-92e8-2d69ef87488d.png"> Commits ------- ae28a81 Merged all options under a new settings menu
EasyCorp · Oct 4, 2022 · fa70d4a · fa70d4a
2 parents cfad855 + ae28a81
commit fa70d4a
Show file tree

Hide file tree

Showing 9 changed files with 95 additions and 95 deletions.
diff --git a/assets/css/easyadmin-theme/base.scss b/assets/css/easyadmin-theme/base.scss
@@ -85,6 +85,10 @@ body.ea-sidebar-width-compact .wrapper {
             color: var(--responsive-header-logo-color);
         }
     }
+
+    .dropdown-settings {
+        display: block;
+    }
 }
 .main-header {
     display: none;
@@ -242,26 +246,31 @@ body.ea-mobile-sidebar-visible .sidebar {
     }
 }
 
-.dropdown-appearance, .dropdown-locales {
-    .dropdown-appearance-button, .dropdown-locales-button {
-        color: var(--dropdown-appearance-icon-color);
+.dropdown-settings {
+    display: none;
+    @media(min-width: 992px) {
+        display: block;
+    }
+
+    .dropdown-settings-button {
+        color: var(--dropdown-settings-icon-color);
         font-size: 16px;
         padding: 0 0 0 15px;
     }
 
-    .dropdown-appearance-label, .dropdown-locales-label {
+    .dropdown-header {
         color: var(--text-muted);
         display: block;
         font-size: var(--font-size-sm);
-        margin: 4px 4px 6px 4px;
     }
 
     .dropdown-item.active {
-        background: var(--dropdown-appearance-active-item-bg);
-        color: var(--dropdown-appearance-active-item-color);
+        background: var(--dropdown-settings-active-item-bg);
+        box-shadow: var(--dropdown-settings-active-item-shadow);
+        color: var(--dropdown-settings-active-item-color);
 
         i {
-            color: var(--dropdown-appearance-active-item-color);
+            color: var(--dropdown-settings-active-item-color);
         }
     }
 }

diff --git a/assets/css/easyadmin-theme/variables-theme.scss b/assets/css/easyadmin-theme/variables-theme.scss
@@ -100,9 +100,10 @@
     --dropdown-link-color: var(--gray-700);
     --dropdown-link-hover-bg: var(--gray-100);
     --dropdown-icon-color: var(--gray-500);
-    --dropdown-appearance-icon-color: var(--gray-400);
-    --dropdown-appearance-active-item-bg: var(--gray-200);
-    --dropdown-appearance-active-item-color: var(--color-primary);
+    --dropdown-settings-icon-color: var(--gray-400);
+    --dropdown-settings-active-item-bg: var(--gray-100);
+    --dropdown-settings-active-item-color: var(--color-primary);
+    --dropdown-settings-active-item-shadow: inset 0 0 0 1px #5368d580; // color is --color-primary with 50% alpha
     --datagrid-noresults-placeholder-bg: var(--gray-100);
     --datagrid-hidden-results-gradient-bg: var(--gray-50);
     --table-thead-color: var(--gray-800);
@@ -410,9 +411,10 @@
     --dropdown-link-color: var(--true-gray-300);
     --dropdown-link-hover-bg: var(--true-gray-700);
     --dropdown-icon-color: var(--true-gray-400);
-    --dropdown-appearance-icon-color: var(--true-gray-500);
-    --dropdown-appearance-active-item-bg: var(--true-gray-700);
-    --dropdown-appearance-active-item-color: var(--color-primary);
+    --dropdown-settings-icon-color: var(--true-gray-500);
+    --dropdown-settings-active-item-bg: var(--true-gray-800);
+    --dropdown-settings-active-item-color: var(--color-primary);
+    --dropdown-settings-active-item-shadow: inset 0 0 0 1px var(--true-gray-500);
     --datagrid-noresults-placeholder-bg: var(--true-gray-700);
     --datagrid-hidden-results-gradient-bg: var(--true-gray-700);
     --table-thead-color: var(--true-gray-200);

diff --git a/assets/js/page-color-scheme.js b/assets/js/page-color-scheme.js
@@ -11,18 +11,18 @@ class ColorSchemeHandler {
     }
 
     createColorSchemeSelector() {
-        if (null === document.querySelector('.dropdown-appearance')) {
+        if (null === document.querySelector('.dropdown-settings')) {
             return;
         }
 
-        // for·responsive design" reasons, pages contain two color scheme selectors instead
-        // of one and the selected scheme must be kept in sync in both
-        const colorSchemeSelectors = document.querySelectorAll('.dropdown-appearance');
+        // for·responsive design" reasons, pages contain two settings dropdowns (and inside them, one
+        // scheme selector each) instead of one and the selected scheme must be kept in sync in both
+        const colorSchemeSelectors = document.querySelectorAll('.dropdown-settings');
         const currentScheme = localStorage.getItem(this.#colorSchemeLocalStorageKey) || 'auto';
 
         colorSchemeSelectors.forEach((colorSchemeSelector) => {
-            const selectorOptions = colorSchemeSelector.querySelectorAll('.dropdown-appearance a[data-ea-color-scheme]');
-            const selectorActiveOption = colorSchemeSelector.querySelector(`.dropdown-appearance a[data-ea-color-scheme="${ currentScheme }"]`);
+            const selectorOptions = colorSchemeSelector.querySelectorAll('a.dropdown-appearance-item[data-ea-color-scheme]');
+            const selectorActiveOption = colorSchemeSelector.querySelector(`a.dropdown-appearance-item[data-ea-color-scheme="${ currentScheme }"]`);
 
             selectorOptions.forEach((selector) => { selector.classList.remove('active') });
             selectorActiveOption.classList.add('active');
@@ -32,8 +32,8 @@ class ColorSchemeHandler {
                     const selectedColorScheme = selector.getAttribute('data-ea-color-scheme');
                     this.#setColorScheme(selectedColorScheme);
 
-                    const allSelectorOptions = document.querySelectorAll('.dropdown-appearance a[data-ea-color-scheme]');
-                    const allSelectorActiveOptions = document.querySelectorAll(`.dropdown-appearance a[data-ea-color-scheme="${ selectedColorScheme }"]`);
+                    const allSelectorOptions = document.querySelectorAll('a.dropdown-appearance-item[data-ea-color-scheme]');
+                    const allSelectorActiveOptions = document.querySelectorAll(`a.dropdown-appearance-item[data-ea-color-scheme="${ selectedColorScheme }"]`);
                     allSelectorOptions.forEach((selectorOption) => { selectorOption.classList.remove('active') });
                     allSelectorActiveOptions.forEach((selectorOption) => { selectorOption.classList.add('active') });
                 });

diff --git a/src/Resources/public/app.556df1de.css → src/Resources/public/app.51227a68.css b/src/Resources/public/app.556df1de.css → src/Resources/public/app.51227a68.css
diff --git a/src/Resources/public/app.556df1de.rtl.css → src/Resources/public/app.51227a68.rtl.css b/src/Resources/public/app.556df1de.rtl.css → src/Resources/public/app.51227a68.rtl.css
diff --git a/src/Resources/public/entrypoints.json b/src/Resources/public/entrypoints.json
@@ -2,8 +2,8 @@
   "entrypoints": {
     "app": {
       "css": [
-        "/app.556df1de.css",
-        "/app.556df1de.rtl.css"
+        "/app.51227a68.css",
+        "/app.51227a68.rtl.css"
       ],
       "js": [
         "/app.2fd2f280.js"
@@ -21,7 +21,7 @@
     },
     "page-color-scheme": {
       "js": [
-        "/page-color-scheme.f676dfa6.js"
+        "/page-color-scheme.a1568167.js"
       ]
     },
     "field-boolean": {

diff --git a/src/Resources/public/manifest.json b/src/Resources/public/manifest.json
@@ -1,10 +1,10 @@
 {
-  "app.css": "app.556df1de.css",
-  "app.rtl.css": "app.556df1de.rtl.css",
+  "app.css": "app.51227a68.css",
+  "app.rtl.css": "app.51227a68.rtl.css",
   "app.js": "app.2fd2f280.js",
   "form.js": "form.5aa1447f.js",
   "page-layout.js": "page-layout.3347892e.js",
-  "page-color-scheme.js": "page-color-scheme.f676dfa6.js",
+  "page-color-scheme.js": "page-color-scheme.a1568167.js",
   "field-boolean.js": "field-boolean.33d03224.js",
   "field-code-editor.css": "field-code-editor.09574d54.css",
   "field-code-editor.rtl.css": "field-code-editor.09574d54.rtl.css",

diff --git a/...rces/public/page-color-scheme.f676dfa6.js → ...rces/public/page-color-scheme.a1568167.js b/...rces/public/page-color-scheme.f676dfa6.js → ...rces/public/page-color-scheme.a1568167.js
diff --git a/src/Resources/views/layout.html.twig b/src/Resources/views/layout.html.twig
@@ -115,27 +115,58 @@
             </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>
+        {% set settings_dropdown %}
+            {% if ea.dashboardLocales or ea.dashboardHasDarkModeEnabled %}
+                <div class="dropdown dropdown-settings">
+                    <a class="dropdown-settings-button" type="button" data-bs-toggle="dropdown" data-bs-offset="0,5" aria-expanded="false">
+                        <i class="fas fa-gear"></i>
                     </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>
+
+                    <ul class="dropdown-menu dropdown-menu-end">
+                        {% if ea.dashboardLocales %}
+                            <li>
+                                <span class="dropdown-header dropdown-locales-label">{{ 'settings.locale'|trans(domain = 'EasyAdminBundle') }}</span>
+                            </li>
+
+                            {% for localeDto in ea.dashboardLocales %}
+                                <li>
+                                    <a href="{{ ea_url().set('_locale', localeDto.locale) }}" class="dropdown-item{% if app.request.locale == localeDto.locale %} active{% endif %}">
+                                        {% if localeDto.icon %}
+                                            <i class="{{ localeDto.icon }}"></i>
+                                        {% endif %}
+                                        {{ localeDto.name }}
+                                    </a>
+                                </li>
+                            {% endfor %}
+                        {% endif %}
+
+                        {% if ea.dashboardHasDarkModeEnabled %}
+                            {% if ea.dashboardLocales %}
+                                <div class="dropdown-divider"></div>
+                            {% endif %}
+
+                            <li>
+                                <span class="dropdown-header dropdown-appearance-label">{{ 'settings.appearance.label'|trans(domain = 'EasyAdminBundle') }}</span>
+                            </li>
+                            <li>
+                                <a href="#" class="dropdown-item dropdown-appearance-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 dropdown-appearance-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 dropdown-appearance-item active" data-ea-color-scheme="auto">
+                                    <i class="fas fa-desktop"></i> <span>{{ 'settings.appearance.auto'|trans(domain = 'EasyAdminBundle') }}</span>
+                                </a>
+                            </li>
+                        {% endif %}
+                    </ul>
+                </div>
+            {% endif %}
         {% endset %}
 
         <div class="wrapper">
@@ -168,15 +199,7 @@
                             {{ 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 %}
+                        {{ settings_dropdown }}
                     {% endblock responsive_header %}
                 </div>
 
@@ -283,41 +306,7 @@
                                 {% endblock header_custom_menu %}
                             </div>
 
-                            {% if ea.dashboardLocales %}
-                                <div class="dropdown dropdown-locales">
-                                    <a class="dropdown-locales-button" type="button" data-bs-toggle="dropdown" data-bs-offset="0,5" aria-expanded="false">
-                                        <i class="fas fa-language"></i>
-                                    </a>
-
-                                    <ul class="dropdown-menu dropdown-menu-end">
-                                        <li class="dropdown-locales-label">
-                                            <span>{{ 'settings.locale'|trans(domain = 'EasyAdminBundle') }}</span>
-                                        </li>
-                                        {% for localeDto in ea.dashboardLocales %}
-                                            <li>
-                                                <a href="{{ ea_url().set('_locale', localeDto.locale) }}" class="dropdown-item{% if app.request.locale == localeDto.locale %} active{% endif %}">
-                                                    {% if localeDto.icon %}
-                                                        <i class="{{ localeDto.icon }}"></i>
-                                                    {% endif %}
-                                                    {{ localeDto.name }}
-                                                </a>
-                                            </li>
-                                        {% endfor %}
-                                    </ul>
-                                </div>
-                            {% endif %}
-
-                            {% if ea.dashboardHasDarkModeEnabled %}
-                                <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>
-
-                                        {{ appearance_menu_dropdown }}
-                                    </div>
-                                </div>
-                            {% endif %}
+                            {{ settings_dropdown }}
                         {% endblock content_top_header %}
                     </aside>