ubuntu-phone team mailing list archive

[Jani Monoses <jani.monoses@xxxxxxxxx>]

Thanks for the detailed answer Tim,

I was trying to emulate the way an Android app groups its actions, but I'll
think about alternative designs too.
And I'll likely give the new API a try as well once it's landed :)

Jani

On Thu, Oct 22, 2015 at 10:15 PM, Tim Peeters <tim.peeters@xxxxxxxxxxxxx>
wrote:

> 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
>>
>>
>