ubuntu-phone team mailing list archive

[Tim Peeters <tim.peeters@xxxxxxxxxxxxx>]

Hello Jani,

There was a design decision that we only have one "overflow button" (the
button that opens the popover) on the right side in the header, and the
other actions are in the header directly, so you may want to discuss with
the designers if they have suggestions for your app how to group actions
instead of having multiple overflows.

Technically, with the "old" header (that you configure using Page.head) it
is not possible to have multiple overflow popovers. However, I am currently
finishing some work to have a new, more flexible, header API. That work
should land by the end of this month.

With the new API (you need at least qtdeclarative5-ubuntu-ui-toolkit-plugin
version 1.3.1688+15.10.20151018.1-0ubuntu1 or even better the version that
we will land next week), what you ask for is possible, but it requires some
hacking around the default behavior of the actions in the header. I am not
recommending this approach, but if you want to try it out for your app, you
can start with this:

import QtQuick 2.4

import Ubuntu.Components 1.3

import Ubuntu.Components.Popups 1.3


MainView {

    width: 800

    height: 600

    Page {

        header: PageHeader {

            title: "Multiple overflows."

            trailingActionBar {

                actions: [

                    Action {

                        iconName: "settings"

                        text: "list 1"

                    },

                    Action {

                        iconName: "attachment"

                        text: "list 2"

                    }

                ]


                delegate: AbstractButton {

                    id: button

                    styleName: "IconButtonStyle"

                    action: modelData

                    height: parent ? parent.height : undefined

                    onTriggered: {

                        if (action.text == "list 1") {

                            PopupUtils.open(popover1Component, button);

                        } else if (action.text == "list 2") {

                            PopupUtils.open(popover2Component, button);

                        }

                    }

                }

            }


            Action {

                id: action1a

                iconName: "settings"

                text: "1A"

            }

            Action {

                id: action2a

                iconName: "settings"

                text: "2A"

            }

            Component {

                id: popover1Component

                ActionSelectionPopover {

                    id: popover1

                    contentWidth: units.gu(20)

                    actions: [action1a]

                }

            }

            Component {

                id: popover2Component

                ActionSelectionPopover {

                    id: popover2

                    actions: [action2a, action1a]

                    contentWidth: units.gu(20)

                }

            }

        }

    }

}


Note that you need a super new version of the UI toolkit for this to work,
since the Page.header property and PageHeader component were only
introduced this week. This code can be a starting point, but it is probably
not the optimal way to do things (for example you could have only one
popover component that you configure to show different actions, and you
could put that code in a separate qml file).

An alternative to this, instead of using the leading ActionBar of the new
PageHeader is to create your completely custom header in which you can put
your own buttons that open the popovers, without making use of the
toolkit-provided ActionBar where you have to use Actions to do it.

After tomorrow, I will be on holidays so I will not be able to answer more
of your questions for a while, but probably people in #ubuntu-app-devel can
help you out. That is also a good place to discuss the design and maybe
come up with a different solution where you don't have to group the actions
into different popovers.

Perhaps other people have other suggestions on how to solve this. And if
there is a common use case for having multiple popovers (don't forget to
include designers in the discussion!) I'm certainly willing to see if we
can make it easier in the toolkit to do that once I am back from my
holidays.

Greets,
Tim.



On Thu, Oct 22, 2015 at 4:09 PM, Jani Monoses <jani.monoses@xxxxxxxxx>
wrote:

> Hello,
>
> what is the best way to make a custom menu like to the one that is created
> when the number of action buttons is too large to fit the header and
> several of them are grouped under a navigation icon?
>
> I'd like to use one when pressing an existing action button in the header,
> to group related actions.
>
> thanks
> Jani
>
>
> --
> Mailing list: https://launchpad.net/~ubuntu-phone
> Post to     : ubuntu-phone@xxxxxxxxxxxxxxxxxxx
> Unsubscribe : https://launchpad.net/~ubuntu-phone
> More help   : https://help.launchpad.net/ListHelp
>
>