|
1
|
# Customizing the Timeline Graph |
|
2
|
|
|
3
|
Beginning with version 1.33, Fossil gives users and skin authors significantly |
|
4
|
more control over the look and feel of the timeline graph. |
|
5
|
|
|
6
|
## <a id="basic-style"></a>Basic Style Options |
|
7
|
|
|
8
|
Fossil includes several options for changing the graph's style without having |
|
9
|
to delve into CSS. These can be found in the details.txt file of your skin or |
|
10
|
under Admin/Skins/Details in the web UI. |
|
11
|
|
|
12
|
* **`timeline-arrowheads`** |
|
13
|
|
|
14
|
Set this to `0` to hide arrowheads on primary child lines. |
|
15
|
|
|
16
|
* **`timeline-circle-nodes`** |
|
17
|
|
|
18
|
Set this to `1` to make check-in nodes circular instead of square. |
|
19
|
|
|
20
|
* **`timeline-color-graph-lines`** |
|
21
|
|
|
22
|
Set this to `1` to colorize primary child lines. |
|
23
|
|
|
24
|
* **`white-foreground`** |
|
25
|
|
|
26
|
Set this to `1` if your skin uses white (or any light color) text. |
|
27
|
This tells Fossil to generate darker background colors for branches. |
|
28
|
|
|
29
|
|
|
30
|
## <a id="adv-style"></a>Advanced Styling |
|
31
|
|
|
32
|
If the above options aren't enough for you, it's time to get your hands dirty |
|
33
|
with CSS. To get started, I recommend first copying all the [graph-related CSS |
|
34
|
rules](#default-css) to your stylesheet. Then it's simply a matter of making |
|
35
|
the necessary changes to achieve the look you want. So, next, let's look at the |
|
36
|
various graph elements and what purpose they serve. |
|
37
|
|
|
38
|
Each element used to construct the timeline graph falls into one of two |
|
39
|
categories: visible elements and positioning elements. We'll start with the |
|
40
|
latter, less obvious type. |
|
41
|
|
|
42
|
## <a id="pos-elems"></a>Positioning Elements |
|
43
|
|
|
44
|
These elements aren't intended to be seen. They're only used to help position |
|
45
|
the graph and its visible elements. |
|
46
|
|
|
47
|
* <a id="tl-canvas"></a>**`.tl-canvas`** |
|
48
|
|
|
49
|
Set the left and right margins on this class to give the desired amount |
|
50
|
of space between the graph and its adjacent columns in the timeline. |
|
51
|
|
|
52
|
**Additional Classes** |
|
53
|
|
|
54
|
* `.sel`: See [`.tl-node`](#tl-node) for more information. |
|
55
|
|
|
56
|
* <a id="tl-rail"></a>**`.tl-rail`** |
|
57
|
|
|
58
|
Think of rails as invisible vertical lines on which check-in nodes are |
|
59
|
placed. The more simultaneous branches in a graph, the more rails required |
|
60
|
to draw it. Setting the `width` property on this class determines the |
|
61
|
maximum spacing between rails. This spacing is automatically reduced as |
|
62
|
the number of rails increases. If you change the `width` of `.tl-node` |
|
63
|
elements, you'll probably need to change this value, too. |
|
64
|
|
|
65
|
* <a id="tl-mergeoffset"></a>**`.tl-mergeoffset`** |
|
66
|
|
|
67
|
A merge line often runs vertically right beside a primary child line. This |
|
68
|
class's `width` property specifies the maximum spacing between the two. |
|
69
|
Setting this value to `0` will eliminate the vertical merge lines. |
|
70
|
Instead, the merge arrow will extend directly off the primary child line. |
|
71
|
As with rail spacing, this is also adjusted automatically as needed. |
|
72
|
|
|
73
|
* <a id="tl-nodemark"></a>**`.tl-nodemark`** |
|
74
|
|
|
75
|
In the timeline table, the second cell in each check-in row contains an |
|
76
|
invisible div with this class. These divs are used to determine the |
|
77
|
vertical position of the nodes. By setting the `margin-top` property, |
|
78
|
you can adjust this position. |
|
79
|
|
|
80
|
## <a id="vis-elems"></a>Visible Elements |
|
81
|
|
|
82
|
These are the elements you can actually see on the timeline graph: the nodes, |
|
83
|
arrows, and lines. Each of these elements may also have additional classes |
|
84
|
attached to them, depending on their context. |
|
85
|
|
|
86
|
* <a id="tl-node"></a>**`.tl-node`** |
|
87
|
|
|
88
|
A node exists for each check-in in the timeline. |
|
89
|
|
|
90
|
**Additional Classes** |
|
91
|
|
|
92
|
* `.leaf`: Specifies that the check-in is a leaf (i.e. that it has no |
|
93
|
children in the same branch). |
|
94
|
|
|
95
|
* `.merge`: Specifies that the check-in contains a merge. |
|
96
|
|
|
97
|
* `.sel`: When the user clicks a node to designate it as the beginning |
|
98
|
of a diff, this class is added to both the node itself and the |
|
99
|
[`.tl-canvas`](#tl-canvas) element. The class is removed from both |
|
100
|
elements when the node is clicked again. |
|
101
|
|
|
102
|
* <a id="tl-arrow"></a>**`.tl-arrow`** |
|
103
|
|
|
104
|
Arrows point from parent nodes to their children. Technically, this |
|
105
|
class is just for the arrowhead. The rest of the arrow is composed |
|
106
|
of [`.tl-line`](#tl-line) elements. |
|
107
|
|
|
108
|
There are six additional classes that are used to distinguish the different |
|
109
|
types of arrows. However, only these combinations are valid: |
|
110
|
|
|
111
|
* `.u`: Up arrow that points to a child from its primary parent. |
|
112
|
|
|
113
|
* `.u.sm`: Smaller up arrow, used when there is limited space between |
|
114
|
parent and child nodes. |
|
115
|
|
|
116
|
* `.merge.l` or `.merge.r`: Merge arrow pointing either to the left or |
|
117
|
right. |
|
118
|
|
|
119
|
* `.warp`: A timewarped arrow (always points to the right), used when a |
|
120
|
misconfigured clock makes a check-in appear to have occurred before its |
|
121
|
parent ([example](https://www.sqlite.org/src/timeline?c=2010-09-29&nd)). |
|
122
|
|
|
123
|
* <a id="tl-line"></a>**`.tl-line`** |
|
124
|
|
|
125
|
Along with arrows, lines connect parent and child nodes. Line thickness is |
|
126
|
determined by the `width` property, regardless of whether the line is |
|
127
|
horizontal or vertical. You can also use borders to create special line |
|
128
|
styles. Here's a CSS snippet for making dotted merge lines: |
|
129
|
|
|
130
|
.tl-line.merge { |
|
131
|
width: 0; |
|
132
|
background: transparent; |
|
133
|
border: 0 dotted #000; |
|
134
|
} |
|
135
|
.tl-line.merge.h { |
|
136
|
border-top-width: 1px; |
|
137
|
} |
|
138
|
.tl-line.merge.v { |
|
139
|
border-left-width: 1px; |
|
140
|
} |
|
141
|
|
|
142
|
**Additional Classes** |
|
143
|
|
|
144
|
* `.merge`: A merge line. |
|
145
|
|
|
146
|
* `.h` or `.v`: Horizontal or vertical. |
|
147
|
|
|
148
|
* `.warp`: A timewarped line. |
|
149
|
|
|
150
|
|
|
151
|
## <a id="default-css"></a>Default Timeline Graph CSS |
|
152
|
|
|
153
|
.tl-canvas { |
|
154
|
margin: 0 6px 0 10px; |
|
155
|
} |
|
156
|
.tl-rail { |
|
157
|
width: 18px; |
|
158
|
} |
|
159
|
.tl-mergeoffset { |
|
160
|
width: 2px; |
|
161
|
} |
|
162
|
.tl-nodemark { |
|
163
|
margin-top: 5px; |
|
164
|
} |
|
165
|
.tl-node { |
|
166
|
width: 10px; |
|
167
|
height: 10px; |
|
168
|
border: 1px solid #000; |
|
169
|
background: #fff; |
|
170
|
cursor: pointer; |
|
171
|
} |
|
172
|
.tl-node.leaf:after { |
|
173
|
content: ''; |
|
174
|
position: absolute; |
|
175
|
top: 3px; |
|
176
|
left: 3px; |
|
177
|
width: 4px; |
|
178
|
height: 4px; |
|
179
|
background: #000; |
|
180
|
} |
|
181
|
.tl-node.sel:after { |
|
182
|
content: ''; |
|
183
|
position: absolute; |
|
184
|
top: 2px; |
|
185
|
left: 2px; |
|
186
|
width: 6px; |
|
187
|
height: 6px; |
|
188
|
background: red; |
|
189
|
} |
|
190
|
.tl-arrow { |
|
191
|
width: 0; |
|
192
|
height: 0; |
|
193
|
transform: scale(.999); |
|
194
|
border: 0 solid transparent; |
|
195
|
} |
|
196
|
.tl-arrow.u { |
|
197
|
margin-top: -1px; |
|
198
|
border-width: 0 3px; |
|
199
|
border-bottom: 7px solid #000; |
|
200
|
} |
|
201
|
.tl-arrow.u.sm { |
|
202
|
border-bottom: 5px solid #000; |
|
203
|
} |
|
204
|
.tl-line { |
|
205
|
background: #000; |
|
206
|
width: 2px; |
|
207
|
} |
|
208
|
.tl-arrow.merge { |
|
209
|
height: 1px; |
|
210
|
border-width: 2px 0; |
|
211
|
} |
|
212
|
.tl-arrow.merge.l { |
|
213
|
border-right: 3px solid #000; |
|
214
|
} |
|
215
|
.tl-arrow.merge.r { |
|
216
|
border-left: 3px solid #000; |
|
217
|
} |
|
218
|
.tl-line.merge { |
|
219
|
width: 1px; |
|
220
|
} |
|
221
|
.tl-arrow.warp { |
|
222
|
margin-left: 1px; |
|
223
|
border-width: 3px 0; |
|
224
|
border-left: 7px solid #600000; |
|
225
|
} |
|
226
|
.tl-line.warp { |
|
227
|
background: #600000; |
|
228
|
} |
|
229
|
|