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
