Display archived labels specially when listing labels (#26820)

Follow up https://github.com/go-gitea/gitea/pull/26741

Changes:
Added archived label for org labels and added into issue filter list.


Part of https://github.com/go-gitea/gitea/issues/25237

---------

Signed-off-by: puni9869 <punitinani1@hotmail.com>
Co-authored-by: silverwind <me@silverwind.io>

options/locale/locale_en-US.ini

@@ -123,6 +123,8 @@ unpin = Unpin
 
 artifacts = Artifacts
 
+archived = Archived
+
 concept_system_global = Global
 concept_user_individual = Individual
 concept_code_repository = Repository
@@ -317,7 +319,6 @@ filter_by_team_repositories = Filter by team repositories
 feed_of = Feed of "%s"
 
 show_archived = Archived
-archived = Archived
 show_both_archived_unarchived = Showing both archived and unarchived
 show_only_archived = Showing only archived
 show_only_unarchived = Showing only unarchived

templates/repo/issue/filters.tmpl

@@ -29,7 +29,10 @@
 							<div class="divider"></div>
 						{{end}}
 						{{$previousExclusiveScope = $exclusiveScope}}
-						<a class="item label-filter-item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.QueryString}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}" data-label-id="{{.ID}}">{{if .IsExcluded}}{{svg "octicon-circle-slash"}}{{else if .IsSelected}}{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}{{end}} {{RenderLabel $.Context .}}</a>
+						<a class="item label-filter-item gt-df gt-ac" {{if .IsArchived}}data-is-archived{{end}} href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.QueryString}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}" data-label-id="{{.ID}}">{{if .IsExcluded}}{{svg "octicon-circle-slash"}}{{else if .IsSelected}}{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}{{end}}
+							{{RenderLabel $.Context .}}
+							<p class="gt-ml-auto">{{template "repo/issue/labels/label_archived" .}}</p>
+						</a>
 					{{end}}
 				</div>
 			</div>

templates/repo/issue/labels/label_archived.tmpl

@@ -0,0 +1,5 @@
+{{if .IsArchived}}
+	<span class="ui label basic small" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.label_archive_tooltip"}}">
+		{{ctx.Locale.Tr "archived"}}
+	</span>
+{{end}}

templates/repo/issue/labels/label_list.tmpl

@@ -33,11 +33,6 @@
 		<li class="item">
 			<div class="label-title">
 				{{RenderLabel $.Context .}}
-				{{if not .ArchivedUnix.IsZero}}
-					<span class="gt-ml-3 gt-cursor-default gt-italic" data-tooltip-content="{{$.locale.Tr "repo.issues.label_archive_tooltip"}}">
-						{{$.locale.Tr "home.archived"}}
-					</span>
-				{{end}}
 				{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}
 			</div>
 			<div class="label-issues">
@@ -47,7 +42,9 @@
 					<a class="open-issues" href="{{$.RepoLink}}/issues?labels={{.ID}}">{{svg "octicon-issue-opened"}} {{$.locale.Tr "repo.issues.label_open_issues" .NumOpenIssues}}</a>
 				{{end}}
 			</div>
-			<div class="label-operation">
+			<div class="label-operation gt-df">
+				{{template "repo/issue/labels/label_archived" .}}
+				<div class="gt-df gt-ml-auto">
 					{{if and (not $.PageIsOrgSettingsLabels) (not $.Repository.IsArchived) (or $.CanWriteIssues $.CanWritePulls)}}
 						<a class="edit-label-button" href="#" data-id="{{.ID}}" data-title="{{.Name}}" {{if .Exclusive}}data-exclusive{{end}} {{if gt .ArchivedUnix 0}}data-is-archived{{end}} data-num-issues="{{.NumIssues}}" data-description="{{.Description}}" data-color={{.Color}}>{{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}}</a>
 						<a class="delete-button" href="#" data-url="{{$.Link}}/delete" data-id="{{.ID}}">{{svg "octicon-trash"}} {{$.locale.Tr "repo.issues.label_delete"}}</a>
@@ -56,6 +53,7 @@
 						<a class="delete-button" href="#" data-url="{{$.Link}}/delete" data-id="{{.ID}}">{{svg "octicon-trash"}} {{$.locale.Tr "repo.issues.label_delete"}}</a>
 					{{end}}
 				</div>
+			</div>
 		</li>
 		{{end}}
 
@@ -78,9 +76,11 @@
 					{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}
 				</div>
 				<div class="label-issues">
-					<a class="open-issues" href="{{$.RepoLink}}/issues?labels={{.ID}}">{{svg "octicon-issue-opened"}} {{$.locale.Tr "repo.issues.label_open_issues" .NumOpenRepoIssues}}</a>
+					<a class="open-issues" {{if .IsArchived}}data-is-archived{{end}} href="{{$.RepoLink}}/issues?labels={{.ID}}">{{svg "octicon-issue-opened"}} {{$.locale.Tr "repo.issues.label_open_issues" .NumOpenRepoIssues}}</a>
+				</div>
+				<div class="label-operation">
+					{{template "repo/issue/labels/label_archived" .}}
 				</div>
-				<div class="label-operation"></div>
 			</li>
 			{{end}}
 		{{end}}

web_src/css/base.css

@@ -1969,7 +1969,8 @@ a.ui.ui.ui.basic.primary.label:hover {
 }
 
 .ui.basic.labels .label,
-.ui.basic.label {
+.ui.basic.label,
+.ui.secondary.labels .ui.basic.label {
   background: var(--color-button);
   border-color: var(--color-light-border);
   color: var(--color-text-light);

web_src/css/repo/issue-label.css

@@ -30,7 +30,6 @@
 
 .issue-label-list .item .label-operation {
   width: 33%;
-  text-align: right;
 }
 
 .issue-label-list .item a {
@@ -42,3 +41,7 @@
 .issue-label-list .item.org-label {
   opacity: 0.7;
 }
+
+.label-operation .label {
+  height: fit-content;
+}