ToolBar Context Menu

0
0

Hi,

When a toolbar button has a context menu and the window is in Normal state, the right side (edge) of the contextmenu is aligned to the right of the toolbar button going to left of the screen (see Window in Normal State.gif). If the Window is Maximized, the contextmenu is on the right side of the button going to right (see Window in Maximized State.gif)

How to make this contextmenu drops the way the MenuBar and MainMenu do. I understand that there is an Enums for contextmenu placement and I’ve been trying to use ButtonDropDown event of the ToolBar to position the contextmenu the way I want it (Placement.BottomLeft), but the event seems not working/firing.

Am I missing something?

Thanks,

Cris

Attachment
  • You must to post comments
0
0

Hi Frank,

it’s fixed in this release (and since 1.3.71).

Thanks.

  • You must to post comments
0
0

Hi Cris,

the fix is also included in the latest Wisej release (1.3.74).

Best regards
Frank

  • You must to post comments
0
0

Thanks for the Frappuccino 🙂

Before the fix (not uploaded yet, we should have a new development build out tonight or tomorrow – there have been too many fixes for a release build) the menu was aligning with the “opener” which was overridden deep down in qooxdoo to always be the button that had the menu assigned to it, in this case the small arrow button.

To remove the line, the appearance path in the mixin is this:

{

“appearances”: {
“toolbar/splitbutton/arrow”: {
“states”: {
“default”: {
“styles”: {
},
“properties”: {
“icon”: “combo-arrow”
}
}
}
}
}

}

  • Cris
    • Cris
    • Jun 6, 2017 - 8:58 pm
    Luca, Thanks. Mixin is working and I’ll just be waiting for the next dev build.
  • You must to post comments
0
0

Hi Luca,

Nice to hear that. Maybe, I can stop pulling my hair now.

I’ve been trying to use the Eval method you suggested since yesterday but it seems to be almost similar until I come with a different approach. As shown in the image, I was able to  make it left-aligned with the File button and right-aligned with the Close button. I can’t however do it with the Download button. Maybe, because of the bug you were saying.

How about the vertical line (with red rectangle in the image attached) that separates the button and the opener? How can I get rid of that using a mixin file. I already tried but can hit the right Appearance. It doesn’t look good when there is a Separator as you can see too much vertical lines.

I owe you one Starbucks Frappuccino for the update and immediate fix.

Thanks

Attachment
  • You must to post comments
0
0

Quick update. Turns out it was a bug (or feature) in qooxdo, it was overriding the opener of the menu. Now it aligns to the left of the main button and not the inner arrow.

  • You must to post comments
0
0

Hi Cris,

The problem is that there are two types of buttons with the drop down menu. One is the MenuButton, when pressed you get the drop down menu. The second type is the split button, the button has two parts, when you press the main button is a click, when you press the arrow button is a drop down menu. This is two buttons together.  You can see that in the same demo page you linked, it’s the first button with the left arrow and a drop down.

When the menu is shown it aligns with the opener and in the case of the split button (which is also the toolbar drop down button) it aligns with the button with the down arrow. Now it aligns with the left edge. But it can align with the right edge by setting the position to “bottom-right”.

Try the Eval method in my post to change the position to this.getMenu().setPosition(“bottom-right”). Let me know.

Best,

Luca

  • You must to post comments
0
0

Hi Luca,

I tried both options above and though both are working, I think, they are not the way the toolbar should be. Visited the link you provided above, tested all the “Allowed values” (direct, keep-align, best-fit) but still not satisfied with the result.

I found at http://www.qooxdoo.org/current/widgetbrowser/ -> Toolbar/Menu tab -> Toolbar MenuButton the way I expect the toolbar to work in Wisej. When the browser in maximized and has enough space at the right of the button, the dropdown start from left to right. When minimized and the right edge of the browser touches the “ToolBar MenuButton”, the dropdown start from right to left.

Just my 2 cents.

Thanks

  • You must to post comments
0
0

Hi Cris,

The position of drop down menus related to buttons is “burned” in the code as “bottom-right”. It aligns the menu to the bottom and the right of the opener (in this case the button that opened it). MPlacement also uses best fit, so when the window is maximized it cannot align the right edges because it would go outside of the browser and be hidden so it aligns to the left instead because “placementModeX” defaults to “keep-align”.

You can find more info about the MPlacement mixin here: http://www.qooxdoo.org/current/api/#qx.ui.core.MPlacement

Look at the properties position and placementModeXY. The menu class inherits the MPlacement mixin.

All the placement properties are themeable but the Wisej classes set”position” to “bottom-right” because the theme properties are applied to the “menu” appearance key which is valid for all menus.

You can change placementModeX to “best-fit” in the theme for the “menu” key:

This change would make the popup menu move to the right only as much as needed.

{
“appearances”: {
“menu”: {
“inherit”: “menu”,
“states”: {
“default”: {
“properties”: {
“placementModeX”: “best-fit”
}
}
}
}
}
}

Or you can change the position by overriding the ToolbarButton class that has a drop down menu:

 

public class MyButton : ToolBarButton
{
public override void Update()
{
if (((Wisej.Core.IWisejComponent)this).IsNew)
{
Eval(@”
this.getMenu().setPosition(‘right-middle’);

// this.getMenu().setOffset(…);
// this.getMenu().setPlacementModeX(…);
// this.getMenu().setPlacementModeY(…);

“);
}

base.Update();
}
}

HTH

/Luca

  • You must to post comments
Showing 8 results
Your Answer

Please first to submit.