Changeset 522

Show
Ignore:
Timestamp:
08/07/07 23:25:42 (1 year ago)
Author:
ian
Message:

TreeMenu? now slides underneath the selected tree node, instead of half of the background actually coming from the selected node. Also TreeMenu? is now configurable so it can fly-out to the right or the left of the Tree. Finally all known bugs were fixed in TreeMenu?, and it's firing the normal 'beforeshow' and 'show' events just like a Menu is supposed to.

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • pagoda/trunk/Pagoda/pagoda/widgets/admin/static/css/site_tree.css

    r511 r522  
    1010    height: 16px; 
    1111    background-image: url("../images/layout.png"); 
    12 } 
    13  
    14 /* Selected node should display an arrow pointing towards the menu */ 
    15 #site_tree .x-tree-node div.x-tree-selected { 
    16     background-image: url("../images/arrow-panel-right.png"); 
    17     background-repeat: no-repeat; 
    18     background-position: 97% 52%; 
    1912} 
    2013 

  • pagoda/trunk/Pagoda/pagoda/widgets/admin/static/css/tree.css

    r511 r522  
    44    text-align: left; 
    55    font-size: 100%; 
     6    position: relative; 
    67} 
    78 
    89/* Tree nodes should have a nice color, even when being dragged around */ 
    9 .x-tree-node a span, .x-dd-drag-ghost a span { 
     10.x-tree-node a span,  
     11.x-dd-drag-ghost a span { 
    1012    text-decoration: underline; 
    1113    color: #01e; 
    …… 
    1315} 
    1416 
    15 /* Tree nodes and Menu should be the same height */ 
     17/* Selected tree node and menu items should have the same text color */ 
     18.x-tree-node .x-tree-selected a span, 
     19.tree-menu .x-menu-list-item button { 
     20    color: #03f; 
     21} 
     22 
     23/* Selected tree node should be bold and not have any background color */ 
     24.x-tree-node .x-tree-selected a span { 
     25    background: transparent; 
     26    font-weight: bold; 
     27} 
     28 
     29/* Tree nodes and menu should be the same height */ 
    1630li.x-tree-node, 
    1731.ydd-drag-ghost a span, 
    …… 
    2034} 
    2135 
    22 /* Selected tree nodes (and their menu) should be styled nicely */ 
    23 .x-tree-node .x-tree-selected,  
     36/* Style the menu */ 
    2437div.tree-menu { 
    2538    background-color: #d5e5ff; 
    …… 
    2740    border: 1px solid #61839F; 
    2841} 
    29 .x-tree-node .x-tree-selected a span { 
    30     background: transparent; 
    31     font-weight: bold; 
    32 } 
    3342 
    34 /* Don't let unused tree layout images force the line height to be larger */ 
     43/* Don't let unused tree layout images force the line height to be larger than it needs to be */ 
    3544.x-tree-icon,  
    3645.x-tree-ec-icon,  
    …… 
    4554} 
    4655 
    47 /* Make it look like menu and selected tree node share a border */ 
    48 .x-tree-node .x-tree-selected { 
    49     border-right: 0px none; 
    50 } 
    51 div.tree-menu { 
    52     border-left: 0px none; 
    53 } 
    54  
    5556/* Nice hover-color for Tree Menu buttons */ 
    5657.tree-menu button:hover { 
    5758    background-color: #E4EEFF; 
    58 } 
    59  
    60 /* Tree Nodes and Menu Items should have the same color */ 
    61 .x-tree-node .x-tree-selected a span, 
    62 .tree-menu .x-menu-list-item button { 
    63     color: #03f; 
    6459} 
    6560 
    …… 
    8580    border: 0; 
    8681} 
    87  
    88 /* Menu should be horizontal (not vertical, which is the default) */ 
    89 .tree-menu li, 
    90 .tree-menu button { 
    91     display: inline; 
    92 } 

  • pagoda/trunk/Pagoda/pagoda/widgets/admin/static/javascript/site_tree.js

    r511 r522  
    7171    }); 
    7272 
    73     // Attach TreeMenu to this tree 
    74     this.menu.attachTo(this); 
     73    // Attach TreeMenu to this tree, positioned to the right of the tree 
     74    this.menu.register(this, 'r'); 
    7575 
    7676} 

  • pagoda/trunk/Pagoda/pagoda/widgets/admin/static/javascript/tree_menu.js

    r511 r522  
    33 
    44    // Configure this menu 
    5     this.defaultAlign = 'tl-tr'; 
    65    this.shadow = false; 
    76    Ext.menu.TreeMenu.superclass.constructor.call(this, config); 
    …… 
    1817}; 
    1918Ext.extend(Ext.menu.TreeMenu, Ext.menu.Menu, { 
    20     // Aligns top of menu to top of this.alignEl 
    21     align: function(el) { 
    22         this.getEl().setTop(this.alignEl.getTop()); 
    23     }, 
    24     // Override `show` to remember which element to align with 
     19    // Override `show` to position the menu underneath (in z-index terms) 
     20    // the `element`, which is expected to be a tree node, and style the 
     21    // menu to look like it's popping out of the tree node. 
     22    // `element` must be a tree node 
     23    // `position` should be 'r' or 'l' to have the menu pop out the 
     24    //  right side or the left side of the tree node, respectively. 
     25    //  (defaults to 'r') 
     26    // `parentMenu` is unused for this type of menu. 
    2527    show: function(element, position, parentMenu) { 
     28        // Remember which element this menu is attached to 
    2629        this.alignEl = Ext.get(element); 
    27         Ext.menu.TreeMenu.superclass.show.call(this, element, position, parentMenu); 
     30 
     31        // Ensure that this menu has been rendered 
     32        if (!this.el) { 
     33            this.render(); 
     34        } 
     35 
     36        // Fire 'beforeshow' event 
     37        this.fireEvent("beforeshow", this); 
     38 
     39        // Align this menu over 'element' with enough padding to fly out 
     40        var align_position = (position == 'r') ? 'tl-tl' : 'tr-tr'; 
     41        this.el.alignTo(this.alignEl, align_position); 
     42        var padding_position = (position == 'r') ? 'padding-left' : 'padding-right'; 
     43        this.el.setStyle(padding_position, this.alignEl.getWidth() + 'px'); 
     44 
     45        // Set z-index of menu and element so the menu appears behind 'element' 
     46        this.alignEl.setStyle('z-index', '15000'); 
     47        this.el.setStyle('z-index', '14999'); 
     48 
     49        // Show the menu 
     50        this.el.show(); 
     51        this.hidden = false; 
     52 
     53        // Fire 'show' event 
     54        this.fireEvent("show", this); 
     55 
    2856    }, 
    2957    // Attach this menu to the specified tree, adding event handlers 
    3058    // to make the menu appear next to a node that was clicked. 
    31     attachTo: function(tree) { 
     59    // `tree` must be a valid TreePanel 
     60    // `position` should be 'r' or 'l' to have the menu pop out the 
     61    //  right side or the left side of the tree node, respectively. 
     62    //  (defaults to 'r') 
     63    register: function(tree, position) { 
    3264 
    3365        // Remember parameters 
    …… 
    3971        } 
    4072 
    41         // Given a tree, ensures that the selected node is focused 
    42         // (useful for giving focus back to a clicked tree node after menu is shown) 
    43         var focus_active_node = function (tree) { 
    44             var selection_model = tree.getSelectionModel(); 
    45             var selected_nodes = selection_model.getSelectedNodes(); 
    46             if (Ext.type(selected_nodes) == 'array') { 
    47                 Ext.each(selected_nodes, function(item, index, allItems) { 
    48                     var el = get_node_el(item); 
    49                     el.focus(); 
    50                 }); 
    51             } 
    52         } 
    53  
    54         // When the menu is shown, give focus back to the active tree node and realign menu 
    55         this.on('show', function() { 
    56             focus_active_node.defer(60, {}, [this.tree]); 
    57             this.align.defer(1, this); // needs the delay for some reason!?! 
    58         }, this); 
    59  
    6073        // When a node in the tree is clicked, show the menu 
    6174        this.tree.on('click', function(node) { 
    6275            var node_el = get_node_el(node); 
    63             this.show(node_el); 
     76            this.show(node_el, position); 
    6477        }, this); 
    6578    } 

Log in as guest/pagoda to create tickets