author | Lars Hjemli <hjemli@gmail.com> | 2007-05-14 16:31:05 (UTC) |
---|---|---|
committer | Lars Hjemli <hjemli@gmail.com> | 2007-05-14 20:43:38 (UTC) |
commit | a342ac6b4d7830f82230b0f6a29bc9378d66747e (patch) (unidiff) | |
tree | 49782a205d9eb73c2b63f77cfc554d898681cf1a | |
parent | a1a0cd8b5a62fe779d77c210a3d455398ce06bb7 (diff) | |
download | cgit-a342ac6b4d7830f82230b0f6a29bc9378d66747e.zip cgit-a342ac6b4d7830f82230b0f6a29bc9378d66747e.tar.gz cgit-a342ac6b4d7830f82230b0f6a29bc9378d66747e.tar.bz2 |
cgit.css: try to make diffs look a little bit nicer
This makes the diffview look more like 'git-diff' in a terminal.
Signed-off-by: Lars Hjemli <hjemli@gmail.com>
-rw-r--r-- | cgit.css | 13 | ||||
-rw-r--r-- | ui-diff.c | 32 |
2 files changed, 32 insertions, 13 deletions
@@ -1,331 +1,330 @@ | |||
1 | body { | 1 | body { |
2 | font-family: arial; | 2 | font-family: arial; |
3 | font-size: 11pt; | 3 | font-size: 11pt; |
4 | background: white; | 4 | background: white; |
5 | } | 5 | } |
6 | 6 | ||
7 | body, table { | 7 | body, table { |
8 | padding: 0em; | 8 | padding: 0em; |
9 | margin: 0em; | 9 | margin: 0em; |
10 | } | 10 | } |
11 | 11 | ||
12 | table { | 12 | table { |
13 | border-collapse: collapse; | 13 | border-collapse: collapse; |
14 | } | 14 | } |
15 | 15 | ||
16 | h2 { | 16 | h2 { |
17 | font-size: 120%; | 17 | font-size: 120%; |
18 | font-weight: bold; | 18 | font-weight: bold; |
19 | margin-top: 0em; | 19 | margin-top: 0em; |
20 | margin-bottom: 0.25em; | 20 | margin-bottom: 0.25em; |
21 | } | 21 | } |
22 | 22 | ||
23 | h3 { | 23 | h3 { |
24 | margin-top: 0em; | 24 | margin-top: 0em; |
25 | font-size: 100%; | 25 | font-size: 100%; |
26 | font-weight: normal; | 26 | font-weight: normal; |
27 | } | 27 | } |
28 | 28 | ||
29 | h4 { | 29 | h4 { |
30 | margin-top: 1.5em; | 30 | margin-top: 1.5em; |
31 | margin-bottom: 0.1em; | 31 | margin-bottom: 0.1em; |
32 | font-size: 100%; | 32 | font-size: 100%; |
33 | font-weight: bold; | 33 | font-weight: bold; |
34 | } | 34 | } |
35 | 35 | ||
36 | a { | 36 | a { |
37 | color: blue; | 37 | color: blue; |
38 | text-decoration: none; | 38 | text-decoration: none; |
39 | } | 39 | } |
40 | 40 | ||
41 | a:hover { | 41 | a:hover { |
42 | text-decoration: underline; | 42 | text-decoration: underline; |
43 | } | 43 | } |
44 | 44 | ||
45 | table.list { | 45 | table.list { |
46 | border: none; | 46 | border: none; |
47 | border-collapse: collapse; | 47 | border-collapse: collapse; |
48 | } | 48 | } |
49 | 49 | ||
50 | table.list tr { | 50 | table.list tr { |
51 | background: white; | 51 | background: white; |
52 | } | 52 | } |
53 | 53 | ||
54 | table.list tr:hover { | 54 | table.list tr:hover { |
55 | background: #eee; | 55 | background: #eee; |
56 | } | 56 | } |
57 | 57 | ||
58 | table.list tr.nohover:hover { | 58 | table.list tr.nohover:hover { |
59 | background: white; | 59 | background: white; |
60 | } | 60 | } |
61 | 61 | ||
62 | table.list th { | 62 | table.list th { |
63 | font-weight: normal; | 63 | font-weight: normal; |
64 | border-bottom: solid 1px #777; | 64 | border-bottom: solid 1px #777; |
65 | padding: 0.1em 0.5em 0.1em 0.5em; | 65 | padding: 0.1em 0.5em 0.1em 0.5em; |
66 | vertical-align: baseline; | 66 | vertical-align: baseline; |
67 | } | 67 | } |
68 | 68 | ||
69 | table.list td { | 69 | table.list td { |
70 | border: none; | 70 | border: none; |
71 | padding: 0.1em 0.5em 0.1em 0.5em; | 71 | padding: 0.1em 0.5em 0.1em 0.5em; |
72 | } | 72 | } |
73 | 73 | ||
74 | img { | 74 | img { |
75 | border: none; | 75 | border: none; |
76 | } | 76 | } |
77 | 77 | ||
78 | table#layout { | 78 | table#layout { |
79 | width: 100%; | 79 | width: 100%; |
80 | border-collapse: collapse; | 80 | border-collapse: collapse; |
81 | margin: 0px; | 81 | margin: 0px; |
82 | } | 82 | } |
83 | 83 | ||
84 | td#header, td#logo { | 84 | td#header, td#logo { |
85 | color: #666; | 85 | color: #666; |
86 | background-color: #ddd; | 86 | background-color: #ddd; |
87 | border-bottom: solid 1px #000; | 87 | border-bottom: solid 1px #000; |
88 | } | 88 | } |
89 | 89 | ||
90 | td#header { | 90 | td#header { |
91 | font-size: 150%; | 91 | font-size: 150%; |
92 | font-weight: bold; | 92 | font-weight: bold; |
93 | padding: 0.2em 0.5em; | 93 | padding: 0.2em 0.5em; |
94 | vertical-align: text-bottom; | 94 | vertical-align: text-bottom; |
95 | } | 95 | } |
96 | 96 | ||
97 | td#logo { | 97 | td#logo { |
98 | text-align: right; | 98 | text-align: right; |
99 | vertical-align: middle; | 99 | vertical-align: middle; |
100 | padding-right: 0.5em; | 100 | padding-right: 0.5em; |
101 | } | 101 | } |
102 | 102 | ||
103 | td#crumb, td#search { | 103 | td#crumb, td#search { |
104 | color: #ccc; | 104 | color: #ccc; |
105 | border-top: solid 3px #555; | 105 | border-top: solid 3px #555; |
106 | background-color: #666; | 106 | background-color: #666; |
107 | border-bottom: solid 1px #333; | 107 | border-bottom: solid 1px #333; |
108 | padding: 2px 1em; | 108 | padding: 2px 1em; |
109 | } | 109 | } |
110 | 110 | ||
111 | td#crumb { | 111 | td#crumb { |
112 | font-weight: bold; | 112 | font-weight: bold; |
113 | } | 113 | } |
114 | 114 | ||
115 | td#crumb a { | 115 | td#crumb a { |
116 | color: #ccc; | 116 | color: #ccc; |
117 | } | 117 | } |
118 | 118 | ||
119 | td#crumb a:hover { | 119 | td#crumb a:hover { |
120 | color: #eee; | 120 | color: #eee; |
121 | } | 121 | } |
122 | 122 | ||
123 | td#search { | 123 | td#search { |
124 | text-align: right; | 124 | text-align: right; |
125 | vertical-align: center; | 125 | vertical-align: center; |
126 | padding-right: 0.5em; | 126 | padding-right: 0.5em; |
127 | } | 127 | } |
128 | 128 | ||
129 | td#search form { | 129 | td#search form { |
130 | margin: 0px; | 130 | margin: 0px; |
131 | padding: 0px; | 131 | padding: 0px; |
132 | } | 132 | } |
133 | 133 | ||
134 | td#search input { | 134 | td#search input { |
135 | font-size: 9pt; | 135 | font-size: 9pt; |
136 | padding: 0px; | 136 | padding: 0px; |
137 | width: 10em; | 137 | width: 10em; |
138 | border: solid 1px #333; | 138 | border: solid 1px #333; |
139 | color: #333; | 139 | color: #333; |
140 | background-color: #fff; | 140 | background-color: #fff; |
141 | } | 141 | } |
142 | 142 | ||
143 | td#summary { | 143 | td#summary { |
144 | vertical-align: top; | 144 | vertical-align: top; |
145 | padding-bottom: 1em; | 145 | padding-bottom: 1em; |
146 | } | 146 | } |
147 | 147 | ||
148 | td#archivelist { | 148 | td#archivelist { |
149 | padding-bottom: 1em; | 149 | padding-bottom: 1em; |
150 | } | 150 | } |
151 | 151 | ||
152 | td#archivelist table { | 152 | td#archivelist table { |
153 | float: right; | 153 | float: right; |
154 | border-collapse: collapse; | 154 | border-collapse: collapse; |
155 | border: solid 1px #777; | 155 | border: solid 1px #777; |
156 | } | 156 | } |
157 | 157 | ||
158 | td#archivelist table th { | 158 | td#archivelist table th { |
159 | background-color: #ccc; | 159 | background-color: #ccc; |
160 | } | 160 | } |
161 | 161 | ||
162 | td#content { | 162 | td#content { |
163 | padding: 1em 0.5em; | 163 | padding: 1em 0.5em; |
164 | } | 164 | } |
165 | 165 | ||
166 | div#blob { | 166 | div#blob { |
167 | border: solid 1px black; | 167 | border: solid 1px black; |
168 | } | 168 | } |
169 | 169 | ||
170 | div.error { | 170 | div.error { |
171 | color: red; | 171 | color: red; |
172 | font-weight: bold; | 172 | font-weight: bold; |
173 | margin: 1em 2em; | 173 | margin: 1em 2em; |
174 | } | 174 | } |
175 | 175 | ||
176 | td.ls-blob, td.ls-dir, td.ls-mod { | 176 | td.ls-blob, td.ls-dir, td.ls-mod { |
177 | font-family: monospace; | 177 | font-family: monospace; |
178 | } | 178 | } |
179 | 179 | ||
180 | div.ls-dir a { | 180 | div.ls-dir a { |
181 | font-weight: bold; | 181 | font-weight: bold; |
182 | } | 182 | } |
183 | 183 | ||
184 | th.filesize, td.filesize { | 184 | th.filesize, td.filesize { |
185 | text-align: right; | 185 | text-align: right; |
186 | } | 186 | } |
187 | 187 | ||
188 | td.filesize { | 188 | td.filesize { |
189 | font-family: monospace; | 189 | font-family: monospace; |
190 | } | 190 | } |
191 | 191 | ||
192 | td.links { | 192 | td.links { |
193 | font-size: 80%; | 193 | font-size: 80%; |
194 | padding-left: 2em; | 194 | padding-left: 2em; |
195 | } | 195 | } |
196 | 196 | ||
197 | td.filemode { | 197 | td.filemode { |
198 | font-family: monospace; | 198 | font-family: monospace; |
199 | } | 199 | } |
200 | 200 | ||
201 | td.blob { | 201 | td.blob { |
202 | white-space: pre; | 202 | white-space: pre; |
203 | font-family: monospace; | 203 | font-family: monospace; |
204 | background-color: white; | 204 | background-color: white; |
205 | } | 205 | } |
206 | 206 | ||
207 | table.nowrap td { | 207 | table.nowrap td { |
208 | white-space: nowrap; | 208 | white-space: nowrap; |
209 | } | 209 | } |
210 | 210 | ||
211 | table.commit-info { | 211 | table.commit-info { |
212 | border-collapse: collapse; | 212 | border-collapse: collapse; |
213 | margin-top: 1.5em; | 213 | margin-top: 1.5em; |
214 | } | 214 | } |
215 | 215 | ||
216 | table.commit-info th { | 216 | table.commit-info th { |
217 | text-align: left; | 217 | text-align: left; |
218 | font-weight: normal; | 218 | font-weight: normal; |
219 | padding: 0.1em 1em 0.1em 0.1em; | 219 | padding: 0.1em 1em 0.1em 0.1em; |
220 | } | 220 | } |
221 | 221 | ||
222 | table.commit-info td { | 222 | table.commit-info td { |
223 | font-weight: normal; | 223 | font-weight: normal; |
224 | padding: 0.1em 1em 0.1em 0.1em; | 224 | padding: 0.1em 1em 0.1em 0.1em; |
225 | } | 225 | } |
226 | 226 | ||
227 | div.commit-subject { | 227 | div.commit-subject { |
228 | font-weight: bold; | 228 | font-weight: bold; |
229 | font-size: 125%; | 229 | font-size: 125%; |
230 | margin: 1.5em 0em 0.5em 0em; | 230 | margin: 1.5em 0em 0.5em 0em; |
231 | padding: 0em; | 231 | padding: 0em; |
232 | } | 232 | } |
233 | 233 | ||
234 | div.commit-msg { | 234 | div.commit-msg { |
235 | white-space: pre; | 235 | white-space: pre; |
236 | font-family: monospace; | 236 | font-family: monospace; |
237 | } | 237 | } |
238 | 238 | ||
239 | table.diffstat { | 239 | table.diffstat { |
240 | border-collapse: collapse; | 240 | border-collapse: collapse; |
241 | margin-top: 1.5em; | 241 | margin-top: 1.5em; |
242 | width: 100%; | 242 | width: 100%; |
243 | border: solid 1px #aaa; | 243 | border: solid 1px #aaa; |
244 | background-color: #eee; | 244 | background-color: #eee; |
245 | } | 245 | } |
246 | 246 | ||
247 | table.diffstat tr:hover { | 247 | table.diffstat tr:hover { |
248 | background-color: #ccc; | 248 | background-color: #ccc; |
249 | } | 249 | } |
250 | 250 | ||
251 | table.diffstat th { | 251 | table.diffstat th { |
252 | font-weight: normal; | 252 | font-weight: normal; |
253 | text-align: left; | 253 | text-align: left; |
254 | text-decoration: underline; | 254 | text-decoration: underline; |
255 | padding: 0.1em 1em 0.1em 0.1em; | 255 | padding: 0.1em 1em 0.1em 0.1em; |
256 | font-size: 100%; | 256 | font-size: 100%; |
257 | } | 257 | } |
258 | 258 | ||
259 | table.diffstat td { | 259 | table.diffstat td { |
260 | padding: 0.2em 0.2em 0.1em 0.1em; | 260 | padding: 0.2em 0.2em 0.1em 0.1em; |
261 | font-size: 100%; | 261 | font-size: 100%; |
262 | border: none; | 262 | border: none; |
263 | } | 263 | } |
264 | 264 | ||
265 | table.diffstat td span.modechange { | 265 | table.diffstat td span.modechange { |
266 | padding-left: 1em; | 266 | padding-left: 1em; |
267 | color: red; | 267 | color: red; |
268 | } | 268 | } |
269 | 269 | ||
270 | table.diffstat td.add a { | 270 | table.diffstat td.add a { |
271 | color: green; | 271 | color: green; |
272 | } | 272 | } |
273 | 273 | ||
274 | table.diffstat td.del a { | 274 | table.diffstat td.del a { |
275 | color: red; | 275 | color: red; |
276 | } | 276 | } |
277 | 277 | ||
278 | table.diffstat td.upd a { | 278 | table.diffstat td.upd a { |
279 | color: blue; | 279 | color: blue; |
280 | } | 280 | } |
281 | 281 | ||
282 | table.diffstat td.graph { | 282 | table.diffstat td.graph { |
283 | width: 75%; | 283 | width: 75%; |
284 | vertical-align: center; | 284 | vertical-align: center; |
285 | } | 285 | } |
286 | 286 | ||
287 | table.diffstat td.graph img { | 287 | table.diffstat td.graph img { |
288 | border: none; | 288 | border: none; |
289 | height: 8pt; | 289 | height: 8pt; |
290 | } | 290 | } |
291 | 291 | ||
292 | div.diffstat-summary { | 292 | div.diffstat-summary { |
293 | color: #888; | 293 | color: #888; |
294 | padding-top: 0.5em; | 294 | padding-top: 0.5em; |
295 | } | 295 | } |
296 | 296 | ||
297 | table.diff th { | ||
298 | padding: 1em 0em 0.1em 0.1em; | ||
299 | text-align: left; | ||
300 | } | ||
301 | |||
302 | table.diff td { | 297 | table.diff td { |
303 | border: solid 1px black; | ||
304 | font-family: monospace; | 298 | font-family: monospace; |
305 | white-space: pre; | 299 | white-space: pre; |
306 | } | 300 | } |
307 | 301 | ||
302 | table.diff td div.head { | ||
303 | font-weight: bold; | ||
304 | padding-top: 1em; | ||
305 | } | ||
306 | |||
308 | table.diff td div.hunk { | 307 | table.diff td div.hunk { |
309 | background: #ccc; | 308 | color: #009; |
310 | } | 309 | } |
311 | 310 | ||
312 | table.diff td div.add { | 311 | table.diff td div.add { |
313 | color: green; | 312 | color: green; |
314 | } | 313 | } |
315 | 314 | ||
316 | table.diff td div.del { | 315 | table.diff td div.del { |
317 | color: red; | 316 | color: red; |
318 | } | 317 | } |
319 | 318 | ||
320 | .sha1 { | 319 | .sha1 { |
321 | font-family: courier; | 320 | font-family: courier; |
322 | font-size: 90%; | 321 | font-size: 90%; |
323 | } | 322 | } |
324 | 323 | ||
325 | .left { | 324 | .left { |
326 | text-align: left; | 325 | text-align: left; |
327 | } | 326 | } |
328 | 327 | ||
329 | .right { | 328 | .right { |
330 | text-align: right; | 329 | text-align: right; |
331 | } | 330 | } |
@@ -1,82 +1,102 @@ | |||
1 | /* ui-diff.c: show diff between two blobs | 1 | /* ui-diff.c: show diff between two blobs |
2 | * | 2 | * |
3 | * Copyright (C) 2006 Lars Hjemli | 3 | * Copyright (C) 2006 Lars Hjemli |
4 | * | 4 | * |
5 | * Licensed under GNU General Public License v2 | 5 | * Licensed under GNU General Public License v2 |
6 | * (see COPYING for full license text) | 6 | * (see COPYING for full license text) |
7 | */ | 7 | */ |
8 | 8 | ||
9 | #include "cgit.h" | 9 | #include "cgit.h" |
10 | 10 | ||
11 | 11 | ||
12 | /* | 12 | /* |
13 | * print a single line returned from xdiff | 13 | * print a single line returned from xdiff |
14 | */ | 14 | */ |
15 | static void print_line(char *line, int len) | 15 | static void print_line(char *line, int len) |
16 | { | 16 | { |
17 | char *class = "ctx"; | 17 | char *class = "ctx"; |
18 | char c = line[len-1]; | 18 | char c = line[len-1]; |
19 | 19 | ||
20 | if (line[0] == '+') | 20 | if (line[0] == '+') |
21 | class = "add"; | 21 | class = "add"; |
22 | else if (line[0] == '-') | 22 | else if (line[0] == '-') |
23 | class = "del"; | 23 | class = "del"; |
24 | else if (line[0] == '@') | 24 | else if (line[0] == '@') |
25 | class = "hunk"; | 25 | class = "hunk"; |
26 | 26 | ||
27 | htmlf("<div class='%s'>", class); | 27 | htmlf("<div class='%s'>", class); |
28 | line[len-1] = '\0'; | 28 | line[len-1] = '\0'; |
29 | html_txt(line); | 29 | html_txt(line); |
30 | html("</div>"); | 30 | html("</div>"); |
31 | line[len-1] = c; | 31 | line[len-1] = c; |
32 | } | 32 | } |
33 | 33 | ||
34 | static void filepair_cb(struct diff_filepair *pair) | 34 | static void header(unsigned char *sha1, char *path1, |
35 | unsigned char *sha2, char *path2) | ||
35 | { | 36 | { |
36 | html("<tr><th>"); | 37 | char *abbrev1, *abbrev2; |
37 | html_txt(pair->two->path); | 38 | |
38 | html("</th></tr>"); | ||
39 | html("<tr><td>"); | 39 | html("<tr><td>"); |
40 | html("<div class='head'>"); | ||
41 | html("diff --git a/"); | ||
42 | html_txt(path1); | ||
43 | html(" b/"); | ||
44 | html_txt(path2); | ||
45 | abbrev1 = xstrdup(find_unique_abbrev(sha1, DEFAULT_ABBREV)); | ||
46 | abbrev2 = xstrdup(find_unique_abbrev(sha2, DEFAULT_ABBREV)); | ||
47 | htmlf("\nindex %s..%s", abbrev1, abbrev2); | ||
48 | free(abbrev1); | ||
49 | free(abbrev2); | ||
50 | html("\n--- a/"); | ||
51 | html_txt(path1); | ||
52 | html("\n+++ b/"); | ||
53 | html_txt(path2); | ||
54 | html("</div>"); | ||
55 | } | ||
56 | |||
57 | static void filepair_cb(struct diff_filepair *pair) | ||
58 | { | ||
59 | header(pair->one->sha1, pair->one->path, | ||
60 | pair->two->sha1, pair->two->path); | ||
40 | if (cgit_diff_files(pair->one->sha1, pair->two->sha1, print_line)) | 61 | if (cgit_diff_files(pair->one->sha1, pair->two->sha1, print_line)) |
41 | cgit_print_error("Error running diff"); | 62 | cgit_print_error("Error running diff"); |
42 | html("</tr></td>"); | 63 | html("</tr></td>"); |
43 | } | 64 | } |
44 | 65 | ||
45 | void cgit_print_diff(const char *old_hex, const char *new_hex, char *path) | 66 | void cgit_print_diff(const char *old_hex, const char *new_hex, char *path) |
46 | { | 67 | { |
47 | unsigned char sha1[20], sha2[20]; | 68 | unsigned char sha1[20], sha2[20]; |
48 | enum object_type type; | 69 | enum object_type type; |
49 | unsigned long size; | 70 | unsigned long size; |
50 | 71 | ||
51 | get_sha1(old_hex, sha1); | 72 | get_sha1(old_hex, sha1); |
52 | get_sha1(new_hex, sha2); | 73 | get_sha1(new_hex, sha2); |
53 | 74 | ||
54 | type = sha1_object_info(sha1, &size); | 75 | type = sha1_object_info(sha1, &size); |
55 | if (type == OBJ_BAD) { | 76 | if (type == OBJ_BAD) { |
56 | type = sha1_object_info(sha2, &size); | 77 | type = sha1_object_info(sha2, &size); |
57 | if (type == OBJ_BAD) { | 78 | if (type == OBJ_BAD) { |
58 | cgit_print_error(fmt("Bad object names: %s, %s", old_hex, new_hex)); | 79 | cgit_print_error(fmt("Bad object names: %s, %s", old_hex, new_hex)); |
59 | return; | 80 | return; |
60 | } | 81 | } |
61 | } | 82 | } |
62 | 83 | ||
63 | html("<table class='diff'>"); | 84 | html("<table class='diff'>"); |
64 | switch(type) { | 85 | switch(type) { |
65 | case OBJ_BLOB: | 86 | case OBJ_BLOB: |
66 | if (path) | ||
67 | htmlf("<tr><th>%s</th></tr>", path); | ||
68 | html("<tr><td>"); | 87 | html("<tr><td>"); |
88 | header(sha1, path, sha2, path); | ||
69 | if (cgit_diff_files(sha1, sha2, print_line)) | 89 | if (cgit_diff_files(sha1, sha2, print_line)) |
70 | cgit_print_error("Error running diff"); | 90 | cgit_print_error("Error running diff"); |
71 | html("</tr></td>"); | 91 | html("</tr></td>"); |
72 | break; | 92 | break; |
73 | case OBJ_TREE: | 93 | case OBJ_TREE: |
74 | cgit_diff_tree(sha1, sha2, filepair_cb); | 94 | cgit_diff_tree(sha1, sha2, filepair_cb); |
75 | break; | 95 | break; |
76 | default: | 96 | default: |
77 | cgit_print_error(fmt("Unhandled object type: %s", | 97 | cgit_print_error(fmt("Unhandled object type: %s", |
78 | typename(type))); | 98 | typename(type))); |
79 | break; | 99 | break; |
80 | } | 100 | } |
81 | html("</td></tr></table>"); | 101 | html("</td></tr></table>"); |
82 | } | 102 | } |