Merge pull request '[v7.0/forgejo] Fix label selector popup width (issue creation)' (#4636) from gusted/forgejo-bp-labels into v7.0/forgejo

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/4636
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
This commit is contained in:
Earl Warren 2024-07-23 06:00:02 +00:00
commit bcb9088b0f
4 changed files with 23 additions and 27 deletions

View file

@ -5,11 +5,11 @@
{{svg "octicon-gear" 16 "tw-ml-1"}} {{svg "octicon-gear" 16 "tw-ml-1"}}
{{end}} {{end}}
</span> </span>
<div class="filter menu" {{if .Issue}}data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/labels"{{else}}data-id="#label_ids"{{end}}> <div class="filter menu ugc-labels" {{if .Issue}}data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/labels"{{else}}data-id="#label_ids"{{end}}>
{{if or .Labels .OrgLabels}} {{if or .Labels .OrgLabels}}
<div class="ui icon search input"> <div class="ui icon search input">
<i class="icon">{{svg "octicon-search" 16}}</i> <i class="icon">{{svg "octicon-search" 16}}</i>
<input type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_labels"}}"> <input class="tw-w-auto" type="text" placeholder="{{ctx.Locale.Tr "repo.issues.filter_labels"}}">
</div> </div>
{{end}} {{end}}
<a class="no-select item" href="#">{{ctx.Locale.Tr "repo.issues.new.clear_labels"}}</a> <a class="no-select item" href="#">{{ctx.Locale.Tr "repo.issues.new.clear_labels"}}</a>

View file

@ -1,13 +1,11 @@
<div class="ui labels list"> <div class="ui labels list">
<span class="no-select item {{if .root.HasSelectedLabel}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_label"}}</span> <span class="no-select {{if .root.HasSelectedLabel}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_label"}}</span>
{{if .root.HasSelectedLabel}} <span class="labels-list ugc-labels">
<span class="labels-list"> {{range .root.Labels}}
{{range .root.Labels}} {{template "repo/issue/labels/label" dict "root" $.root "label" .}}
{{template "repo/issue/labels/label" dict "root" $.root "label" .}} {{end}}
{{end}} {{range .root.OrgLabels}}
{{range .root.OrgLabels}} {{template "repo/issue/labels/label" dict "root" $.root "label" .}}
{{template "repo/issue/labels/label" dict "root" $.root "label" .}} {{end}}
{{end}} </span>
</span>
{{end}}
</div> </div>

View file

@ -942,10 +942,11 @@ func TestIssueUnsubscription(t *testing.T) {
func TestIssueLabelList(t *testing.T) { func TestIssueLabelList(t *testing.T) {
defer tests.PrepareTestEnv(t)() defer tests.PrepareTestEnv(t)()
// The label list should always be present. When no labels are selected, .no-select is visible, otherwise hidden.
labelListSelector := ".labels.list .labels-list" labelListSelector := ".labels.list .labels-list"
hiddenClass := "tw-hidden" hiddenClass := "tw-hidden"
t.Run("Show label list", func(t *testing.T) { t.Run("Test label list", func(t *testing.T) {
defer tests.PrintCurrentTest(t)() defer tests.PrintCurrentTest(t)()
req := NewRequest(t, "GET", "/user2/repo1/issues/1") req := NewRequest(t, "GET", "/user2/repo1/issues/1")
@ -953,18 +954,6 @@ func TestIssueLabelList(t *testing.T) {
htmlDoc := NewHTMLParser(t, resp.Body) htmlDoc := NewHTMLParser(t, resp.Body)
htmlDoc.AssertElement(t, labelListSelector, true) htmlDoc.AssertElement(t, labelListSelector, true)
htmlDoc.AssertElement(t, ".labels.list .no-select.item."+hiddenClass, true) htmlDoc.AssertElement(t, ".labels.list .no-select."+hiddenClass, true)
})
t.Run("Show no label list", func(t *testing.T) {
defer tests.PrintCurrentTest(t)()
session := loginUser(t, "user2")
req := NewRequest(t, "GET", "/user2/repo2/issues/1")
resp := session.MakeRequest(t, req, http.StatusOK)
htmlDoc := NewHTMLParser(t, resp.Body)
htmlDoc.AssertElement(t, labelListSelector, false)
htmlDoc.AssertElement(t, ".labels.list .no-select.item:not([class*='"+hiddenClass+"'])", true)
}) })
} }

View file

@ -98,6 +98,15 @@ a.ui.label:hover {
display: inline-block !important; display: inline-block !important;
} }
.ugc-labels .item {
text-overflow: unset !important;
}
.ugc-labels .item .ui.label {
text-wrap: auto;
overflow-wrap: anywhere;
}
.ui.basic.label { .ui.basic.label {
background: var(--color-button); background: var(--color-button);
border: 1px solid var(--color-light-border); border: 1px solid var(--color-light-border);