[Solved] Menu component "falling" from center of the page instead of emerging from bottom

qgil

Hi, Menu components in MeeGo Harmattan apps pre-installed in the N9 emerge from the bottom of the display. However, in my app appears at the center of the display and then "falls" until hitting the ToolBar. I haven't been able to find anything special in my code instructing that, neither I have found in the docs any reference to different animations for Menu components to show up.

For what is worth this is the structure of the code:

@ ToolBar {

    tools: ToolBarLayout {

        ToolIcon {
            id: backIcon
            iconId: "toolbar-back";
            onClicked: {
                exitMenu.open()
            }

            Menu {
                id: exitMenu

                MenuLayout {
                    MenuItem { ... }
                    MenuItem { ... }
                    MenuItem { ... }
                    MenuItem { ... }
                }
            }
        }@

The qml file can be found at http://gitorious.org/miniature/miniature/blobs/master/src/frontend/OnlineBoard.qml

Alicemirror

Hi, I saw that toolbars and buttons will be anchored somewhere in the screen anyway. Did you tried?

It is not obvious that the toolbar that we always see to the tbottom will be set there by Qt. In my applications all toolbars (from which the menu depends) are anchored to the bottom of the screen.

qgil

Yes, the ToolBar contains already

@anchors.bottom: parent.bottom@

otherwise the Page is not usable at all (? but this is irrelevant here).

I found your idea interesting and I added "anchors.bottom: parent.bottom" to the rest of components involved, but the problem stays. Somehow the Menu wants to appear at the middle of the screen instead of emerging from the bottom...

theoriginalgri

Please also try creating the Menu outside of the ToolBar so that the Page is its parent element. Then no anchors should be needed.

qgil

[quote author="gri" date="1317057036"]Please also try creating the Menu outside of the ToolBar so that the Page is its parent element. Then no anchors should be needed.[/quote]

THAT WAS IT! Thank you very much.

Putting the Menu outside the toolbar as a child of Page makes it behave just like it should, without needing to anchor it anywhere.

So simple. And so not-evident. It doesn't make much sense to me but then again I'm not a compiler. ;)

Thanks again!

theoriginalgri

For the records: Creating a ToolBar on your own is not needed in most cases.

Following code should run fine:
@
Page {
// The actual content
Rectangle {
anchors.fill: parent
color: "red"
}

tools: ToolBarLayout {
Item {}
ToolIcon {
iconId: "toolbar-view-menu"
onClicked: menu.open()
}
}

Menu {
id: menu

MenuLayout {
  MenuItem {
    text: "hello"
  }
}

}
}
@

qgil

Oh, I see. Another thing I've learned.

I still don't think I have got everything clear out of the loop of docs PageStackWindow - PageStack - Page - ToolBar - ToolBarLayout - tools... The principle and outcome is simple, yet at this point the docs themselves are more complex than needed. Looking forward to see a simplifications as soon as the com.nokia.meego stuff gets assimilated in Qt Quick components upstream.

Anyway, not an excuse for me. I'm looking again at the examples provided at http://harmattan-dev.nokia.com/docs/library/html/qt-components/qt-components-meego-menu.html and they keep tool and menu separate.