From a92132624529fa5b6df461e2a8fc60b4e360bb42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maur=C3=ADcio=20Meneghini=20Fauth?= Date: Sat, 13 Apr 2024 01:41:27 -0300 Subject: [PATCH] Change recent/favorite buttons to use Bootstrap dropdowns MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This removes a lot of custom CSS. Signed-off-by: Maurício Meneghini Fauth --- public/themes/bootstrap/scss/_navigation.scss | 87 ------------------ public/themes/metro/scss/_navigation.scss | 81 ----------------- public/themes/original/scss/_navigation.scss | 91 ------------------- public/themes/pmahomme/scss/_navigation.scss | 84 ----------------- resources/js/src/modules/functions.ts | 4 +- .../js/src/modules/navigation/event-loader.ts | 2 +- .../templates/navigation/tree/quick_warp.twig | 44 +++++---- .../recent_favorite_table_favorite.twig | 30 +++--- .../recent_favorite_table_recent.twig | 8 +- tests/unit/Navigation/NavigationTreeTest.php | 2 +- 10 files changed, 50 insertions(+), 383 deletions(-) diff --git a/public/themes/bootstrap/scss/_navigation.scss b/public/themes/bootstrap/scss/_navigation.scss index db3470ae92..283187cc11 100644 --- a/public/themes/bootstrap/scss/_navigation.scss +++ b/public/themes/bootstrap/scss/_navigation.scss @@ -37,8 +37,6 @@ #pmalogo, #serverChoice, #navipanellinks, - #recentTableList, - #favoriteTableList, #databaseList, div.pageselector.dbselector { text-align: center; @@ -64,15 +62,6 @@ #navipanellinks .icon { margin: 0; } - - #recentTable, - #favoriteTable { - width: 200px; - } - - #favoriteTableList select { - width: 80%; - } } @include color-mode(dark) { @@ -405,70 +394,6 @@ li.fast_filter { } } -// Quick warp links -.pma_quick_warp { - margin-top: 5px; - margin-left: 2px; - position: relative; - - .drop_list { - float: left; - margin-left: 3px; - padding: 2px 0; - - &:hover { - ul { - display: block; - } - } - - ul { - position: absolute; - margin: 0; - padding: 0; - overflow: hidden; - overflow-y: auto; - list-style: none; - background: $white; - border: 1px solid #ddd; - border-radius: 0.3em; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - box-shadow: 0 0 5px #ccc; - top: 100%; - left: 3px; - right: 0; - display: none; - z-index: 802; - } - - li { - white-space: nowrap; - padding: 0; - border-radius: 0; - - img { - vertical-align: sub; - } - - &:hover { - background: #f2f2f2; - } - } - - a { - display: block; - padding: 0.2em 0.3em; - - &.favorite_table_anchor { - clear: left; - float: left; - padding: 0.1em 0.3em 0; - } - } - } -} - @include color-mode(dark) { #pma_navigation_tree { li { @@ -479,18 +404,6 @@ li.fast_filter { } } } - - .pma_quick_warp { - ul { - background-color: var(--#{$prefix}body-bg); - } - - li { - &:hover { - background: $gray-800; - } - } - } } #floating_menubar { diff --git a/public/themes/metro/scss/_navigation.scss b/public/themes/metro/scss/_navigation.scss index 083335436a..b7b2028a4b 100644 --- a/public/themes/metro/scss/_navigation.scss +++ b/public/themes/metro/scss/_navigation.scss @@ -90,15 +90,6 @@ display: none; } - #recentTableList { - text-align: center; - padding: 10px; - - select { - min-width: 100%; - } - } - #databaseList { text-align: center; margin: 10px; @@ -458,78 +449,6 @@ li.fast_filter { z-index: 801; } -/* Quick warp links */ -.pma_quick_warp { - margin-top: 5px; - margin-left: 10px; - position: relative; - - .drop_list { - float: left; - margin-left: 3px; - padding: 2px 0; - } - - .drop_button { - padding: 0.2em 0.5em; - border: 1px solid #ddd; - background: #f2f2f2; - cursor: pointer; - color: #333; - } - - .drop_list { - &:hover .drop_button { - background: #fff; - color: #333; - } - - ul { - position: absolute; - margin: 0; - padding: 0; - overflow: hidden; - overflow-y: auto; - list-style: none; - background: #fff; - border: 1px solid #ddd; - top: 100%; - left: 3px; - right: 0; - display: none; - z-index: 802; - } - - &:hover ul { - display: block; - } - - li { - white-space: nowrap; - padding: 0; - - img { - vertical-align: sub; - } - - &:hover { - background: #f2f2f2; - } - } - - a { - display: block; - padding: 0.2em 0.3em; - - &.favorite_table_anchor { - clear: left; - float: left; - padding: 0.1em 0.3em 0; - } - } - } -} - #floating_menubar { z-index: 99; } diff --git a/public/themes/original/scss/_navigation.scss b/public/themes/original/scss/_navigation.scss index a8da5240f3..bb7443e3a1 100644 --- a/public/themes/original/scss/_navigation.scss +++ b/public/themes/original/scss/_navigation.scss @@ -51,24 +51,11 @@ background-color: $navi-background; padding: 0.3em; } - - &#recentTableList, - &#FavoriteTableList { - text-align: center; - margin-bottom: 0.5em; - } - } - - #recentTable, - #FavoriteTable { - width: 200px; } #pmalogo, #serverChoice, #navipanellinks, - #recentTableList, - #FavoriteTableList, #databaseList, div.pageselector.dbselector { text-align: center; @@ -81,17 +68,9 @@ margin: 0; } - #recentTableList select, - #FavoriteTableList select, #serverChoice select { width: 80%; } - - #recentTableList, - #FavoriteTableList { - margin-bottom: 0; - padding-bottom: 0; - } } #pma_navigation_content > img.throbber { @@ -387,76 +366,6 @@ li.fast_filter { padding-right: 23px; } -.pma_quick_warp { - margin-top: 5px; - margin-left: 2px; - position: relative; - - .drop_list { - float: left; - margin-left: 3px; - padding: 2px 0; - } - - .drop_button { - padding: 0 0.3em; - border: 1px solid #ddd; - background: #f2f2f2; - cursor: pointer; - } - - .drop_list { - &:hover .drop_button { - background: #fff; - } - - ul { - position: absolute; - margin: 0; - padding: 0; - overflow: hidden; - overflow-y: auto; - list-style: none; - background: #fff; - border: 1px solid #ddd; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - top: 100%; - left: 3px; - right: 0; - display: none; - z-index: 802; - } - - &:hover ul { - display: block; - } - - li { - white-space: nowrap; - - img { - vertical-align: sub; - } - - &:hover { - background: #f2f2f2; - } - } - - a { - display: block; - padding: 0.1em 0.3em; - - &.favorite_table_anchor { - clear: left; - float: left; - padding: 0.1em 0.3em 0; - } - } - } -} - #floating_menubar { z-index: 99; } diff --git a/public/themes/pmahomme/scss/_navigation.scss b/public/themes/pmahomme/scss/_navigation.scss index 5e2429b0b3..350135c732 100644 --- a/public/themes/pmahomme/scss/_navigation.scss +++ b/public/themes/pmahomme/scss/_navigation.scss @@ -38,8 +38,6 @@ #pmalogo, #serverChoice, #navipanellinks, - #recentTableList, - #favoriteTableList, #databaseList, div.pageselector.dbselector { text-align: center; @@ -51,12 +49,6 @@ margin: 0; } - #recentTable, - #favoriteTable { - width: 200px; - } - - #favoriteTableList select, #serverChoice select { width: 80%; } @@ -386,82 +378,6 @@ li.fast_filter { border: 1px solid #888; } -// Quick warp links -.pma_quick_warp { - margin-top: 5px; - margin-left: 2px; - position: relative; - - .drop_list { - float: left; - margin-left: 3px; - padding: 2px 0; - - &:hover { - .drop_button { - background: #fff; - } - - ul { - display: block; - } - } - - ul { - position: absolute; - margin: 0; - padding: 0; - overflow: hidden; - overflow-y: auto; - list-style: none; - background: #fff; - border: 1px solid #ddd; - border-radius: 0.3em; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - box-shadow: 0 0 5px #ccc; - top: 100%; - left: 3px; - right: 0; - display: none; - z-index: 802; - } - - li { - white-space: nowrap; - padding: 0; - border-radius: 0; - - img { - vertical-align: sub; - } - - &:hover { - background: #f2f2f2; - } - } - - a { - display: block; - padding: 0.2em 0.3em; - - &.favorite_table_anchor { - clear: left; - float: left; - padding: 0.1em 0.3em 0; - } - } - } - - .drop_button { - padding: 0.3em; - border: 1px solid #ddd; - border-radius: 0.3em; - background: #f2f2f2; - cursor: pointer; - } -} - #floating_menubar { z-index: 99; } diff --git a/resources/js/src/modules/functions.ts b/resources/js/src/modules/functions.ts index 88e8fc97cd..e615942bf5 100644 --- a/resources/js/src/modules/functions.ts +++ b/resources/js/src/modules/functions.ts @@ -3133,7 +3133,7 @@ function onloadRecentFavoriteTables (): void { { 'no_debug': true }, function (data) { if (typeof data !== 'undefined' && data.success === true) { - $('#pma_recent_list').html(data.list); + $('#recentTableList').html(data.list); } } ); @@ -3170,7 +3170,7 @@ function onloadRecentFavoriteTables (): void { window.localStorage.favoriteTables = data.favoriteTables; } - $('#pma_favorite_list').html(data.list); + $('#favoriteTableList').html(data.list); } }); } diff --git a/resources/js/src/modules/navigation/event-loader.ts b/resources/js/src/modules/navigation/event-loader.ts index 6cd4173112..d62a235d62 100644 --- a/resources/js/src/modules/navigation/event-loader.ts +++ b/resources/js/src/modules/navigation/event-loader.ts @@ -282,7 +282,7 @@ export default function onloadNavigation () { }, success: function (data) { if (data.changes) { - $('#pma_favorite_list').html(data.list); + $('#favoriteTableList').html(data.list); $('#' + anchorId).parent().html(data.anchor); tooltip($('#' + anchorId), 'a', $('#' + anchorId).attr('title')); // Update localStorage. diff --git a/resources/templates/navigation/tree/quick_warp.twig b/resources/templates/navigation/tree/quick_warp.twig index 21f648a215..655f36a806 100644 --- a/resources/templates/navigation/tree/quick_warp.twig +++ b/resources/templates/navigation/tree/quick_warp.twig @@ -1,21 +1,25 @@ -
- {% if recent is not empty %} -
- -
    - {{ recent|raw }} -
-
- {% endif %} +{% if recent is not empty or favorite is not empty %} +
+ {% if recent is not empty %} +
+ + +
+ {% endif %} - {% if favorite is not empty %} -
- -
    - {{ favorite|raw }} -
-
- {% endif %} - -
-
+ {% if favorite is not empty %} +
+ + +
+ {% endif %} +
+{% endif %} diff --git a/resources/templates/recent_favorite_table_favorite.twig b/resources/templates/recent_favorite_table_favorite.twig index 09d578960d..a5d59ea215 100644 --- a/resources/templates/recent_favorite_table_favorite.twig +++ b/resources/templates/recent_favorite_table_favorite.twig @@ -1,19 +1,23 @@ {% if tables is empty %} - {{ 'There are no favorite tables.'|trans }} +
  • + {{ 'There are no favorite tables.'|trans }} +
    • {% else %} {% for table in tables %} -
  • - - {{ get_icon('b_favorite') }} - - - `{{ table.table_parameters.db }}`.`{{ table.table_parameters.table }}` - +
  • + + + {{ get_icon('b_favorite') }} + + + `{{ table.table_parameters.db }}`.`{{ table.table_parameters.table }}` + +
    • {% endfor %} {% endif %} diff --git a/resources/templates/recent_favorite_table_recent.twig b/resources/templates/recent_favorite_table_recent.twig index e3c2ae49b4..95c261ddbb 100644 --- a/resources/templates/recent_favorite_table_recent.twig +++ b/resources/templates/recent_favorite_table_recent.twig @@ -1,9 +1,11 @@ {% if tables is empty %} - {{ 'There are no recent tables.'|trans }} +
  • + {{ 'There are no recent tables.'|trans }} +
    • {% else %} {% for table in tables %} -
  • - +
  • + `{{ table.db }}`.`{{ table.table }}`
    • diff --git a/tests/unit/Navigation/NavigationTreeTest.php b/tests/unit/Navigation/NavigationTreeTest.php index a7e14cdb53..bf854e134f 100644 --- a/tests/unit/Navigation/NavigationTreeTest.php +++ b/tests/unit/Navigation/NavigationTreeTest.php @@ -62,7 +62,7 @@ class NavigationTreeTest extends AbstractTestCase public function testRenderState(): void { $result = $this->object->renderState(new UserPrivileges()); - self::assertStringContainsString('pma_quick_warp', $result); + self::assertStringContainsString('recentFavoriteTablesWrapper', $result); } /**