Issues: Moved labels and milestones into the issue sidebar layout

components/project/list/list.css → components/common/box-list/box-list.css

@@ -1,30 +1,31 @@
-/* GitHub's project list: a toolbar, then a box whose header holds the state tabs and Sort, with a row per project. */
-.theme-project-list-toolbar {
+/* GitHub's Box list, as on its projects, milestones and labels pages: a toolbar, then a box whose header holds the
+   state tabs (or a count) and Sort, with a row per item. */
+.theme-box-list-toolbar {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 16px;
 }
 
-.theme-project-list > .theme-list-heading {
+.theme-box-list-page > .theme-list-heading {
   margin-bottom: 16px;
 }
 
-.theme-project-list-search {
+.theme-box-list-search {
   flex: 1;
   min-width: 0;
 }
 
-.theme-project-list-search .theme-search-field {
+.theme-box-list-search .theme-search-field {
   width: 100%;
 }
 
-.theme-project-list-box {
+.theme-box-list {
   border: 1px solid var(--color-light-border);
   border-radius: var(--border-radius);
 }
 
-.theme-project-list-header {
+.theme-box-list-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -36,14 +37,14 @@
   background: var(--color-box-header);
 }
 
-.theme-project-list-states {
+.theme-box-list-states {
   display: flex;
   align-items: center;
   gap: 8px;
   min-width: 0;
 }
 
-.theme-project-list-states > a {
+.theme-box-list-states > a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -56,46 +57,55 @@
   white-space: nowrap;
 }
 
-.theme-project-list-states > a:hover {
+.theme-box-list-states > a:hover {
   color: var(--color-text);
   background: var(--github-control-transparent-bgColor-hover);
   text-decoration: none;
 }
 
-.theme-project-list-states > a[aria-current] {
+.theme-box-list-states > a[aria-current] {
   color: var(--color-text);
   font-weight: 600;
 }
 
-.theme-project-list-states .theme-counter {
+/* A header that counts instead of switching state, as on GitHub's labels page. */
+.theme-box-list-title {
+  margin: 0;
+  padding: 0 8px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 30px;
+}
+
+.theme-box-list-states .theme-counter {
   font-weight: 600;
 }
 
-.theme-project-list-header > .theme-dropdown > summary.theme-control {
+.theme-box-list-header > .theme-dropdown > summary.theme-control {
   font-weight: 400;
 }
 
-.theme-project-list-header .theme-dropdown-panel {
+.theme-box-list-header .theme-dropdown-panel {
   width: 240px;
 }
 
 /* GitHub's Sort menu marks the current order with a check and keeps the labels aligned. */
-.theme-project-list-check {
+.theme-box-list-check {
   flex: none;
   visibility: hidden;
 }
 
-.theme-dropdown-action[aria-current] > .theme-project-list-check {
+.theme-dropdown-action[aria-current] > .theme-box-list-check {
   visibility: visible;
 }
 
-.theme-project-list-rows {
+.theme-box-list-rows {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
-.theme-project-list-row {
+.theme-box-list-row {
   display: flex;
   align-items: center;
   gap: 16px;
@@ -105,64 +115,64 @@
   border-top: 1px solid var(--color-light-border);
 }
 
-.theme-project-list-row:first-child {
+.theme-box-list-row:first-child {
   border-top: 0;
 }
 
-.theme-project-list-main {
+.theme-box-list-main {
   flex: 1;
   min-width: 0;
 }
 
-.theme-project-list-main h3 {
+.theme-box-list-main h3 {
   margin: 0;
   font-size: 16px;
   font-weight: 500;
   line-height: 24px;
   overflow-wrap: anywhere;
 }
 
-.theme-project-list-main h3 > a {
+.theme-box-list-main h3 > a {
   color: var(--color-text);
 }
 
-.theme-project-list-main h3 > a:hover {
+.theme-box-list-main h3 > a:hover {
   color: var(--color-primary);
 }
 
-.theme-project-list-meta,
-.theme-project-list-description {
+.theme-box-list-meta,
+.theme-box-list-description {
   margin: 0;
   color: var(--color-text-light-1);
   font-size: 12px;
   line-height: 18px;
 }
 
-.theme-project-list-description.markup {
+.theme-box-list-description.markup {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.theme-project-list-description.markup > * {
+.theme-box-list-description.markup > * {
   display: inline;
   margin: 0;
   font-size: inherit;
 }
 
-.theme-project-list-row > .theme-dropdown > summary.theme-control {
+.theme-box-list-row > .theme-dropdown > summary.theme-control {
   width: 32px;
   padding: 0;
   justify-content: center;
   color: var(--color-text-light-1);
 }
 
-.theme-project-list-row > .theme-dropdown .theme-dropdown-panel {
+.theme-box-list-row > .theme-dropdown .theme-dropdown-panel {
   width: 192px;
 }
 
 @media (max-width: 543.98px) {
-  .theme-project-list-row {
+  .theme-box-list-row {
     margin: 0 8px;
   }
 }

components/common/box-list/states.tmpl

@@ -0,0 +1,6 @@
+{{- /* The Open and Closed tabs of a box list header, each with its count. Label names the navigation; OpenLink,
+ClosedLink, OpenCount and ClosedCount fill the tabs, and IsClosed marks the closed one as current. */ -}}
+<nav class="theme-box-list-states" aria-label="{{.Label}}">
+	<a href="{{.OpenLink}}"{{if not .IsClosed}} aria-current="page"{{end}}>{{ctx.Locale.Tr "repo.issues.open_title"}} <span class="theme-counter">{{ctx.Locale.PrettyNumber .OpenCount}}</span></a>
+	<a href="{{.ClosedLink}}"{{if .IsClosed}} aria-current="page"{{end}}>{{ctx.Locale.Tr "repo.issues.closed_title"}} <span class="theme-counter">{{ctx.Locale.PrettyNumber .ClosedCount}}</span></a>
+</nav>

components/common/dropdown/dropdown.js

@@ -11,14 +11,19 @@
     dropdown.open = false;
     if (restoreFocus) dropdown.querySelector("summary")?.focus();
   };
-  document.addEventListener("click", event => {
-    const close = event.target.closest("[data-theme-dropdown-close]");
-    if (close) closeDropdown(close.closest(".theme-dropdown"), true);
-    const action = event.target.closest('[data-theme-dropdown="actions"] .theme-dropdown-action');
-    if (action && !action.disabled) closeDropdown(action.closest(".theme-dropdown"), false);
-    for (const dropdown of document.querySelectorAll(".theme-dropdown[open]"))
-      if (!dropdown.contains(event.target)) closeDropdown(dropdown, false);
-  });
+  // Capture: Forgejo's own handlers on menu actions (Edit label, for one) stop the click from bubbling.
+  document.addEventListener(
+    "click",
+    event => {
+      const close = event.target.closest("[data-theme-dropdown-close]");
+      if (close) closeDropdown(close.closest(".theme-dropdown"), true);
+      const action = event.target.closest('[data-theme-dropdown="actions"] .theme-dropdown-action');
+      if (action && !action.disabled) closeDropdown(action.closest(".theme-dropdown"), false);
+      for (const dropdown of document.querySelectorAll(".theme-dropdown[open]"))
+        if (!dropdown.contains(event.target)) closeDropdown(dropdown, false);
+    },
+    true
+  );
   document.addEventListener(
     "change",
     event => {

components/common/progress/progress.css

@@ -0,0 +1,24 @@
+/* GitHub's Progress bar: 8px on the progress track, filled with the success color. Add theme-progress to a native
+   <progress>, so its value stays readable without the theme. */
+progress.theme-progress {
+  display: block;
+  width: 100%;
+  height: 8px;
+  border: 0;
+  border-radius: var(--border-radius);
+  background: var(--github-progressBar-track-bgColor);
+  overflow: hidden;
+  appearance: none;
+}
+
+progress.theme-progress::-webkit-progress-bar {
+  background: var(--github-progressBar-track-bgColor);
+}
+
+progress.theme-progress::-webkit-progress-value {
+  background: var(--github-bgColor-success-emphasis);
+}
+
+progress.theme-progress::-moz-progress-bar {
+  background: var(--github-bgColor-success-emphasis);
+}

components/project/list/list.tmpl

@@ -5,36 +5,33 @@ the search; without it, New project sits beside the search as on GitHub's profil
 {{$canWrite := and $data.CanWriteProjects (not $data.Repository.IsArchived)}}
 {{$newProject := ""}}
 {{if $canWrite}}{{$newProject = print $data.Link "/new"}}{{end}}
-<section class="theme-project-list">
+<section class="theme-box-list-page">
 	{{if .Heading}}
 		<div class="theme-list-heading">
 			<div class="theme-list-title"><button type="button" class="theme-icon-button" data-theme-sidebar-toggle data-theme-sidebar-expand aria-expanded="false" aria-label="Expand sidebar">{{svg "octicon-sidebar-expand" 16}}</button><h1>{{ctx.Locale.Tr "repo.projects"}}</h1></div>
 			{{if $newProject}}<a class="primary button theme-control" href="{{$newProject}}">{{ctx.Locale.Tr "repo.projects.new"}}</a>{{end}}
 		</div>
 	{{end}}
-	<div class="theme-project-list-toolbar">
-		<form class="ui form ignore-dirty theme-project-list-search" role="search">
+	<div class="theme-box-list-toolbar">
+		<form class="ui form ignore-dirty theme-box-list-search" role="search">
 			<input type="hidden" name="state" value="{{$data.State}}">
 			<input type="hidden" name="sort" value="{{$data.SortType}}">
 			{{template "components/common/search/search" dict "Kind" "icon" "Value" $data.Keyword "Placeholder" (ctx.Locale.Tr "search.project_kind") "Label" (ctx.Locale.Tr "search.project_kind")}}
 		</form>
 		{{if and $newProject (not .Heading)}}<a class="primary button theme-control" href="{{$newProject}}">{{ctx.Locale.Tr "repo.projects.new"}}</a>{{end}}
 	</div>
-	<div class="theme-project-list-box">
-		<div class="theme-project-list-header">
-			<nav class="theme-project-list-states" aria-label="{{ctx.Locale.Tr "repo.projects"}}">
-				<a href="?state=open&q={{$data.Keyword}}&sort={{$data.SortType}}"{{if not $data.IsShowClosed}} aria-current="page"{{end}}>{{ctx.Locale.Tr "repo.issues.open_title"}} <span class="theme-counter">{{ctx.Locale.PrettyNumber $data.OpenCount}}</span></a>
-				<a href="?state=closed&q={{$data.Keyword}}&sort={{$data.SortType}}"{{if $data.IsShowClosed}} aria-current="page"{{end}}>{{ctx.Locale.Tr "repo.issues.closed_title"}} <span class="theme-counter">{{ctx.Locale.PrettyNumber $data.ClosedCount}}</span></a>
-			</nav>
+	<div class="theme-box-list">
+		<div class="theme-box-list-header">
+			{{template "components/common/box-list/states" dict "Label" (ctx.Locale.Tr "repo.projects") "OpenLink" (print "?state=open&q=" (QueryEscape $data.Keyword) "&sort=" $data.SortType) "ClosedLink" (print "?state=closed&q=" (QueryEscape $data.Keyword) "&sort=" $data.SortType) "OpenCount" $data.OpenCount "ClosedCount" $data.ClosedCount "IsClosed" $data.IsShowClosed}}
 			{{template "components/common/dropdown/dropdown" dict "Kind" "actions" "Label" (ctx.Locale.Tr "repo.issues.filter_sort") "Quiet" true "Items" "components/project/list/sort" "Data" $data}}
 		</div>
-		<ul class="theme-project-list-rows">
+		<ul class="theme-box-list-rows">
 			{{range $data.Projects}}
-				<li class="theme-project-list-row">
-					<div class="theme-project-list-main">
+				<li class="theme-box-list-row">
+					<div class="theme-box-list-main">
 						<h3><a href="{{.Link ctx}}">{{.Title}}</a></h3>
-						<p class="theme-project-list-meta">#{{.ID}} {{ctx.Locale.Tr "issues.updated" (DateUtils.TimeSince .UpdatedUnix)}}</p>
-						{{if .Description}}<div class="theme-project-list-description markup">{{.RenderedContent}}</div>{{end}}
+						<p class="theme-box-list-meta">#{{.ID}} {{ctx.Locale.Tr "issues.updated" (DateUtils.TimeSince .UpdatedUnix)}}</p>
+						{{if .Description}}<div class="theme-box-list-description markup">{{.RenderedContent}}</div>{{end}}
 					</div>
 					{{if $canWrite}}
 						{{template "components/common/dropdown/dropdown" dict "Kind" "actions" "Icon" "octicon-kebab-horizontal" "IconOnly" true "Quiet" true "Label" (ctx.Locale.Tr "profile.actions.tooltip") "Items" "components/project/list/actions" "Data" (dict "Context" $data.Context "Link" (.Link ctx) "IsClosed" .IsClosed)}}

components/project/list/sort.tmpl

@@ -1,5 +1,5 @@
 {{$query := print "?state=" .State "&q=" .Keyword}}
-<a class="theme-dropdown-action" href="{{$query}}&sort=newest"{{if or (eq .SortType "newest") (not .SortType)}} aria-current="true"{{end}}>{{svg "octicon-check" 16 "theme-project-list-check"}}{{ctx.Locale.Tr "issues.search.sort.latest"}}</a>
-<a class="theme-dropdown-action" href="{{$query}}&sort=oldest"{{if eq .SortType "oldest"}} aria-current="true"{{end}}>{{svg "octicon-check" 16 "theme-project-list-check"}}{{ctx.Locale.Tr "issues.search.sort.oldest"}}</a>
-<a class="theme-dropdown-action" href="{{$query}}&sort=recentupdate"{{if eq .SortType "recentupdate"}} aria-current="true"{{end}}>{{svg "octicon-check" 16 "theme-project-list-check"}}{{ctx.Locale.Tr "issues.search.sort.recentupdate"}}</a>
-<a class="theme-dropdown-action" href="{{$query}}&sort=leastupdate"{{if eq .SortType "leastupdate"}} aria-current="true"{{end}}>{{svg "octicon-check" 16 "theme-project-list-check"}}{{ctx.Locale.Tr "issues.search.sort.leastupdate"}}</a>
+<a class="theme-dropdown-action" href="{{$query}}&sort=newest"{{if or (eq .SortType "newest") (not .SortType)}} aria-current="true"{{end}}>{{svg "octicon-check" 16 "theme-box-list-check"}}{{ctx.Locale.Tr "issues.search.sort.latest"}}</a>
+<a class="theme-dropdown-action" href="{{$query}}&sort=oldest"{{if eq .SortType "oldest"}} aria-current="true"{{end}}>{{svg "octicon-check" 16 "theme-box-list-check"}}{{ctx.Locale.Tr "issues.search.sort.oldest"}}</a>
+<a class="theme-dropdown-action" href="{{$query}}&sort=recentupdate"{{if eq .SortType "recentupdate"}} aria-current="true"{{end}}>{{svg "octicon-check" 16 "theme-box-list-check"}}{{ctx.Locale.Tr "issues.search.sort.recentupdate"}}</a>
+<a class="theme-dropdown-action" href="{{$query}}&sort=leastupdate"{{if eq .SortType "leastupdate"}} aria-current="true"{{end}}>{{svg "octicon-check" 16 "theme-box-list-check"}}{{ctx.Locale.Tr "issues.search.sort.leastupdate"}}</a>

components/repository/label/actions.tmpl

@@ -0,0 +1,3 @@
+{{$label := .Label}}
+<a class="theme-dropdown-action edit-label-button" href="#" data-id="{{$label.ID}}" data-title="{{$label.Name}}" {{if $label.Exclusive}}data-exclusive{{end}} {{if gt $label.ArchivedUnix 0}}data-is-archived{{end}} data-num-issues="{{$label.NumIssues}}" data-description="{{$label.Description}}" data-color={{$label.Color}}>{{svg "octicon-pencil" 16}}{{ctx.Locale.Tr "repo.issues.label_edit"}}</a>
+<a class="theme-dropdown-action theme-dropdown-danger delete-button" href="#" data-url="{{.DeleteLink}}" data-id="{{$label.ID}}" data-modal-id="delete-label">{{svg "octicon-trash" 16}}{{ctx.Locale.Tr "repo.issues.label_delete"}}</a>