diff options
| author | zeripath <art27@cantab.net> | 2020-08-06 09:04:08 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-08-06 09:04:08 +0100 |
| commit | 2c1ae6c82d0b3fa62dda7e6a30fb91e27aba6e04 (patch) | |
| tree | be14ac1376125be2482e6ca7de3eedc276203304 /templates | |
| parent | f1a42f5d5ee0279ddec7973a1ba9236c70bd5b5e (diff) | |
| download | gitea-2c1ae6c82d0b3fa62dda7e6a30fb91e27aba6e04.tar.gz gitea-2c1ae6c82d0b3fa62dda7e6a30fb91e27aba6e04.zip | |
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>
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/repo/graph.tmpl | 45 |
1 files changed, 34 insertions, 11 deletions
diff --git a/templates/repo/graph.tmpl b/templates/repo/graph.tmpl index 493ac7a696..c644b24d57 100644 --- a/templates/repo/graph.tmpl +++ b/templates/repo/graph.tmpl @@ -2,21 +2,44 @@ <div class="repository commits"> {{template "repo/header" .}} <div class="ui container"> - <div id="git-graph-container" class="ui segment"> - <h1>{{.i18n.Tr "repo.commit_graph"}}</h1> + <div id="git-graph-container" class="ui segment{{if eq .Mode "monochrome"}} monochrome{{end}}"> + <h2 class="ui header dividing">{{.i18n.Tr "repo.commit_graph"}} + <div class="ui right"> + <div class="ui icon buttons tiny color-buttons"> + <button id="flow-color-monochrome" class="ui labelled icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{.i18n.Tr "repo.commit_graph.monochrome"}}"><span class="emoji">{{svg "material-invert-colors" 16}}</span> {{.i18n.Tr "repo.commit_graph.monochrome"}}</button> + <button id="flow-color-colored" class="ui labelled icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{.i18n.Tr "repo.commit_graph.color"}}"><span class="emoji">{{svg "material-palette" 16}}</span> {{.i18n.Tr "repo.commit_graph.color"}}</button> + </div> + </div> + </h2> + <div class="ui dividing"></div> <div id="rel-container"> - <canvas id="graph-canvas"> - <ul id="graph-raw-list"> - {{ range .Graph }} - <li><span class="node-relation">{{ .GraphAcii -}}</span></li> - {{ end }} - </ul> - </canvas> + <svg viewbox="{{Mul .Graph.MinColumn 5}} {{Mul .Graph.MinRow 10}} {{Add (Mul .Graph.Width 5) 5}} {{Mul .Graph.Height 10}}" width="{{Add (Mul .Graph.Width 10) 10}}px"> + {{range $flowid, $flow := .Graph.Flows}} + <g id="flow-{{$flow.ID}}" class="flow-group flow-color-{{$flow.ColorNumber}} flow-color-16-{{$flow.Color16}}" data-flow="{{$flow.ID}}" data-color="{{$flow.ColorNumber}}"> + <path d="{{range $i, $glyph := $flow.Glyphs -}} + {{- if or (eq $glyph.Glyph '*') (eq $glyph.Glyph '|') -}} + M {{Add (Mul $glyph.Column 5) 5}} {{Add (Mul $glyph.Row 10) 0}} v 10 {{/* */ -}} + {{- else if eq $glyph.Glyph '/' -}} + M {{Add (Mul $glyph.Column 5) 10}} {{Add (Mul $glyph.Row 10) 0}} l -10 10 {{/* */ -}} + {{- else if eq $glyph.Glyph '\\' -}} + M {{Add (Mul $glyph.Column 5) 0}} {{Add (Mul $glyph.Row 10) 0}} l 10 10 {{/* */ -}} + {{- else if or (eq $glyph.Glyph '-') (eq $glyph.Glyph '.') -}} + M {{Add (Mul $glyph.Column 5) 0}} {{Add (Mul $glyph.Row 10) 10}} h 5 {{/* */ -}} + {{- else if eq $glyph.Glyph '_' -}} + M {{Add (Mul $glyph.Column 5) 0}} {{Add (Mul $glyph.Row 10) 10}} h 10 {{/* */ -}} + {{- end -}} + {{- end}}" stroke-width="1" fill="none" id="flow-{{$flow.ID}}-path" stroke-linecap="round"/> + {{range $flow.Commits}} + <circle class="flow-commit" cx="{{Add (Mul .Column 5) 5}}" cy="{{Add (Mul .Row 10) 5}}" r="2.5" stroke="none" id="flow-commit-{{.Rev}}" data-rev="{{.Rev}}"/> + {{end}} + </g> + {{end}} + </svg> </div> <div id="rev-container"> <ul id="rev-list"> - {{ range .Graph }} - <li> + {{ range .Graph.Commits }} + <li id="commit-{{.Rev}}" data-flow="{{.Flow}}"> {{ if .OnlyRelation }} <span /> {{ else }} |