BLENDER: Projects: button to show/hide issue details and closed issue

Both are off by default. This is implemented fully on the frontend, so
all issues and their details are still always loaded.

Author: brechtvl

templates/projects/view.tmpl

@@ -17,6 +17,16 @@
 				"TextFilterMatchAny" (ctx.Locale.Tr "repo.issues.filter_assignee_any_assignee")
 			}}
 		</div>
+			<div class="ui compact mini menu" style="margin-left: auto; margin-right: 1em;">
+				<button class="item btn" onclick="clickDetailsView()">
+					<span class="issue-card-details">Show Details</span>
+					<span class="issue-card-details tw-hidden">Hide Details</span>
+				</button>
+				<button class="item btn" onclick="clickClosedView()">
+					<span class="issue-card-closed">Show Closed</span>
+					<span class="issue-card-closed tw-hidden">Hide Closed</span>
+				</button>
+			</div>
 		{{if $canWriteProject}}
 			<div class="ui compact mini menu">
 				<a class="item screen-full">
@@ -112,7 +122,7 @@
 				<div class="divider"{{if .Color}} style="color: {{ContrastColor .Color}} !important"{{end}}></div>
 				<div class="ui cards" data-url="{{$.Link}}/{{.ID}}" data-project="{{$.Project.ID}}" data-board="{{.ID}}" id="board_{{.ID}}">
 					{{range (index $.IssuesMap .ID)}}
-						<div class="issue-card tw-break-anywhere {{if $canWriteProject}}tw-cursor-grab{{end}}" data-issue="{{.ID}}">
+						<div class="issue-card tw-break-anywhere {{if $canWriteProject}}tw-cursor-grab{{end}} {{if .IsClosed}}issue-card-closed tw-hidden{{end}}" data-issue="{{.ID}}">
 							{{template "repo/issue/card" (dict "Issue" . "Page" $)}}
 						</div>
 					{{end}}
@@ -122,6 +132,37 @@
 	</div>
 </div>
 
+<script>
+	keyDetails = 'project-show-issue-details:{{.Repository.FullName | JSEscape}}:{{.Project.ID}}';
+	keyClosed = 'project-show-issue-closed:{{.Repository.FullName | JSEscape}}:{{.Project.ID}}';
+
+	function toggleDetailsView() {
+		for (const elem of document.querySelectorAll('.issue-card-details')) {
+			elem.classList.toggle('tw-hidden');
+		}
+	}
+	function clickDetailsView() {
+		localStorage.setItem(keyDetails, (localStorage.getItem(keyDetails) === 'true') ? 'false' : 'true');
+		toggleDetailsView();
+	}
+	if (localStorage.getItem(keyDetails) === 'true') {
+		toggleDetailsView();
+	}
+
+	function toggleClosedView() {
+		for (const elem of document.querySelectorAll('.issue-card-closed')) {
+			elem.classList.toggle('tw-hidden');
+		}
+	}
+	function clickClosedView() {
+		localStorage.setItem(keyClosed, (localStorage.getItem(keyClosed) === 'true') ? 'false' : 'true');
+		toggleClosedView();
+	}
+	if (localStorage.getItem(keyClosed) === 'true') {
+		toggleClosedView();
+	}
+</script>
+
 {{if $canWriteProject}}
 <div class="ui small modal" id="project-column-modal-edit">
 	<div class="header">edit</div>

templates/repo/issue/card.tmpl

@@ -10,6 +10,14 @@
 		{{end}}
 	{{end}}
 	<div class="content tw-w-full">
+		<!-- BLENDER: Assignees here for more compact display -->
+		{{if .Assignees}}
+		<div class="issue-card-assignees">
+			{{range .Assignees}}
+				<a target="_blank" href="{{.HomeLink}}" data-tooltip-content="{{ctx.Locale.Tr "repo.projects.column.assigned_to"}} {{.Name}}">{{ctx.AvatarUtils.Avatar . 28 "mini gt-mr-3"}}</a>
+			{{end}}
+		</div>
+		{{end}}
 		<div class="tw-flex tw-items-start tw-gap-[5px]">
 			<div class="issue-card-icon">
 				{{template "shared/issueicon" .}}
@@ -22,7 +30,7 @@
 			{{end}}
 		</div>
 		<div class="meta">
-			<span class="text light grey muted-links">
+			<span class="text light grey muted-links issue-card-details tw-hidden">
 				{{if not $.Page.Repository}}{{.Repo.FullName}}{{end}}#{{.Index}}
 				{{$timeStr := DateUtils.TimeSince .GetLastEventTimestamp}}
 				{{if .OriginalAuthor}}
@@ -35,7 +43,7 @@
 			</span>
 		</div>
 		{{if .MilestoneID}}
-		<div class="meta tw-my-1">
+		<div class="meta tw-my-1 issue-card-details tw-hidden">
 			<a class="milestone" href="{{.Repo.Link}}/milestone/{{.MilestoneID}}">
 				{{svg "octicon-milestone" 16 "tw-mr-1 tw-align-middle"}}
 				<span class="tw-align-middle">{{.Milestone.Name}}</span>
@@ -44,7 +52,7 @@
 		{{end}}
 		{{if $.Page.LinkedPRs}}
 		{{range index $.Page.LinkedPRs .ID}}
-		<div class="meta tw-my-1">
+		<div class="meta tw-my-1 issue-card-details tw-hidden">
 			<a href="{{.Repo.Link}}/pulls/{{.Index}}">
 				<span class="tw-m-0 text {{if .PullRequest.HasMerged}}purple{{else if .IsClosed}}red{{else}}green{{end}}">{{svg "octicon-git-merge" 16 "tw-mr-1 tw-align-middle"}}</span>
 				<span class="tw-align-middle">{{.Title}} <span class="text light grey">#{{.Index}}</span></span>
@@ -54,25 +62,20 @@
 		{{end}}
 		{{$tasks := .GetTasks}}
 		{{if gt $tasks 0}}
-			<div class="meta tw-my-1">
+			<div class="meta tw-my-1 issue-card-details tw-hidden">
 				{{svg "octicon-checklist" 16 "tw-mr-1 tw-align-middle"}}
 				<span class="tw-align-middle">{{.GetTasksDone}} / {{$tasks}}</span>
 			</div>
 		{{end}}
 	</div>
 
-	{{if or .Labels .Assignees}}
+	{{if or .Labels}}
 	<div class="issue-card-bottom">
-		<div class="labels-list">
+		<div class="labels-list issue-card-details tw-hidden">
 			{{range .Labels}}
 				<a target="_blank" href="{{$.Issue.Repo.Link}}/issues?labels={{.ID}}">{{ctx.RenderUtils.RenderLabel .}}</a>
 			{{end}}
 		</div>
-		<div class="issue-card-assignees">
-			{{range .Assignees}}
-				<a target="_blank" href="{{.HomeLink}}" data-tooltip-content="{{ctx.Locale.Tr "repo.projects.column.assigned_to"}} {{.Name}}">{{ctx.AvatarUtils.Avatar . 28}}</a>
-			{{end}}
-		</div>
 	</div>
 	{{end}}
 {{end}}

web_src/css/features/projects.css

@@ -19,6 +19,14 @@
 }
 
 .project-column {
+  background-color: var(--color-project-column-bg) !important;
+  border: 1px solid var(--color-secondary) !important;
+  border-radius: var(--border-radius);
+  margin: 0 0.5rem !important;
+  padding: 0.5rem !important;
+  width: 320px;
+  height: initial;
+  min-height: max(calc(100vh - 225px), 300px);
   flex: 0 0 auto;
   display: flex;
   flex-direction: column;

web_src/css/repo/issue-card.css

@@ -37,4 +37,6 @@
   gap: 0.25em;
   justify-content: end;
   flex-wrap: wrap;
+  float: right;
+  margin-left: 0.5em;
 }