Skip to content

Commit 215f300

Browse files
jfcherngjfcherng
committed
Change diff table block separator rendering
Signed-off-by: Jack Cherng <jfcherng@gmail.com>
1 parent 08f3cf7 commit 215f300

File tree

5 files changed

+170
-29
lines changed

5 files changed

+170
-29
lines changed

‎example/demo.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<title>jfcherng/php-diff - Examples</title>
6-
<link href="./styles.css" rel="stylesheet" type="text/css" />
6+
<link href="./diff-table.css" rel="stylesheet" type="text/css" />
77
</head>
88
<body>
99
<?php

‎example/styles.css‎ renamed to ‎example/diff-table.css‎

Lines changed: 29 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,101 @@
1-
@charset "UTF-8";
2-
1+
/**
2+
* compiled by https://www.sassmeister.com with
3+
*
4+
* - Sass v3.4.25
5+
*/
36
.diff {
47
border-collapse: collapse;
58
border-spacing: 0;
69
border: 1px solid #000;
710
color: #000;
811
empty-cells: show;
9-
font-family: consolas;
12+
font-family: consolas, pmingliu, simhei;
1013
font-size: 13px;
1114
width: 100%;
1215
word-break: break-all;
1316
}
14-
1517
.diff th {
1618
font-weight: 700;
1719
}
18-
1920
.diff td,
2021
.diff th {
2122
border-collapse: separate;
2223
border: none;
2324
padding: 1px 2px;
2425
background: #fff;
2526
}
26-
2727
.diff td a,
2828
.diff th a {
2929
color: #000;
3030
cursor: inherit;
3131
pointer-events: none;
3232
}
33-
3433
.diff thead th {
3534
background: #aaa;
3635
border-bottom: 1px solid #000;
3736
padding: 4px;
3837
text-align: left;
3938
}
40-
39+
.diff tbody.skipped {
40+
border-top: 1px solid #000;
41+
}
42+
.diff tbody.skipped td,
43+
.diff tbody.skipped th {
44+
display: none;
45+
}
4146
.diff tbody th {
4247
background: #ccc;
4348
border-right: 1px solid #000;
4449
text-align: right;
4550
vertical-align: top;
4651
width: 4em;
4752
}
48-
4953
.diff tbody th.sign {
5054
background: #fff;
5155
border-right: none;
5256
padding: 1px 0;
5357
text-align: center;
5458
width: 1em;
5559
}
56-
5760
.diff tbody th.sign.del {
5861
background: #fbe1e1;
5962
}
60-
6163
.diff tbody th.sign.ins {
6264
background: #e1fbe1;
6365
}
64-
6566
.diff.diff-html {
6667
white-space: pre-wrap;
6768
}
68-
69+
.diff.diff-html .change.change-eq .old,
70+
.diff.diff-html .change.change-eq .new {
71+
background: #fff;
72+
}
6973
.diff.diff-html .change .old {
7074
background: #fbe1e1;
7175
}
72-
7376
.diff.diff-html .change .new {
7477
background: #e1fbe1;
7578
}
76-
77-
.diff.diff-html .change.change-eq .old,
78-
.diff.diff-html .change.change-eq .new {
79-
background: #fff;
80-
}
81-
8279
.diff.diff-html .change ins,
8380
.diff.diff-html .change del {
8481
font-weight: 700;
8582
text-decoration: none;
8683
}
87-
8884
.diff.diff-html .change ins {
8985
background: #8e8;
9086
}
91-
9287
.diff.diff-html .change del {
9388
background: #e88;
9489
}
90+
.diff.diff-html .edit-container:hover {
91+
box-shadow: 0 0 8px 2px #888;
92+
position: relative;
93+
z-index: 5;
94+
}
95+
.diff.diff-html .edit-container.edited {
96+
background: #e1e1fb;
97+
}
98+
.diff.diff-html .edit {
99+
display: block;
100+
outline: none;
101+
}

‎example/diff-table.scss‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
@import "compass/css3";
2+
3+
.diff {
4+
$bgcolor: #fff;
5+
$bgcolor-edit-highlight: #88e;
6+
$bgcolor-insert-highlight: #8e8;
7+
$bgcolor-delete-highlight: #e88;
8+
9+
$bgcolor-edit: tint($bgcolor-edit-highlight, 75%);
10+
$bgcolor-insert: tint($bgcolor-insert-highlight, 75%);
11+
$bgcolor-delete: tint($bgcolor-delete-highlight, 75%);
12+
13+
$table-head-color: #aaa;
14+
$table-sidebar-color: #ccc;
15+
$border-color: #000;
16+
17+
border-collapse: collapse;
18+
border-spacing: 0;
19+
border: 1px solid $border-color;
20+
color: #000;
21+
empty-cells: show;
22+
font-family: consolas, pmingliu, simhei;
23+
font-size: 13px;
24+
width: 100%;
25+
word-break: break-all;
26+
27+
th {
28+
font-weight: 700;
29+
}
30+
31+
td,
32+
th {
33+
border-collapse: separate;
34+
border: none;
35+
padding: 1px 2px;
36+
background: $bgcolor;
37+
38+
a {
39+
color: #000;
40+
cursor: inherit;
41+
pointer-events: none;
42+
}
43+
}
44+
45+
thead th {
46+
background: $table-head-color;
47+
border-bottom: 1px solid $border-color;
48+
padding: 4px;
49+
text-align: left;
50+
}
51+
52+
tbody {
53+
&.skipped {
54+
border-top: 1px solid #000;
55+
56+
td,
57+
th {
58+
display: none;
59+
}
60+
}
61+
62+
th {
63+
background: $table-sidebar-color;
64+
border-right: 1px solid $border-color;
65+
text-align: right;
66+
vertical-align: top;
67+
width: 4em;
68+
69+
&.sign {
70+
background: $bgcolor;
71+
border-right: none;
72+
padding: 1px 0;
73+
text-align: center;
74+
width: 1em;
75+
76+
&.del {
77+
background: $bgcolor-delete;
78+
}
79+
80+
&.ins {
81+
background: $bgcolor-insert;
82+
}
83+
}
84+
}
85+
}
86+
87+
&.diff-html {
88+
white-space: pre-wrap;
89+
90+
.change {
91+
&.change-eq {
92+
.old,
93+
.new {
94+
background: $bgcolor;
95+
}
96+
}
97+
98+
.old {
99+
background: $bgcolor-delete;
100+
}
101+
102+
.new {
103+
background: $bgcolor-insert;
104+
}
105+
106+
ins,
107+
del {
108+
font-weight: 700;
109+
text-decoration: none;
110+
}
111+
112+
ins {
113+
background: $bgcolor-insert-highlight;
114+
}
115+
116+
del {
117+
background: $bgcolor-delete-highlight;
118+
}
119+
}
120+
121+
.edit-container {
122+
&:hover {
123+
box-shadow: 0 0 8px 2px #888;
124+
position: relative;
125+
z-index: 5;
126+
}
127+
128+
&.edited {
129+
background: $bgcolor-edit;
130+
}
131+
}
132+
133+
.edit {
134+
display: block;
135+
outline: none;
136+
}
137+
}
138+
}

‎src/Renderer/Html/Inline.php‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,10 +74,7 @@ protected function renderTableSeparateBlock(): string
7474
return
7575
'<tbody class="skipped">' .
7676
'<tr>' .
77-
'<th>…</th>' .
78-
'<th>…</th>' .
79-
'<th class="sign"></th>' .
80-
'<td></td>' .
77+
'<td colspan="4"></td>' .
8178
'</tr>' .
8279
'</tbody>';
8380
}

‎src/Renderer/Html/SideBySide.php‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,7 @@ protected function renderTableSeparateBlock(): string
7272
return
7373
'<tbody class="skipped">' .
7474
'<tr>' .
75-
'<th>…</th><td></td>' .
76-
'<th>…</th><td></td>' .
75+
'<td colspan="4"></td>' .
7776
'</tr>' .
7877
'</tbody>';
7978
}

0 commit comments

Comments
 (0)