Skip to content

Commit c6f082d

Browse files
silverwindsilverwind
committed
WIP: Overflow menu
1 parent f9207b0 commit c6f082d

File tree

12 files changed

+74
-59
lines changed

12 files changed

+74
-59
lines changed

‎templates/explore/navbar.tmpl

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<div class="ui secondary pointing tabular top attached borderless menu new-menu navbar">
2-
<div class="new-menu-inner">
1+
<div class="ui secondary pointing tabular top attached borderless menu overflow-menu navbar">
2+
<div class="overflow-menu-items">
33
<a class="{{if .PageIsExploreRepositories}}active {{end}}item" href="{{AppSubUrl}}/explore/repos">
44
{{svg "octicon-repo"}} {{ctx.Locale.Tr "explore.repos"}}
55
</a>

‎templates/repo/diff/image_diff.tmpl

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
data-mime-before="{{.sniffedTypeBase.GetMimeType}}"
88
data-mime-after="{{.sniffedTypeHead.GetMimeType}}"
99
>
10-
<div class="ui secondary pointing tabular top attached borderless menu new-menu">
11-
<div class="new-menu-inner">
10+
<div class="ui secondary pointing tabular top attached borderless menu overflow-menu">
11+
<div class="overflow-menu-items">
1212
<a class="item active" data-tab="diff-side-by-side-{{.file.Index}}">{{ctx.Locale.Tr "repo.diff.image.side_by_side"}}</a>
1313
{{if and .blobBase .blobHead}}
1414
<a class="item" data-tab="diff-swipe-{{.file.Index}}">{{ctx.Locale.Tr "repo.diff.image.swipe"}}</a>

‎templates/repo/header.tmpl

+3-3
Original file line numberDiff line numberDiff line change
@@ -126,9 +126,9 @@
126126
{{if .IsGenerated}}<div class="fork-flag">{{ctx.Locale.Tr "repo.generated_from"}} <a href="{{(.TemplateRepo ctx).Link}}">{{(.TemplateRepo ctx).FullName}}</a></div>{{end}}
127127
</div>
128128
{{end}}
129-
<div class="ui container secondary pointing tabular top attached borderless menu new-menu navbar">
129+
<div class="ui container secondary pointing tabular top attached borderless menu overflow-menu navbar">
130130
{{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}}
131-
<div class="new-menu-inner">
131+
<div class="overflow-menu-items">
132132
{{if .Permission.CanRead $.UnitTypeCode}}
133133
<a class="{{if .PageIsViewCode}}active {{end}}item" href="{{.RepoLink}}{{if and (ne .BranchName .Repository.DefaultBranch) (not $.PageIsWiki)}}/src/{{.BranchNameSubURL}}{{end}}">
134134
{{svg "octicon-code"}} {{ctx.Locale.Tr "repo.code"}}
@@ -219,7 +219,7 @@
219219
{{end}}
220220
</div>
221221
{{else if .Permission.IsAdmin}}
222-
<div class="new-menu-inner">
222+
<div class="overflow-menu-items">
223223
<a class="{{if .PageIsRepoSettings}}active {{end}} item" href="{{.RepoLink}}/settings">
224224
{{svg "octicon-tools"}} {{ctx.Locale.Tr "repo.settings"}}
225225
</a>

‎templates/user/auth/link_account.tmpl

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{{template "base/head" .}}
22
<div role="main" aria-label="{{.Title}}" class="page-content user link-account">
3-
<div class="ui secondary pointing tabular top attached borderless menu new-menu navbar">
4-
<div class="new-menu-inner">
3+
<div class="ui secondary pointing tabular top attached borderless menu overflow-menu navbar">
4+
<div class="overflow-menu-items">
55
<!-- TODO handle .ShowRegistrationButton once other login bugs are fixed -->
66
{{if not .AllowOnlyInternalRegistration}}
77
<a class="item {{if not .user_exists}}active{{end}}"

‎templates/user/auth/signin_navbar.tmpl

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{{if or .EnableOpenIDSignIn .EnableSSPI}}
2-
<div class="ui secondary pointing tabular top attached borderless menu new-menu navbar">
3-
<div class="new-menu-inner">
2+
<div class="ui secondary pointing tabular top attached borderless menu overflow-menu navbar">
3+
<div class="overflow-menu-items">
44
<a class="{{if .PageIsLogin}}active {{end}}item" rel="nofollow" href="{{AppSubUrl}}/user/login">
55
{{ctx.Locale.Tr "auth.login_userpass"}}
66
</a>

‎templates/user/auth/signup_openid_navbar.tmpl

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<div class="ui secondary pointing tabular top attached borderless menu new-menu navbar">
2-
<div class="new-menu-inner">
1+
<div class="ui secondary pointing tabular top attached borderless menu overflow-menu navbar">
2+
<div class="overflow-menu-items">
33
<a class="{{if .PageIsOpenIDConnect}}active {{end}}item" href="{{AppSubUrl}}/user/openid/connect">
44
{{ctx.Locale.Tr "auth.openid_connect_title"}}
55
</a>

‎web_src/css/base.css

+4-42
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,7 @@ a.label,
240240
}
241241

242242
.page-content .header-wrapper,
243-
.page-content .new-menu {
243+
.page-content .overflow-menu {
244244
margin-top: -15px !important;
245245
padding-top: 15px !important;
246246
}
@@ -1331,59 +1331,21 @@ strong.attention-caution, span.attention-caution {
13311331
}
13321332
}
13331333

1334-
.ui.menu.new-menu {
1334+
.ui.menu.overflow-menu {
13351335
margin-bottom: 15px;
13361336
background: var(--color-header-wrapper);
13371337
border-bottom: 1px solid var(--color-secondary) !important;
1338-
overflow: auto;
13391338
}
13401339

1341-
.ui.menu.new-menu .new-menu-inner {
1340+
.ui.menu.overflow-menu .overflow-menu-items {
13421341
display: flex;
1343-
margin-left: auto;
1344-
margin-right: auto;
1345-
overflow-x: auto;
13461342
width: 100%;
1347-
mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 60px), transparent 100%);
1348-
-webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 60px), transparent 100%);
13491343
}
13501344

1351-
.ui.menu.new-menu .item {
1345+
.ui.menu.overflow-menu .overflow-menu-items .item {
13521346
margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */
13531347
}
13541348

1355-
@media (max-width: 767.98px) {
1356-
.ui.menu.new-menu .item {
1357-
width: auto !important;
1358-
}
1359-
}
1360-
1361-
.ui.menu.new-menu .item:first-child {
1362-
margin-left: auto; /* "justify-content: center" doesn't work with "overflow: auto", so use margin: auto */
1363-
}
1364-
1365-
.ui.menu.new-menu .item:last-child {
1366-
padding-right: 30px !important;
1367-
margin-right: auto;
1368-
}
1369-
1370-
.ui.menu.new-menu::-webkit-scrollbar {
1371-
height: 6px;
1372-
display: none;
1373-
}
1374-
1375-
.ui.menu.new-menu::-webkit-scrollbar-track {
1376-
background: none !important;
1377-
}
1378-
1379-
.ui.menu.new-menu::-webkit-scrollbar-thumb {
1380-
box-shadow: none !important;
1381-
}
1382-
1383-
.ui.menu.new-menu:hover::-webkit-scrollbar {
1384-
display: block;
1385-
}
1386-
13871349
.repos-search {
13881350
padding-bottom: 0 !important;
13891351
}

‎web_src/css/repo.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -2778,12 +2778,12 @@ tbody.commit-list {
27782778
border-left: 1px solid var(--color-secondary);
27792779
}
27802780

2781-
.repository .ui.menu.new-menu {
2781+
.repository .ui.menu.overflow-menu {
27822782
background: none !important;
27832783
}
27842784

27852785
@media (max-width: 1200px) {
2786-
.repository .ui.menu.new-menu::after {
2786+
.repository .ui.menu.overflow-menu::after {
27872787
background: none !important;
27882788
}
27892789
}

‎web_src/css/repo/header.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -74,13 +74,13 @@
7474
background-color: var(--color-header-wrapper);
7575
}
7676

77-
.repository .header-wrapper .new-menu {
77+
.repository .header-wrapper .overflow-menu {
7878
padding-top: 0 !important;
7979
margin-top: 0 !important;
8080
margin-bottom: 0 !important;
8181
}
8282

83-
.repository .header-wrapper .new-menu .item {
83+
.repository .header-wrapper .overflow-menu .item {
8484
margin-left: 0 !important;
8585
margin-right: 0 !important;
8686
}

‎web_src/js/behaviours/overflow-menu.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import {throttle} from 'throttle-debounce';
2+
import {isHorizontallyOverflown, createElementFromHTML} from '../utils/dom.js';
3+
import {svg} from '../svg.js';
4+
import $ from 'jquery';
5+
6+
const update = throttle(100, (menu) => {
7+
const isOverflown = isHorizontallyOverflown(menu);
8+
if (isOverflown) {
9+
const overflownItems = [];
10+
const {right: menuRight} = menu.getBoundingClientRect();
11+
for (const item of menu.querySelectorAll('.overflow-menu-items .item')) {
12+
const {right: itemRight} = item.getBoundingClientRect();
13+
if (itemRight >= menuRight) {
14+
overflownItems.push(item.cloneNode(true));
15+
item.remove();
16+
}
17+
}
18+
if (overflownItems.length) {
19+
menu.querySelector('.overflow-menu')?.remove();
20+
menu.append(createElementFromHTML(`
21+
<div class="ui dropdown overflow-menu gt-px-2">
22+
<div class="text">${svg('octicon-kebab-horizontal')}</div>
23+
<div class="menu">${overflownItems.map((item) => item.outerHTML).join('')}</div>
24+
</div>
25+
`));
26+
$(menu).dropdown();
27+
}
28+
}
29+
});
30+
31+
export function initOverflowMenu() {
32+
for (const el of document.querySelectorAll('.overflow-menu')) {
33+
update(el);
34+
(new ResizeObserver((entries) => {
35+
for (const entry of entries) {
36+
update(entry.target);
37+
}
38+
})).observe(el);
39+
}
40+
}

‎web_src/js/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ import {initRepoCodeFrequency} from './features/code-frequency.js';
8888
import {initRepoRecentCommits} from './features/recent-commits.js';
8989
import {initRepoDiffCommitBranchesAndTags} from './features/repo-diff-commit.js';
9090
import {initDirAuto} from './modules/dirauto.js';
91+
import {initOverflowMenu} from './behaviours/overflow-menu.js';
9192

9293
// Init Gitea's Fomantic settings
9394
initGiteaFomantic();
@@ -189,4 +190,5 @@ onDomReady(() => {
189190
initRepoDiffView();
190191
initPdfViewer();
191192
initScopedAccessTokenCategories();
193+
initOverflowMenu();
192194
});

‎web_src/js/utils/dom.js

+11
Original file line numberDiff line numberDiff line change
@@ -243,3 +243,14 @@ export function isElemVisible(element) {
243243

244244
return Boolean(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
245245
}
246+
247+
export function isHorizontallyOverflown(el) {
248+
return (el.scrollWidth ?? 0) - (el.clientWidth ?? 0) > 1;
249+
}
250+
251+
// create DOM element from HTML string
252+
export function createElementFromHTML(str) {
253+
const div = document.createElement('div');
254+
div.innerHTML = str.trim();
255+
return div.firstChild;
256+
}

0 commit comments

Comments
 (0)