Skip to content

Tweak repo sidebar #32847

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
merged 21 commits into from
Dec 15, 2024
Merged

Tweak repo sidebar #32847

Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
9b47221
Tweak sidebar link margin
silverwind Dec 15, 2024
b4ea7b5
tweaks
silverwind Dec 15, 2024
932d9f5
fix layout
wxiaoguang Dec 15, 2024
3db9a7d
fix label text
silverwind Dec 15, 2024
3230148
fix more
wxiaoguang Dec 15, 2024
c816854
tweak link
silverwind Dec 15, 2024
a63fdb6
use text class
silverwind Dec 15, 2024
ad0556d
remove unnecessary muted
silverwind Dec 15, 2024
23ec305
clarify sidebar logic
wxiaoguang Dec 15, 2024
569fb07
hide manage topic button when editing the topics
wxiaoguang Dec 15, 2024
727d8df
more tweaks and fixes
silverwind Dec 15, 2024
b91afb0
add file
silverwind Dec 15, 2024
55ca5b7
use 'Latest' instead of 'Stable'
silverwind Dec 15, 2024
8dfb7c3
use repo.release.latest, restore label change
silverwind Dec 15, 2024
be5cdc5
restore stable
silverwind Dec 15, 2024
ed33275
document attribute and use title case
silverwind Dec 15, 2024
e2b8cba
document Release attribute
silverwind Dec 15, 2024
6d2257d
document optional
silverwind Dec 15, 2024
5db7d30
revert release test
silverwind Dec 15, 2024
54b2518
doc tweak
silverwind Dec 15, 2024
af5a4b8
Merge branch 'main' into sidebarmargin
wxiaoguang Dec 15, 2024
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
1 change: 1 addition & 0 deletions options/locale/locale_en-US.ini
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2633,6 +2633,7 @@ release.new_release = New Release
release.draft = Draft
release.prerelease = Pre-Release
release.stable = Stable
release.latest = Latest
release.compare = Compare
release.edit = edit
release.ahead.commits = <strong>%d</strong> commits
Expand Down
6 changes: 3 additions & 3 deletions templates/repo/home.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@

{{$treeNamesLen := len .TreeNames}}
{{$isTreePathRoot := eq $treeNamesLen 0}}
{{$showSidebar := $isTreePathRoot}}
{{$showSidebar := and $isTreePathRoot (not .HideRepoInfo) (not .IsBlame)}}
<div class="{{Iif $showSidebar "repo-grid-filelist-sidebar" "repo-grid-filelist-only"}}">
<div class="repo-home-filelist">
{{template "repo/sub_menu" .}}
Expand Down Expand Up @@ -130,8 +130,8 @@
</div>

{{if $showSidebar}}
<div class="repo-home-sidebar-top">{{template "repo/home_sidebar_top" .}}</div>
<div class="repo-home-sidebar-bottom">{{template "repo/home_sidebar_bottom" .}}</div>
{{template "repo/home_sidebar_top" .}}
{{template "repo/home_sidebar_bottom" .}}
{{end}}
</div>
</div>
Expand Down
94 changes: 48 additions & 46 deletions templates/repo/home_sidebar_bottom.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,61 @@
<div class="flex-list">
{{if .LatestRelease}}
<div class="flex-item">
<div class="flex-item-main">
<div class="flex-item-title">
<a class="item muted" href="{{.Link}}/releases">
{{ctx.Locale.Tr "repo.releases"}}
<span class="ui small label">{{.NumReleases}}</span>
</a>
</div>
<div class="flex-item">
<div class="flex-item-icon">
{{svg "octicon-tag" 16}}
<div class="repo-home-sidebar-bottom">
<div class="flex-list">
{{if .LatestRelease}}
<div class="flex-item">
<div class="flex-item-main">
<div class="flex-item-title">
<a class="item muted" href="{{.Link}}/releases">
{{ctx.Locale.Tr "repo.releases"}}
<span class="ui small label">{{.NumReleases}}</span>
</a>
</div>
<div class="flex-item-main">
<div class="flex-item-header">
<div class="flex-item-title tw-gap-2">
<a class="gt-ellipsis muted" href="{{.LatestRelease.Link}}" title="{{.LatestRelease.Title}}">{{.LatestRelease.Title}}</a>
<span class="ui basic green label tw-h-100">{{ctx.Locale.Tr "latest"}}</span>
</div>
<div class="flex-item">
<div class="flex-item-icon">
{{svg "octicon-tag" 16}}
</div>
<div class="flex-item-body">
<span class="time">{{DateUtils.TimeSince .LatestRelease.CreatedUnix}}</span>
<div class="flex-item-main">
<div class="flex-item-header">
<div class="flex-item-title tw-gap-2">
<a class="gt-ellipsis muted" href="{{.LatestRelease.Link}}" title="{{.LatestRelease.Title}}">{{.LatestRelease.Title}}</a>
{{template "repo/release/label" (dict "Release" .LatestRelease "IsLatest" true)}}
</div>
</div>
<div class="flex-item-body">
<span class="time">{{DateUtils.TimeSince .LatestRelease.CreatedUnix}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
{{end}}
{{end}}

{{if and (not .IsEmptyRepo) .LanguageStats}}
<div class="flex-item">
<div class="flex-item-main">
<div class="flex-item-title">
{{ctx.Locale.Tr "repo.repo_lang"}}
</div>

<div class="flex-item-body">
<div class="language-stats">
{{range .LanguageStats}}
<div class="bar" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content={{.Language}} data-tooltip-follow-cursor="horizontal"></div>
{{end}}
{{if and (not .IsEmptyRepo) .LanguageStats}}
<div class="flex-item">
<div class="flex-item-main">
<div class="flex-item-title">
{{ctx.Locale.Tr "repo.repo_lang"}}
</div>
<div class="language-stats-details">
{{range .LanguageStats}}
<div class="item">
<i class="color-icon" style="background-color: {{.Color}}"></i>
<span class="tw-font-semibold">
{{Iif (eq .Language "other") (ctx.Locale.Tr "repo.language_other") .Language}}
</span>
{{.Percentage}}%
</div>
{{end}}

<div class="flex-item-body">
<div class="language-stats">
{{range .LanguageStats}}
<div class="bar" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content={{.Language}} data-tooltip-follow-cursor="horizontal"></div>
{{end}}
</div>
<div class="language-stats-details">
{{range .LanguageStats}}
<div class="item">
<i class="color-icon" style="background-color: {{.Color}}"></i>
<span class="tw-font-semibold">
{{Iif (eq .Language "other") (ctx.Locale.Tr "repo.language_other") .Language}}
</span>
{{.Percentage}}%
</div>
{{end}}
</div>
</div>
</div>
</div>
{{end}}
</div>
{{end}}
</div>
124 changes: 63 additions & 61 deletions templates/repo/home_sidebar_top.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,70 @@
<form class="ignore-dirty tw-flex tw-flex-1 tw-mt-1" action="{{.RepoLink}}/search" method="get">
<div class="ui small action input tw-flex-1">
<input name="q" size="10" placeholder="{{ctx.Locale.Tr "search.code_kind"}}">
{{template "shared/search/button"}}
</div>
</form>
<div class="repo-home-sidebar-top">
<form class="ignore-dirty tw-flex tw-flex-1 tw-mt-1" action="{{.RepoLink}}/search" method="get">
<div class="ui small action input tw-flex-1">
<input name="q" size="10" placeholder="{{ctx.Locale.Tr "search.code_kind"}}"> {{template "shared/search/button"}}
</div>
</form>

<div class="flex-list">
<div class="flex-item">
<div class="flex-item-main">
<div class="flex-item-title">
{{ctx.Locale.Tr "repo.repo_desc"}}
</div>
{{if and (not .HideRepoInfo) (not .IsBlame)}}
<div class="flex-item-body repo-description tw-break-anywhere tw-gap-2 tw-mt-2">
{{- $description := .Repository.DescriptionHTML ctx -}}
{{if $description}}{{$description | RenderCodeBlock}}{{else}}{{ctx.Locale.Tr "repo.repo_no_desc"}}{{end}}
{{if .Repository.Website}}{{svg "octicon-link"}}<a href="{{.Repository.Website}}">{{.Repository.Website}}</a>{{end}}
</div>
<div class="tw-flex tw-items-center tw-flex-wrap tw-gap-2 tw-my-2" id="repo-topics">
{{/* !!!! it SHOULD and MUST match the code in issue-home.js */}}
{{range .Topics}}<a class="repo-topic ui large label gt-ellipsis" title={{.Name}} href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
</div>
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
<button id="manage_topic" class="btn interact-fg tw-text-12">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button>
{{end}}
{{end}}
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
<div class="ui form tw-hidden flex-item-body tw-gap-2 tw-my-2" id="topic_edit">
<div class="ui fluid multiple search selection dropdown tw-flex-wrap tw-flex-1">
<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if Eval $i "+" 1 "<" (len $.Topics)}},{{end}}{{end}}">
{{range .Topics}}
{{/* keep the same layout as Fomantic UI generated labels */}}
<a class="ui label transition visible tw-cursor-default tw-inline-block repo-topic" data-value="{{.Name}}">{{.Name}}{{svg "octicon-x" 16 "delete icon"}}</a>
<div class="flex-list">
<div class="flex-item">
<div class="flex-item-main">
<div class="flex-item-title">{{ctx.Locale.Tr "repo.repo_desc"}}</div>
<div class="flex-item-body tw-text-16">
<div class="tw-flex tw-flex-col tw-gap-2 tw-mt-2">
<div class="repo-description tw-break-anywhere tw-gap-2">
{{- $description := .Repository.DescriptionHTML ctx -}}
{{if $description}}{{$description | RenderCodeBlock}}{{else}}{{ctx.Locale.Tr "repo.repo_no_desc"}}{{end}}
</div>

{{if .Repository.Website}}
<a class="flex-text-block" href="{{.Repository.Website}}">
{{svg "octicon-link" 16 "tw-text-text"}} <span class="tw-text-primary">{{.Repository.Website}}</span>
</a>
{{end}}

<div id="repo-topics" class="flex-text-block tw-flex-wrap tw-gap-1 tw-my-1 tw-text-text">
{{/* !!!! it SHOULD and MUST match the code in repo-home.ts */}}
{{range .Topics}}<a class="repo-topic ui large label gt-ellipsis" title={{.Name}} href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
</div>
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
<button id="manage_topic" class="btn interact-fg tw-mb-2 tw-text-12">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button>
<div class="ui form tw-hidden tw-my-2" id="topic_edit">
<div class="ui fluid multiple search selection dropdown tw-flex-wrap tw-flex-1">
<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if Eval $i "+" 1 "<" (len $.Topics)}},{{end}}{{end}}">
{{range .Topics}}
{{/* keep the same layout as Fomantic UI generated labels */}}
<a class="ui label transition visible tw-cursor-default tw-inline-block repo-topic" data-value="{{.Name}}">{{.Name}}{{svg "octicon-x" 16 "delete icon"}}</a>
{{end}}
<div class="text"></div>
</div>
<div class="tw-my-2">
<button class="ui primary button" id="save_topic" data-link="{{.RepoLink}}/topics">{{ctx.Locale.Tr "save"}}</button>
<button class="ui basic button" id="cancel_topic_edit">{{ctx.Locale.Tr "cancel"}}</button>
</div>
</div>
{{end}}

{{if .ReadmeExist}}
<a class="flex-text-block muted" href="{{.TreeLink}}/{{.FileName}}">
{{svg "octicon-book"}} {{ctx.Locale.Tr "readme"}}
</a>
{{end}}

{{if .DetectedRepoLicenses}}
<a class="flex-text-block muted" href="{{.RepoLink}}/src/{{.Repository.DefaultBranch}}/{{PathEscapeSegments .LicenseFileName}}" title="{{StringUtils.Join .DetectedRepoLicenses ", "}}">
{{svg "octicon-law"}} {{if eq (len .DetectedRepoLicenses) 1}}{{index .DetectedRepoLicenses 0}}{{else}}{{ctx.Locale.Tr "repo.multiple_licenses"}}{{end}}
</a>
{{end}}

{{if .CitiationExist}}
{{template "repo/cite/cite_modal" .}}
<a class="flex-text-block muted" id="cite-repo-button">
{{svg "octicon-cross-reference"}} {{ctx.Locale.Tr "repo.cite_this_repo"}}
</a>
{{end}}
<div class="text"></div>
</div>
<div>
<button class="ui primary button" id="save_topic" data-link="{{.RepoLink}}/topics">{{ctx.Locale.Tr "save"}}</button>
<button class="ui basic button" id="cancel_topic_edit">{{ctx.Locale.Tr "cancel"}}</button>
</div>
</div>
{{end}}
{{if .ReadmeExist}}
<div class="flex-item-body tw-mt-2">
<a class="flex-text-block muted" href="{{.TreeLink}}/{{.FileName}}">
{{svg "octicon-book"}} {{ctx.Locale.Tr "readme"}}
</a>
</div>
{{end}}
{{if .DetectedRepoLicenses}}
<div class="flex-item-body">
<a class="flex-text-block muted" href="{{.RepoLink}}/src/{{.Repository.DefaultBranch}}/{{PathEscapeSegments .LicenseFileName}}" title="{{StringUtils.Join .DetectedRepoLicenses ", "}}">
{{svg "octicon-law"}} {{if eq (len .DetectedRepoLicenses) 1}}{{index .DetectedRepoLicenses 0}}{{else}}{{ctx.Locale.Tr "repo.multiple_licenses"}}{{end}}
</a>
</div>
{{end}}
{{if .CitiationExist}}
<div class="flex-item-body">
{{template "repo/cite/cite_modal" .}}
<a class="flex-text-block muted" id="cite-repo-button">
{{svg "octicon-cross-reference"}} {{ctx.Locale.Tr "repo.cite_this_repo"}}
</a>
</div>
{{end}}
</div>
</div>
</div>
</div>
14 changes: 14 additions & 0 deletions templates/repo/release/label.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{{/*
Template Attributes:
* Release: the release
* IsLatest: whether this is the latest release, optional
*/}}
{{if .IsLatest}}
<span class="ui green label">{{ctx.Locale.Tr "repo.release.latest"}}</span>
{{else if .Release.IsDraft}}
<span class="ui yellow label">{{ctx.Locale.Tr "repo.release.draft"}}</span>
{{else if .Release.IsPrerelease}}
<span class="ui orange label">{{ctx.Locale.Tr "repo.release.prerelease"}}</span>
{{else if (not .Release.IsTag)}}
<span class="ui green label">{{ctx.Locale.Tr "repo.release.stable"}}</span>
{{end}}
8 changes: 1 addition & 7 deletions templates/repo/release/list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,7 @@
<h4 class="release-list-title tw-break-anywhere">
{{if $.PageIsSingleTag}}{{$release.Title}}{{else}}<a class="muted" href="{{$.RepoLink}}/releases/tag/{{$release.TagName | PathEscapeSegments}}">{{$release.Title}}</a>{{end}}
{{template "repo/commit_statuses" dict "Status" $info.CommitStatus "Statuses" $info.CommitStatuses "AdditionalClasses" "tw-flex"}}
{{if $release.IsDraft}}
<span class="ui yellow label">{{ctx.Locale.Tr "repo.release.draft"}}</span>
{{else if $release.IsPrerelease}}
<span class="ui orange label">{{ctx.Locale.Tr "repo.release.prerelease"}}</span>
{{else if (not $release.IsTag)}}
<span class="ui green label">{{ctx.Locale.Tr "repo.release.stable"}}</span>
{{end}}
{{template "repo/release/label" (dict "Release" $release)}}
</h4>
<div>
{{if and $.CanCreateRelease (not $.PageIsSingleTag)}}
Expand Down
5 changes: 0 additions & 5 deletions web_src/css/repo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,11 +101,6 @@
margin-bottom: 12px;
}

.repository .repo-description {
font-size: 16px;
margin-bottom: 5px;
}

.commit-summary {
flex: 1;
overflow-wrap: anywhere;
Expand Down
14 changes: 8 additions & 6 deletions web_src/css/repo/home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,24 @@
grid-template-rows: auto auto 1fr;
}

.repo-grid-filelist-sidebar .repo-home-filelist {
.repo-home-filelist {
min-width: 0;
grid-column: 1;
grid-row: 1 / 4;
}

.repo-grid-filelist-sidebar .repo-home-sidebar-top {
.repo-home-sidebar-top {
grid-column: 2;
grid-row: 1;
padding-left: 1em;
}
.repo-grid-filelist-sidebar .repo-home-sidebar-bottom {

.repo-home-sidebar-bottom {
grid-column: 2;
grid-row: 2;
padding-left: 1em;
}

.repo-home-sidebar-bottom .flex-list > :first-child {
border-top: 1px solid var(--color-secondary); /* same to .flex-list > .flex-item + .flex-item */
}
Expand All @@ -29,16 +31,16 @@
grid-template-columns: 100%;
grid-template-rows: auto auto auto;
}
.repo-grid-filelist-sidebar .repo-home-filelist {
.repo-home-filelist {
grid-column: 1;
grid-row: 2;
}
.repo-grid-filelist-sidebar .repo-home-sidebar-top {
.repo-home-sidebar-top {
grid-column: 1;
grid-row: 1;
padding-left: 0;
}
.repo-grid-filelist-sidebar .repo-home-sidebar-bottom {
.repo-home-sidebar-bottom {
grid-column: 1;
grid-row: 3;
padding-left: 0;
Expand Down
6 changes: 3 additions & 3 deletions web_src/js/features/repo-home.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,15 @@ export function initRepoTopicBar() {
let lastErrorToast: Toast;

mgrBtn.addEventListener('click', () => {
hideElem(viewDiv);
hideElem([viewDiv, mgrBtn]);
showElem(editDiv);
topicDropdown.querySelector<HTMLInputElement>('input.search').focus();
});

document.querySelector('#cancel_topic_edit').addEventListener('click', () => {
lastErrorToast?.hideToast();
hideElem(editDiv);
showElem(viewDiv);
showElem([viewDiv, mgrBtn]);
mgrBtn.focus();
});

Expand Down Expand Up @@ -55,7 +55,7 @@ export function initRepoTopicBar() {
}
}
hideElem(editDiv);
showElem(viewDiv);
showElem([viewDiv, mgrBtn]);
}
} else if (response.status === 422) {
// how to test: input topic like " invalid topic " (with spaces), and select it from the list, then "Save"
Expand Down
Loading