Add titles and improve messages on sidebar menus (#10872)

* ui: add more message on sidebar menus

* add title on the menus
* show some message instead of hide choose bar when have nothing to choose
* add simply filter for each menus
* do same changes in mew_form.tmpl
* remove some unusefull comments in mew_form.tmpl

Signed-off-by: a1012112796 <1012112796@qq.com>

* do review suggestions

* add filter message  on sidebar filter
* change IsIssueWriter to HasIssuesOrPullsWritePermission

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: guillep2k <18600385+guillep2k@users.noreply.github.com>

options/locale/locale_en-US.ini

@@ -824,17 +824,24 @@ ext_issues = Ext. Issues
 ext_issues.desc = Link to an external issue tracker.
 
 issues.desc = Organize bug reports, tasks and milestones.
+issues.filter_assignees = Filter Assignee
+issues.filter_milestones = Filter Milestone
+issues.filter_labels = Filter Label
 issues.new = New Issue
 issues.new.title_empty = Title cannot be empty
 issues.new.labels = Labels
+issues.new.add_labels_title = Apply labels
 issues.new.no_label = No Label
 issues.new.clear_labels = Clear labels
+issues.new.no_items = No items
 issues.new.milestone = Milestone
+issues.new.add_milestone_title = Set milestone
 issues.new.no_milestone = No Milestone
 issues.new.clear_milestone = Clear milestone
 issues.new.open_milestone = Open Milestones
 issues.new.closed_milestone = Closed Milestones
 issues.new.assignees = Assignees
+issues.new.add_assignees_title = Assign users
 issues.new.clear_assignees = Clear assignees
 issues.new.no_assignees = No Assignees
 issues.no_ref = No Branch/Tag Specified

routers/repo/compare.go

@@ -432,6 +432,8 @@ func CompareDiff(ctx *context.Context) {
 	setTemplateIfExists(ctx, pullRequestTemplateKey, pullRequestTemplateCandidates)
 	renderAttachmentSettings(ctx)
 
+	ctx.Data["HasIssuesOrPullsWritePermission"] = ctx.Repo.CanWrite(models.UnitTypePullRequests)
+
 	ctx.HTML(200, tplCompare)
 }
 

routers/repo/issue.go

@@ -487,6 +487,8 @@ func NewIssue(ctx *context.Context) {
 		return
 	}
 
+	ctx.Data["HasIssuesOrPullsWritePermission"] = ctx.Repo.CanWrite(models.UnitTypeIssues)
+
 	ctx.HTML(200, tplIssueNew)
 }
 
@@ -1076,7 +1078,7 @@ func ViewIssue(ctx *context.Context) {
 	ctx.Data["ReadOnly"] = true
 	ctx.Data["SignInLink"] = setting.AppSubURL + "/user/login?redirect_to=" + ctx.Data["Link"].(string)
 	ctx.Data["IsIssuePoster"] = ctx.IsSigned && issue.IsPoster(ctx.User.ID)
-	ctx.Data["IsIssueWriter"] = ctx.Repo.CanWriteIssuesOrPulls(issue.IsPull)
+	ctx.Data["HasIssuesOrPullsWritePermission"] = ctx.Repo.CanWriteIssuesOrPulls(issue.IsPull)
 	ctx.Data["IsRepoAdmin"] = ctx.IsSigned && (ctx.Repo.IsAdmin() || ctx.User.IsAdmin)
 	ctx.Data["LockReasons"] = setting.Repository.Issue.LockReasons
 	ctx.HTML(200, tplIssueView)

routers/repo/pull.go

@@ -652,7 +652,7 @@ func ViewPullFiles(ctx *context.Context) {
 	}
 	getBranchData(ctx, issue)
 	ctx.Data["IsIssuePoster"] = ctx.IsSigned && issue.IsPoster(ctx.User.ID)
-	ctx.Data["IsIssueWriter"] = ctx.Repo.CanWriteIssuesOrPulls(issue.IsPull)
+	ctx.Data["HasIssuesOrPullsWritePermission"] = ctx.Repo.CanWriteIssuesOrPulls(issue.IsPull)
 	ctx.HTML(200, tplPullFiles)
 }
 

templates/repo/issue/new_form.tmpl

@@ -38,22 +38,36 @@
 			{{template "repo/issue/branch_selector_field" .}}
 
 			<input id="label_ids" name="label_ids" type="hidden" value="{{.label_ids}}">
-			<div class="ui {{if and (not .Labels) (not .OrgLabels)}}disabled{{end}} floating jump select-label dropdown">
+			<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-label dropdown">
 				<span class="text">
 					<strong>{{.i18n.Tr "repo.issues.new.labels"}}</strong>
+					{{if .HasIssuesOrPullsWritePermission}}
 						{{svg "octicon-gear" 16}}
+					{{end}}
 				</span>
 				<div class="filter menu" data-id="#label_ids">
+					<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_labels_title"}}</div>
+					{{if or .Labels .OrgLabels}}
+					<div class="ui icon search input">
+						<i class="search icon"></i>
+						<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_labels"}}">
+					</div>
+					{{end}}
 					<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_labels"}}</div>
+					{{if or .Labels .OrgLabels}}
 						{{range .Labels}}
 							<a class="{{if .IsChecked}}checked{{end}} item has-emoji" href="#" data-id="{{.ID}}" data-id-selector="#label_{{.ID}}"><span class="octicon-check {{if not .IsChecked}}invisible{{end}}">{{svg "octicon-check" 16}}</span><span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}
 							{{if .Description }}<br><small class="desc">{{.Description}}</small>{{end}}</a>
 						{{end}}
+					
 						<div class="ui divider"></div>
 						{{range .OrgLabels}}
 							<a class="{{if .IsChecked}}checked{{end}} item has-emoji" href="#" data-id="{{.ID}}" data-id-selector="#label_{{.ID}}"><span class="octicon-check {{if not .IsChecked}}invisible{{end}}">{{svg "octicon-check" 16}}</span><span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}
 							{{if .Description }}<br><small class="desc">{{.Description}}</small>{{end}}</a>
 						{{end}}
+					{{else}}
+						<div class="header" style="text-transform: none;font-size:14px;">{{.i18n.Tr "repo.issues.new.no_items"}}</div>
+					{{end}}
 				</div>
 			</div>
 			<div class="ui labels list">
@@ -69,13 +83,27 @@
 			<div class="ui divider"></div>
 
 			<input id="milestone_id" name="milestone_id" type="hidden" value="{{.milestone_id}}">
-			<div class="ui {{if not (or .OpenMilestones .ClosedMilestones)}}disabled{{end}} floating jump select-milestone dropdown">
+			<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-milestone dropdown">
 				<span class="text">
 					<strong>{{.i18n.Tr "repo.issues.new.milestone"}}</strong>
+					{{if .HasIssuesOrPullsWritePermission}}
 						{{svg "octicon-gear" 16}}
+					{{end}}
 				</span>
 				<div class="menu">
+					<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_milestone_title"}}</div>
+					{{if or .OpenMilestones .ClosedMilestones}}
+					<div class="ui icon search input">
+						<i class="search icon"></i>
+						<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_milestones"}}">
+					</div>
+					{{end}}
 					<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_milestone"}}</div>
+					{{if and (not .OpenMilestones) (not .ClosedMilestones)}}
+						<div class="header" style="text-transform: none;font-size:14px;">
+							{{.i18n.Tr "repo.issues.new.no_items"}}
+						</div>
+					{{else}}
 						{{if .OpenMilestones}}
 							<div class="divider"></div>
 							<div class="header">
@@ -96,6 +124,7 @@
 								<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}"> {{.Name}}</a>
 							{{end}}
 						{{end}}
+					{{end}}
 				</div>
 			</div>
 			<div class="ui select-milestone list">
@@ -110,12 +139,19 @@
 			<div class="ui divider"></div>
 
 				<input id="assignee_ids" name="assignee_ids" type="hidden" value="{{.assignee_ids}}">
-				<div class="ui {{if not .Assignees}}disabled{{end}} floating jump select-assignees dropdown">
+				<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-assignees dropdown">
 					<span class="text">
 						<strong>{{.i18n.Tr "repo.issues.new.assignees"}}</strong>
+						{{if .HasIssuesOrPullsWritePermission}}
 							{{svg "octicon-gear" 16}}
+						{{end}}
 					</span>
 					<div class="filter menu" data-id="#assignee_ids">
+						<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_assignees_title"}}</div>
+						<div class="ui icon search input">
+							<i class="search icon"></i>
+							<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_assignees"}}">
+						</div>
 						<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_assignees"}}</div>
 						{{range .Assignees}}
 							<a class="item" href="#" data-id="{{.ID}}" data-id-selector="#assignee_{{.ID}}">
@@ -137,28 +173,6 @@
 						</a>
 					{{end}}
 				</div>
-
-			<!-- input id="assignee_ids" name="assignee_ids" type="hidden" value="{{.assignee_id}}">
-			<div class="ui {{if not .Assignees}}disabled{{end}} floating jump select-assignee dropdown">
-				<span class="text">
-					<strong>{{.i18n.Tr "repo.issues.new.assignees"}}</strong>
-					<span class="octicon octicon-gear"></span>
-				</span>
-				<div class="filter menu">
-					<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_assignees"}}</div>
-					{{range .Assignees}}
-						<div class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?assignee={{.ID}}" data-avatar="{{.RelAvatarLink}}"><img src="{{.RelAvatarLink}}"> {{.Name}}</div>
-					{{end}}
-				</div>
-			</div>
-			<div class="ui select-assignee list">
-				<span class="no-select item {{if .Assignee}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_assignees"}}</span>
-				<div class="selected">
-					{{if .Assignee}}
-						<a class="item" href="{{.RepoLink}}/issues?assignee={{.Assignee.ID}}"><img class="ui avatar image" src="{{.Assignee.RelAvatarLink}}"> {{.Assignee.Name}}</a>
-					{{end}}
-				</div>
-			</div>-->
 		</div>
 	</div>
 </form>

templates/repo/issue/view_content.tmpl

@@ -66,7 +66,7 @@
 				{{ template "repo/issue/view_content/pull". }}
 			{{end}}
 			{{if .IsSigned}}
-				{{ if and (or .IsRepoAdmin .IsIssueWriter (or (not .Issue.IsLocked))) (not .Repository.IsArchived) }}
+				{{ if and (or .IsRepoAdmin .HasIssuesOrPullsWritePermission (or (not .Issue.IsLocked))) (not .Repository.IsArchived) }}
 				<div class="comment form">
 					<a class="avatar" href="{{.SignedUser.HomeLink}}">
 						<img src="{{.SignedUser.RelAvatarLink}}">
@@ -77,7 +77,7 @@
 							{{.CsrfTokenHtml}}
 							<input id="status" name="status" type="hidden">
 							<div class="text right">
-								{{if and (or .IsIssueWriter .IsIssuePoster) (not .DisableStatusChange)}}
+								{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}}
 									{{if .Issue.IsClosed}}
 										<div id="status-button" class="ui green basic button" tabindex="6" data-status="{{.i18n.Tr "repo.issues.reopen_issue"}}" data-status-and-comment="{{.i18n.Tr "repo.issues.reopen_comment_issue"}}" data-status-val="reopen">
 											{{.i18n.Tr "repo.issues.reopen_issue"}}
@@ -126,7 +126,7 @@
 								{{.CsrfTokenHtml}}
 								<input id="status" name="status" type="hidden">
 								<div class="text right">
-									{{if and (or .IsIssueWriter .IsIssuePoster) (not .DisableStatusChange)}}
+									{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}}
 										{{if .Issue.IsClosed}}
 											<div id="status-button" class="ui green basic button" tabindex="6" data-status="{{.i18n.Tr "repo.issues.reopen_issue"}}" data-status-and-comment="{{.i18n.Tr "repo.issues.reopen_comment_issue"}}" data-status-val="reopen">
 												{{.i18n.Tr "repo.issues.reopen_issue"}}

templates/repo/issue/view_content/context_menu.tmpl

@@ -10,7 +10,7 @@
 			<div class="item context clipboard" data-clipboard-text="{{Printf "%s%s/issues/%d#%s" AppUrl .ctx.Repository.FullName .ctx.Issue.Index .item.HashTag}}">{{.ctx.i18n.Tr "repo.issues.context.copy_link"}}</div>
 		{{end}}
 		<div class="item context quote-reply {{if .diff}}quote-reply-diff{{end}}" data-target="{{.item.ID}}">{{.ctx.i18n.Tr "repo.issues.context.quote_reply"}}</div>
-		{{if or .ctx.Permission.IsAdmin .ctx.IsIssuePoster .ctx.IsIssueWriter}}
+		{{if or .ctx.Permission.IsAdmin .ctx.IsIssuePoster .ctx.HasIssuesOrPullsWritePermission}}
 			<div class="divider"></div>
 			<div class="item context edit-content">{{.ctx.i18n.Tr "repo.issues.context.edit"}}</div>
 			{{if .delete}}

templates/repo/issue/view_content/sidebar.tmpl

@@ -2,15 +2,23 @@
 	<div class="ui segment metas">
 		{{template "repo/issue/branch_selector_field" .}}
 
-		<div class="ui {{if or (not .IsIssueWriter) .Repository.IsArchived}}disabled{{end}} floating jump select-label dropdown">
+		<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-label dropdown">
 			<span class="text">
 				<strong>{{.i18n.Tr "repo.issues.new.labels"}}</strong>
-				{{if and .IsIssueWriter (not .Repository.IsArchived)}}
+				{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
 					{{svg "octicon-gear" 16}}
 				{{end}}
 			</span>
 			<div class="filter menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/labels">
+				<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_labels_title"}}</div>
+				{{if or .Labels .OrgLabels}}
+				<div class="ui icon search input">
+					<i class="search icon"></i>
+					<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_labels"}}">
+				</div>
+				{{end}}
 				<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_labels"}}</div>
+				{{if or .Labels .OrgLabels}}
 					{{range .Labels}}
 						<a class="{{if .IsChecked}}checked{{end}} item has-emoji" href="#" data-id="{{.ID}}" data-id-selector="#label_{{.ID}}"><span class="octicon-check {{if not .IsChecked}}invisible{{end}}">{{svg "octicon-check" 16}}</span><span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}
 						{{if .Description }}<br><small class="desc">{{.Description}}</small>{{end}}</a>
@@ -20,6 +28,9 @@
 						<a class="{{if .IsChecked}}checked{{end}} item has-emoji" href="#" data-id="{{.ID}}" data-id-selector="#label_{{.ID}}"><span class="octicon-check {{if not .IsChecked}}invisible{{end}}">{{svg "octicon-check" 16}}</span><span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}
 						{{if .Description }}<br><small class="desc">{{.Description}}</small>{{end}}</a>
 					{{end}}
+				{{else}}
+					<div class="header" style="text-transform: none;font-size:14px;">{{.i18n.Tr "repo.issues.new.no_items"}}</div>
+				{{end}}
 			</div>
 		</div>
 		<div class="ui labels list">
@@ -39,15 +50,27 @@
 
 		<div class="ui divider"></div>
 
-		<div class="ui {{if or (not .IsIssueWriter) .Repository.IsArchived}}disabled{{end}} floating jump select-milestone dropdown">
+		<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-milestone dropdown">
 			<span class="text">
 				<strong>{{.i18n.Tr "repo.issues.new.milestone"}}</strong>
-				{{if and .IsIssueWriter (not .Repository.IsArchived)}}
+				{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
 					{{svg "octicon-gear" 16}}
 				{{end}}
 			</span>
 			<div class="menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/milestone">
+				<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_milestone_title"}}</div>
+				{{if or .OpenMilestones .ClosedMilestones}}
+				<div class="ui icon search input">
+					<i class="search icon"></i>
+					<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_milestones"}}">
+				</div>
+				{{end}}
 				<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_milestone"}}</div>
+				{{if and (not .OpenMilestones) (not .ClosedMilestones)}}
+					<div class="header" style="text-transform: none;font-size:14px;">
+						{{.i18n.Tr "repo.issues.new.no_items"}}
+					</div>
+				{{else}}
 					{{if .OpenMilestones}}
 						<div class="divider"></div>
 						<div class="header">
@@ -68,6 +91,7 @@
 							<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}"> {{.Name}}</a>
 						{{end}}
 					{{end}}
+				{{end}}
 			</div>
 		</div>
 		<div class="ui select-milestone list">
@@ -82,14 +106,19 @@
 		<div class="ui divider"></div>
 
 		<input id="assignee_id" name="assignee_id" type="hidden" value="{{.assignee_id}}">
-		<div class="ui {{if or (not .IsIssueWriter) .Repository.IsArchived}}disabled{{end}} floating jump select-assignees-modify dropdown">
+		<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-assignees-modify dropdown">
 			<span class="text">
 				<strong>{{.i18n.Tr "repo.issues.new.assignees"}}</strong>
-				{{if and .IsIssueWriter (not .Repository.IsArchived)}}
+				{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
 					{{svg "octicon-gear" 16}}
 				{{end}}
 			</span>
 			<div class="filter menu" data-action="" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/assignee">
+				<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_assignees_title"}}</div>
+				<div class="ui icon search input">
+					<i class="search icon"></i>
+					<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_assignees"}}">
+				</div>
 				<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_assignees"}}</div>
 				{{range .Assignees}}
 
@@ -241,7 +270,7 @@
 					{{if .Issue.IsOverdue}}
 						<span style="color: red;">{{.i18n.Tr "repo.issues.due_date_overdue"}}</span>
 					{{end}}
-					{{if and .IsIssueWriter (not .Repository.IsArchived)}}
+					{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
 						<br/>
 						<a style="cursor:pointer;" onclick="window.toggleDeadlineForm();"><i class="edit icon"></i>{{$.i18n.Tr "repo.issues.due_date_form_edit"}}</a> -
 						<a style="cursor:pointer;" onclick="window.updateDeadline('');"><i class="remove icon"></i>{{$.i18n.Tr "repo.issues.due_date_form_remove"}}</a>
@@ -251,7 +280,7 @@
 				<p><i>{{.i18n.Tr "repo.issues.due_date_not_set"}}</i></p>
 			{{end}}
 
-			{{if and .IsIssueWriter (not .Repository.IsArchived)}}
+			{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
 				<div {{if ne .Issue.DeadlineUnix 0}} style="display: none;"{{end}} id="deadlineForm">
 					<form class="ui fluid action input" action="{{AppSubUrl}}/api/v1/repos/{{.Repository.Owner.Name}}/{{.Repository.Name}}/issues/{{.Issue.Index}}" method="post" id="update-issue-deadline-form" onsubmit="window.setDeadline();return false;">
 						{{$.CsrfTokenHtml}}

templates/repo/issue/view_title.tmpl

@@ -6,7 +6,7 @@
 				<input value="{{.Issue.Title}}" maxlength="255">
 			</div>
 		</h1>
-		{{if and (or .IsIssueWriter .IsIssuePoster) (not .Repository.IsArchived)}}
+		{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
 			<div class="four wide column">
 				<div class="edit-zone text right">
 					<div id="edit-title" class="ui basic green not-in-edit button">{{.i18n.Tr "repo.issues.edit"}}</div>