Skip to content
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

Jump to bottom

Fix long branch name overflows #30345

Merged
merged 20 commits into from
Apr 16, 2024
Merged

Fix long branch name overflows #30345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
3cccaba
Fix long branch name overflow in branch selector and issue list
silverwind Apr 8, 2024
4f4b091
Merge branch 'main' into longbranch
silverwind Apr 13, 2024
2bc6dab
fix branch tag with org source
silverwind Apr 13, 2024
19f2cc3
fix in branch selector as well
silverwind Apr 13, 2024
e39de1d
undo useless styles
silverwind Apr 13, 2024
b074def
comment
silverwind Apr 13, 2024
f207d82
limit branch name length
silverwind Apr 14, 2024
efa7943
Merge remote-tracking branch 'origin/main' into longbranch
silverwind Apr 14, 2024
7652c1a
Update web_src/css/repo.css
silverwind Apr 14, 2024
ee43156
move icon out of ellipsis
silverwind Apr 14, 2024
e9baafd
also limit project and milestone refs
silverwind Apr 14, 2024
810bc73
generic solution for dropdown overflows
silverwind Apr 14, 2024
e711374
Merge branch 'main' into longbranch
silverwind Apr 15, 2024
db2043d
use vertical-align
silverwind Apr 15, 2024
5603550
fix cut-off state label and overflown merge source line
silverwind Apr 15, 2024
4a1f170
make overflow:hidden work correctly on buttons by resetting line-height
silverwind Apr 15, 2024
ccf0966
Revert "make overflow:hidden work correctly on buttons by resetting l…
silverwind Apr 15, 2024
c833729
let branch selector button wrap
silverwind Apr 15, 2024
0c9ff51
use gt-ellipsis
silverwind Apr 15, 2024
5064871
Merge branch 'main' into longbranch
GiteaBot Apr 16, 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
4 changes: 2 additions & 2 deletions templates/repo/branch_dropdown.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
{{/* show dummy elements before Vue componment is mounted, this code must match the code in BranchTagSelector.vue */}}
<div class="ui dropdown custom">
<button class="branch-dropdown-button gt-ellipsis ui basic small compact button tw-flex tw-m-0">
<span class="text tw-flex tw-items-center tw-mr-1">
<span class="text tw-flex tw-items-center tw-mr-1 gt-ellipsis">
{{if .release}}
{{ctx.Locale.Tr "repo.release.compare"}}
{{else}}
Expand All @@ -80,7 +80,7 @@
{{else}}
{{svg "octicon-git-branch"}}
{{end}}
<strong ref="dropdownRefName" class="tw-ml-2">{{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}}</strong>
<strong ref="dropdownRefName" class="tw-ml-2 tw-inline-block gt-ellipsis">{{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}}</strong>
{{end}}
</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
Expand Down
6 changes: 3 additions & 3 deletions templates/repo/issue/branch_selector_field.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
{{$.CsrfTokenHtml}}
</form>
{{/* TODO: share this branch selector dropdown with the same in repo page */}}
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating filter select-branch dropdown" data-no-results="{{ctx.Locale.Tr "no_results_found"}}">
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating filter select-branch dropdown tw-max-w-full" data-no-results="{{ctx.Locale.Tr "no_results_found"}}">
<div class="ui basic small button">
<span class="text branch-name">{{if .Reference}}{{$.RefEndName}}{{else}}{{ctx.Locale.Tr "repo.issues.no_ref"}}{{end}}</span>
<span class="text branch-name gt-ellipsis">{{if .Reference}}{{$.RefEndName}}{{else}}{{ctx.Locale.Tr "repo.issues.no_ref"}}{{end}}</span>
{{if .HasIssuesOrPullsWritePermission}}{{svg "octicon-triangle-down" 14 "dropdown icon"}}{{end}}
</div>
<div class="menu">
Expand Down Expand Up @@ -37,7 +37,7 @@
<div class="item text small" data-id="" data-id-selector="#ref_selector"><strong><a href="#">{{ctx.Locale.Tr "repo.clear_ref"}}</a></strong></div>
{{end}}
{{range .Branches}}
<div class="item" data-id="refs/heads/{{.}}" data-name="{{.}}" data-id-selector="#ref_selector">{{.}}</div>
<div class="item" data-id="refs/heads/{{.}}" data-name="{{.}}" data-id-selector="#ref_selector" title="{{.}}">{{.}}</div>
{{else}}
<div class="item">{{ctx.Locale.Tr "no_results_found"}}</div>
{{end}}
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/issue/view_title.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
{{else}}
<div class="ui green label issue-state-label">{{svg "octicon-issue-opened"}} {{ctx.Locale.Tr "repo.issues.open_title"}}</div>
{{end}}
<div class="tw-ml-2">
<div class="tw-ml-2 tw-flex-1 tw-break-anywhere">
{{if .Issue.IsPull}}
{{$headHref := .HeadTarget}}
{{if .HeadBranchLink}}
Expand Down
15 changes: 9 additions & 6 deletions templates/shared/issuelist.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,18 +88,21 @@
</div>
{{end}}
{{if and .Milestone (ne $.listType "milestone")}}
<a class="milestone flex-text-inline" {{if $.RepoLink}}href="{{$.RepoLink}}/milestone/{{.Milestone.ID}}"{{else}}href="{{.Repo.Link}}/milestone/{{.Milestone.ID}}"{{end}}>
{{svg "octicon-milestone" 14}}{{.Milestone.Name}}
<a class="milestone flex-text-inline tw-max-w-[300px]" {{if $.RepoLink}}href="{{$.RepoLink}}/milestone/{{.Milestone.ID}}"{{else}}href="{{.Repo.Link}}/milestone/{{.Milestone.ID}}"{{end}}>
{{svg "octicon-milestone" 14}}
<span class="gt-ellipsis">{{.Milestone.Name}}</span>
</a>
{{end}}
{{if .Project}}
<a class="project flex-text-inline" href="{{.Project.Link ctx}}">
{{svg .Project.IconName 14}}{{.Project.Title}}
<a class="project flex-text-inline tw-max-w-[300px]" href="{{.Project.Link ctx}}">
{{svg .Project.IconName 14}}
<span class="gt-ellipsis">{{.Project.Title}}</span>
</a>
{{end}}
{{if .Ref}}
<a class="ref flex-text-inline" {{if $.RepoLink}}href="{{index $.IssueRefURLs .ID}}"{{else}}href="{{.Repo.Link}}{{index $.IssueRefURLs .ID}}"{{end}}>
{{svg "octicon-git-branch" 14}}{{index $.IssueRefEndNames .ID}}
<a class="ref flex-text-inline tw-max-w-[300px]" {{if $.RepoLink}}href="{{index $.IssueRefURLs .ID}}"{{else}}href="{{.Repo.Link}}{{index $.IssueRefURLs .ID}}"{{end}}>
{{svg "octicon-git-branch" 14}}
<span class="gt-ellipsis">{{index $.IssueRefEndNames .ID}}</span>
</a>
{{end}}
{{$tasks := .GetTasks}}
Expand Down
2 changes: 2 additions & 0 deletions web_src/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -342,6 +342,8 @@ a.label,

.ui.dropdown .menu > .item {
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
}

.ui.dropdown .menu > .item:hover {
Expand Down
20 changes: 6 additions & 14 deletions web_src/css/repo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,18 +50,18 @@
width: 300px;
}

.issue-content-right .dropdown > .menu {
max-width: 270px;
min-width: 0;
}

@media (max-width: 767.98px) {
.issue-content-left,
.issue-content-right {
width: 100%;
}
}

.repository .issue-content-right .menu {
overflow-x: auto;
max-height: 500px;
}

.repository .issue-content-right .ui.list .dependency {
padding: 0;
white-space: nowrap;
Expand Down Expand Up @@ -113,11 +113,6 @@
left: 0;
}

.repository .filter.menu .ui.dropdown .menu .item {
overflow: hidden;
text-overflow: ellipsis;
}

.repository .select-label .desc {
padding-left: 23px;
}
Expand Down Expand Up @@ -672,6 +667,7 @@ td .commit-summary {
font-size: 14px !important;
padding: 7px 10px !important;
border-radius: var(--border-radius-medium) !important;
flex-shrink: 0;
}

.issue-state-label .svg {
Expand Down Expand Up @@ -1170,10 +1166,6 @@ td .commit-summary {
font-size: 14px;
}

.repository .ui.dropdown.filter > .menu {
margin-top: 1px;
}

.repository.branches .commit-divergence .bar-group {
position: relative;
float: left;
Expand Down
6 changes: 4 additions & 2 deletions web_src/css/repo/issue-list.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
}

#issue-list .flex-item-body .branches .branch {
background-color: var(--color-secondary-alpha-40);
background-color: var(--color-secondary-alpha-50);
border-radius: var(--border-radius);
padding: 0 4px;
}
Expand All @@ -48,7 +48,9 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 10em;
max-width: 200px;
display: inline-block;
vertical-align: top;
}

#issue-list .flex-item-body .checklist progress {
Expand Down
4 changes: 2 additions & 2 deletions web_src/js/components/RepoBranchTagSelector.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,12 +248,12 @@ export default sfc; // activate IDE's Vue plugin
<template>
<div class="ui dropdown custom">
<button class="branch-dropdown-button gt-ellipsis ui basic small compact button tw-flex tw-m-0" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
<span class="text tw-flex tw-items-center tw-mr-1">
<span class="text tw-flex tw-items-center tw-mr-1 gt-ellipsis">
<template v-if="release">{{ textReleaseCompare }}</template>
<template v-else>
<svg-icon v-if="isViewTag" name="octicon-tag"/>
<svg-icon v-else name="octicon-git-branch"/>
<strong ref="dropdownRefName" class="tw-ml-2">{{ refNameText }}</strong>
<strong ref="dropdownRefName" class="tw-ml-2 tw-inline-block gt-ellipsis">{{ refNameText }}</strong>
</template>
</span>
<svg-icon name="octicon-triangle-down" :size="14" class-name="dropdown icon"/>
Expand Down