Show dropdown with all statuses for commit (#13977)

* Show dropdown with all statuses for commit

* Use popups

* Remove unnecessary change

* Style popup

* Use divided list

* As per @silverwind

* Refactor GetLastCommitStatus

* Missing dropdown on repo home and commit page

* Fix tests

* Make status icon be a part of a link on PR list

* Fix missing translation call

* Indent fix

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

web_src/js/index.js

@@ -759,6 +759,15 @@ async function initRepository() {
     });
   }
 
+  // Commit statuses
+  $('.commit-statuses-trigger').each(function () {
+    $(this)
+      .popup({
+        on: 'click',
+        position: ($('.repository.file.list').length > 0 ? 'right center' : 'left center'),
+      });
+  });
+
   // File list and commits
   if ($('.repository.file.list').length > 0 || ('.repository.commits').length > 0) {
     initFilterBranchTagDropdown('.choose.reference .dropdown');

web_src/less/_base.less

@@ -530,6 +530,10 @@ a.ui.card:hover,
   border-radius: var(--border-radius);
 }
 
+.ui.divided.list > .item {
+  border-color: var(--color-secondary);
+}
+
 .dont-break-out {
   overflow-wrap: break-word;
   word-wrap: break-word;
@@ -1164,7 +1168,7 @@ footer {
   }
 }
 
-.center {
+.center:not(.popup) {
   text-align: center;
 }
 

web_src/less/_repository.less

@@ -1,4 +1,8 @@
 .repository {
+  .commit-statuses .list > .item {
+    line-height: 2;
+  }
+
   .repo-header {
     .ui.compact.menu {
       margin-left: 1rem;