forked from
tangled.org/core
Monorepo for Tangled
appview/pages: move fileTree to the left of diff and interdiff
Signed-off-by: oppiliappan <me@oppi.li>
author
oppiliappan
committer
Tangled
date
(Jul 20, 2025, 10:12 AM UTC)
commit
99057e2b
99057e2b1efddf79c7c92402746d0313519b0c74
parent
7a37de0a
7a37de0ab7dd00152ecb5396457b8e694f480ba6
+439
-285
+28
-24
appview/pages/templates/layouts/base.html
+28
-24
appview/pages/templates/layouts/base.html
···
15
15
{{ block "extrameta" . }}{{ end }}
16
16
</head>
17
17
<body class="bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200">
18
-
<div class="px-1 grid grid-cols-1 md:grid-cols-12">
19
-
<div class="col-span-1 md:col-span-2">
20
-
{{ block "topbarLeft" . }} {{ end }}
21
-
</div>
22
-
<header style="z-index: 20" class="col-span-1 md:col-span-8">
23
-
{{ block "topbar" . }}
24
-
{{ template "layouts/topbar" . }}
25
-
{{ end }}
26
-
</header>
27
-
<div class="col-span-1 md:col-span-2">
28
-
{{ block "topbarRight" . }} {{ end }}
18
+
{{ block "topbarLayout" . }}
19
+
<div class="px-1 grid grid-cols-1 md:grid-cols-12">
20
+
<div class="col-span-1 md:col-span-2">
21
+
{{ block "topbarLeft" . }} {{ end }}
22
+
</div>
23
+
<header style="z-index: 20" class="col-span-1 md:col-span-8">
24
+
{{ block "topbar" . }}
25
+
{{ template "layouts/topbar" . }}
26
+
{{ end }}
27
+
</header>
28
+
<div class="col-span-1 md:col-span-2">
29
+
{{ block "topbarRight" . }} {{ end }}
30
+
</div>
29
31
</div>
30
-
</div>
32
+
{{ end }}
31
33
32
34
<div class="flex flex-col min-h-screen">
33
35
{{ block "contentLayout" . }}
···
59
61
{{ end }}
60
62
</div>
61
63
62
-
<div class="px-1 grid grid-cols-1 md:grid-cols-12">
63
-
<div class="col-span-1 md:col-span-2">
64
-
{{ block "footerLeft" . }} {{ end }}
65
-
</div>
66
-
<footer class="mt-16 col-span-1 md:col-span-8">
67
-
{{ block "footer" . }}
68
-
{{ template "layouts/footer" . }}
69
-
{{ end }}
70
-
</footer>
71
-
<div class="col-span-1 md:col-span-2">
72
-
{{ block "footerRight" . }} {{ end }}
64
+
{{ block "footerLayout" . }}
65
+
<div class="px-1 grid grid-cols-1 md:grid-cols-12">
66
+
<div class="col-span-1 md:col-span-2">
67
+
{{ block "footerLeft" . }} {{ end }}
68
+
</div>
69
+
<footer class="mt-16 col-span-1 md:col-span-8">
70
+
{{ block "footer" . }}
71
+
{{ template "layouts/footer" . }}
72
+
{{ end }}
73
+
</footer>
74
+
<div class="col-span-1 md:col-span-2">
75
+
{{ block "footerRight" . }} {{ end }}
76
+
</div>
73
77
</div>
74
-
</div>
78
+
{{ end }}
75
79
76
80
</body>
77
81
</html>
+1
-1
appview/pages/templates/layouts/repobase.html
+1
-1
appview/pages/templates/layouts/repobase.html
+1
-1
appview/pages/templates/layouts/topbar.html
+1
-1
appview/pages/templates/layouts/topbar.html
···
1
1
{{ define "layouts/topbar" }}
2
2
<nav class="space-x-4 mb-4 px-6 py-2 rounded bg-white dark:bg-gray-800 dark:text-white drop-shadow-sm">
3
-
<div class="container flex justify-between p-0 items-center">
3
+
<div class="flex justify-between p-0 items-center">
4
4
<div id="left-items">
5
5
<a href="/" hx-boost="true" class="flex gap-2 font-semibold italic">
6
6
tangled<sub>alpha</sub>
+46
-4
appview/pages/templates/repo/commit.html
+46
-4
appview/pages/templates/repo/commit.html
···
77
77
</div>
78
78
79
79
</section>
80
+
{{end}}
80
81
82
+
{{ define "topbarLayout" }}
83
+
<div class="px-1 grid grid-cols-1">
84
+
<header style="z-index: 20" class="col-span-1">
85
+
{{ block "topbar" . }}
86
+
{{ template "layouts/topbar" . }}
87
+
{{ end }}
88
+
</header>
89
+
</div>
90
+
{{ end }}
91
+
92
+
{{ define "contentLayout" }}
93
+
<div class="grid grid-cols-1 md:grid-cols-1 gap-2">
94
+
<main class="px-1 col-span-1">
95
+
{{ block "content" . }}{{ end }}
96
+
</main>
97
+
</div>
98
+
{{ end }}
99
+
100
+
{{ block "contentAfterLayout" . }}
101
+
<div class="grid grid-cols-1 md:grid-cols-12 gap-2">
102
+
<div class="col-span-1 md:col-span-2">
103
+
{{ block "contentAfterLeft" . }} {{ end }}
104
+
</div>
105
+
<main class="px-1 col-span-1 md:col-span-10">
106
+
{{ block "contentAfter" . }}{{ end }}
107
+
</main>
108
+
</div>
109
+
{{ end }}
110
+
111
+
{{ block "footerLayout" . }}
112
+
<div class="px-1 grid grid-cols-1">
113
+
<footer class="mt-16 col-span-1">
114
+
{{ block "footer" . }}
115
+
{{ template "layouts/footer" . }}
116
+
{{ end }}
117
+
</footer>
118
+
</div>
119
+
{{ end }}
120
+
121
+
{{ define "contentAfter" }}
122
+
{{ template "repo/fragments/diff" (list .RepoInfo.FullName .Diff) }}
81
123
{{end}}
82
124
83
-
{{ define "repoAfter" }}
84
-
<div class="-z-[9999]">
85
-
{{ template "repo/fragments/diff" (list .RepoInfo.FullName .Diff) }}
86
-
</div>
125
+
{{ define "contentAfterLeft" }}
126
+
<div class="sticky top-0">
127
+
{{ template "repo/fragments/diffChangedFiles" .Diff }}
128
+
</div>
87
129
{{end}}
+47
-2
appview/pages/templates/repo/compare/compare.html
+47
-2
appview/pages/templates/repo/compare/compare.html
···
10
10
{{ end }}
11
11
{{ end }}
12
12
13
-
{{ define "repoAfter" }}
14
-
{{ template "repo/fragments/diff" (list .RepoInfo.FullName .Diff) }}
13
+
{{ define "topbarLayout" }}
14
+
<div class="px-1 grid grid-cols-1">
15
+
<header style="z-index: 20" class="col-span-1">
16
+
{{ block "topbar" . }}
17
+
{{ template "layouts/topbar" . }}
18
+
{{ end }}
19
+
</header>
20
+
</div>
21
+
{{ end }}
22
+
23
+
{{ define "contentLayout" }}
24
+
<div class="grid grid-cols-1 md:grid-cols-1 gap-2">
25
+
<main class="px-1 col-span-1">
26
+
{{ block "content" . }}{{ end }}
27
+
</main>
28
+
</div>
29
+
{{ end }}
30
+
31
+
{{ block "contentAfterLayout" . }}
32
+
<div class="grid grid-cols-1 md:grid-cols-12 gap-2">
33
+
<div class="col-span-1 md:col-span-2">
34
+
{{ block "contentAfterLeft" . }} {{ end }}
35
+
</div>
36
+
<main class="px-1 col-span-1 md:col-span-10">
37
+
{{ block "contentAfter" . }}{{ end }}
38
+
</main>
39
+
</div>
15
40
{{ end }}
41
+
42
+
{{ block "footerLayout" . }}
43
+
<div class="px-1 grid grid-cols-1">
44
+
<footer class="mt-16 col-span-1">
45
+
{{ block "footer" . }}
46
+
{{ template "layouts/footer" . }}
47
+
{{ end }}
48
+
</footer>
49
+
</div>
50
+
{{ end }}
51
+
52
+
{{ define "contentAfter" }}
53
+
{{ template "repo/fragments/diff" (list .RepoInfo.FullName .Diff) }}
54
+
{{end}}
55
+
56
+
{{ define "contentAfterLeft" }}
57
+
<div class="sticky top-0">
58
+
{{ template "repo/fragments/diffChangedFiles" .Diff }}
59
+
</div>
60
+
{{end}}
+120
-133
appview/pages/templates/repo/fragments/diff.html
+120
-133
appview/pages/templates/repo/fragments/diff.html
···
2
2
{{ $repo := index . 0 }}
3
3
{{ $diff := index . 1 }}
4
4
{{ $commit := $diff.Commit }}
5
-
{{ $stat := $diff.Stat }}
6
-
{{ $fileTree := fileTree $diff.ChangedFiles }}
7
5
{{ $diff := $diff.Diff }}
6
+
{{ $this := $commit.This }}
7
+
{{ $parent := $commit.Parent }}
8
8
9
-
{{ $this := $commit.This }}
10
-
{{ $parent := $commit.Parent }}
9
+
{{ $last := sub (len $diff) 1 }}
10
+
{{ range $idx, $hunk := $diff }}
11
+
{{ with $hunk }}
12
+
<section class="mt-4 border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm">
13
+
<div id="file-{{ .Name.New }}">
14
+
<div id="diff-file">
15
+
<details open>
16
+
<summary class="list-none cursor-pointer sticky top-0">
17
+
<div id="diff-file-header" class="rounded cursor-pointer bg-white dark:bg-gray-800 flex justify-between">
18
+
<div id="left-side-items" class="p-2 flex gap-2 items-center overflow-x-auto">
19
+
<div class="flex gap-1 items-center">
20
+
{{ $markerstyle := "diff-type p-1 mr-1 font-mono text-sm rounded select-none" }}
21
+
{{ if .IsNew }}
22
+
<span class="bg-green-100 text-green-700 dark:bg-green-800/50 dark:text-green-400 {{ $markerstyle }}">ADDED</span>
23
+
{{ else if .IsDelete }}
24
+
<span class="bg-red-100 text-red-700 dark:bg-red-800/50 dark:text-red-400 {{ $markerstyle }}">DELETED</span>
25
+
{{ else if .IsCopy }}
26
+
<span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">COPIED</span>
27
+
{{ else if .IsRename }}
28
+
<span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">RENAMED</span>
29
+
{{ else }}
30
+
<span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">MODIFIED</span>
31
+
{{ end }}
11
32
12
-
<section class="mt-6 p-6 border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm">
13
-
<div class="diff-stat">
14
-
<div class="flex gap-2 items-center">
15
-
<strong class="text-sm uppercase dark:text-gray-200">Changed files</strong>
16
-
{{ block "statPill" $stat }} {{ end }}
17
-
</div>
18
-
{{ block "fileTree" $fileTree }} {{ end }}
19
-
</div>
20
-
</section>
33
+
{{ template "repo/fragments/diffStatPill" .Stats }}
34
+
</div>
21
35
22
-
{{ $last := sub (len $diff) 1 }}
23
-
{{ range $idx, $hunk := $diff }}
24
-
{{ with $hunk }}
25
-
<section class="mt-6 border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm">
26
-
<div id="file-{{ .Name.New }}">
27
-
<div id="diff-file">
28
-
<details open>
29
-
<summary class="list-none cursor-pointer sticky top-0">
30
-
<div id="diff-file-header" class="rounded cursor-pointer bg-white dark:bg-gray-800 flex justify-between">
31
-
<div id="left-side-items" class="p-2 flex gap-2 items-center overflow-x-auto">
32
-
<div class="flex gap-1 items-center">
33
-
{{ $markerstyle := "diff-type p-1 mr-1 font-mono text-sm rounded select-none" }}
34
-
{{ if .IsNew }}
35
-
<span class="bg-green-100 text-green-700 dark:bg-green-800/50 dark:text-green-400 {{ $markerstyle }}">ADDED</span>
36
-
{{ else if .IsDelete }}
37
-
<span class="bg-red-100 text-red-700 dark:bg-red-800/50 dark:text-red-400 {{ $markerstyle }}">DELETED</span>
38
-
{{ else if .IsCopy }}
39
-
<span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">COPIED</span>
40
-
{{ else if .IsRename }}
41
-
<span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">RENAMED</span>
42
-
{{ else }}
43
-
<span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">MODIFIED</span>
44
-
{{ end }}
36
+
<div class="flex gap-2 items-center overflow-x-auto">
37
+
{{ if .IsDelete }}
38
+
<a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $this }}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.Old }}"{{end}}>
39
+
{{ .Name.Old }}
40
+
</a>
41
+
{{ else if (or .IsCopy .IsRename) }}
42
+
<a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $parent}}href="/{{ $repo }}/blob/{{ $parent }}/{{ .Name.Old }}"{{end}}>
43
+
{{ .Name.Old }}
44
+
</a>
45
+
{{ i "arrow-right" "w-4 h-4" }}
46
+
<a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $this}}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}"{{end}}>
47
+
{{ .Name.New }}
48
+
</a>
49
+
{{ else }}
50
+
<a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $this}}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}"{{end}}>
51
+
{{ .Name.New }}
52
+
</a>
53
+
{{ end }}
54
+
</div>
55
+
</div>
56
+
57
+
{{ $iconstyle := "p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" }}
58
+
<div id="right-side-items" class="p-2 flex items-center">
59
+
<a title="top of file" href="#file-{{ .Name.New }}" class="{{ $iconstyle }}">{{ i "arrow-up-to-line" "w-4 h-4" }}</a>
60
+
{{ if gt $idx 0 }}
61
+
{{ $prev := index $diff (sub $idx 1) }}
62
+
<a title="previous file" href="#file-{{ $prev.Name.New }}" class="{{ $iconstyle }}">{{ i "arrow-up" "w-4 h-4" }}</a>
63
+
{{ end }}
45
64
46
-
{{ block "statPill" .Stats }} {{ end }}
47
-
</div>
65
+
{{ if lt $idx $last }}
66
+
{{ $next := index $diff (add $idx 1) }}
67
+
<a title="next file" href="#file-{{ $next.Name.New }}" class="{{ $iconstyle }}">{{ i "arrow-down" "w-4 h-4" }}</a>
68
+
{{ end }}
69
+
</div>
48
70
49
-
<div class="flex gap-2 items-center overflow-x-auto">
50
-
{{ if .IsDelete }}
51
-
<a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $this }}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.Old }}"{{end}}>
52
-
{{ .Name.Old }}
53
-
</a>
54
-
{{ else if (or .IsCopy .IsRename) }}
55
-
<a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $parent}}href="/{{ $repo }}/blob/{{ $parent }}/{{ .Name.Old }}"{{end}}>
56
-
{{ .Name.Old }}
57
-
</a>
58
-
{{ i "arrow-right" "w-4 h-4" }}
59
-
<a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $this}}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}"{{end}}>
60
-
{{ .Name.New }}
61
-
</a>
62
-
{{ else }}
63
-
<a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $this}}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}"{{end}}>
64
-
{{ .Name.New }}
65
-
</a>
66
-
{{ end }}
67
71
</div>
68
-
</div>
72
+
</summary>
69
73
70
-
{{ $iconstyle := "p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" }}
71
-
<div id="right-side-items" class="p-2 flex items-center">
72
-
<a title="top of file" href="#file-{{ .Name.New }}" class="{{ $iconstyle }}">{{ i "arrow-up-to-line" "w-4 h-4" }}</a>
73
-
{{ if gt $idx 0 }}
74
-
{{ $prev := index $diff (sub $idx 1) }}
75
-
<a title="previous file" href="#file-{{ $prev.Name.New }}" class="{{ $iconstyle }}">{{ i "arrow-up" "w-4 h-4" }}</a>
76
-
{{ end }}
77
-
78
-
{{ if lt $idx $last }}
79
-
{{ $next := index $diff (add $idx 1) }}
80
-
<a title="next file" href="#file-{{ $next.Name.New }}" class="{{ $iconstyle }}">{{ i "arrow-down" "w-4 h-4" }}</a>
81
-
{{ end }}
74
+
<div class="transition-all duration-700 ease-in-out">
75
+
{{ if .IsDelete }}
76
+
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
77
+
This file has been deleted.
78
+
</p>
79
+
{{ else if .IsCopy }}
80
+
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
81
+
This file has been copied.
82
+
</p>
83
+
{{ else if .IsBinary }}
84
+
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
85
+
This is a binary file and will not be displayed.
86
+
</p>
87
+
{{ else }}
88
+
{{ $name := .Name.New }}
89
+
<pre class="overflow-x-auto"><div class="overflow-x-auto"><div class="min-w-full inline-block">{{- range .TextFragments -}}<div class="bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 select-none text-center">···</div>
90
+
{{- $oldStart := .OldPosition -}}
91
+
{{- $newStart := .NewPosition -}}
92
+
{{- $lineNrStyle := "min-w-[3.5rem] flex-shrink-0 select-none text-right bg-white dark:bg-gray-800 scroll-mt-10 target:border target:border-amber-500 target:rounded " -}}
93
+
{{- $linkStyle := "text-gray-400 dark:text-gray-500 hover:underline" -}}
94
+
{{- $lineNrSepStyle1 := "" -}}
95
+
{{- $lineNrSepStyle2 := "pr-2" -}}
96
+
{{- range .Lines -}}
97
+
{{- if eq .Op.String "+" -}}
98
+
<div class="bg-green-100 dark:bg-green-800/30 text-green-700 dark:text-green-400 flex min-w-full items-center">
99
+
<div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}"><span aria-hidden="true" class="invisible">{{$newStart}}</span></div>
100
+
<div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}" id="{{$name}}-N{{$newStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-N{{$newStart}}">{{ $newStart }}</a></div>
101
+
<div class="w-5 flex-shrink-0 select-none text-center">{{ .Op.String }}</div>
102
+
<div class="px-2">{{ .Line }}</div>
103
+
</div>
104
+
{{- $newStart = add64 $newStart 1 -}}
105
+
{{- end -}}
106
+
{{- if eq .Op.String "-" -}}
107
+
<div class="bg-red-100 dark:bg-red-800/30 text-red-700 dark:text-red-400 flex min-w-full items-center">
108
+
<div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}" id="{{$name}}-O{{$oldStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{$oldStart}}">{{ $oldStart }}</a></div>
109
+
<div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}"><span aria-hidden="true" class="invisible">{{$oldStart}}</span></div>
110
+
<div class="w-5 flex-shrink-0 select-none text-center">{{ .Op.String }}</div>
111
+
<div class="px-2">{{ .Line }}</div>
112
+
</div>
113
+
{{- $oldStart = add64 $oldStart 1 -}}
114
+
{{- end -}}
115
+
{{- if eq .Op.String " " -}}
116
+
<div class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 flex min-w-full items-center">
117
+
<div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}" id="{{$name}}-O{{$oldStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{$oldStart}}">{{ $oldStart }}</a></div>
118
+
<div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}" id="{{$name}}-N{{$newStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-N{{$newStart}}">{{ $newStart }}</a></div>
119
+
<div class="w-5 flex-shrink-0 select-none text-center">{{ .Op.String }}</div>
120
+
<div class="px-2">{{ .Line }}</div>
121
+
</div>
122
+
{{- $newStart = add64 $newStart 1 -}}
123
+
{{- $oldStart = add64 $oldStart 1 -}}
124
+
{{- end -}}
125
+
{{- end -}}
126
+
{{- end -}}</div></div></pre>
127
+
{{- end -}}
82
128
</div>
83
129
84
-
</div>
85
-
</summary>
130
+
</details>
86
131
87
-
<div class="transition-all duration-700 ease-in-out">
88
-
{{ if .IsDelete }}
89
-
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
90
-
This file has been deleted.
91
-
</p>
92
-
{{ else if .IsCopy }}
93
-
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
94
-
This file has been copied.
95
-
</p>
96
-
{{ else if .IsBinary }}
97
-
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
98
-
This is a binary file and will not be displayed.
99
-
</p>
100
-
{{ else }}
101
-
{{ $name := .Name.New }}
102
-
<pre class="overflow-x-auto"><div class="overflow-x-auto"><div class="min-w-full inline-block">{{- range .TextFragments -}}<div class="bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 select-none text-center">···</div>
103
-
{{- $oldStart := .OldPosition -}}
104
-
{{- $newStart := .NewPosition -}}
105
-
{{- $lineNrStyle := "min-w-[3.5rem] flex-shrink-0 select-none text-right bg-white dark:bg-gray-800 scroll-mt-10 target:border target:border-amber-500 target:rounded " -}}
106
-
{{- $linkStyle := "text-gray-400 dark:text-gray-500 hover:underline" -}}
107
-
{{- $lineNrSepStyle1 := "" -}}
108
-
{{- $lineNrSepStyle2 := "pr-2" -}}
109
-
{{- range .Lines -}}
110
-
{{- if eq .Op.String "+" -}}
111
-
<div class="bg-green-100 dark:bg-green-800/30 text-green-700 dark:text-green-400 flex min-w-full items-center">
112
-
<div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}"><span aria-hidden="true" class="invisible">{{$newStart}}</span></div>
113
-
<div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}" id="{{$name}}-N{{$newStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-N{{$newStart}}">{{ $newStart }}</a></div>
114
-
<div class="w-5 flex-shrink-0 select-none text-center">{{ .Op.String }}</div>
115
-
<div class="px-2">{{ .Line }}</div>
116
-
</div>
117
-
{{- $newStart = add64 $newStart 1 -}}
118
-
{{- end -}}
119
-
{{- if eq .Op.String "-" -}}
120
-
<div class="bg-red-100 dark:bg-red-800/30 text-red-700 dark:text-red-400 flex min-w-full items-center">
121
-
<div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}" id="{{$name}}-O{{$oldStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{$oldStart}}">{{ $oldStart }}</a></div>
122
-
<div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}"><span aria-hidden="true" class="invisible">{{$oldStart}}</span></div>
123
-
<div class="w-5 flex-shrink-0 select-none text-center">{{ .Op.String }}</div>
124
-
<div class="px-2">{{ .Line }}</div>
125
-
</div>
126
-
{{- $oldStart = add64 $oldStart 1 -}}
127
-
{{- end -}}
128
-
{{- if eq .Op.String " " -}}
129
-
<div class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 flex min-w-full items-center">
130
-
<div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}" id="{{$name}}-O{{$oldStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{$oldStart}}">{{ $oldStart }}</a></div>
131
-
<div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}" id="{{$name}}-N{{$newStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-N{{$newStart}}">{{ $newStart }}</a></div>
132
-
<div class="w-5 flex-shrink-0 select-none text-center">{{ .Op.String }}</div>
133
-
<div class="px-2">{{ .Line }}</div>
134
-
</div>
135
-
{{- $newStart = add64 $newStart 1 -}}
136
-
{{- $oldStart = add64 $oldStart 1 -}}
137
-
{{- end -}}
138
-
{{- end -}}
139
-
{{- end -}}</div></div></pre>
140
-
{{- end -}}
141
132
</div>
142
-
143
-
</details>
144
-
145
-
</div>
146
-
</div>
147
-
</section>
148
-
{{ end }}
149
-
{{ end }}
133
+
</div>
134
+
</section>
135
+
{{ end }}
136
+
{{ end }}
150
137
{{ end }}
151
138
152
139
{{ define "statPill" }}
+15
appview/pages/templates/repo/fragments/diffChangedFiles.html
+15
appview/pages/templates/repo/fragments/diffChangedFiles.html
···
1
+
{{ define "repo/fragments/diffChangedFiles" }}
2
+
{{ $stat := .Stat }}
3
+
{{ $fileTree := fileTree .ChangedFiles }}
4
+
<div class="col-span-1 md:col-span-2 mt-4">
5
+
<section class="sticky top-0 overflow-x-auto px-6 py-4 border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm">
6
+
<div class="diff-stat">
7
+
<div class="flex gap-2 items-center">
8
+
<strong class="text-sm uppercase dark:text-gray-200">Changed files</strong>
9
+
{{ template "repo/fragments/diffStatPill" $stat }}
10
+
</div>
11
+
{{ template "repo/fragments/fileTree" $fileTree }}
12
+
</div>
13
+
</section>
14
+
</div>
15
+
{{ end }}
+4
-4
appview/pages/templates/repo/fragments/filetree.html
appview/pages/templates/repo/fragments/fileTree.html
+4
-4
appview/pages/templates/repo/fragments/filetree.html
appview/pages/templates/repo/fragments/fileTree.html
···
1
-
{{ define "fileTree" }}
1
+
{{ define "repo/fragments/fileTree" }}
2
2
{{ if and .Name .IsDirectory }}
3
3
<details open>
4
4
<summary class="cursor-pointer list-none pt-1">
···
7
7
<span class="filename text-black dark:text-white">{{ .Name }}</span>
8
8
</span>
9
9
</summary>
10
-
<div class="ml-1 pl-4 border-l border-gray-200 dark:border-gray-700">
10
+
<div class="ml-1 pl-2 border-l border-gray-200 dark:border-gray-700">
11
11
{{ range $child := .Children }}
12
-
{{ block "fileTree" $child }} {{ end }}
12
+
{{ template "repo/fragments/fileTree" $child }}
13
13
{{ end }}
14
14
</div>
15
15
</details>
···
20
20
</div>
21
21
{{ else }}
22
22
{{ range $child := .Children }}
23
-
{{ block "fileTree" $child }} {{ end }}
23
+
{{ template "repo/fragments/fileTree" $child }}
24
24
{{ end }}
25
25
{{ end }}
26
26
{{ end }}
+69
-111
appview/pages/templates/repo/fragments/interdiff.html
+69
-111
appview/pages/templates/repo/fragments/interdiff.html
···
3
3
{{ $x := index . 1 }}
4
4
{{ $fileTree := fileTree $x.AffectedFiles }}
5
5
{{ $diff := $x.Files }}
6
-
7
-
<section class="mt-6 p-6 border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm">
8
-
<div class="diff-stat">
9
-
<div class="flex gap-2 items-center">
10
-
<strong class="text-sm uppercase dark:text-gray-200">files</strong>
11
-
</div>
12
-
{{ block "fileTree" $fileTree }} {{ end }}
13
-
</div>
14
-
</section>
6
+
{{ $last := sub (len $diff) 1 }}
7
+
{{ $isSplit := $opts.Split }}
15
8
16
-
{{ $last := sub (len $diff) 1 }}
17
9
{{ range $idx, $hunk := $diff }}
18
-
{{ with $hunk }}
19
-
<section class="mt-6 border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm">
20
-
<div id="file-{{ .Name }}">
21
-
<div id="diff-file">
22
-
<details {{ if not (.Status.IsOnlyInOne) }}open{{end}}>
23
-
<summary class="list-none cursor-pointer sticky top-0">
24
-
<div id="diff-file-header" class="rounded cursor-pointer bg-white dark:bg-gray-800 flex justify-between">
25
-
<div id="left-side-items" class="p-2 flex gap-2 items-center overflow-x-auto">
26
-
<div class="flex gap-1 items-center" style="direction: ltr;">
27
-
{{ $markerstyle := "diff-type p-1 mr-1 font-mono text-sm rounded select-none" }}
28
-
{{ if .Status.IsOk }}
29
-
<span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">CHANGED</span>
30
-
{{ else if .Status.IsUnchanged }}
31
-
<span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">UNCHANGED</span>
32
-
{{ else if .Status.IsOnlyInOne }}
33
-
<span class="bg-red-100 text-red-700 dark:bg-red-800/50 dark:text-red-400 {{ $markerstyle }}">REVERTED</span>
34
-
{{ else if .Status.IsOnlyInTwo }}
35
-
<span class="bg-green-100 text-green-700 dark:bg-green-800/50 dark:text-green-400 {{ $markerstyle }}">NEW</span>
36
-
{{ else if .Status.IsRebased }}
37
-
<span class="bg-amber-100 text-amber-700 dark:bg-amber-800/50 dark:text-amber-400 {{ $markerstyle }}">REBASED</span>
38
-
{{ else }}
39
-
<span class="bg-red-100 text-red-700 dark:bg-red-800/50 dark:text-red-400 {{ $markerstyle }}">ERROR</span>
40
-
{{ end }}
41
-
</div>
10
+
{{ with $hunk }}
11
+
<section class="mt-4 border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm">
12
+
<div id="file-{{ .Name }}">
13
+
<div id="diff-file">
14
+
<details {{ if not (.Status.IsOnlyInOne) }}open{{end}}>
15
+
<summary class="list-none cursor-pointer sticky top-0">
16
+
<div id="diff-file-header" class="rounded cursor-pointer bg-white dark:bg-gray-800 flex justify-between">
17
+
<div id="left-side-items" class="p-2 flex gap-2 items-center overflow-x-auto">
18
+
<div class="flex gap-1 items-center" style="direction: ltr;">
19
+
{{ $markerstyle := "diff-type p-1 mr-1 font-mono text-sm rounded select-none" }}
20
+
{{ if .Status.IsOk }}
21
+
<span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">CHANGED</span>
22
+
{{ else if .Status.IsUnchanged }}
23
+
<span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">UNCHANGED</span>
24
+
{{ else if .Status.IsOnlyInOne }}
25
+
<span class="bg-red-100 text-red-700 dark:bg-red-800/50 dark:text-red-400 {{ $markerstyle }}">REVERTED</span>
26
+
{{ else if .Status.IsOnlyInTwo }}
27
+
<span class="bg-green-100 text-green-700 dark:bg-green-800/50 dark:text-green-400 {{ $markerstyle }}">NEW</span>
28
+
{{ else if .Status.IsRebased }}
29
+
<span class="bg-amber-100 text-amber-700 dark:bg-amber-800/50 dark:text-amber-400 {{ $markerstyle }}">REBASED</span>
30
+
{{ else }}
31
+
<span class="bg-red-100 text-red-700 dark:bg-red-800/50 dark:text-red-400 {{ $markerstyle }}">ERROR</span>
32
+
{{ end }}
33
+
</div>
42
34
43
-
<div class="flex gap-2 items-center overflow-x-auto" style="direction: rtl;">
44
-
<a class="dark:text-white whitespace-nowrap overflow-x-auto" href="">
45
-
{{ .Name }}
46
-
</a>
35
+
<div class="flex gap-2 items-center overflow-x-auto" style="direction: rtl;">
36
+
<a class="dark:text-white whitespace-nowrap overflow-x-auto" href="">
37
+
{{ .Name }}
38
+
</a>
39
+
</div>
47
40
</div>
48
-
</div>
49
41
50
-
{{ $iconstyle := "p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" }}
51
-
<div id="right-side-items" class="p-2 flex items-center">
52
-
<a title="top of file" href="#file-{{ .Name }}" class="{{ $iconstyle }}">{{ i "arrow-up-to-line" "w-4 h-4" }}</a>
53
-
{{ if gt $idx 0 }}
54
-
{{ $prev := index $diff (sub $idx 1) }}
55
-
<a title="previous file" href="#file-{{ $prev.Name }}" class="{{ $iconstyle }}">{{ i "arrow-up" "w-4 h-4" }}</a>
56
-
{{ end }}
42
+
{{ $iconstyle := "p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" }}
43
+
<div id="right-side-items" class="p-2 flex items-center">
44
+
<a title="top of file" href="#file-{{ .Name }}" class="{{ $iconstyle }}">{{ i "arrow-up-to-line" "w-4 h-4" }}</a>
45
+
{{ if gt $idx 0 }}
46
+
{{ $prev := index $diff (sub $idx 1) }}
47
+
<a title="previous file" href="#file-{{ $prev.Name }}" class="{{ $iconstyle }}">{{ i "arrow-up" "w-4 h-4" }}</a>
48
+
{{ end }}
57
49
58
-
{{ if lt $idx $last }}
59
-
{{ $next := index $diff (add $idx 1) }}
60
-
<a title="next file" href="#file-{{ $next.Name }}" class="{{ $iconstyle }}">{{ i "arrow-down" "w-4 h-4" }}</a>
61
-
{{ end }}
50
+
{{ if lt $idx $last }}
51
+
{{ $next := index $diff (add $idx 1) }}
52
+
<a title="next file" href="#file-{{ $next.Name }}" class="{{ $iconstyle }}">{{ i "arrow-down" "w-4 h-4" }}</a>
53
+
{{ end }}
54
+
</div>
55
+
62
56
</div>
57
+
</summary>
63
58
59
+
<div class="transition-all duration-700 ease-in-out">
60
+
{{ if .Status.IsUnchanged }}
61
+
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
62
+
This file has not been changed.
63
+
</p>
64
+
{{ else if .Status.IsRebased }}
65
+
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
66
+
This patch was likely rebased, as context lines do not match.
67
+
</p>
68
+
{{ else if .Status.IsError }}
69
+
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
70
+
Failed to calculate interdiff for this file.
71
+
</p>
72
+
{{ else }}
73
+
{{ if $isSplit }}
74
+
{{- template "repo/fragments/splitDiff" .Split -}}
75
+
{{ else }}
76
+
{{- template "repo/fragments/unifiedDiff" . -}}
77
+
{{ end }}
78
+
{{- end -}}
64
79
</div>
65
-
</summary>
66
80
67
-
<div class="transition-all duration-700 ease-in-out">
68
-
{{ if .Status.IsUnchanged }}
69
-
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
70
-
This file has not been changed.
71
-
</p>
72
-
{{ else if .Status.IsRebased }}
73
-
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
74
-
This patch was likely rebased, as context lines do not match.
75
-
</p>
76
-
{{ else if .Status.IsError }}
77
-
<p class="text-center text-gray-400 dark:text-gray-500 p-4">
78
-
Failed to calculate interdiff for this file.
79
-
</p>
80
-
{{ else }}
81
-
{{ $name := .Name }}
82
-
<pre class="overflow-x-auto"><div class="overflow-x-auto"><div class="min-w-full inline-block">{{- range .TextFragments -}}<div class="bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 select-none text-center">···</div>
83
-
{{- $oldStart := .OldPosition -}}
84
-
{{- $newStart := .NewPosition -}}
85
-
{{- $lineNrStyle := "min-w-[3.5rem] flex-shrink-0 select-none text-right bg-white dark:bg-gray-800 scroll-mt-10 target:border target:border-amber-500 target:rounded " -}}
86
-
{{- $linkStyle := "text-gray-400 dark:text-gray-500 hover:underline" -}}
87
-
{{- $lineNrSepStyle1 := "" -}}
88
-
{{- $lineNrSepStyle2 := "pr-2" -}}
89
-
{{- range .Lines -}}
90
-
{{- if eq .Op.String "+" -}}
91
-
<div class="bg-green-100 dark:bg-green-800/30 text-green-700 dark:text-green-400 flex min-w-full items-center">
92
-
<div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}"><span aria-hidden="true" class="invisible">{{$newStart}}</span></div>
93
-
<div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}" id="{{$name}}-N{{$newStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-N{{$newStart}}">{{ $newStart }}</a></div>
94
-
<div class="w-5 flex-shrink-0 select-none text-center">{{ .Op.String }}</div>
95
-
<div class="px-2">{{ .Line }}</div>
96
-
</div>
97
-
{{- $newStart = add64 $newStart 1 -}}
98
-
{{- end -}}
99
-
{{- if eq .Op.String "-" -}}
100
-
<div class="bg-red-100 dark:bg-red-800/30 text-red-700 dark:text-red-400 flex min-w-full items-center">
101
-
<div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}" id="{{$name}}-O{{$oldStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{$oldStart}}">{{ $oldStart }}</a></div>
102
-
<div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}"><span aria-hidden="true" class="invisible">{{$oldStart}}</span></div>
103
-
<div class="w-5 flex-shrink-0 select-none text-center">{{ .Op.String }}</div>
104
-
<div class="px-2">{{ .Line }}</div>
105
-
</div>
106
-
{{- $oldStart = add64 $oldStart 1 -}}
107
-
{{- end -}}
108
-
{{- if eq .Op.String " " -}}
109
-
<div class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 flex min-w-full items-center">
110
-
<div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}" id="{{$name}}-O{{$oldStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{$oldStart}}">{{ $oldStart }}</a></div>
111
-
<div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}" id="{{$name}}-N{{$newStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-N{{$newStart}}">{{ $newStart }}</a></div>
112
-
<div class="w-5 flex-shrink-0 select-none text-center">{{ .Op.String }}</div>
113
-
<div class="px-2">{{ .Line }}</div>
114
-
</div>
115
-
{{- $newStart = add64 $newStart 1 -}}
116
-
{{- $oldStart = add64 $oldStart 1 -}}
117
-
{{- end -}}
118
-
{{- end -}}
119
-
{{- end -}}</div></div></pre>
120
-
{{- end -}}
121
-
</div>
81
+
</details>
122
82
123
-
</details>
124
-
83
+
</div>
125
84
</div>
126
-
</div>
127
-
</section>
128
-
{{ end }}
85
+
</section>
86
+
{{ end }}
129
87
{{ end }}
130
88
{{ end }}
131
89
+11
appview/pages/templates/repo/fragments/interdiffFiles.html
+11
appview/pages/templates/repo/fragments/interdiffFiles.html
···
1
+
{{ define "repo/fragments/interdiffFiles" }}
2
+
{{ $fileTree := fileTree .AffectedFiles }}
3
+
<section class="mt-4 p-6 border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm">
4
+
<div class="diff-stat">
5
+
<div class="flex gap-2 items-center">
6
+
<strong class="text-sm uppercase dark:text-gray-200">files</strong>
7
+
</div>
8
+
{{ template "repo/fragments/fileTree" $fileTree }}
9
+
</div>
10
+
</section>
11
+
{{ end }}
-1
appview/pages/templates/repo/pulls/fragments/pullStack.html
-1
appview/pages/templates/repo/pulls/fragments/pullStack.html
+48
-3
appview/pages/templates/repo/pulls/interdiff.html
+48
-3
appview/pages/templates/repo/pulls/interdiff.html
···
26
26
</header>
27
27
</section>
28
28
29
-
<section>
30
-
{{ template "repo/fragments/interdiff" (list .RepoInfo.FullName .Interdiff) }}
31
-
</section>
29
+
{{ end }}
30
+
31
+
{{ define "topbarLayout" }}
32
+
<div class="px-1 grid grid-cols-1">
33
+
<header style="z-index: 20" class="col-span-1">
34
+
{{ block "topbar" . }}
35
+
{{ template "layouts/topbar" . }}
36
+
{{ end }}
37
+
</header>
38
+
</div>
39
+
{{ end }}
40
+
41
+
{{ define "contentLayout" }}
42
+
<div class="grid grid-cols-1 md:grid-cols-1 gap-2">
43
+
<main class="px-1 col-span-1">
44
+
{{ block "content" . }}{{ end }}
45
+
</main>
46
+
</div>
47
+
{{ end }}
48
+
49
+
{{ block "contentAfterLayout" . }}
50
+
<div class="grid grid-cols-1 md:grid-cols-12 gap-2">
51
+
<div class="col-span-1 md:col-span-2">
52
+
{{ block "contentAfterLeft" . }} {{ end }}
53
+
</div>
54
+
<main class="px-1 col-span-1 md:col-span-10">
55
+
{{ block "contentAfter" . }}{{ end }}
56
+
</main>
57
+
</div>
58
+
{{ end }}
59
+
60
+
{{ block "footerLayout" . }}
61
+
<div class="px-1 grid grid-cols-1">
62
+
<footer class="mt-16 col-span-1">
63
+
{{ block "footer" . }}
64
+
{{ template "layouts/footer" . }}
65
+
{{ end }}
66
+
</footer>
67
+
</div>
32
68
{{ end }}
33
69
70
+
{{ define "contentAfter" }}
71
+
{{ template "repo/fragments/interdiff" (list .RepoInfo.FullName .Interdiff .DiffOpts) }}
72
+
{{end}}
73
+
74
+
{{ define "contentAfterLeft" }}
75
+
<div class="sticky top-0">
76
+
{{ template "repo/fragments/interdiffFiles" .Interdiff }}
77
+
</div>
78
+
{{end}}
+49
-1
appview/pages/templates/repo/pulls/patch.html
+49
-1
appview/pages/templates/repo/pulls/patch.html
···
31
31
<div class="border-t border-gray-200 dark:border-gray-700 my-2"></div>
32
32
{{ template "repo/pulls/fragments/pullHeader" . }}
33
33
</section>
34
-
{{ template "repo/fragments/diff" (list .RepoInfo.FullName .Diff) }}
35
34
</section>
36
35
{{ end }}
36
+
37
+
{{ define "topbarLayout" }}
38
+
<div class="px-1 grid grid-cols-1">
39
+
<header style="z-index: 20" class="col-span-1">
40
+
{{ block "topbar" . }}
41
+
{{ template "layouts/topbar" . }}
42
+
{{ end }}
43
+
</header>
44
+
</div>
45
+
{{ end }}
46
+
47
+
{{ define "contentLayout" }}
48
+
<div class="grid grid-cols-1 md:grid-cols-1 gap-2">
49
+
<main class="px-1 col-span-1">
50
+
{{ block "content" . }}{{ end }}
51
+
</main>
52
+
</div>
53
+
{{ end }}
54
+
55
+
{{ block "contentAfterLayout" . }}
56
+
<div class="grid grid-cols-1 md:grid-cols-12 gap-2">
57
+
<div class="col-span-1 md:col-span-2">
58
+
{{ block "contentAfterLeft" . }} {{ end }}
59
+
</div>
60
+
<main class="px-1 col-span-1 md:col-span-10">
61
+
{{ block "contentAfter" . }}{{ end }}
62
+
</main>
63
+
</div>
64
+
{{ end }}
65
+
66
+
{{ block "footerLayout" . }}
67
+
<div class="px-1 grid grid-cols-1">
68
+
<footer class="mt-16 col-span-1">
69
+
{{ block "footer" . }}
70
+
{{ template "layouts/footer" . }}
71
+
{{ end }}
72
+
</footer>
73
+
</div>
74
+
{{ end }}
75
+
76
+
{{ define "contentAfter" }}
77
+
{{ template "repo/fragments/diff" (list .RepoInfo.FullName .Diff) }}
78
+
{{end}}
79
+
80
+
{{ define "contentAfterLeft" }}
81
+
<div class="sticky top-0">
82
+
{{ template "repo/fragments/diffChangedFiles" .Diff }}
83
+
</div>
84
+
{{end}}