Render the git graph on the server (#12333)

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

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);
}