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

Reply via email to