Issue and Pulls lists rework (#13594)

* Issue and Pulls lists rework

Reorganized and restyled the issue and pull request lists.

* color and layout tweaks

* use new issue list on dashboard as well

* move pagination into template

* misc tweaks

* fix label hover

* fix milestone list

* fix discrepancies between issue and milestone list, add new 'merge' helper

* fmt

* simplify merge helper

* remove whitespace

* fix startIndex

* further simplify dict merging

* rename helper to 'mergeinto' for clarity

* allow bottom-row to wrap

Co-authored-by: Lauris BH <lauris@nix.lv>

6 files changed, 167 insertions, 136 deletions

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 4062471794..9af770e404 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -76,6 +76,7 @@
   /* target-based colors */
   --color-body: #ffffff;
   --color-text: #212121;
+  --color-text-light: #444444;
   --color-box-header: #f7f7f7;
   --color-box-body: #ffffff;
   --color-timeline: #ececec;
@@ -141,6 +142,15 @@ strong {
   font-weight: 500;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 600;
+}
+
 body {
   background-color: var(--color-body);
   overflow-y: auto;
@@ -448,7 +458,7 @@ a:hover,
       color: var(--color-red) !important;
 
       a {
-        color: var(--color-red) !important;
+        color: inherit !important;
 
         &:hover {
           color: #e67777 !important;
@@ -457,19 +467,19 @@ a:hover,
     }
 
     &.blue {
-      color: var(--color-primary-dark-1) !important;
+      color: var(--color-primary) !important;
 
       a {
-        color: var(--color-primary) !important;
+        color: inherit !important;
 
         &:hover {
-          color: var(--color-primary-dark-2) !important;
+          color: var(--color-primary-dark-1) !important;
         }
       }
     }
 
     &.black {
-      color: #444444;
+      color: var(--color-body);
 
       &:hover {
         color: #000000;
@@ -477,13 +487,13 @@ a:hover,
     }
 
     &.grey {
-      color: var(--color-grey) !important;
+      color: var(--color-text-light) !important;
 
       a {
-        color: #444444 !important;
+        color: inherit !important;
 
         &:hover {
-          color: #000000 !important;
+          color: var(--color-primary) !important;
         }
       }
     }
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index dc0c718c1a..1dbd741eee 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -2586,111 +2586,10 @@
   display: none;
 }
 
-.ui.checkbox.issue-checkbox {
-  vertical-align: middle;
-}
-
 .ui.menu .item > img:not(.ui) {
   width: auto;
 }
 
-.issue.list {
-  list-style: none;
-
-  > .item {
-    padding-top: 15px;
-    padding-bottom: 10px;
-    border-bottom: 1px dashed #aaaaaa;
-
-    .title {
-      color: #444444;
-      font-size: 15px;
-      font-weight: 500;
-      margin: 0 6px;
-
-      &:hover {
-        color: #000000;
-      }
-    }
-
-    .comment {
-      padding-right: 10px;
-      color: #666666;
-    }
-
-    .desc {
-      padding-top: 5px;
-      color: #999999;
-
-      .waiting,
-      .approvals,
-      .rejects {
-        padding-left: 5px;
-      }
-
-      .checklist {
-        padding-left: 5px;
-
-        .progress-bar {
-          margin-left: 2px;
-          width: 80px;
-          height: 6px;
-          display: inline-block;
-          background-color: #eeeeee;
-          overflow: hidden;
-          border-radius: 3px;
-          vertical-align: 2px !important;
-
-          .progress {
-            background-color: #cccccc;
-            display: block;
-            height: 100%;
-          }
-        }
-      }
-
-      .conflicting {
-        padding-left: 5px;
-      }
-
-      .due-date {
-        padding-left: 5px;
-      }
-
-      a.milestone {
-        margin-left: 5px;
-        color: #999999 !important;
-
-        &:hover {
-          color: #000000 !important;
-        }
-      }
-
-      a.ref {
-        margin-left: 8px;
-        color: #999999 !important;
-
-        &:hover {
-          color: #000000 !important;
-        }
-
-        span {
-          margin-right: -4px;
-        }
-      }
-
-      .assignee {
-        margin-top: -5px;
-        margin-right: 5px;
-      }
-
-      .overdue {
-        color: var(--color-red);
-      }
-    }
-  }
-}
-
 .page.buttons {
   padding-top: 15px;
 }
@@ -2975,15 +2874,31 @@
   flex-wrap: wrap;
 }
 
-.labels.list .item {
+.labels.list .item,
+.timeline-item .label {
   padding: .3em .5em !important;
   margin-left: 0;
   margin-right: 0;
   margin-bottom: 3px;
 }
 
-.labels.list .item + .item {
-  margin-left: 3px;
+.issue-item-top-row .label {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 1.5px;
+  margin-bottom: 1.5px;
+}
+
+.labels.list .item,
+.timeline-item .label,
+.issue-item-top-row .label {
+  margin-right: 3px;
+  display: inline !important;
+}
+
+.timeline-item .label:last-of-type,
+.issue-item-top-row .label:last-of-type {
+  margin-right: 0;
 }
 
 tbody.commit-list {
diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index d50aea0264..60d50883c5 100644
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -6,6 +6,7 @@
 .sb { justify-content: space-between !important; }
 .fc { flex-direction: column !important; }
 .f1 { flex: 1 !important; }
+.fw { flex-wrap: wrap !important; }
 
 .mono {
   font-family: var(--fonts-monospace) !important;
diff --git a/web_src/less/index.less b/web_src/less/index.less
index 1b0701ae81..0d5ef88724 100644
--- a/web_src/less/index.less
+++ b/web_src/less/index.less
@@ -1,6 +1,7 @@
 @import "~font-awesome/css/font-awesome.css";
 
 @import "./variables.less";
+@import "./shared/issuelist.less";
 @import "./features/gitgraph.less";
 @import "./features/animations.less";
 @import "./features/heatmap.less";
diff --git a/web_src/less/shared/issuelist.less b/web_src/less/shared/issuelist.less
new file mode 100644
index 0000000000..dec99e135a
--- /dev/null
+++ b/web_src/less/shared/issuelist.less
@@ -0,0 +1,127 @@
+.issue.list {
+  list-style: none;
+  margin-top: 1rem;
+
+  a:not(.label):hover {
+    color: var(--color-primary) !important;
+  }
+
+  > .item {
+    .issue-checkbox {
+      margin-top: 1px;
+    }
+
+    .issue-item-icon svg {
+      margin-right: .75rem;
+    }
+
+    .issue-item-icons-right > * + * {
+      margin-left: .5rem;
+    }
+
+    .issue-item-main {
+      width: 100%;
+    }
+
+    .issue-item-top-row {
+      max-width: 100%;
+      color: var(--color-text);
+      font-size: 16px;
+      min-width: 0;
+      font-weight: 600;
+    }
+
+    .issue-item-bottom-row {
+      font-size: 13px;
+    }
+
+    .title {
+      color: var(--color-text);
+      word-break: break-word;
+    }
+
+    .issue-item-icon-right {
+      min-width: 2rem;
+    }
+
+    .assignee {
+      position: relative;
+      top: -2px;
+    }
+
+    .assignee img {
+      width: 20px;
+      height: 20px;
+      margin-right: 2px;
+    }
+
+    .desc {
+      color: #999999;
+
+      a {
+        color: inherit;
+      }
+
+      .time-since,
+      a {
+        margin-left: .25rem;
+        margin-right: .25rem;
+      }
+
+      .waiting,
+      .approvals,
+      .rejects {
+        padding-left: 5px;
+      }
+
+      .checklist {
+        padding-left: 5px;
+
+        .progress-bar {
+          margin-left: 2px;
+          width: 80px;
+          height: 6px;
+          display: inline-block;
+          background-color: #eeeeee;
+          overflow: hidden;
+          border-radius: 3px;
+          vertical-align: 2px !important;
+
+          .progress {
+            background-color: #cccccc;
+            display: block;
+            height: 100%;
+          }
+        }
+      }
+
+      .conflicting {
+        padding-left: 5px;
+      }
+
+      .due-date {
+        padding-left: 5px;
+      }
+
+      a.milestone {
+        margin-left: 5px;
+      }
+
+      a.ref {
+        margin-left: 8px;
+
+        span {
+          margin-right: -4px;
+        }
+      }
+
+      .overdue {
+        color: var(--color-red);
+      }
+    }
+  }
+
+  > .item + .item {
+    border-top: 1px solid var(--color-secondary);
+  }
+}
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 57b00efe3e..8c36944ec9 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -73,6 +73,7 @@
   --color-box-header: #454a57;
   --color-box-body: #353945;
   --color-text: #b6bac5;
+  --color-text-light: #969aa5;
   --color-timeline: #4a505c;
   --color-input-text: #dcdcdc;
   --color-input-background: #2e323e;
@@ -680,18 +681,6 @@ a.ui.basic.label:hover {
   background-color: #383c4a;
 }
 
-.issue.list > .item .title {
-  color: #87ab63;
-}
-
-.issue.list > .item .title:hover {
-  color: #a0cc75;
-}
-
-.issue.list > .item {
-  border-bottom: 1px dashed #475767;
-}
-
 .ui.green.label,
 .ui.green.labels .label,
 .ui.basic.green.label {
@@ -708,10 +697,6 @@ a.ui.basic.green.label:hover {
   color: #fff !important;
 }
 
-.issue.list > .item .comment {
-  color: var(--color-secondary-dark-6);
-}
-
 .ui.basic.red.active.button,
 .ui.basic.red.buttons .active.button {
   box-shadow: 0 0 0 1px #b75252 inset !important;
@@ -1019,10 +1004,6 @@ a.ui.basic.green.label:hover {
   text-shadow: -2px 0 #383c4a, 0 2px #383c4a, 2px 0 #383c4a, 0 -2px #383c4a;
 }
 
-.ui .text.grey a {
-  color: #dbdbdb !important;
-}
-
 .repository.view.issue .comment-list .comment .content .header {
   color: #dbdbdb;
   background-color: var(--color-secondary);
@@ -1045,10 +1026,6 @@ a.ui.basic.green.label:hover {
   background: #353945;
 }
 
-.ui .text.grey a:hover {
-  color: #dbdbdb !important;
-}
-
 .ui.basic.green.active.button,
 .ui.basic.green.buttons .active.button {
   color: #87ab63 !important;