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 <[email protected]> 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 <[email protected]> > 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 : [email protected] >> Unsubscribe : https://launchpad.net/~ubuntu-phone >> More help : https://help.launchpad.net/ListHelp >> >> >
-- Mailing list: https://launchpad.net/~ubuntu-phone Post to : [email protected] Unsubscribe : https://launchpad.net/~ubuntu-phone More help : https://help.launchpad.net/ListHelp
