mirror of https://github.com/go-gitea/gitea.git
Fix navbar `+` menu flashing on page load (#31281)
Fixes https://github.com/go-gitea/gitea/pull/31273#issuecomment-2153771331. Same method as used in https://github.com/go-gitea/gitea/pull/30215. All left-opening dropdowns need to use it method. --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind
GitHub
parent
45dbeb5600
commit
21ba5ca03b
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue