ubuntu-phone team mailing list archive

[Tim Peeters <tim.peeters@xxxxxxxxxxxxx>]

Hello Robert,

Looking at the screenshot you added, you may want to have a look at header
"sections". See
http://developer.ubuntu.com/api/qml/sdk-14.10/Ubuntu.Components.PageHeadConfiguration/#sections-prop

With that you can add additional options to the header divider, like the
contacts app does with All/Favorites.
I attached a screenshot and QML file that shows what it would look like.

I'm not sure if this is the best way to go, perhaps someone from design has
better suggestions?

Greets,
Tim.

On Tue, Oct 7, 2014 at 8:08 PM, Robert Schroll <rschroll@xxxxxxxxx> wrote:

> Hi all,
>
> My app Beru has a main screen that features a list that can be sorted in
> several different ways.  The sorting UI consists of a Sort toolitem that
> opens a popover with three different sorts to choose from.  When the
> toolitems were in a toolbar, this worked fine.  When they got moved to the
> header, the popover no longer points to the correct spot.  When I reported
> this on Launchpad [1], I was told,
>
>  Popovers pointing to buttons in the new header is not supported. Design
>> recommends to use a pagestack in those cases. For specific needs of an app,
>> please talk to designers for a solution
>>
>
> Is this true?  Tabs are currently handled with a popover pointing to a
> button in the header, so it seems odd not to allow this mechanism for other
> buttons.  I don't understand how I'm supposed to solve this with a
> pagestack.  Am I really supposed to create a new page to hold a single
> option?  What solution does the design team suggest?
>
> For what it's worth, I'm currently faking the pointer by putting a
> rectangle behind where I know the header item will be and pointing to
> that.  It looks and works just fine [2].
>
> Thanks,
> Robert
>
> [1] https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1337699
> [2] http://rschroll.github.io/beru/assets/ss-library-author.png
>
>
> --
> 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
>

Attachment: Screenshot 2014-10-09 13.03.08.png
Description: PNG image

import QtQuick 2.0
import Ubuntu.Components 1.1

MainView {
    id: mainView
    width: units.gu(40)
    height: units.gu(50)
    useDeprecatedToolbar: false


    Page {
        id: page
        title: "Library"
        head {
            actions: [
                Action {
                    iconName: "search"
                },
                Action {
                    iconName: "settings"
                }

            ]
            sections {
                model: ["Recent", "Title", "Author"]
            }
        }

        property string sortBy: page.head.sections.model[page.head.sections.selectedIndex]
        Label {
            anchors.centerIn: parent
            text: "Contents sorted by "+page.sortBy
        }
    }
}