Fix navbar `+` menu flashing on page load (#31281) (#31342)

Backport #31281 by silverwind

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index 2b52247303b5f082f738bb2fd144d5e5bb37affb..48899248193605038c85163a62c0479257ef0aeb 100644 (file)
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -4,7 +4,7 @@
 {{end}}
 
 <nav id="navbar" aria-label="{{ctx.Locale.Tr "aria.navbar"}}">
-       <div class="navbar-left ui secondary menu">
+       <div class="navbar-left">
                <!-- the logo -->
                <a class="item" id="navbar-logo" href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}{{ctx.Locale.Tr "home"}}{{end}}">
                        <img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
@@ -61,7 +61,7 @@
        </div>
 
        <!-- the full dropdown menus -->
-       <div class="navbar-right ui secondary menu">
+       <div class="navbar-right">
                {{if and .IsSigned .MustChangePassword}}
                        <div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
                                <span class="text tw-flex tw-items-center">
@@ -104,7 +104,7 @@
                                        <span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
                                        <span class="only-mobile">{{ctx.Locale.Tr "create_new"}}</span>
                                </span>
-                               <div class="menu left">
+                               <div class="menu">
                                        <a class="item" href="{{AppSubUrl}}/repo/create">
                                                {{svg "octicon-plus"}} {{ctx.Locale.Tr "new_repo"}}
                                        </a>

diff --git a/templates/repo/issue/labels/label_list.tmpl b/templates/repo/issue/labels/label_list.tmpl
index 8d7fc2c3dbfc3cb2dfc4a74215a8e21bced28756..413d6405b22d2a4ac6d96efc824fde20977e47f9 100644 (file)
--- a/templates/repo/issue/labels/label_list.tmpl
+++ b/templates/repo/issue/labels/label_list.tmpl
@@ -1,19 +1,17 @@
 <h4 class="ui top attached header">
        {{ctx.Locale.Tr "repo.issues.label_count" .NumLabels}}
        <div class="ui right">
-               <div class="ui secondary menu">
-                       <!-- Sort -->
-                       <div class="item ui jump dropdown tw-py-2">
-                               <span class="text">
-                                       {{ctx.Locale.Tr "repo.issues.filter_sort"}}
-                               </span>
-                               {{svg "octicon-triangle-down" 14 "dropdown icon"}}
-                               <div class="menu">
-                                       <a class="{{if or (eq .SortType "alphabetically") (not .SortType)}}active {{end}}item" href="?sort=alphabetically&state={{$.State}}">{{ctx.Locale.Tr "repo.issues.label.filter_sort.alphabetically"}}</a>
-                                       <a class="{{if eq .SortType "reversealphabetically"}}active {{end}}item" href="?sort=reversealphabetically&state={{$.State}}">{{ctx.Locale.Tr "repo.issues.label.filter_sort.reverse_alphabetically"}}</a>
-                                       <a class="{{if eq .SortType "leastissues"}}active {{end}}item" href="?sort=leastissues&state={{$.State}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.least_issues"}}</a>
-                                       <a class="{{if eq .SortType "mostissues"}}active {{end}}item" href="?sort=mostissues&state={{$.State}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.most_issues"}}</a>
-                               </div>
+               <!-- Sort -->
+               <div class="item ui jump dropdown tw-py-2">
+                       <span class="text">
+                               {{ctx.Locale.Tr "repo.issues.filter_sort"}}
+                       </span>
+                       {{svg "octicon-triangle-down" 14 "dropdown icon"}}
+                       <div class="menu">
+                               <a class="{{if or (eq .SortType "alphabetically") (not .SortType)}}active {{end}}item" href="?sort=alphabetically&state={{$.State}}">{{ctx.Locale.Tr "repo.issues.label.filter_sort.alphabetically"}}</a>
+                               <a class="{{if eq .SortType "reversealphabetically"}}active {{end}}item" href="?sort=reversealphabetically&state={{$.State}}">{{ctx.Locale.Tr "repo.issues.label.filter_sort.reverse_alphabetically"}}</a>
+                               <a class="{{if eq .SortType "leastissues"}}active {{end}}item" href="?sort=leastissues&state={{$.State}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.least_issues"}}</a>
+                               <a class="{{if eq .SortType "mostissues"}}active {{end}}item" href="?sort=mostissues&state={{$.State}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.most_issues"}}</a>
                        </div>
                </div>
        </div> <!-- filter menu -->

diff --git a/web_src/css/modules/header.css b/web_src/css/modules/header.css
index 9cec5fcbe63227c9e2d90cb18e22ecffb3153e7e..20f98bfbac293b0deacb602e1f1b76c971262a00 100644 (file)
--- a/web_src/css/modules/header.css
+++ b/web_src/css/modules/header.css
@@ -134,12 +134,6 @@ h4.ui.header .sub.header {
   font-weight: var(--font-weight-normal);
 }
 
-/* open dropdown menus to the left in right-attached headers */
-.ui.attached.header > .ui.right .ui.dropdown .menu {
-  right: 0;
-  left: auto;
-}
-
 /* if a .top.attached.header is followed by a .segment, add some margin */
 .ui.segments + .ui.top.attached.header,
 .ui.attached.segment + .ui.top.attached.header {

diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css
index 848f9331d0f4c427e0753e432a616639bffb258d..556da2df3b0518903e497b5b3784e14b51e498b4 100644 (file)
--- a/web_src/css/modules/navbar.css
+++ b/web_src/css/modules/navbar.css
@@ -19,12 +19,26 @@
   margin: 0;
   display: flex;
   align-items: center;
+  gap: 5px;
 }
 
 #navbar-logo {
   margin: 0;
 }
 
+.navbar-left > .item,
+.navbar-right > .item {
+  color: var(--color-nav-text);
+  position: relative;
+  text-decoration: none;
+  line-height: var(--line-height-default);
+  flex: 0 0 auto;
+  font-weight: var(--font-weight-normal);
+  align-items: center;
+  padding: .78571429em .92857143em;
+  border-radius: .28571429rem;
+}
+
 #navbar .item {
   min-height: 36px;
   min-width: 36px;
@@ -33,10 +47,6 @@
   display: flex;
 }
 
-#navbar > .menu > .item {
-  color: var(--color-nav-text);
-}
-
 #navbar .dropdown .item {
   justify-content: stretch;
 }
@@ -70,7 +80,7 @@
   }
   #navbar .navbar-mobile-right {
     display: flex;
-    margin-left: auto !important;
+    margin: 0 0 0 auto !important;
     width: auto !important;
   }
   #navbar .navbar-mobile-right > .item {

diff --git a/web_src/js/components/DiffCommitSelector.vue b/web_src/js/components/DiffCommitSelector.vue
index 352d08573184fd76c613f1744d98da618d639ec7..4921e3282e0c97fcf7441da793f7ed5261a2bf3a 100644 (file)
--- a/web_src/js/components/DiffCommitSelector.vue
+++ b/web_src/js/components/DiffCommitSelector.vue
@@ -202,7 +202,7 @@ export default {
     >
       <svg-icon name="octicon-git-commit"/>
     </button>
-    <div class="menu left transition" id="diff-commit-selector-menu" :class="{visible: menuVisible}" v-show="menuVisible" v-cloak :aria-expanded="menuVisible ? 'true': 'false'">
+    <div class="left menu" id="diff-commit-selector-menu" :class="{visible: menuVisible}" v-show="menuVisible" v-cloak :aria-expanded="menuVisible ? 'true': 'false'">
       <div class="loading-indicator is-loading" v-if="isLoading"/>
       <div v-if="!isLoading" class="vertical item" id="diff-commit-list-show-all" role="menuitem" @keydown.enter="showAllChanges()" @click="showAllChanges()">
         <div class="gt-ellipsis">

diff --git a/web_src/js/modules/fomantic/dropdown.js b/web_src/js/modules/fomantic/dropdown.js
index 82e710860dffef8ba9b6fb275675ecdc424c26dc..bbffb591525173e6cdaf7beb23d6a78c705db3de 100644 (file)
--- a/web_src/js/modules/fomantic/dropdown.js
+++ b/web_src/js/modules/fomantic/dropdown.js
@@ -94,6 +94,22 @@ function delegateOne($dropdown) {
     updateSelectionLabel($label[0]);
     return $label;
   });
+
+  const oldSet = dropdownCall('internal', 'set');
+  const oldSetDirection = oldSet.direction;
+  oldSet.direction = function($menu) {
+    oldSetDirection.call(this, $menu);
+    const classNames = dropdownCall('setting', 'className');
+    $menu = $menu || $dropdown.find('> .menu');
+    const elMenu = $menu[0];
+    // detect whether the menu is outside the viewport, and adjust the position
+    // there is a bug in fomantic's builtin `direction` function, in some cases (when the menu width is only a little larger) it wrongly opens the menu at right and triggers the scrollbar.
+    elMenu.classList.add(classNames.loading);
+    if (elMenu.getBoundingClientRect().right > document.documentElement.clientWidth) {
+      elMenu.classList.add(classNames.leftward);
+    }
+    elMenu.classList.remove(classNames.loading);
+  };
 }
 
 // for static dropdown elements (generated by server-side template), prepare them with necessary aria attributes