Skip to content

Insights: Matched GitHub's navigation beside the activity pages #107

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
whereareiam merged 1 commit into from
Oct 23, 2026
Merged

Insights: Matched GitHub's navigation beside the activity pages #107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 79 additions & 0 deletions components/common/nav-list/nav-list.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
/* GitHub's NavList, as in settings and Insights: an icon per page, collapsible groups and a blue bar beside the current
page. Add theme-nav-list to Forgejo's vertical menu. */
.ui.vertical.menu.theme-nav-list {
border: 0;
background: transparent;
box-shadow: none;
& > .item:not(details),
& > details.item > summary,
& > details.item > .menu > .item {
position: relative;
display: flex;
/* Room for the current page's bar, which sits outside the item. */
overflow: visible;
align-items: center;
gap: 8px;
min-height: 33px;
margin: 0;
padding: 6px 8px;
border: 0;
border-radius: var(--border-radius);
background: transparent;
color: var(--color-text);
font-size: 14px;
font-weight: 400;
line-height: 21px;
&:hover {
background: var(--github-control-transparent-bgColor-hover);
color: var(--color-text);
}
&:focus-visible {
outline: 2px solid var(--github-fgColor-accent);
outline-offset: -2px;
}
}
& > details.item {
display: block;
width: 100%;
padding: 0;
background: transparent;
& > summary {
cursor: pointer;
}
& > .menu {
margin: 0;
padding: 0;
}
/* Pages inside a group line up with their group's label, as on GitHub. */
& > .menu > .item {
padding-left: 32px;
}
}
& .item > .svg,
& summary > .svg:first-child {
flex: none;
color: var(--color-text-light-1);
}
& > .item.active,
& > details.item > .menu > .item.active {
background: var(--github-control-transparent-bgColor-active);
font-weight: 600;
&::before {
content: "";
/* Fomantic hides ::before on nested menu items with a more specific rule. */
display: block !important;
position: absolute;
top: 4px;
left: -8px;
width: 4px;
height: 24px;
border-radius: var(--border-radius);
background: var(--github-bgColor-accent-emphasis);
}
}
& > details.item > summary::after {
flex: none;
margin-left: auto;
color: var(--color-text-light-1);
}
}
79 changes: 1 addition & 78 deletions components/common/settings/settings.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,86 +58,9 @@
margin-top: 0;
}

/* Nav: GitHub's action list with an icon per page, group labels and a blue bar beside the current page. */
/* Nav column: 256px, holding the shared nav list (components/common/nav-list). */
.theme-settings > .flex-container-nav {
width: 256px;
& > .ui.fluid.vertical.menu {
border: 0;
background: transparent;
box-shadow: none;
}
& > .ui.vertical.menu {
& > .item:not(details),
& > details.item > summary,
& > details.item > .menu > .item {
position: relative;
display: flex;
align-items: center;
gap: 8px;
min-height: 33px;
margin: 0;
padding: 6px 8px;
border: 0;
border-radius: var(--border-radius);
background: transparent;
color: var(--color-text);
font-size: 14px;
font-weight: 400;
line-height: 21px;
&:hover {
background: var(--github-control-transparent-bgColor-hover);
color: var(--color-text);
}
&:focus-visible {
outline: 2px solid var(--github-fgColor-accent);
outline-offset: -2px;
}
}
& > details.item {
display: block;
width: 100%;
padding: 0;
background: transparent;
& > summary {
cursor: pointer;
}
& > .menu {
margin: 0;
padding: 0;
}
/* Pages inside a group line up with their group's label, as on GitHub. */
& > .menu > .item {
padding-left: 32px;
}
}
& .item > .svg,
& summary > .svg:first-child {
flex: none;
color: var(--color-text-light-1);
}
& > .item.active,
& > details.item > .menu > .item.active {
background: var(--github-control-transparent-bgColor-active);
font-weight: 600;
&::before {
content: "";
/* Fomantic hides ::before on nested menu items with a more specific rule. */
display: block !important;
position: absolute;
top: 4px;
left: -8px;
width: 4px;
height: 24px;
border-radius: var(--border-radius);
background: var(--github-bgColor-accent-emphasis);
}
}
}
& > .ui.fluid.vertical.menu > details.item > summary::after {
flex: none;
margin-left: auto;
color: var(--color-text-light-1);
}
}

.theme-settings-group,
Expand Down
1 change: 1 addition & 0 deletions scripts/assembleForgejo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ for (const directory of ["common", "project", "repository"]) {
for (const file of [
"commits.css",
"dashboard-lists.css",
"insights.css",
"organization.css",
"profile-subpages.css",
"projects.css",
Expand Down
15 changes: 15 additions & 0 deletions src/build-output.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -579,6 +579,21 @@ describe("Forgejo 15 native integration", () => {
expect(read("styles", "components", "issues", "issue.ts")).toContain(".theme-branch-name {");
});

it("shares GitHub's nav list between settings and Insights", () => {
const read = (...parts: string[]) => fs.readFileSync(path.join(ROOT_DIR, ...parts), "utf-8");
for (const navbar of [
["templates", "repo", "navbar.tmpl"],
["templates", "repo", "settings", "navbar.tmpl"],
["templates", "user", "settings", "navbar.tmpl"],
["templates", "org", "settings", "navbar.tmpl"],
["templates", "admin", "navbar.tmpl"],
])
expect(read(...navbar)).toContain('class="ui fluid vertical menu theme-nav-list"');
expect(read("components", "common", "nav-list", "nav-list.css")).toContain(".ui.vertical.menu.theme-nav-list {");
expect(read("components", "common", "settings", "settings.css")).not.toContain("& > .item.active");
expect(read("templates", "repo", "activity.tmpl")).toContain("flex-container github-insights");
});

it("matches GitHub's repository About, visibility, and code-search details", () => {
const headerStyle = fs.readFileSync(path.join(ROOT_DIR, "styles", "templates", "repo", "header.ts"), "utf-8");
const headerTemplate = fs.readFileSync(path.join(ROOT_DIR, "templates", "repo", "home_header.tmpl"), "utf-8");
Expand Down
19 changes: 19 additions & 0 deletions styles/pages/insights.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/* Insights (Forgejo's activity pages): GitHub's 256px nav list beside the page, 40px apart. Kept as a page stylesheet,
outside the size-limited theme files. */
.ui.container.flex-container.github-insights {
gap: 40px;
}

.github-insights > .flex-container-nav {
width: 256px;
}

@media (max-width: 767.98px) {
.ui.container.flex-container.github-insights {
gap: 24px;
}

.github-insights > .flex-container-nav {
width: auto;
}
}
2 changes: 1 addition & 1 deletion templates/admin/navbar.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{{/* Forgejo's admin nav with GitHub's icon per top-level page; the site administration header above it names the area. */}}
<div class="flex-container-nav">
<div class="ui fluid vertical menu">
<div class="ui fluid vertical menu theme-nav-list">
<a class="{{if .PageIsAdminDashboard}}active {{end}}item" href="{{AppSubUrl}}/admin">
{{svg "octicon-home" 16}}{{ctx.Locale.Tr "admin.dashboard"}}
</a>
Expand Down
2 changes: 2 additions & 0 deletions templates/base/component_assets.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/common/label/label.css">
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/common/list-heading/list-heading.css">
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/common/menu/menu.css">
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/common/nav-list/nav-list.css">
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/common/progress/progress.css">
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/common/search/search.css">
<script src="{{AssetUrlPrefix}}/js/components/common/search/search.js" defer></script>
Expand All @@ -26,6 +27,7 @@
<script src="{{AssetUrlPrefix}}/js/components/repository/results/results.js" defer></script>
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/pages/commits.css">
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/pages/dashboard-lists.css">
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/pages/insights.css">
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/pages/organization.css">
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/pages/profile-subpages.css">
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/components/pages/projects.css">
Expand Down
2 changes: 1 addition & 1 deletion templates/org/settings/navbar.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{{/* GitHub's organization settings nav: an icon per page, grouped under Access, Code, planning, and automation,
and Integrations. Forgejo has no strings for the group names. */}}
<div class="flex-container-nav">
<div class="ui fluid vertical menu">
<div class="ui fluid vertical menu theme-nav-list">
<a class="{{if .PageIsSettingsOptions}}active {{end}}item" href="{{.OrgLink}}/settings">
{{svg "octicon-gear" 16}}{{ctx.Locale.Tr "org.settings.options"}}
</a>
Expand Down
18 changes: 18 additions & 0 deletions templates/repo/activity.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{{/* Forgejo 17's activity pages laid out as GitHub's Insights: the nav list beside the page. */}}
{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository commits">
<div class="ui container flex-container github-insights">
{{if and (not .IsEmptyRepo) (.Permission.CanRead $.UnitTypeCode)}}
<div class="flex-container-nav">
{{template "repo/navbar" .}}
</div>
{{end}}
<div class="flex-container-main">
{{if .PageIsPulse}}{{template "repo/pulse" .}}{{end}}
{{if .PageIsContributors}}{{template "repo/contributors" .}}{{end}}
{{if .PageIsCodeFrequency}}{{template "repo/code_frequency" .}}{{end}}
{{if .PageIsRecentCommits}}{{template "repo/recent_commits" .}}{{end}}
</div>
</div>
</div>
{{template "base/footer" .}}
19 changes: 19 additions & 0 deletions templates/repo/navbar.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{{/* Forgejo 17's Insights navigation in GitHub's nav list. */}}
{{$canReadCode := $.Permission.CanRead $.UnitTypeCode}}

<div class="ui fluid vertical menu theme-nav-list">
<a class="{{if .PageIsPulse}}active {{end}}item" href="{{.RepoLink}}/activity">
{{ctx.Locale.Tr "repo.activity.navbar.pulse"}}
</a>
{{if $canReadCode}}
<a class="{{if .PageIsContributors}}active {{end}}item" href="{{.RepoLink}}/activity/contributors">
{{ctx.Locale.Tr "repo.activity.navbar.contributors"}}
</a>
<a class="{{if .PageIsCodeFrequency}}active{{end}} item" href="{{.RepoLink}}/activity/code-frequency">
{{ctx.Locale.Tr "repo.activity.navbar.code_frequency"}}
</a>
<a class="{{if .PageIsRecentCommits}}active{{end}} item" href="{{.RepoLink}}/activity/recent-commits">
{{ctx.Locale.Tr "repo.activity.navbar.recent_commits"}}
</a>
{{end}}
</div>
2 changes: 1 addition & 1 deletion templates/repo/settings/navbar.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{{/* GitHub's repository settings nav: an icon per page, grouped under Access, Code and automation, and Security.
Forgejo has no strings for the group names. */}}
<div class="flex-container-nav">
<div class="ui fluid vertical menu">
<div class="ui fluid vertical menu theme-nav-list">
<a class="{{if .PageIsSettingsOptions}}active {{end}}item" href="{{.RepoLink}}/settings">
{{svg "octicon-gear" 16}}{{ctx.Locale.Tr "repo.settings.options"}}
</a>
Expand Down
2 changes: 1 addition & 1 deletion templates/user/settings/navbar.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
Integrations. Forgejo has no strings for the group names. */}}
{{if not .HideNavbarLinks}}
<div class="flex-container-nav">
<div class="ui fluid vertical menu">
<div class="ui fluid vertical menu theme-nav-list">
<a class="{{if .PageIsSettingsProfile}}active {{end}}item" href="{{AppSubUrl}}/user/settings">
{{svg "octicon-person" 16}}{{ctx.Locale.Tr "settings.profile"}}
</a>
Expand Down
Loading