use data-toggled attribute and improve transition

Author: silverwind

templates/repo/pulls/status.tmpl

@@ -7,7 +7,7 @@ Template Attributes:
 */}}
 
 {{if .CommitStatus}}
-<div class="{{if .IsPopup}}tippy-commit-status{{else}}pr-commit-status{{end}}">
+<div class="{{if .IsPopup}}tippy-commit-status{{else}}pr-commit-status{{end}}"{{if not .IsPopup}} data-toggled="true"{{end}}>
 	<div class="ui attached header top">
 		{{if eq .CommitStatus.State "pending"}}
 			{{ctx.Locale.Tr "repo.pulls.status_checking"}}

web_src/css/repo.css

@@ -3078,19 +3078,20 @@ tbody.commit-list {
   padding: 0 !important;
   max-height: 231px;
   overflow-x: hidden;
-  transition: max-height 0.2s;
-  border-bottom: 0 !important;
+  transition: max-height .2s;
+  border-bottom: none !important;
 }
 
-.pr-commit-status.hide {
-  border-bottom: 0 !important;
+.pr-commit-status[data-toggled="false"] {
+  border-bottom: none !important;
 }
 
-.pr-commit-status.hide .ui.attached.header {
-  border-bottom: none !important;
+.pr-commit-status[data-toggled="false"] .ui.attached.header {
+  transition-delay: .2s;
+  border-bottom-width: 0 !important;
 }
 
-.pr-commit-status.hide .commit-status-list {
+.pr-commit-status[data-toggled="false"] .commit-status-list {
   max-height: 0;
 }
 

web_src/js/features/repo-issue-pr-status.js

@@ -1,13 +1,11 @@
 export function initRepoPullRequestCommitStatus() {
   const btn = document.querySelector('.hide-all-checks');
-  const prCommitStatus = document.querySelector('.pr-commit-status');
   if (!btn) return;
+
   btn.addEventListener('click', () => {
-    if (prCommitStatus.classList.contains('hide')) {
-      btn.textContent = btn.getAttribute('data-hide-all');
-    } else {
-      btn.textContent = btn.getAttribute('data-show-all');
-    }
-    prCommitStatus.classList.toggle('hide');
+    const prCommitStatus = document.querySelector('.pr-commit-status');
+    const toggled = prCommitStatus.getAttribute('data-toggled') === 'true';
+    btn.textContent = btn.getAttribute(toggled ? 'data-hide-all' : 'data-show-all');
+    prCommitStatus.setAttribute('data-toggled', String(!toggled));
   });
 }