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>

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>

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 -->

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 {

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 {

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">

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