Hi all,
First off, I apologize for not getting this done weeks ago like I said I
would. I didn't have the spare time to work on it that I had expected.
I'd also like to apologize for the length of this message, but this is a
pretty big change, so bear with me...
Purpose and Benefits
====================
The purpose of the graphcss branch is to give skin authors greater
flexibility in styling the timeline graph without requiring Fossil
developers to add support for each specific variation that skin authors
might want (e.g. square vs. circle nodes).
Now, this doesn't mean that skin authors will have total control over
how the graph looks. The new graph-drawing code still contains a number
of assumptions, mainly in regards to how elements are positioned
relative to one another. However, this branch does offer two key
improvements:
1. One or more classes are attached to each graph element for easy
styling with standard CSS.
2. The dimensions of each type of graph element are calculated in the
browser, rather than being hardcoded based on an unalterable default
style. The elements can then be positioned accordingly.
For a demo of a custom graph style made possible by this new code, see
<http://www.joelface.com/graphcss>
Styling Documentation
=====================
So, how can skin authors use this to create new graph styles? As far as
the visible graph elements (nodes, arrows, lines) go, I think it's
pretty self-explanatory from looking at the default CSS (look for the
CSS rules starting with ".tl-"). If you have any questions, though, just
ask. Assuming this branch is deemed acceptable, I'll write more
comprehensive documentation for the website.
There are also a few important CSS classes for things that aren't
actually drawn on the graph but are simply used to adjust the
positioning of the graph and its various elements:
.tl-canvas: Set the left and right margins on this class to give the
desired amount of space between the graph and the adjacent timeline columns.
.tl-rail: Think of rails as invisible vertical lines on which commit
nodes are placed. The more simultaneous branches in a graph, the more
rails required to draw it. Setting the width property on this class
determines the maximum spacing between rails. This spacing is
automatically reduced as the number of rails increases. If you change
the width of commit nodes, you'll probably want to change this value too.
.tl-mergeoffset: A merge line often runs vertically right beside a
primary child line. This class's width property specifies the maximum
spacing between the two. Setting this value to zero will eliminate the
vertical merge lines. Instead, the merge arrow will extend directly off
the primary child line. As with rail width, this is also adjusted
automatically as needed.
.tl-nodemark: In the timeline table, the second cell in each commit row
contains an invisible div with this class. These divs are used to
determine the vertical position of the nodes. By setting the margin-top
property, you can adjust this position.
A few other things to mention: the "timeline-arrowheads" and
"timeline-circle-nodes" options have been removed from the details.txt
skin file, as these effects can now be achieved with standard CSS. The
color-related options remain. Also, the default CSS has been made to
replicate the previous default look, with a few minor exceptions. I have
modified the built-in skins as well, although I expect skin authors will
want to make further changes with the extra possibilities this branch
provides.
Please experiment with this branch and let me know if you find anything
that needs to be fixed. I can't guarantee the fastest response, but I'll
do my best.
Thanks!
_______________________________________________
fossil-dev mailing list
fossil-dev@mailinglists.sqlite.org
http://mailinglists.sqlite.org/cgi-bin/mailman/listinfo/fossil-dev