Skip to content

Commit 8a8c625

Browse files
silverwindsilverwind
committed
WIP: Overflow menu
1 parent f38888b commit 8a8c625

File tree

12 files changed

+73
-59
lines changed

12 files changed

+73
-59
lines changed

‎templates/explore/navbar.tmpl

Lines changed: 2 additions & 2 deletions
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

Lines changed: 2 additions & 2 deletions
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

Lines changed: 3 additions & 3 deletions
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 $.PageIsUncyclo)}}/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

Lines changed: 2 additions & 2 deletions
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

Lines changed: 2 additions & 2 deletions
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

Lines changed: 2 additions & 2 deletions
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

Lines changed: 4 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@ a.label,
248248
}
249249

250250
.page-content .header-wrapper,
251-
.page-content .new-menu {
251+
.page-content .overflow-menu {
252252
margin-top: -15px !important;
253253
padding-top: 15px !important;
254254
}
@@ -1339,59 +1339,21 @@ strong.attention-caution, span.attention-caution {
13391339
}
13401340
}
13411341

1342-
.ui.menu.new-menu {
1342+
.ui.menu.overflow-menu {
13431343
margin-bottom: 15px;
13441344
background: var(--color-header-wrapper);
13451345
border-bottom: 1px solid var(--color-secondary) !important;
1346-
overflow: auto;
13471346
}
13481347

1349-
.ui.menu.new-menu .new-menu-inner {
1348+
.ui.menu.overflow-menu .overflow-menu-items {
13501349
display: flex;
1351-
margin-left: auto;
1352-
margin-right: auto;
1353-
overflow-x: auto;
13541350
width: 100%;
1355-
mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 60px), transparent 100%);
1356-
-webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 60px), transparent 100%);
13571351
}
13581352

1359-
.ui.menu.new-menu .item {
1353+
.ui.menu.overflow-menu .overflow-menu-items .item {
13601354
margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */
13611355
}
13621356

1363-
@media (max-width: 767.98px) {
1364-
.ui.menu.new-menu .item {
1365-
width: auto !important;
1366-
}
1367-
}
1368-
1369-
.ui.menu.new-menu .item:first-child {
1370-
margin-left: auto; /* "justify-content: center" doesn't work with "overflow: auto", so use margin: auto */
1371-
}
1372-
1373-
.ui.menu.new-menu .item:last-child {
1374-
padding-right: 30px !important;
1375-
margin-right: auto;
1376-
}
1377-
1378-
.ui.menu.new-menu::-webkit-scrollbar {
1379-
height: 6px;
1380-
display: none;
1381-
}
1382-
1383-
.ui.menu.new-menu::-webkit-scrollbar-track {
1384-
background: none !important;
1385-
}
1386-
1387-
.ui.menu.new-menu::-webkit-scrollbar-thumb {
1388-
box-shadow: none !important;
1389-
}
1390-
1391-
.ui.menu.new-menu:hover::-webkit-scrollbar {
1392-
display: block;
1393-
}
1394-
13951357
.repos-search {
13961358
padding-bottom: 0 !important;
13971359
}

‎web_src/css/repo.css

Lines changed: 2 additions & 2 deletions
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

Lines changed: 2 additions & 2 deletions
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

Lines changed: 40 additions & 0 deletions
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

Lines changed: 2 additions & 0 deletions
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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -243,3 +243,13 @@ 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+
export function createElementFromHTML(str) {
252+
const div = document.createElement('div');
253+
div.innerHTML = str.trim();
254+
return div.firstChild;
255+
}

0 commit comments

Comments
 (0)