Create "leo fragment" css

[vivainio]

To make leo outline segments look good, we should create a canonical html presentation for it. To put it in jade-like presentation, it could be something like:

.leofragment
  .n.l0
    .h headline for root item
    .b body text
  .n.l1 
     .h headline of child
     .b body text 

Here, "l0" and "l1" are node "levels" that are translated to left margin of the div

[vivainio]

Created a jsbin as "sample" of what it could be like:

http://jsbin.com/azugob/10/

[maphew]

Brian Theado's work might be relevant here, see thread "Approaching Leo" https://groups.google.com/d/msg/leo-editor/YeDYGOwj6Ws/ZLAAt6fGSj0J. I'm not sure what the most refined version is, Edward took a crack at it later I think, but here is the seminal idea:

Here's some lightly test code suitable for an @button node (modulo
possible email line-wrap issues). It just displays both the css and
the html to the log pane. Supports all 16 icon boxes:

@language python
g.es('=============')

basecss = r'''
ul.leo-tree-example {
    background-color: #ffffec;
}
ul.leo-tree-example li {
    background-repeat: no-repeat;
    background-position: 0px 5px;
    padding-left: 27px;
}
li.selected {
    background-color: lightgrey;
}
li.plus {
    list-style-image:
url('https://raw.github.com/leo-editor/leo-editor/master/leo/Icons/plusnode.gif');
}
li.minus {
    list-style-image:
url('https://raw.github.com/leo-editor/leo-editor/master/leo/Icons/minusnode.gif');
}
li.leaf {
    list-style-type: none;
}
'''

boxcss =  [r'''
li.iconbox%02d {
    background-image:
url('https://raw.github.com/leo-editor/leo-editor/master/leo/Icons/box%02d.GIF');
}
''' % (n, n) for n in range(16)]

g.es(basecss + "".join(boxcss))

g.es('----')
def escapeHtml(s):
    return s.replace('&', '&amp;').replace('<', '&lt;').replace('>', '&gt;')
def headlineToHtml(p):
    '''
        Returns html representation (unordered list)
        of the visible portions of the subtree rooted
        at position p. CSS classes corresponding to the
        expansion state and icon box are included in
        each list item. Combined with the proper CSS, the
        result can be made to look similar to leo's tree
        pane.
    '''
    classes = []
    if p.isExpanded():
        classes += ['minus']
    elif p.hasChildren():
        classes += ['plus']
    else:
        classes += ['leaf']
    classes += ['iconbox%02d' % p.computeIcon()]
    html = "<li class='%s'>\n" % " ".join(classes)
    html += escapeHtml(p.h)
    html += "\n</li>\n"
    if p.isExpanded() and p.hasChildren():
        html += "<ul>\n"
        for child in p.children():
            html += headlineToHtml(child)
        html += "\n</ul>\n"
    return html
g.es('<ul class="leo-tree-example">')
g.es(headlineToHtml(p))
g.es('</ul>')