Any tips for vertical buttons in the left of TabView?

[voger]

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

[SQville]

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

[voger]

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

[voger]

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