* Modified tree control down arrows to have some blank space at the top, so as to better align with the right arrows.
* Put all expanders into <div>s, which are then wrapped in <td>s. This makes for better vertical centering, especially in IE. * Modified Wiki.js to account for expanders now having yet another parent. * Put note tree instructions in a <tr><td> instead of in a <div>, as <div>s alone don't belong in tables.
This commit is contained in:
parent
43dea71039
commit
dbc83be740
|
@ -596,40 +596,38 @@ img {
|
||||||
padding: 0.25em 0.25em 0.25em 0;
|
padding: 0.25em 0.25em 0.25em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#note_tree_area td {
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
.tree_expander {
|
.tree_expander {
|
||||||
float: left;
|
|
||||||
width: 11px;
|
width: 11px;
|
||||||
height: 11px;
|
height: 1.5em;
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
margin-top: 0.5em;
|
background: url(/static/images/tree_arrow.png) no-repeat center center;
|
||||||
background: url(/static/images/tree_arrow.png) no-repeat center top;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tree_expander:hover {
|
.tree_expander:hover {
|
||||||
background: url(/static/images/tree_arrow_hover.png) no-repeat center top;
|
background: url(/static/images/tree_arrow_hover.png) no-repeat center center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tree_expander_expanded {
|
.tree_expander_expanded {
|
||||||
float: left;
|
|
||||||
width: 11px;
|
width: 11px;
|
||||||
height: 11px;
|
height: 1em;
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
margin-top: 0.5em;
|
background: url(/static/images/tree_arrow_down.png) no-repeat center center;
|
||||||
background: url(/static/images/tree_arrow_down.png) no-repeat center top;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tree_expander_expanded:hover {
|
.tree_expander_expanded:hover {
|
||||||
background: url(/static/images/tree_arrow_down_hover.png) no-repeat center top;
|
background: url(/static/images/tree_arrow_down_hover.png) no-repeat center center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tree_expander_empty {
|
.tree_expander_empty {
|
||||||
float: left;
|
|
||||||
width: 11px;
|
width: 11px;
|
||||||
height: 11px;
|
height: 1em;
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
margin-top: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#storage_usage_area {
|
#storage_usage_area {
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 232 B After Width: | Height: | Size: 260 B |
Binary file not shown.
Binary file not shown.
Before Width: | Height: | Size: 275 B After Width: | Height: | Size: 302 B |
Binary file not shown.
|
@ -2624,9 +2624,9 @@ Note_tree.prototype.add_root_link = function ( editor ) {
|
||||||
|
|
||||||
// display the tree expander arrow if the given note's editor contains any outgoing links
|
// display the tree expander arrow if the given note's editor contains any outgoing links
|
||||||
if ( LINK_PATTERN.exec( editor.contents() ) )
|
if ( LINK_PATTERN.exec( editor.contents() ) )
|
||||||
var expander = createDOM( "td", { "class": "tree_expander", "id": "note_tree_expander_" + editor.id } );
|
var expander = createDOM( "div", { "class": "tree_expander", "id": "note_tree_expander_" + editor.id } );
|
||||||
else
|
else
|
||||||
var expander = createDOM( "td", { "class": "tree_expander_empty", "id": "note_tree_expander_" + editor.id } );
|
var expander = createDOM( "div", { "class": "tree_expander_empty", "id": "note_tree_expander_" + editor.id } );
|
||||||
|
|
||||||
var link = createDOM( "a", {
|
var link = createDOM( "a", {
|
||||||
"href": "/notebooks/" + this.notebook_id + "?note_id=" + editor.id,
|
"href": "/notebooks/" + this.notebook_id + "?note_id=" + editor.id,
|
||||||
|
@ -2637,7 +2637,7 @@ Note_tree.prototype.add_root_link = function ( editor ) {
|
||||||
appendChildNodes( "note_tree_root_table_body", createDOM(
|
appendChildNodes( "note_tree_root_table_body", createDOM(
|
||||||
"tr",
|
"tr",
|
||||||
{ "id": "note_tree_item_" + editor.id, "class": "note_tree_item" },
|
{ "id": "note_tree_item_" + editor.id, "class": "note_tree_item" },
|
||||||
expander,
|
createDOM( "td", {}, expander ),
|
||||||
createDOM( "td", {}, link )
|
createDOM( "td", {}, link )
|
||||||
) );
|
) );
|
||||||
|
|
||||||
|
@ -2717,7 +2717,7 @@ Note_tree.prototype.expand_collapse_link = function ( event, note_id ) {
|
||||||
if ( hasElementClass( expander, "tree_expander" ) ) {
|
if ( hasElementClass( expander, "tree_expander" ) ) {
|
||||||
// first check if the expander is for a link to a parent/grandparent/etc. if so, just highlight
|
// first check if the expander is for a link to a parent/grandparent/etc. if so, just highlight
|
||||||
// the containing table instead of performing an expansion
|
// the containing table instead of performing an expansion
|
||||||
var parent_node = expander.parentNode;
|
var parent_node = expander.parentNode.parentNode;
|
||||||
while ( !hasElementClass( parent_node, "note_tree_root_table" ) ) {
|
while ( !hasElementClass( parent_node, "note_tree_root_table" ) ) {
|
||||||
parent_node = parent_node.parentNode;
|
parent_node = parent_node.parentNode;
|
||||||
if ( !parent_node ) break;
|
if ( !parent_node ) break;
|
||||||
|
@ -2737,7 +2737,7 @@ Note_tree.prototype.expand_collapse_link = function ( event, note_id ) {
|
||||||
);
|
);
|
||||||
|
|
||||||
swapElementClass( expander, "tree_expander", "tree_expander_expanded" );
|
swapElementClass( expander, "tree_expander", "tree_expander_expanded" );
|
||||||
var link = getFirstElementByTagAndClassName( "a", null, expander.parentNode );
|
var link = getFirstElementByTagAndClassName( "a", null, expander.parentNode.parentNode );
|
||||||
insertSiblingNodesAfter( link, children_area );
|
insertSiblingNodesAfter( link, children_area );
|
||||||
|
|
||||||
var self = this;
|
var self = this;
|
||||||
|
@ -2755,7 +2755,7 @@ Note_tree.prototype.expand_collapse_link = function ( event, note_id ) {
|
||||||
// if it's expanded, collapse it
|
// if it's expanded, collapse it
|
||||||
if ( hasElementClass( expander, "tree_expander_expanded" ) ) {
|
if ( hasElementClass( expander, "tree_expander_expanded" ) ) {
|
||||||
swapElementClass( expander, "tree_expander_expanded", "tree_expander" );
|
swapElementClass( expander, "tree_expander_expanded", "tree_expander" );
|
||||||
var children = getFirstElementByTagAndClassName( "div", "note_tree_children_area", expander.parentNode );
|
var children = getFirstElementByTagAndClassName( "div", "note_tree_children_area", expander.parentNode.parentNode );
|
||||||
if ( children )
|
if ( children )
|
||||||
removeElement( children );
|
removeElement( children );
|
||||||
}
|
}
|
||||||
|
@ -2780,7 +2780,7 @@ Note_tree.prototype.display_child_links = function ( result, link, children_area
|
||||||
for ( var i in child_links ) {
|
for ( var i in child_links ) {
|
||||||
var child_link = child_links[ i ];
|
var child_link = child_links[ i ];
|
||||||
connect( child_link, "onclick", function ( event ) { self.link_clicked( event ); } );
|
connect( child_link, "onclick", function ( event ) { self.link_clicked( event ); } );
|
||||||
var expander = getFirstElementByTagAndClassName( "td", "tree_expander", child_link.parentNode.parentNode );
|
var expander = getFirstElementByTagAndClassName( "div", "tree_expander", child_link.parentNode.parentNode );
|
||||||
|
|
||||||
if ( expander ) {
|
if ( expander ) {
|
||||||
var note_id = parse_query( child_link )[ "note_id" ];
|
var note_id = parse_query( child_link )[ "note_id" ];
|
||||||
|
@ -2796,15 +2796,15 @@ Note_tree.prototype.display_child_links = function ( result, link, children_area
|
||||||
if ( child_links.length == 0 ) {
|
if ( child_links.length == 0 ) {
|
||||||
if ( children_area )
|
if ( children_area )
|
||||||
removeElement( children_area );
|
removeElement( children_area );
|
||||||
var expander = getFirstElementByTagAndClassName( "td", "tree_expander", link.parentNode.parentNode );
|
var expander = getFirstElementByTagAndClassName( "div", "tree_expander", link.parentNode.parentNode );
|
||||||
if ( expander && link.parentNode.parentNode == expander.parentNode ) {
|
if ( expander && link.parentNode.parentNode == expander.parentNode.parentNode ) {
|
||||||
swapElementClass( expander, "tree_expander", "tree_expander_empty" );
|
swapElementClass( expander, "tree_expander", "tree_expander_empty" );
|
||||||
disconnectAll( expander );
|
disconnectAll( expander );
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
expander = getFirstElementByTagAndClassName( "td", "tree_expander_expanded", link.parentNode.parentNode );
|
expander = getFirstElementByTagAndClassName( "div", "tree_expander_expanded", link.parentNode.parentNode );
|
||||||
if ( expander && link.parentNode.parentNode == expander.parentNode ) {
|
if ( expander && link.parentNode.parentNode == expander.parentNode.parentNode ) {
|
||||||
swapElementClass( expander, "tree_expander_expanded", "tree_expander_empty" );
|
swapElementClass( expander, "tree_expander_expanded", "tree_expander_empty" );
|
||||||
disconnectAll( expander );
|
disconnectAll( expander );
|
||||||
return;
|
return;
|
||||||
|
@ -2814,8 +2814,8 @@ Note_tree.prototype.display_child_links = function ( result, link, children_area
|
||||||
}
|
}
|
||||||
|
|
||||||
// if a note without an expander arrow now has children, add an expander arrow for it
|
// if a note without an expander arrow now has children, add an expander arrow for it
|
||||||
var expander = getFirstElementByTagAndClassName( "td", "tree_expander_empty", link.parentNode.parentNode );
|
var expander = getFirstElementByTagAndClassName( "div", "tree_expander_empty", link.parentNode.parentNode );
|
||||||
if ( !expander || link.parentNode.parentNode != expander.parentNode ) return;
|
if ( !expander || link.parentNode.parentNode != expander.parentNode.parentNode ) return;
|
||||||
swapElementClass( expander, "tree_expander_empty", "tree_expander" );
|
swapElementClass( expander, "tree_expander_empty", "tree_expander" );
|
||||||
var note_id = parse_query( link )[ "note_id" ];
|
var note_id = parse_query( link )[ "note_id" ];
|
||||||
disconnectAll( expander );
|
disconnectAll( expander );
|
||||||
|
@ -2876,7 +2876,7 @@ Recent_notes.prototype.add_link = function ( editor ) {
|
||||||
}
|
}
|
||||||
|
|
||||||
// add a new recent note link at the top of the list
|
// add a new recent note link at the top of the list
|
||||||
var expander = createDOM( "td", { "class": "tree_expander_empty", "id": "recent_note_expander_" + editor.id } );
|
var expander = createDOM( "div", { "class": "tree_expander_empty", "id": "recent_note_expander_" + editor.id } );
|
||||||
|
|
||||||
var link = createDOM( "a", {
|
var link = createDOM( "a", {
|
||||||
"href": "/notebooks/" + this.notebook_id + "?note_id=" + editor.id,
|
"href": "/notebooks/" + this.notebook_id + "?note_id=" + editor.id,
|
||||||
|
@ -2887,7 +2887,7 @@ Recent_notes.prototype.add_link = function ( editor ) {
|
||||||
insertSiblingNodesAfter( "recent_notes_top", createDOM(
|
insertSiblingNodesAfter( "recent_notes_top", createDOM(
|
||||||
"tr",
|
"tr",
|
||||||
{ "id": "recent_note_item_" + editor.id, "class": "recent_note_item" },
|
{ "id": "recent_note_item_" + editor.id, "class": "recent_note_item" },
|
||||||
expander,
|
createDOM( "td", {}, expander ),
|
||||||
createDOM( "td", {}, link )
|
createDOM( "td", {}, link )
|
||||||
) );
|
) );
|
||||||
|
|
||||||
|
|
|
@ -25,11 +25,11 @@ class Note_tree_area( Div ):
|
||||||
has_children = ( notebook.name != u"trash" ) and self.LINK_PATTERN.search( note.contents ) or False,
|
has_children = ( notebook.name != u"trash" ) and self.LINK_PATTERN.search( note.contents ) or False,
|
||||||
root_note_id = note.object_id,
|
root_note_id = note.object_id,
|
||||||
) for note in root_notes ],
|
) for note in root_notes ],
|
||||||
Div(
|
Tr( Td(
|
||||||
( notebook.name != u"trash" ) and u'To add a note here, click the "options" tab on a note, then "show on startup".' or None,
|
( notebook.name != u"trash" ) and u'To add a note here, click the "options" tab on a note, then "show on startup".' or None,
|
||||||
id = "note_tree_instructions",
|
id = "note_tree_instructions",
|
||||||
class_ = u"small_text link_area_item" + ( ( len( root_notes ) > 0 ) and u" undisplayed" or u"" ),
|
class_ = u"small_text link_area_item" + ( ( len( root_notes ) > 0 ) and u" undisplayed" or u"" ),
|
||||||
) or None,
|
) ) or None,
|
||||||
tree_id = "note_tree_root_table",
|
tree_id = "note_tree_root_table",
|
||||||
),
|
),
|
||||||
( recent_notes is not None and notebook.name != u"trash" ) and Span(
|
( recent_notes is not None and notebook.name != u"trash" ) and Span(
|
||||||
|
@ -64,8 +64,8 @@ class Note_tree_area( Div ):
|
||||||
|
|
||||||
return Tr(
|
return Tr(
|
||||||
has_children and \
|
has_children and \
|
||||||
Td( id = root_note_id and u"%s_expander_%s" % ( base_name, root_note_id ) or None, class_ = u"tree_expander" ) or
|
Td( Div( id = root_note_id and u"%s_expander_%s" % ( base_name, root_note_id ) or None, class_ = u"tree_expander" ) ) or
|
||||||
Td( id = root_note_id and u"%s_expander_%s" % ( base_name, root_note_id ) or None, class_ = u"tree_expander_empty" ),
|
Td( Div( id = root_note_id and u"%s_expander_%s" % ( base_name, root_note_id ) or None, class_ = u"tree_expander_empty" ) ),
|
||||||
Td(
|
Td(
|
||||||
u"<a %s%s%s class=%s>%s</a>" % (
|
u"<a %s%s%s class=%s>%s</a>" % (
|
||||||
link_attributes,
|
link_attributes,
|
||||||
|
|
Reference in New Issue