I want to make the buttons in TabView vertical. Of course simply
rotating the button doesn't suffice. I found this older post http://qooxdoo.678.n2.nabble.com/Tabview-Vertical-tabs-for-left-position-td7582466.html#a7582484 where Martin Wittemann suggests that it would be simpler to create a custom widget. But I can't see how it can be simpler since the text should be vertical and I couldn’t find a way to make the text vertical besides using qx.bom.element.Transform.rotate(). **Unfortunately that function works only in visible elements when the layout is already done. ** A workaround I managed is to subclass the whole qx.ui.tabview package for the sole purpose of adding this in TabButton constructor this.addListener("appear", function(){ var label = this.getChildControl("label"); var el = label.getContentElement().getDomElement(); qx.bom.element.Transform.rotate(el,"270deg"); },this); This just rotates the button's label and with the appropriate modifications in Appearance.js I managed to achieve the result in the attached image which is ugly and impractical and feels very wrong. Has anyone managed to use vertical buttons in TabView? Can it be done with pure qooxdoo tools or should I investigate the possibility of using SVG graphics? ------------------------------------------------------------------------------ _______________________________________________ qooxdoo-devel mailing list [hidden email] https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel |
voger,
I think it can be done. Instead of subclassing an entire widget try creating a Mixin to add a new themable property to your label. I created this Mixin for you to start from: https://github.com/sqville/sqv/blob/master/source/class/sqv/ui/basic/MLabel.js In your Application.js file add this line before you use it on a label. qx.Class.include(qx.ui.basic.Label, sqv.ui.basic.MLabel); Now all Labels that use qx.ui.basic.Label have a property called "rotatevertical" that you can set directly or set using an Appearance value Give it a try and let me know how it goes Chris |
On 14/10/2015 04:40 πμ, SQville wrote:
> voger, > > I think it can be done. Instead of subclassing an entire widget try creating > a Mixin to add a new themable property to your label. > > I created this Mixin for you to start from: > https://github.com/sqville/sqv/blob/master/source/class/sqv/ui/basic/MLabel.js > > In your Application.js file add this line before you use it on a label. > qx.Class.include(qx.ui.basic.Label, sqv.ui.basic.MLabel); > > Now all Labels that use qx.ui.basic.Label have a property called > "rotatevertical" that you can set directly or set using an Appearance value > > Give it a try and let me know how it goes > > Chris Thanks. I already solved it by using SVG but I would prefer a more "native" solution like this. I will give it a try this weekend and I will report back. ------------------------------------------------------------------------------ _______________________________________________ qooxdoo-devel mailing list [hidden email] https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel |
In reply to this post by SQville
On 14/10/2015 04:40 πμ, SQville wrote:
> voger, > > I think it can be done. Instead of subclassing an entire widget try creating > a Mixin to add a new themable property to your label. > > I created this Mixin for you to start from: > https://github.com/sqville/sqv/blob/master/source/class/sqv/ui/basic/MLabel.js > > In your Application.js file add this line before you use it on a label. > qx.Class.include(qx.ui.basic.Label, sqv.ui.basic.MLabel); > > Now all Labels that use qx.ui.basic.Label have a property called > "rotatevertical" that you can set directly or set using an Appearance value > > Give it a try and let me know how it goes > > Chris Sorry for the late reply. It took me a while to make it work. Here is what I did. First I had to patch the decorator. In my Application.js : qx.Class.patch(qx.ui.decoration.Decorator, qssite.util.MLabel); then in Decoration.js "test-decoration":{ style:{ rotatevertical: "270deg", } } and in Appearances.js "scallbar-page/button": { include: "tabview-page/button", style: function(states, style) { var mceStyle = qx.lang.Object.clone(style); mceStyle.padding = 0; mceStyle.marginRight = -1; mceStyle.marginLeft = 0; mceStyle.marginTop = 1; mceStyle.marginBottom = 1; mceStyle.height = 150; mceStyle.width = 30; return mceStyle; } }, "scallbar-page/button/label": { include: "tabview-page/button/label", style: function(states, style) { var mceStyle = qx.lang.Object.clone(style); mceStyle.decorator = "test-decoration"; return mceStyle; } }, "scallbar-page" is a custom name for the qx.ui.tabview.Page appearance property. and when I create the page var label = page.getChildControl("button").getChildControl("label"); label.setRich(true); label.getContentElement().setStyles({ overflow: "visible", whiteSpace:"nowrap", textOverflow: "ellipsis" }, false); Naturally now it has more work to be done.I have to calculate the proper translations etc. but it seems I am in a good path now. Thank you very much. Your class helped a lot. ------------------------------------------------------------------------------ _______________________________________________ qooxdoo-devel mailing list [hidden email] https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel |
Free forum by Nabble | Edit this page |