Add an user account menu button

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
phpmyadmin · Nov 24, 2023 · 3b88c11 · 3b88c11
1 parent 4932f1e
commit 3b88c11
Show file tree

Hide file tree

Showing 15 changed files with 95 additions and 40 deletions.
diff --git a/public/themes/bootstrap/scss/_common.scss b/public/themes/bootstrap/scss/_common.scss
@@ -344,7 +344,6 @@ div#tablestatistics table {
   top: 0;
   right: 0;
   z-index: 99;
-  padding: $breadcrumb-navbar-padding-y $breadcrumb-padding-x;
 }
 
 #page_settings_icon {

diff --git a/public/themes/bootstrap/scss/_icons.scss b/public/themes/bootstrap/scss/_icons.scss
@@ -1,7 +1,6 @@
 .icon {
   margin: 0;
-  margin-left: 0.3em;
-  padding: 0 !important;
+  padding: 0;
   width: 16px;
   height: 16px;
   background-repeat: no-repeat;
@@ -677,6 +676,10 @@
   background-image: url('../img/visibility.svg');
 }
 
+.ic_user {
+  background-image: url('../img/user.svg');
+}
+
 .ic_window-new {
   background-image: url('../img/windows.svg');
 }
@@ -1352,6 +1355,10 @@
     background-image: url('../img/dark/visibility.svg');
   }
 
+  .ic_user {
+    background-image: url('../img/dark/user.svg');
+  }
+
   .ic_window-new {
     background-image: url('../img/dark/windows.svg');
   }

diff --git a/public/themes/metro/scss/_common.scss b/public/themes/metro/scss/_common.scss
@@ -589,7 +589,6 @@ div#tablestatistics table {
   top: 0;
   right: 0;
   z-index: 99;
-  padding: $breadcrumb-navbar-padding-y $breadcrumb-padding-x;
 }
 
 #page_settings_icon {

diff --git a/public/themes/metro/scss/_icons.scss b/public/themes/metro/scss/_icons.scss
@@ -1,7 +1,6 @@
 .icon {
   margin: 0;
-  margin-left: 0.3em;
-  padding: 0 !important;
+  padding: 0;
   width: 16px;
   height: 16px;
   background-repeat: no-repeat;
@@ -686,6 +685,10 @@
   background-image: url('../img/show.png');
 }
 
+.ic_user {
+  background-image: url('../img/s_rights.png');
+}
+
 .ic_window-new {
   background-image: url('../img/window-new.png');
 }

diff --git a/public/themes/original/scss/_common.scss b/public/themes/original/scss/_common.scss
@@ -389,7 +389,6 @@ div#tablestatistics table {
   top: 0;
   right: 0;
   z-index: 99;
-  padding: $breadcrumb-navbar-padding-y $breadcrumb-padding-x;
 }
 
 #page_settings_icon {

diff --git a/public/themes/original/scss/_icons.scss b/public/themes/original/scss/_icons.scss
@@ -1,7 +1,6 @@
 .icon {
   margin: 0;
-  margin-left: 0.3em;
-  padding: 0 !important;
+  padding: 0;
   width: 16px;
   height: 16px;
   background-repeat: no-repeat;
@@ -695,6 +694,10 @@
   background-image: url('../img/show.png');
 }
 
+.ic_user {
+  background-image: url('../../pmahomme/img/user.png');
+}
+
 .ic_window-new {
   background-image: url('../img/window-new.png');
 }

diff --git a/public/themes/original/scss/_navigation.scss b/public/themes/original/scss/_navigation.scss
@@ -358,8 +358,8 @@ li.fast_filter {
 
 #pma_navigation_collapser {
   width: 20px;
-  height: 22px;
-  line-height: 22px;
+  height: 35px;
+  line-height: 35px;
   background: #eee;
   color: #555;
   font-weight: bold;

diff --git a/public/themes/original/scss/_variables.scss b/public/themes/original/scss/_variables.scss
@@ -154,7 +154,7 @@ $accordion-button-active-bg: $bg-one;
 
 // Breadcrumbs
 
-$breadcrumb-navbar-padding-y: 0.1rem;
+$breadcrumb-navbar-padding-y: 0.5rem;
 $breadcrumb-navbar-padding-x: 2.2em;
 $breadcrumb-navbar-margin-bottom: 0;
 $breadcrumb-navbar-bg: white;

diff --git a/public/themes/pmahomme/img/user.png b/public/themes/pmahomme/img/user.png
diff --git a/public/themes/pmahomme/scss/_common.scss b/public/themes/pmahomme/scss/_common.scss
@@ -530,7 +530,6 @@ div#tablestatistics table {
   top: 0;
   right: 0;
   z-index: 99;
-  padding: $breadcrumb-navbar-padding-y $breadcrumb-padding-x;
 }
 
 #page_settings_icon {

diff --git a/public/themes/pmahomme/scss/_icons.scss b/public/themes/pmahomme/scss/_icons.scss
@@ -1,7 +1,6 @@
 .icon {
   margin: 0;
-  margin-left: 0.3em;
-  padding: 0 !important;
+  padding: 0;
   width: 16px;
   height: 16px;
   background-repeat: no-repeat;
@@ -695,6 +694,10 @@
   background-image: url('../img/show.png');
 }
 
+.ic_user {
+  background-image: url('../img/user.png');
+}
+
 .ic_window-new {
   background-image: url('../img/window-new.png');
 }

diff --git a/public/themes/pmahomme/scss/_navigation.scss b/public/themes/pmahomme/scss/_navigation.scss
@@ -370,8 +370,8 @@ li.fast_filter {
 
 #pma_navigation_collapser {
   width: 20px;
-  height: 22px;
-  line-height: 22px;
+  height: 35px;
+  line-height: 35px;
   background: #eee;
   color: #555;
   font-weight: bold;

diff --git a/public/themes/pmahomme/scss/_variables.scss b/public/themes/pmahomme/scss/_variables.scss
@@ -108,7 +108,8 @@ $btn-line-height: 1.15;
 
 // Dropdowns
 
-$dropdown-padding-y: 0;
+$dropdown-padding-y: 0.5rem;
+$dropdown-padding-x: 0.5rem;
 $dropdown-item-padding-y: 0;
 $dropdown-item-padding-x: 0;
 
@@ -158,7 +159,7 @@ $accordion-button-active-bg: $navi-background;
 
 // Breadcrumbs
 
-$breadcrumb-navbar-padding-y: 0.1rem;
+$breadcrumb-navbar-padding-y: 0.5rem;
 $breadcrumb-navbar-padding-x: 2.2em;
 $breadcrumb-navbar-margin-bottom: 0;
 $breadcrumb-navbar-bg: #888;

diff --git a/resources/templates/header.twig b/resources/templates/header.twig
@@ -39,28 +39,68 @@
 
   {% if is_menu_enabled and server > 0 %}
     {{ menu|raw }}
-    <div id="page_nav_icons" class="row row-cols-sm-auto align-items-center d-print-none">
-      {% if theme_color_modes|length > 1 %}
-        <div class="col-12">
-          <form method="post" action="{{ url('/themes/set') }}" class="disableAjax">
-            {{ get_hidden_inputs() }}
-            <input type="hidden" name="set_theme" value="{{ theme_id }}">
-            <select class="form-select form-select-sm" name="themeColorMode" id="themeColorModeToggle" aria-label="{{ 'Color mode for the theme'|trans }}">
-              {% for color_mode in theme_color_modes %}
-                <option value="{{ color_mode }}"{{ theme_color_mode == color_mode ? ' selected' }}>
-                  {%- if color_mode == 'light' -%}
-                    {% trans %}Light{% context %}Light color mode of the theme{% endtrans %}
-                  {%- elseif color_mode == 'dark' -%}
-                    {% trans %}Dark{% context %}Dark color mode of the theme{% endtrans %}
-                  {%- else -%}
-                    {{ color_mode|title }}
-                  {%- endif -%}
-                </option>
-              {% endfor %}
-            </select>
-          </form>
+    <div id="page_nav_icons" class="row row-cols-sm-auto align-items-center d-print-none me-3 p-1">
+      <div class="col-12">
+        <div id="userAccountDropdown" class="dropdown">
+          <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+            {{- get_image('user', 'Open user account menu'|trans) -}}
+          </button>
+          <ul class="dropdown-menu">
+            <li>
+              <a class="dropdown-item disableAjax" href="{{ url('/server/privileges', {'username': current_user[0], 'hostname': current_user[1]}) }}">
+                {{ get_icon('user', current_user|join('@')) }}
+              </a>
+            </li>
+            <li><hr class="dropdown-divider"></li>
+            <li>
+              <a class="dropdown-item disableAjax" href="{{ get_docu_link('index') }}" target="_blank" rel="noopener noreferrer">
+                {{ get_icon('b_docs', 'phpMyAdmin documentation'|trans) }}
+              </a>
+            </li>
+            <li>
+              <a class="dropdown-item disableAjax" href="{{ get_docu_url(is_mariadb) }}" target="_blank" rel="noopener noreferrer">
+                {{ get_icon('b_sqlhelp', is_mariadb ? 'MariaDB documentation'|trans : 'MySQL documentation'|trans) }}
+              </a>
+            </li>
+            <li><hr class="dropdown-divider"></li>
+            {% if theme_color_modes|length > 1 %}
+              <li>
+                <form method="post" action="{{ url('/themes/set') }}" class="dropdown-item py-0 disableAjax">
+                  {{ get_hidden_inputs() }}
+                  <input type="hidden" name="set_theme" value="{{ theme_id }}">
+                  <div class="row row-cols-lg-auto align-items-center flex-nowrap">
+                  <div class="col-12">
+                    <label class="col-form-label" for="themeColorModeToggle">{{ get_icon('s_theme', 'Appearance:'|trans) }}</label>
+                  </div>
+                  <div class="col-12">
+                    <select class="form-select form-select-sm" name="themeColorMode" id="themeColorModeToggle" aria-label="{{ 'Color mode for the theme'|trans }}">
+                      {% for color_mode in theme_color_modes %}
+                        <option value="{{ color_mode }}"{{ theme_color_mode == color_mode ? ' selected' }}>
+                          {%- if color_mode == 'light' -%}
+                            {% trans %}Light{% context %}Light color mode of the theme{% endtrans %}
+                          {%- elseif color_mode == 'dark' -%}
+                            {% trans %}Dark{% context %}Dark color mode of the theme{% endtrans %}
+                          {%- else -%}
+                            {{ color_mode|title }}
+                          {%- endif -%}
+                        </option>
+                      {% endfor %}
+                    </select>
+                  </div>
+                  </div>
+                </form>
+              </li>
+            {% endif %}
+            <li>
+              <a class="dropdown-item disableAjax" href="{{ url('/preferences/manage') }}">{{ get_icon('s_cog', 'Settings'|trans) }}</a>
+            </li>
+            <li><hr class="dropdown-divider"></li>
+            <li>
+              <a class="dropdown-item logout disableAjax" href="{{ url('/logout') }}">{{ get_icon('s_loggoff', 'Log out'|trans) }}</a>
+            </li>
+          </ul>
         </div>
-      {% endif %}
+      </div>
 
       <div class="col-12">
         <span id="lock_page_icon"></span>

diff --git a/src/Header.php b/src/Header.php
@@ -369,6 +369,8 @@ public function getDisplay(): string
             'theme_color_mode' => $theme->getColorMode(),
             'theme_color_modes' => $theme->getColorModes(),
             'theme_id' => $theme->getId(),
+            'current_user' => $dbi->getCurrentUserAndHost(),
+            'is_mariadb' => $dbi->isMariaDB(),
         ]);
     }