mirror
/
gitea
mirror of https://github.com/go-gitea/gitea
2
0
Fork 0
Code Issues Releases Wiki Activity

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

Browse Source 
Backport #31281 by silverwind

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
pull/31335/head^2
Giteabot 5 months ago committed by GitHub
parent b1ad8ccb73
commit 4b6ef9265b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 46 additions and 28 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 6
      templates/base/head_navbar.tmpl
  2. 24
      templates/repo/issue/labels/label_list.tmpl
  3. 6
      web_src/css/modules/header.css
  4. 20
      web_src/css/modules/navbar.css
  5. 2
      web_src/js/components/DiffCommitSelector.vue
  6. 16
      web_src/js/modules/fomantic/dropdown.js

6
templates/base/head_navbar.tmpl
Unescape View File

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

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

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

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

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

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save