Author: jmorliaguet Date: Sun Jan 1 22:06:41 2006 New Revision: 2111 Added: cpsskins/branches/jmo-perspectives/ui/framework/arrow.png (contents, props changed) Modified: cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.css cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/contextualmenus.css cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualmenu_test.html Log:
- submenus have an arrow - added an example of a sub-submenu Added: cpsskins/branches/jmo-perspectives/ui/framework/arrow.png ============================================================================== Binary file. No diff available. Modified: cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.css ============================================================================== --- cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.css (original) +++ cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.css Sun Jan 1 22:06:41 2006 @@ -38,7 +38,14 @@ color: #fff; } +.contextMenu a.submenuitem { + background-image: url(arrow.png); + background-repeat: no-repeat; + background-position: 95% center; +} + .contextMenu .submenu { + background-color: #eeeeec; border-width: 1px 2px 2px 1px; border-style: solid; border-color: #333; Modified: cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js ============================================================================== --- cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js (original) +++ cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js Sun Jan 1 22:06:41 2006 @@ -307,8 +307,14 @@ handler(this.selected, choice); } } - Element.hide(widget); - + new CPSSkins.Effect(widget, { + action: function(value) { + Canvas.setOpacity(widget, 1-value); + }, + onComplete: function() { + Element.hide(widget); + } + }); } else { this.selected = Identifiable.getIdentifiable(element); if (Position.within(this.area, x, y)) { @@ -340,9 +346,7 @@ widget.style.left = menuX + "px"; widget.style.top = menuY + "px"; // submenu relative position - this.submenuLeft = Element.getDimensions(this.widget).width -5; - if (!document.all) - this.submenuLeft += parseInt(widget.style.left); + this.submenuLeft = Element.getDimensions(this.widget).width -2; // reset the menu $A(widget.getElementsByTagName("*")).each(function(v) { @@ -351,8 +355,7 @@ this._drawNode(widget, view); - if (this.effect) this.effect.stop(); - this.effect = new CPSSkins.Effect(widget, { + new CPSSkins.Effect(widget, { action: function(value) { Canvas.setOpacity(widget, value); }, @@ -423,31 +426,26 @@ }; case "submenu": { - var style = {display: "block"}; - var icon = tag.getAttribute("icon"); - if (icon) { - style.backgroundImage = "url(" + icon + ")"; - } - var item = Canvas.addNode(container, { tag: "a", content: tag.getAttribute("label"), - style: style, + style: {display: "block"}, + class: "submenuitem", attributes: {href:"javascript:void(0)"} }); var submenu = Canvas.addNode(item, { tag: "div", class: "submenu", - style: {left:this.submenuLeft + "px", display: "none"} + style: {position: "absolute", left:this.submenuLeft + "px", + display: "none", margin: "-20px 0 0 0"} }); var mouseOverEvent = function(e) { var menu = this._getSubmenu(e); if (menu) { - if (this.effect) this.effect.stop(); - this.effect = new CPSSkins.Effect(menu, { + new CPSSkins.Effect(menu, { action: function(value) { Canvas.setOpacity(menu, value); }, @@ -462,7 +460,14 @@ var mouseOutEvent = function(e) { var menu = this._getSubmenu(e); if (!Position.within(menu, Event.pointerX(e), Event.pointerY(e))) { - Element.hide(menu); + new CPSSkins.Effect(menu, { + action: function(value) { + Canvas.setOpacity(menu, 1-value); + }, + onComplete: function() { + Element.hide(menu); + } + }); } }.bindAsEventListener(this); Event.observe(item, "mouseout", mouseOutEvent); Modified: cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/contextualmenus.css ============================================================================== --- cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/contextualmenus.css (original) +++ cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/contextualmenus.css Sun Jan 1 22:06:41 2006 @@ -6,12 +6,6 @@ cursor: default; } -#testArea1 { - width: 160px; - background-color: #dec; - border: 1px dotted #999; -} - #area1 { background-color: #fed; } Modified: cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualmenu_test.html ============================================================================== --- cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualmenu_test.html (original) +++ cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualmenu_test.html Sun Jan 1 22:06:41 2006 @@ -30,8 +30,11 @@ <item label="Paste" icon="paste.png" action="paste" visible="editable"></item> - <submenu label="Format" icon="format.png" visible="formattable"> + <submenu label="Format" visible="formattable"> <items action="format" choices="formats"></items> + <submenu label="Size" visible="sizable"> + <items action="size" choices="sizes"></items> + </submenu> </submenu> <item label="Delete" icon="delete.png" action="delete" @@ -41,6 +44,12 @@ <!-- json-data: {"copyable":true} --> <div id="area1" class="pad">area1</div> + <!-- json-data: + {"formattable":true, + "formats":[ + {"choice":"style","label":"Style"} + ]} + --> <div id="area2" class="pad">area2</div> <!-- json-data: {"editable":true} --> @@ -52,6 +61,12 @@ {"choice":"style","label":"Style"}, {"choice":"widget","label":"Widget"}, {"choice":"effect","label":"Effect"} + ], + "sizable":true, + "sizes":[ + {"choice":"small","label":"Small"}, + {"choice":"medium","label":"Medium"}, + {"choice":"large","label":"Large"} ]} --> <div id="area4" class="pad">area4 -- http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins