Multiple GitGraph improvements: Exclude PR heads, Add branch/PR links, Show only certain branches, (#12766)

* Multiple GitGraph improvements.

Add backend support for excluding PRs, selecting branches and files.

Fix #10327

Signed-off-by: Andrew Thornton <art27@cantab.net>

* as per @silverwind

Signed-off-by: Andrew Thornton <art27@cantab.net>

* as per @silverwind

Signed-off-by: Andrew Thornton <art27@cantab.net>

* Only show refs in dropdown we display on the graph

Signed-off-by: Andrew Thornton <art27@cantab.net>

* as per @silverwind

Signed-off-by: Andrew Thornton <art27@cantab.net>

* use flexbox for ui header

Signed-off-by: Andrew Thornton <art27@cantab.net>

* Move Hide Pull Request button to the dropdown

Signed-off-by: Andrew Thornton <art27@cantab.net>

* Add SHA and user pictures

Signed-off-by: Andrew Thornton <art27@cantab.net>

* fix test

Signed-off-by: Andrew Thornton <art27@cantab.net>

* fix test 2

Signed-off-by: Andrew Thornton <art27@cantab.net>

* fixes

* async

* more tweaks

* use tabs in tmpl

Signed-off-by: Andrew Thornton <art27@cantab.net>

* remove commented thing

Signed-off-by: Andrew Thornton <art27@cantab.net>

* fix linting

Signed-off-by: Andrew Thornton <art27@cantab.net>

* Update web_src/js/features/gitgraph.js

Co-authored-by: silverwind <me@silverwind.io>

* graph tweaks

* more tweaks

* add title

Signed-off-by: Andrew Thornton <art27@cantab.net>

* fix loading indicator z-index and position

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Co-authored-by: Lauris BH <lauris@nix.lv>

1 files changed, 83 insertions, 13 deletions

diff --git a/web_src/less/features/gitgraph.less b/web_src/less/features/gitgraph.less
index da81b13352..ee170fba7f 100644
--- a/web_src/less/features/gitgraph.less
+++ b/web_src/less/features/gitgraph.less
@@ -1,8 +1,21 @@
 #git-graph-container {
   float: left;
   display: block;
-  overflow-x: auto;
+  overflow-x: scroll;
   width: 100%;
+  min-height: 350px;
+
+  > .ui.segment.loading {
+    border: 0;
+    z-index: 1;
+    min-height: 246px;
+  }
+
+  h2 {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 
   .color-buttons {
     margin-right: 0;
@@ -12,11 +25,49 @@
     padding-bottom: 10px;
   }
 
+  #flow-select-refs-dropdown {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    min-width: 250px;
+    border-right: none;
+
+    .ui.label {
+      max-width: 180px;
+      display: inline-flex !important;
+      align-items: center;
+
+      .truncate {
+        display: inline-block;
+        max-width: 140px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        vertical-align: top;
+        white-space: nowrap;
+      }
+    }
+
+    .dropdown.icon {
+      display: none;
+    }
+
+    .default.text {
+      padding-top: 4px;
+      padding-bottom: 4px;
+    }
+
+    input.search {
+      position: relative;
+      top: 1px;
+    }
+  }
+
   li {
     list-style-type: none;
-    height: 20px;
-    line-height: 20px;
+    height: 24px;
+    line-height: 24px;
     white-space: nowrap;
+    display: flex;
+    align-items: center;
 
     .node-relation {
       font-family: "Bitstream Vera Sans Mono", "Courier", monospace;
@@ -31,10 +82,6 @@
       font-size: 80%;
     }
 
-    a {
-      color: #000000;
-    }
-
     a:hover {
       text-decoration: underline;
     }
@@ -59,16 +106,39 @@
 
   #rev-list {
     margin: 0;
-    padding: 0 5px;
-    min-width: 95%;
+    padding: 0;
+    width: 100%;
 
-    li.highlight,
-    li.hover {
+    li.highlight.hover {
       background-color: rgba(0, 0, 0, .05);
     }
 
-    li.highlight.hover {
-      background-color: rgba(0, 0, 0, .1);
+    .tags a.button {
+      padding: 2px 4px;
+    }
+
+    .sha.label {
+      padding-top: 5px;
+      padding-bottom: 3px;
+    }
+
+    .sha.label .shortsha {
+      padding-top: 0;
+    }
+
+    .sha.label .shortsha-pad {
+      padding-right: 10px;
+    }
+
+    .sha.label .ui.detail.icon.button {
+      padding-top: 3px;
+      margin-top: -5px;
+      padding-bottom: 1px;
+    }
+
+    .author .ui.avatar.image {
+      width: auto;
+      height: 18px;
     }
   }