Adjust the layout of the toolbar on the Issues/Projects page (#33667)

On the list page, labels and milestones do not serve as a switch-tab.
Instead, they function as page navigation. The switch-tab is only
appropriate for use on the labels and milestones pages.

And fix projects page layout.

---------

Co-authored-by: wxiaoguang <[email protected]>

Author: kerwin612

templates/projects/view.tmpl

@@ -1,25 +1,22 @@
 {{$canWriteProject := and .CanWriteProjects (or (not .Repository) (not .Repository.IsArchived))}}
 
 <div class="ui container tw-max-w-full">
-	<div class="tw-flex tw-justify-between tw-items-center tw-mb-4 tw-gap-3">
-		<h2 class="tw-mb-0 tw-flex-1 tw-break-anywhere">{{.Project.Title}}</h2>
-			<div class="project-toolbar-right">
-				<div class="ui secondary filter menu labels">
-					{{$queryLink := QueryBuild "?" "labels" .SelectLabels "assignee" $.AssigneeID "archived_labels" (Iif $.ShowArchivedLabels "true")}}
-
-					{{template "repo/issue/filter_item_label" dict "Labels" .Labels "QueryLink" $queryLink "SupportArchivedLabel" true}}
-
-					{{template "repo/issue/filter_item_user_assign" dict
-						"QueryParamKey" "assignee"
-						"QueryLink" $queryLink
-						"UserSearchList" $.Assignees
-						"SelectedUserId" $.AssigneeID
-						"TextFilterTitle" (ctx.Locale.Tr "repo.issues.filter_assignee")
-						"TextFilterMatchNone" (ctx.Locale.Tr "repo.issues.filter_assginee_no_assignee")
-						"TextFilterMatchAny" (ctx.Locale.Tr "repo.issues.filter_assignee_any_assignee")
-					}}
-				</div>
-			</div>
+	<div class="flex-text-block tw-flex-wrap tw-mb-4">
+		<h2 class="tw-mb-0">{{.Project.Title}}</h2>
+		<div class="tw-flex-1"></div>
+		<div class="ui secondary menu tw-m-0">
+			{{$queryLink := QueryBuild "?" "labels" .SelectLabels "assignee" $.AssigneeID "archived_labels" (Iif $.ShowArchivedLabels "true")}}
+			{{template "repo/issue/filter_item_label" dict "Labels" .Labels "QueryLink" $queryLink "SupportArchivedLabel" true}}
+			{{template "repo/issue/filter_item_user_assign" dict
+				"QueryParamKey" "assignee"
+				"QueryLink" $queryLink
+				"UserSearchList" $.Assignees
+				"SelectedUserId" $.AssigneeID
+				"TextFilterTitle" (ctx.Locale.Tr "repo.issues.filter_assignee")
+				"TextFilterMatchNone" (ctx.Locale.Tr "repo.issues.filter_assginee_no_assignee")
+				"TextFilterMatchAny" (ctx.Locale.Tr "repo.issues.filter_assignee_any_assignee")
+			}}
+		</div>
 		{{if $canWriteProject}}
 			<div class="ui compact mini menu">
 				<a class="item" href="{{.Link}}/edit?redirect=project">

templates/repo/issue/list.tmpl

@@ -14,9 +14,10 @@
 		</div>
 	{{end}}
 
-		<div class="list-header">
-			{{template "repo/issue/navbar" .}}
+		<div class="list-header flex-text-block">
 			{{template "repo/issue/search" .}}
+			<a class="ui small button" href="{{.RepoLink}}/labels">{{ctx.Locale.Tr "repo.labels"}}</a>
+			<a class="ui small button" href="{{.RepoLink}}/milestones">{{ctx.Locale.Tr "repo.milestones"}}</a>
 			{{if not .Repository.IsArchived}}
 				{{if .PageIsIssueList}}
 					<a class="ui small primary button issue-list-new" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}">{{ctx.Locale.Tr "repo.issues.new"}}</a>

templates/repo/projects/view.tmpl

@@ -2,8 +2,9 @@
 <div role="main" aria-label="{{.Title}}" class="page-content repository projects view-project">
 	{{template "repo/header" .}}
 	<div class="ui container padded">
-		<div class="tw-flex tw-justify-between tw-items-center tw-mb-4">
-			{{template "repo/issue/navbar" .}}
+		<div class="flex-text-block tw-justify-end tw-mb-4">
+			<a class="ui small button" href="{{.RepoLink}}/labels">{{ctx.Locale.Tr "repo.labels"}}</a>
+			<a class="ui small button" href="{{.RepoLink}}/milestones">{{ctx.Locale.Tr "repo.milestones"}}</a>
 			<a class="ui small primary button" href="{{.RepoLink}}/issues/new/choose?project={{.Project.ID}}">{{ctx.Locale.Tr "repo.issues.new"}}</a>
 		</div>
 	</div>

web_src/css/base.css

@@ -1155,6 +1155,11 @@ table th[data-sortt-desc] .svg {
   min-width: 0;
 }
 
+.flex-text-block > .ui.button,
+.flex-text-inline > .ui.button {
+  margin: 0; /* fomantic buttons have default margin, when we use them in a flex container with gap, we do not need these margins */
+}
+
 /* to override Fomantic's default display: block for ".menu .item", and use a slightly larger gap for menu item content
 the "!important" is necessary to override Fomantic UI menu item styles, meanwhile we should keep the "hidden" items still hidden */
 .ui.dropdown .menu.flex-items-menu > .item:not(.hidden, .filtered, .tw-hidden) {

web_src/css/features/projects.css

@@ -8,18 +8,6 @@
   margin: 0 0.5em;
 }
 
-.project-toolbar-right .filter.menu {
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-
-@media (max-width: 767.98px) {
-  .project-toolbar-right .dropdown .menu {
-    left: auto !important;
-    right: auto !important;
-  }
-}
-
 .project-column {
   background-color: var(--color-project-column-bg) !important;
   border: 1px solid var(--color-secondary) !important;