From dbc83be74070c66608fff3ca3df3ac3c92d3b22e Mon Sep 17 00:00:00 2001 From: Dan Helfman Date: Wed, 16 Apr 2008 06:38:19 +0000 Subject: [PATCH] * 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
s, which are then wrapped in 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 instead of in a
, as
s alone don't belong in tables. --- static/css/style.css | 24 +++++++++---------- static/images/tree_arrow_down.png | Bin 232 -> 260 bytes static/images/tree_arrow_down.xcf | Bin 1054 -> 1054 bytes static/images/tree_arrow_down_hover.png | Bin 275 -> 302 bytes static/images/tree_arrow_down_hover.xcf | Bin 1051 -> 1051 bytes static/js/Wiki.js | 30 ++++++++++++------------ view/Note_tree_area.py | 8 +++---- 7 files changed, 30 insertions(+), 32 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 0f268a5..b7fe783 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -596,40 +596,38 @@ img { padding: 0.25em 0.25em 0.25em 0; } +#note_tree_area td { + vertical-align: top; +} + .tree_expander { - float: left; width: 11px; - height: 11px; + height: 1.5em; margin-right: 4px; - margin-top: 0.5em; - background: url(/static/images/tree_arrow.png) no-repeat center top; + background: url(/static/images/tree_arrow.png) no-repeat center center; cursor: pointer; } .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 { - float: left; width: 11px; - height: 11px; + height: 1em; margin-right: 4px; - margin-top: 0.5em; - background: url(/static/images/tree_arrow_down.png) no-repeat center top; + background: url(/static/images/tree_arrow_down.png) no-repeat center center; cursor: pointer; } .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 { - float: left; width: 11px; - height: 11px; + height: 1em; margin-right: 4px; - margin-top: 0.5em; } #storage_usage_area { diff --git a/static/images/tree_arrow_down.png b/static/images/tree_arrow_down.png index 1668dd5cf7d7d032643541009014dfc1fd2237e8..1a58ab572080b299a7d779c9db85c80fd52e8e31 100644 GIT binary patch delta 158 zcmV;P0Ac^=0fYjO7Z(c%1^@s6sjPP<00001b5ch_0Itp)>5(Ba2oMGhHtD%i+mTx= za9c@4K~xyi&5bb*fG`XL4dOA~^QS&1Q>Q*5PxN9YDgmj04NF;^v%QcMUTVb${RG}x zYv{c{g0)tFq}*L*CU+OfaaSL+M^=DYQ?_)1k3cEq2Bt7cMT9bc2Wck0%9_;KJ^%m! M07*qoM6N<$f-z$|LjV8( delta 130 zcmV-|0Db?20_Xvd7YYUl1^@s66*6S_kuEX_3KS+RLaml9k!UPoOi4sRR2b8Rjj;{D zKnMf*ZRpvFaXbJcFrpiOl}Jf=#S)Eu*b9KF%Kns@W+Vkb5g`B~dEeW&Q!o|SscBkz kz}JJjf4~tYsqWU~Z@+@OzIwYt7ytkO07*qoM6N<$g1|O1!vFvP diff --git a/static/images/tree_arrow_down.xcf b/static/images/tree_arrow_down.xcf index 2b2656d2c8c6b2123f35c70e378206978ef25ad0..b17b2479b8c11dcf3b8ac589c158779be09567b9 100644 GIT binary patch delta 154 zcmbQoF^^+{C?oeoF%3qpjrL`Xj4qS6F=|ZCWKLjYo$St}teVaM0o*`}4TxD77?`S2 z#hAJ$_cI;g0jXdFVlKbb^2t{iyKK3j%77H}Cny`F2!w&guz-vM0jL;@7>HBx3k?4Q E014n0nE(I) delta 176 zcmbQoF^^+{C?nfMF%3q}jrL`Xj6RdMF=|XsWNt8JVt@mtd?=F}NV5Sk3j+gFGpZQV zWDtMy0j4Y5(Ba2oMGiEI;=6Vv$=c ze}zdzK~xyi&Cb0I12G5%VDi(k2tDIaxpBo1nSkmlkKoqJcor;+6sMCC`J^OWo<#Hb zkhr*ez?Zqg5BU>(-?j}(DIa0Z8E&n$$D9*-?=Z$#5F$cK2~>4|LsdaU01+1`BA}{! z;qGyanFTWk5d|}cnZ@h=4Ic+Yw7^sB8}3nSjkEp<80w8M8TtQy00000NkvXXu0mjf DthZ5w delta 174 zcmV;f08#(00+Rxe7YYUl1^@s66*6S_kuEX_3KSR8^SSr-+EW&fQZ)l9^LP(%tj>|AVgqGjH$~M?{|I cnRopgZ$^qFXlp_Z#sB~S07*qoM6N<$g0tO5^#A|> diff --git a/static/images/tree_arrow_down_hover.xcf b/static/images/tree_arrow_down_hover.xcf index d7f0955ef3dff886a97d2ba411d24e2dcd4276f3..ed33f6bd8b762ce6c0fb8cdd6bff6a0cc7d98964 100644 GIT binary patch delta 129 zcmbQuF`Hw8C?oeoF%3qJjrL`XjEtjGgW$q2+;eyQb?uP|m!KE^D;$UONzv$!hM5Ef>TCLn+s%pwfp JIQ{~|{{UV>7}Wp( diff --git a/static/js/Wiki.js b/static/js/Wiki.js index 5aaec9f..6be0db6 100644 --- a/static/js/Wiki.js +++ b/static/js/Wiki.js @@ -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 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 - 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", { "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( "tr", { "id": "note_tree_item_" + editor.id, "class": "note_tree_item" }, - expander, + createDOM( "td", {}, expander ), createDOM( "td", {}, link ) ) ); @@ -2717,7 +2717,7 @@ Note_tree.prototype.expand_collapse_link = function ( event, note_id ) { if ( hasElementClass( expander, "tree_expander" ) ) { // 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 - var parent_node = expander.parentNode; + var parent_node = expander.parentNode.parentNode; while ( !hasElementClass( parent_node, "note_tree_root_table" ) ) { parent_node = parent_node.parentNode; 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" ); - var link = getFirstElementByTagAndClassName( "a", null, expander.parentNode ); + var link = getFirstElementByTagAndClassName( "a", null, expander.parentNode.parentNode ); insertSiblingNodesAfter( link, children_area ); var self = this; @@ -2755,7 +2755,7 @@ Note_tree.prototype.expand_collapse_link = function ( event, note_id ) { // if it's expanded, collapse it if ( hasElementClass( expander, "tree_expander_expanded" ) ) { 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 ) removeElement( children ); } @@ -2780,7 +2780,7 @@ Note_tree.prototype.display_child_links = function ( result, link, children_area for ( var i in child_links ) { var child_link = child_links[ i ]; 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 ) { 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 ( children_area ) removeElement( children_area ); - var expander = getFirstElementByTagAndClassName( "td", "tree_expander", link.parentNode.parentNode ); - if ( expander && link.parentNode.parentNode == expander.parentNode ) { + var expander = getFirstElementByTagAndClassName( "div", "tree_expander", link.parentNode.parentNode ); + if ( expander && link.parentNode.parentNode == expander.parentNode.parentNode ) { swapElementClass( expander, "tree_expander", "tree_expander_empty" ); disconnectAll( expander ); return; } - expander = getFirstElementByTagAndClassName( "td", "tree_expander_expanded", link.parentNode.parentNode ); - if ( expander && link.parentNode.parentNode == expander.parentNode ) { + expander = getFirstElementByTagAndClassName( "div", "tree_expander_expanded", link.parentNode.parentNode ); + if ( expander && link.parentNode.parentNode == expander.parentNode.parentNode ) { swapElementClass( expander, "tree_expander_expanded", "tree_expander_empty" ); disconnectAll( expander ); 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 - var expander = getFirstElementByTagAndClassName( "td", "tree_expander_empty", link.parentNode.parentNode ); - if ( !expander || link.parentNode.parentNode != expander.parentNode ) return; + var expander = getFirstElementByTagAndClassName( "div", "tree_expander_empty", link.parentNode.parentNode ); + if ( !expander || link.parentNode.parentNode != expander.parentNode.parentNode ) return; swapElementClass( expander, "tree_expander_empty", "tree_expander" ); var note_id = parse_query( link )[ "note_id" ]; 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 - 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", { "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( "tr", { "id": "recent_note_item_" + editor.id, "class": "recent_note_item" }, - expander, + createDOM( "td", {}, expander ), createDOM( "td", {}, link ) ) ); diff --git a/view/Note_tree_area.py b/view/Note_tree_area.py index ec4efbd..68072f3 100644 --- a/view/Note_tree_area.py +++ b/view/Note_tree_area.py @@ -25,11 +25,11 @@ class Note_tree_area( Div ): has_children = ( notebook.name != u"trash" ) and self.LINK_PATTERN.search( note.contents ) or False, root_note_id = note.object_id, ) 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, id = "note_tree_instructions", 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", ), ( recent_notes is not None and notebook.name != u"trash" ) and Span( @@ -64,8 +64,8 @@ class Note_tree_area( Div ): return Tr( 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( 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" ) ) or + Td( Div( id = root_note_id and u"%s_expander_%s" % ( base_name, root_note_id ) or None, class_ = u"tree_expander_empty" ) ), Td( u"%s" % ( link_attributes,