aniani/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2024-12-04 14:46:57 -05:00
Code

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

Browse Source 
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 2024-06-12 16:58:03 +02:00 committed by GitHub
parent 45dbeb5600
commit 21ba5ca03b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 46 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
templates/base/head_navbar.tmpl
View File

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

24
templates/repo/issue/labels/label_list.tmpl
View File

@ -1,19 +1,17 @@
<h4 class="ui top attached header"> <h4 class="ui top attached header">
{{ctx.Locale.Tr "repo.issues.label_count" .NumLabels}} {{ctx.Locale.Tr "repo.issues.label_count" .NumLabels}}
<div class="ui right"> <div class="ui right">
<div class="ui secondary menu"> <!-- Sort -->
<!-- Sort --> <div class="item ui jump dropdown tw-py-2">
<div class="item ui jump dropdown tw-py-2"> <span class="text">
<span class="text"> {{ctx.Locale.Tr "repo.issues.filter_sort"}}
{{ctx.Locale.Tr "repo.issues.filter_sort"}} </span>
</span> {{svg "octicon-triangle-down" 14 "dropdown icon"}}
{{svg "octicon-triangle-down" 14 "dropdown icon"}} <div class="menu">
<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 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 "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 "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>
<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>
</div> </div>
</div> <!-- filter menu --> </div> <!-- filter menu -->

6
web_src/css/modules/header.css
View File

@ -134,12 +134,6 @@ h4.ui.header .sub.header {
font-weight: var(--font-weight-normal); 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 */ /* if a .top.attached.header is followed by a .segment, add some margin */
.ui.segments + .ui.top.attached.header, .ui.segments + .ui.top.attached.header,
.ui.attached.segment + .ui.top.attached.header { .ui.attached.segment + .ui.top.attached.header {

20
web_src/css/modules/navbar.css
View File

@ -19,12 +19,26 @@
margin: 0; margin: 0;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 5px;
} }
#navbar-logo { #navbar-logo {
margin: 0; 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 { #navbar .item {
min-height: 36px; min-height: 36px;
min-width: 36px; min-width: 36px;
@ -33,10 +47,6 @@
display: flex; display: flex;
} }
#navbar > .menu > .item {
color: var(--color-nav-text);
}
#navbar .dropdown .item { #navbar .dropdown .item {
justify-content: stretch; justify-content: stretch;
} }
@ -70,7 +80,7 @@
} }
#navbar .navbar-mobile-right { #navbar .navbar-mobile-right {
display: flex; display: flex;
margin-left: auto !important; margin: 0 0 0 auto !important;
width: auto !important; width: auto !important;
} }
#navbar .navbar-mobile-right > .item { #navbar .navbar-mobile-right > .item {

2
web_src/js/components/DiffCommitSelector.vue
View File

@ -202,7 +202,7 @@ export default {
> >
<svg-icon name="octicon-git-commit"/> <svg-icon name="octicon-git-commit"/>
</button> </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 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 v-if="!isLoading" class="vertical item" id="diff-commit-list-show-all" role="menuitem" @keydown.enter="showAllChanges()" @click="showAllChanges()">
<div class="gt-ellipsis"> <div class="gt-ellipsis">

16
web_src/js/modules/fomantic/dropdown.js
View File

@ -94,6 +94,22 @@ function delegateOne($dropdown) {
updateSelectionLabel($label[0]); updateSelectionLabel($label[0]);
return $label; 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 // for static dropdown elements (generated by server-side template), prepare them with necessary aria attributes