luckyimnotanigger/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-05-14 05:52:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

Render the git graph on the server (#12333)

Browse source 
Rendering the git graph on the server means that we can properly track flows and switch from the Canvas implementation to a SVG implementation.

* This implementation provides a 16 limited color selection
* The uniqued color numbers are also provided
* And there is also a monochrome version
*In addition is a hover highlight that allows users to highlight commits on the same flow.

Closes #12209

Signed-off-by: Andrew Thornton art27@cantab.net
Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
zeripath 2020-08-06 09:04:08 +01:00 • committed by GitHub
parent f1a42f5d5e
commit 2c1ae6c82d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 1666 additions and 696 deletions
Download patch file Download diff file Expand all files Collapse all files

8
web_src/less/_repository.less
View file

@ -3082,11 +3082,3 @@ tbody.commit-list {
}
}
}
#git-graph-container {
display: none;
}
#git-graph-container.in {
display: block;
}

256
web_src/less/features/gitgraph.less Normal file
View file

@ -0,0 +1,256 @@
#git-graph-container {
float: left;
display: block;
overflow-x: auto;
width: 100%;
.color-buttons {
margin-right: 0;
}
.ui.header.dividing {
padding-bottom: 10px;
}
li {
list-style-type: none;
height: 20px;
line-height: 20px;
white-space: nowrap;
.node-relation {
font-family: "Bitstream Vera Sans Mono", "Courier", monospace;
}
.author {
color: #666666;
}
.time {
color: #999999;
font-size: 80%;
}
a {
color: #000000;
}
a:hover {
text-decoration: underline;
}
a em {
color: #bb0000;
border-bottom: 1px dotted #bbbbbb;
text-decoration: none;
font-style: normal;
}
}
#rel-container {
max-width: 30%;
overflow-x: auto;
float: left;
}
#rev-container {
width: 100%;
}
#rev-list {
margin: 0;
padding: 0 5px;
min-width: 95%;
li.highlight,
li.hover {
background-color: rgba(0, 0, 0, .05);
}
li.highlight.hover {
background-color: rgba(0, 0, 0, .1);
}
}
#graph-raw-list {
margin: 0;
}
&.monochrome #rel-container {
.flow-group {
stroke: grey;
fill: grey;
}
.flow-group.highlight {
stroke: black;
fill: black;
}
}
&:not(.monochrome) #rel-container {
.flow-group {
&.flow-color-16-1 {
stroke: #499a37;
fill: #499a37;
}
&.flow-color-16-2 {
stroke: hsl(356, 58%, 54%);
fill: #ce4751;
}
&.flow-color-16-3 {
stroke: #8f9121;
fill: #8f9121;
}
&.flow-color-16-4 {
stroke: #ac32a6;
fill: #ac32a6;
}
&.flow-color-16-5 {
stroke: #3d27aa;
fill: #3d27aa;
}
&.flow-color-16-6 {
stroke: #c67d28;
fill: #c67d28;
}
&.flow-color-16-7 {
stroke: #4db392;
fill: #4db392;
}
&.flow-color-16-8 {
stroke: #aa4d30;
fill: #aa4d30;
}
&.flow-color-16-9 {
stroke: #2a6f84;
fill: #2a6f84;
}
&.flow-color-16-10 {
stroke: #c45327;
fill: #c45327;
}
&.flow-color-16-11 {
stroke: #3d965c;
fill: #3d965c;
}
&.flow-color-16-12 {
stroke: #792a93;
fill: #792a93;
}
&.flow-color-16-13 {
stroke: #439d73;
fill: #439d73;
}
&.flow-color-16-14 {
stroke: #103aad;
fill: #103aad;
}
&.flow-color-16-15 {
stroke: #982e85;
fill: #982e85;
}
&.flow-color-16-0 {
stroke: #7db233;
fill: #7db233;
}
}
.flow-group.highlight {
&.flow-color-16-1 {
stroke: #5ac144;
fill: #5ac144;
}
&.flow-color-16-2 {
stroke: #ed5a8b;
fill: #ed5a8b;
}
&.flow-color-16-3 {
stroke: #ced049;
fill: #ced048;
}
&.flow-color-16-4 {
stroke: #db61d7;
fill: #db62d6;
}
&.flow-color-16-5 {
stroke: #4e33d1;
fill: #4f35d1;
}
&.flow-color-16-6 {
stroke: #e6a151;
fill: #e6a151;
}
&.flow-color-16-7 {
stroke: #44daaa;
fill: #44daaa;
}
&.flow-color-16-8 {
stroke: #dd7a5c;
fill: #dd7a5c;
}
&.flow-color-16-9 {
stroke: #38859c;
fill: #38859c;
}
&.flow-color-16-10 {
stroke: #d95520;
fill: #d95520;
}
&.flow-color-16-11 {
stroke: #42ae68;
fill: #42ae68;
}
&.flow-color-16-12 {
stroke: #9126b5;
fill: #9126b5;
}
&.flow-color-16-13 {
stroke: #4ab080;
fill: #4ab080;
}
&.flow-color-16-14 {
stroke: #284fb8;
fill: #284fb8;
}
&.flow-color-16-15 {
stroke: #971c80;
fill: #971c80;
}
&.flow-color-16-0 {
stroke: #87ca28;
fill: #87ca28;
}
}
}
}

3
web_src/less/index.less
View file

@ -1,5 +1,6 @@
@import "~font-awesome/css/font-awesome.css";
@import "./vendor/gitGraph.css";
@import "./features/gitgraph.less";
@import "./features/animations.less";
@import "./markdown/mermaid.less";

47
web_src/less/themes/theme-arc-green.less
View file

@ -919,11 +919,17 @@ a.ui.basic.green.label:hover {
.ui.active.button:active,
.ui.button:active,
.ui.button:focus {
.ui.button:focus,
.ui.active.button {
background-color: #2e3e4e;
color: #dbdbdb;
}
.ui.active.button:hover {
background-color: #475e75;
color: #dbdbdb;
}
.ui.dropdown .menu .selected.item,
.ui.dropdown.selected {
color: #dbdbdb;
@ -1921,6 +1927,45 @@ footer .container .links > * {
color: #2a2e3a;
}
#git-graph-container.monochrome #rel-container .flow-group {
stroke: dimgrey;
fill: dimgrey;
}
#git-graph-container.monochrome #rel-container .flow-group.highlight {
stroke: darkgrey;
fill: darkgrey;
}
#git-graph-container:not(.monochrome) #rel-container .flow-group {
&.flow-color-16-5 {
stroke: #5543b1;
fill: #5543b1;
}
}
#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight {
&.flow-color-16-5 {
stroke: #7058e6;
fill: #7058e6;
}
}
#git-graph-container #rev-list li.highlight,
#git-graph-container #rev-list li.hover {
background-color: rgba(255, 255, 255, .05);
}
#git-graph-container #rev-list li.highlight.hover {
background-color: rgba(255, 255, 255, .1);
}
#git-graph-container .ui.buttons button#flow-color-monochrome.ui.button {
border-left-color: rgb(76, 80, 92);
border-left-style: solid;
border-left-width: 1px;
}
.mermaid-chart {
filter: invert(84%) hue-rotate(180deg);
}

15
web_src/less/vendor/gitGraph.css vendored
View file

@ -1,15 +0,0 @@
/* This is a customized version of https://github.com/bluef/gitgraph.js/blob/master/gitgraph.css
Changes include the removal of `body` and `em` styles */
#git-graph-container, #rel-container {float:left;}
#rel-container {max-width:30%; overflow-x:auto;}
#git-graph-container {overflow-x:auto; width:100%}
#git-graph-container li {list-style-type:none;height:20px;line-height:20px; white-space:nowrap;}
#git-graph-container li .node-relation {font-family:'Bitstream Vera Sans Mono', 'Courier', monospace;}
#git-graph-container li .author {color:#666666;}
#git-graph-container li .time {color:#999999;font-size:80%}
#git-graph-container li a {color:#000000;}
#git-graph-container li a:hover {text-decoration:underline;}
#git-graph-container li a em {color:#BB0000;border-bottom:1px dotted #BBBBBB;text-decoration:none;font-style:normal;}
#rev-container {width:100%}
#rev-list {margin:0;padding:0 5px 0 5px;min-width:95%}
#graph-raw-list {margin:0px;}