I finally did it. I wrote a decorator mixin to add that triangle on the
bottom. I am posting it here just in case someone else finds it useful.
It does have some hardcoded values and some assumptions but it is good
enough for now.
qx.Mixin.define("qssite.util.MNubbin", {
properties: {
showNubbin: {
nullable: false,
init: false,
check: "Boolean",
apply: "_applyShowNubbin"
}
},
members: {
_styleShowNubbin: function(styles){
if (this.isShowNubbin()) {
// split <div>'s border bottom style
// borderBottom[0]: width
// borderBottom[1]: style
// borderBottom[2]: color
var borderBottom = styles["border-bottom"].split(" ");
styles[":before"] = {
"content": '""',
"position": "absolute",
"width": 0,
"height": 0,
"border-style": "solid",
"border-color": "transparent",
"border-bottom": 0,
"bottom": "-16px",
"left": "10px",
/* If 1px darken stroke slightly */
"border-top-color": borderBottom[2],
"border-width": "16px"
};
//get the size of the overlay
var overlay =
parseInt(styles[":before"]["border-width"]) - parseInt(borderBottom[0]);
qx.core.Assert.assertPositiveInteger(overlay,
"border-bottom
should be smaller than nubbin's border-width");
var position = parseInt(styles[":before"]["left"]) +
parseInt(borderBottom[0]);
styles[":after"] = {
"content": '""',
"position": "absolute",
"width": 0,
"height": 0,
"border-style": "solid",
"border-color": "transparent",
"border-bottom": 0,
"bottom": (-1) * overlay +1 + "px",
"left": position + "px",
"border-top-color": styles["background-color"],
"border-width": overlay + "px"
};
}
},
_applyShowNubbin: function(){
if (qx.core.Environment.get("qx.debug")) {
if (this._isInitialized()) {
throw new Error("This decorator is already in-use.
Modification is not possible anymore!");
}
}
}
}
});
How to use
1)
//add a showNubbin property to the widget
qx.Class.patch(qx.ui.decoration.Decorator, qssite.util.MNubbin);
2)
widget.setAppearance("my-awesome-widget");
3)
//add an event listener for the widget for the on "appear" event and
//set visibility to visible.
__onAppear: function(e){
//set overflow to vissible. It is needed to show the ::before and
//::after
qx.bom.element.Style.set(this.getContentElement().getDomElement(),
"overflow", "visible");
}
4)
in the decorator set showNubbin to true
showNubbin: true,
------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
