Ubuntu UI Toolkit

Merge lp:~zsombi/ubuntu-ui-toolkit/pickerpanel into lp:ubuntu-ui-toolkit

pickerpanel
Merge into trunk

Proposed by Zsombor Egri on 2013-12-17

Status:	Merged
Approved by:	Tim Peeters on 2014-01-27
Approved revision:	908
Merged at revision:	925
Proposed branch:	lp:~zsombi/ubuntu-ui-toolkit/pickerpanel
Merge into:	lp:ubuntu-ui-toolkit
Prerequisite:	lp:~zsombi/ubuntu-ui-toolkit/datepicker
Diff against target:	642 lines (+566/-2) 8 files modified components.api (+3/-0) modules/Ubuntu/Components/Pickers/PickerPanel.qml (+261/-0) modules/Ubuntu/Components/Pickers/PickerRow.qml (+1/-0) modules/Ubuntu/Components/plugin/plugin.cpp (+12/-0) modules/Ubuntu/Components/plugin/plugin.h (+1/-1) tests/resources/pickers/PanelTest.qml (+42/-0) tests/unit/add_qmlmakecheck.pri (+1/-1) tests/unit_x11/tst_components/tst_pickerpanel.qml (+245/-0)
To merge this branch:	bzr merge lp:~zsombi/ubuntu-ui-toolkit/pickerpanel
Related bugs:	Link a bug report

Reviewer	Review Type	Date Requested	Status
Tim Peeters		2013-12-17	Approve on 2014-01-27
PS Jenkins bot	continuous-integration		Approve on 2014-01-20
Review via email: mp+199250@code.launchpad.net

Commit message

Panel implementation for DatePicker. Presents the DatePicker either in a panel covering the OSK area or in a Popover, depending on the form factor and presence of input method provider.

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-12-17:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-ui-toolkit-ci/1468/rebuild

review: Approve (continuous-integration)

lp:~zsombi/ubuntu-ui-toolkit/pickerpanel updated on 2013-12-19

902. By Zsombor Egri on 2013-12-19: trunk merge

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-12-19:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-ui-toolkit-ci/1481/rebuild

review: Approve (continuous-integration)

lp:~zsombi/ubuntu-ui-toolkit/pickerpanel updated on 2013-12-20

903. By Zsombor Egri on 2013-12-20: trunk merge

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-12-20:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-ui-toolkit-ci/1495/rebuild

review: Approve (continuous-integration)

lp:~zsombi/ubuntu-ui-toolkit/pickerpanel updated on 2014-01-14

904. By Zsombor Egri on 2014-01-14: trunk merge

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-01-14:

FAILED: Continuous integration, rev:904
http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-ci/1589/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/2326/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty-touch/2204/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-trusty-amd64-ci/537/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-trusty-armhf-ci/537/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/2328/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-armhf/2204/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-ui-toolkit-ci/1589/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-01-14:

Why is there a \qmltype DateTimePanel? Is that different from the PickerPanel?

    \qmltype DateTimePanel
    \inqmlmodule Ubuntu.Components.Pickers 0.1
    \ingroup ubuntu-pickers
    \brief Provides a panel for opening a DatePicker in place of the input panel or
    as Popover, depending on the form factor.

    PickerPanel is a singleton component designed to open a DatePicker in input panel
    area or in a Popover, depending on the form factor, following the design guides
    on date pickers.

review: Needs Information

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-01-14:

you are sooo behind ;)

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-01-14:

78 + The function opens a date picker panel. The date picker is opened in input
79 + panel area if there is on-screen input panel available and the form factor
80 + describes a phone. The picked date will be read from and reported into the

the sentence doesn't read very fluent..
and what is "form factor describes a phone"? Can you be more specific what you mean?

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-01-14:

80 + describes a phone. The picked date will be read from and reported into the
81 + \a property of the \a caller as date type. This implies that the caller
82 + must have defined a property with date type.

seems a bit vague, and you don't pass this property in the example code:

65 + onClicked: PickerPanel.openDatePicker(dateButton, "date", "Years|Months")

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-01-14:

106 + \li \b pickerMode
107 + \li represents the DatePicker \l mode to be used. This is an optional
108 + parameter and if not defined, the default mode will be used.

How do you not pass this optional parameter while still passing the parameters that follow it in the function specifications?

Also, in the returned object, it is not an optional parameter, the property is always there. Only in the function call it is optional.

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-01-14:

09 + \row
110 + \li \b date
111 + \li represents the date selected

The object is returned when the function is called, but the has not picked a date yet then. Can you make that clear in this description?

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-01-14:

112 + \row
113 + \li \b caller
114 + \li the instance of the component opening the panel

Is this optional? I guess it is used for positioning the popover, but that can be done without a caller (it is then centered in the window), and not needed for the panel.

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-01-14:

116 + \li \b callerProperty
117 + \li the property of the caller holding the date value which will be
118 + updated by the picker.

Ignore my previous comment. The callerProperty makes the caller not optional.

Revision history for this message

Zsombor Egri (zsombi) wrote on 2014-01-15:

> 20 + * Copyright 2013 Canonical Ltd.
>
>
> you are sooo behind ;)

Am I? This was ready last year, it's you who review it after one year :D

Revision history for this message

Zsombor Egri (zsombi) wrote on 2014-01-15:

> Why is there a \qmltype DateTimePanel? Is that different from the PickerPanel?
>
>
> \qmltype DateTimePanel
> \inqmlmodule Ubuntu.Components.Pickers 0.1
> \ingroup ubuntu-pickers
> \brief Provides a panel for opening a DatePicker in place of the input
> panel or
> as Popover, depending on the form factor.
>
> PickerPanel is a singleton component designed to open a DatePicker in
> input panel
> area or in a Popover, depending on the form factor, following the design
> guides
> on date pickers.

Ehh, that's wrong there.

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-01-16:

150 + property bool formFactorPhone: Screen.width <= units.gu(40) && Screen.height <= units.gu(71)

Do we always have Screen.height >= Screen.width ? What if width = 80, height = 50?

151 + // present in a property so we can test it in
152 + property bool isPhone: false

Is there a design spec that says it should be done like this?
What about a tiny tablet (like ipod touch)?

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-01-16:

> 150 + property bool formFactorPhone: Screen.width <= units.gu(40) &&
> Screen.height <= units.gu(71)
>
> Do we always have Screen.height >= Screen.width ? What if width = 80, height =
> 50?

sorry, the other way around. What if width = 70, height = 30?

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-01-16:

155 + function openPopover(caller, params) {
156 + var panel = PopupUtils.open(datePickerPopover, caller, params);
157 + panel.parent = QuickUtils.rootItem(null);
158 + return panel;
159 + }

the name of the variable is a bit misleading here

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-01-16:

329 - QUrl baseUrl(const QStringList& importPathList, const char* uri);
330 + static QUrl baseUrl(const QStringList& importPathList, const char* uri);

why is this needed?
and shouldn't you add the static in the cpp as well?

review: Needs Information

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-01-16:

The pointer for the panelTest popover is positioned wrong: http://ubuntuone.com/32S6rK0ZvL35SR6aCK76Lj

review: Needs Fixing

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-01-16:

431 + Button {
432 + id: defaultAPI
433 + text: "modeSet"

I would put a different text here.

434 + property date buttonDate: new Date()
435 + property Item panel
436 + onClicked: panel = PickerPanel.openDatePicker(defaultAPI, "buttonDate")
437 + }
438 + Button {
439 + id: modeSet
440 + text: "modeSet"
441 + property string mode
442 + property date buttonDate: new Date()
443 + property Item panel
444 + onClicked: panel = PickerPanel.openDatePicker(modeSet, "buttonDate", mode)
445 + }

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-01-16:

function test_0_clickOnDefaultAPI()

Instead of this function name, and id: defaultAPI, I think it is more clear if instead of defaultAPI you would say defaultMode everywhere.

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-01-16:

478 + function test_1_modeSet_YM() {
495 + function test_1_modeSet_YD() {
513 + function test_1_modeSet_HMS() {
530 + function test_1_modeSet_HS() {

You can combine these in one function with mode, pickerChildrenLength, modeIsValid parameters.

571 + function test_3_modeSet_YM() {
588 + function test_3_modeSet_YD() {
606 + function test_3_modeSet_HMS() {
623 + function test_3_modeSet_HS() {

same here

review: Needs Fixing

Revision history for this message

Zsombor Egri (zsombi) wrote on 2014-01-20:

> 78 + The function opens a date picker panel. The date picker is opened in
> input
> 79 + panel area if there is on-screen input panel available and the form
> factor
> 80 + describes a phone. The picked date will be read from and reported
> into the
>
> the sentence doesn't read very fluent..
> and what is "form factor describes a phone"? Can you be more specific what you
> mean?
Reformulated the sentence, however the phone detection code is still based on 40/71 GU w/h, till we get a proper agreement on how we detect these form factors.
Revision 905

Revision history for this message

Zsombor Egri (zsombi) wrote on 2014-01-20:

> 150 + property bool formFactorPhone: Screen.width <= units.gu(40) &&
> Screen.height <= units.gu(71)
>
> Do we always have Screen.height >= Screen.width ? What if width = 80, height =
> 50?
>
> 151 + // present in a property so we can test it in
> 152 + property bool isPhone: false
>
> Is there a design spec that says it should be done like this?
> What about a tiny tablet (like ipod touch)?

You are right in a sense that we have w/h 40/71 or h/w 40/71, due to landscape. And then we still need to show the picker in OSK area.
We don't have design spec, the wiki was the only thing we followed at some extent. I hate to say, but this whole component was really a mess from UX point of view. So all we have here is based on the UX guys, and they said they will return back once they have time to check it. So we will most probably have some updates later on this, Jouni promised to take a look at some point when the storm goes down. OSK area is a must, that's for sure, the Popover was suggested by me on higher FFs like tablet, desktop, TV, aso. He agreed that it is good to have it in such a way, let's see how we proceed with that.

iPod touch is NOT a tablet, Tim, sorry to disappoint you :)

Revision history for this message

Zsombor Egri (zsombi) wrote on 2014-01-20:

> 155 + function openPopover(caller, params) {
> 156 + var panel = PopupUtils.open(datePickerPopover, caller, params);
> 157 + panel.parent = QuickUtils.rootItem(null);
> 158 + return panel;
> 159 + }
>
> the name of the variable is a bit misleading here

I don't get it. Why? It can be a popover or an OSK panel... In a sense Popover is also a panel... and panel is also a popover... would you like to see popup there? OK, I'll rename to popover, but just for you :)

Revision history for this message

Zsombor Egri (zsombi) wrote on 2014-01-20:

> 329 - QUrl baseUrl(const QStringList& importPathList, const char* uri);
> 330 + static QUrl baseUrl(const QStringList& importPathList, const char*
> uri);
>
>
> why is this needed?
It is needed for us to return the base path to the location of the Ubuntu Components library so we know where to search for the rest of the QML files to be used as sigleton types. This method was there before, all I did is I defined the function to be static, so it can be accessed in other singleton definition functions.
Btw, there's a comment in the body of the function, so we may get rid of this method once we go for Qt5.2, however as far as I see that method does a bit differently... Let's see.

> and shouldn't you add the static in the cpp as well?
Khmm... I pretend I have not seen this question... :) C++ basics...

Revision history for this message

Zsombor Egri (zsombi) wrote on 2014-01-20:

> The pointer for the panelTest popover is positioned wrong:
> http://ubuntuone.com/32S6rK0ZvL35SR6aCK76Lj

That seems to be a PopoverBug, right?

Revision history for this message

Zsombor Egri (zsombi) wrote on 2014-01-20:

> 431 + Button {
> 432 + id: defaultAPI
> 433 + text: "modeSet"
>
> I would put a different text here.

Done.

>
> 434 + property date buttonDate: new Date()
> 435 + property Item panel
> 436 + onClicked: panel = PickerPanel.openDatePicker(defaultAPI,
> "buttonDate")
> 437 + }
> 438 + Button {
> 439 + id: modeSet
> 440 + text: "modeSet"
> 441 + property string mode
> 442 + property date buttonDate: new Date()
> 443 + property Item panel
> 444 + onClicked: panel = PickerPanel.openDatePicker(modeSet, "buttonDate",
> mode)
> 445 + }

Revision history for this message

Zsombor Egri (zsombi) wrote on 2014-01-20:

> function test_0_clickOnDefaultAPI()
>
>
> Instead of this function name, and id: defaultAPI, I think it is more clear if
> instead of defaultAPI you would say defaultMode everywhere.

Done

Revision history for this message

Zsombor Egri (zsombi) wrote on 2014-01-20:

> 478 + function test_1_modeSet_YM() {
> 495 + function test_1_modeSet_YD() {
> 513 + function test_1_modeSet_HMS() {
> 530 + function test_1_modeSet_HS() {
>
> You can combine these in one function with mode, pickerChildrenLength,
> modeIsValid parameters.
>
> 571 + function test_3_modeSet_YM() {
> 588 + function test_3_modeSet_YD() {
> 606 + function test_3_modeSet_HMS() {
> 623 + function test_3_modeSet_HS() {
>
> same here

Nope. These modes are better to be tested separately, detecting the problem is lot easier in separate tests.

lp:~zsombi/ubuntu-ui-toolkit/pickerpanel updated on 2014-01-20

905. By Zsombor Egri on 2014-01-20: function documentation reformulated
906. By Zsombor Egri on 2014-01-20: variable name fixed
907. By Zsombor Egri on 2014-01-20: update test cases
908. By Zsombor Egri on 2014-01-20: trunk merge

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-01-20:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-ui-toolkit-ci/1606/rebuild

review: Approve (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-01-20:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-ui-toolkit-ci/1607/rebuild

review: Approve (continuous-integration)

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-01-27:

> > and shouldn't you add the static in the cpp as well?
> Khmm... I pretend I have not seen this question... :) C++ basics...

uhm, yeah. thank you :)

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-01-27:

> > The pointer for the panelTest popover is positioned wrong:
> > http://ubuntuone.com/32S6rK0ZvL35SR6aCK76Lj
>
> That seems to be a PopoverBug, right?

yes

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-01-27:

looks good!

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk

Subscribers

People subscribed via source and target branches

to all changes:

Brian Blevins

Caco V. Topia

Jaroslavas Karmazinas

Ubuntu SDK team

Zsombor Egri

to status/vote changes:

william

 === modified file 'components.api'
 --- components.api	2013-12-13 14:10:39 +0000
 +++ components.api	2014-01-20 07:58:18 +0000
@@ -286,6 +286,9 @@
  modules/Ubuntu/Components/Pickers/PickerDelegate.qml
  AbstractButton
      readonly property Picker picker
++modules/Ubuntu/Components/Pickers/PickerPanel.qml
++Object
++    function openDatePicker(caller, property, mode)
  modules/Ubuntu/Components/Popups/ActionSelectionPopover.qml
  Popover
      property Item target
 === added file 'modules/Ubuntu/Components/Pickers/PickerPanel.qml'
 --- modules/Ubuntu/Components/Pickers/PickerPanel.qml	1970-01-01 00:00:00 +0000
 +++ modules/Ubuntu/Components/Pickers/PickerPanel.qml	2014-01-20 07:58:18 +0000
@@ -0,0 +1,261 @@
++/*
++ * Copyright 2014 Canonical Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU Lesser General Public License as published by
++ * the Free Software Foundation; version 3.
++ *
++ * This program is distributed in the hope that it will be useful,
++ * but WITHOUT ANY WARRANTY; without even the implied warranty of
++ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
++ * GNU Lesser General Public License for more details.
++ *
++ * You should have received a copy of the GNU Lesser General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ */
++
++import QtQuick 2.0
++import QtQuick.Window 2.0
++import Ubuntu.Components 0.1
++import Ubuntu.Components.ListItems 0.1
++import Ubuntu.Components.Popups 0.1
++
++/*!
++    \qmltype PickerPanel
++    \inqmlmodule Ubuntu.Components 0.1
++    \ingroup ubuntu-pickers
++    \brief Provides a panel for opening a DatePicker in place of the input panel or
++    as Popover, depending on the form factor.
++
++    PickerPanel is a singleton component designed to open a DatePicker in input panel
++    area or in a Popover, depending on the form factor, following the design guides
++    on date pickers.
++    \qml
++    import QtQuick 2.0
++    import Ubuntu.Components 0.1
++
++    MainWindow {
++        width: units.gu(40)
++        height: units.gu(71)
++
++        Page {
++            title: "PickerPanel"
++            Button {
++                id: dateButton
++                property date date: new Date()
++                text: Qt.formatDateTime(date, "yyyy/MMMM")
++                onClicked: PickerPanel.openDatePicker(dateButton, "date", "Years|Months")
++            }
++        }
++    }
++    \endqml
++
++    The opened panel is closed automatically when the user taps/presses outside
++    of the panel or Popover area.
++  */
++
++Object {
++
++    /*!
++      The function opend a DatePicker component in the input method area or in a
++      popover depending on the availability of an input method provider in the
++      system, and whether the size of the main screen width/height defines a phone
++      form factor. The picked date will be read from and reported into the \a property
++      of the \a caller as date type. This implies that the caller must have defined a
++      property with date type.
++
++      On failure the function returns null. On success the returned object has the
++      following properties:
++      \code
++      Object {
++          property DatePicker picker
++          property string pickerMode
++          property date date
++          property Item caller
++          property string callerProperty
++
++          signal closed()
++      }
++      \endcode
++
++      \table
++        \header
++            \li Property
++            \li Description
++        \row
++            \li \b picker
++            \li instance of the DatePicker component shown in the panel/popup
++        \row
++            \li \b pickerMode
++            \li represents the \l DatePicker::mode to be used. This is an optional
++                parameter and if not defined, the default mode will be used.
++        \row
++            \li \b date
++            \li represents the date selected
++        \row
++            \li \b caller
++            \li the instance of the component opening the panel
++        \row
++            \li \b callerProperty
++            \li the property of the caller holding the date value which will be
++                updated by the picker.
++        \header
++            \li Signal
++            \li Description
++        \row
++            \li closed()
++            \li the signal is emitted when the panel or popover gets closed. The
++                signal is handy when actions are performed upon panel close.
++      \endtable
++      */
++    function openDatePicker(caller, property, mode) {
++        if (mode === undefined) {
++            mode = "Years|Months|Days";
++        }
++        var params = {
++            "date": caller[property],
++            "pickerMode": mode,
++            "callerProperty": property
++        }
++
++        if (!internal.isPhone) {
++            // we have no input panel defined, or the therefore we show the picker in a Popover
++            return internal.openPopover(caller, params);
++        }
++        // OSK panel
++        return internal.openPanel(caller, params);
++    }
++
++    QtObject {
++        id: internal
++        objectName: "PickerPanel_Internals"
++
++        property bool formFactorPhone: Screen.width <= units.gu(40) && Screen.height <= units.gu(71)
++        // present in a property so we can test it in
++        property bool isPhone: false
++        Component.onCompleted: isPhone = formFactorPhone && (QuickUtils.inputMethodProvider !== "")
++
++        function openPopover(caller, params) {
++            var popover = PopupUtils.open(datePickerPopover, caller, params);
++            popover.parent = QuickUtils.rootItem(null);
++            return popover;
++        }
++        function openPanel(caller, params) {
++            params["caller"] = caller;
++            var panel = datePickerPanel.createObject(QuickUtils.rootItem(null), params);
++            return panel;
++        }
++    }
++
++    // popover
++    Component {
++        id: datePickerPopover
++        Popover {
++            property alias picker: picker
++            property alias date: picker.date
++            property alias pickerMode: picker.mode
++            property string callerProperty
++
++            signal closed()
++
++            contentWidth: frame.width
++            contentHeight: frame.height
++
++            Item {
++                id: frame
++                width: picker.width + units.gu(4)
++                height: picker.height + units.gu(4)
++                DatePicker {
++                    id: picker
++                    anchors.centerIn: parent
++                    Binding {
++                        target: caller
++                        property: callerProperty
++                        when: callerProperty != undefined
++                        value: picker.date
++                    }
++                }
++            }
++            Component.onDestruction: closed()
++        }
++    }
++
++    // OSK panel
++    Component {
++        id: datePickerPanel
++        Rectangle {
++            property alias picker: picker
++            property alias date: picker.date
++            property alias pickerMode: picker.mode
++            property string callerProperty
++            property Item caller
++
++            signal closed()
++
++            id: panel
++            // no additional styling is needed
++            color: Theme.palette.normal.overlay
++            width: parent.width
++            height: Qt.inputMethod.keyboardRectangle.height > 0 ? Qt.inputMethod.keyboardRectangle.height : units.gu(26)
++            y: parent.height
++
++            ThinDivider { anchors.bottom: parent.top }
++            DatePicker {
++                id: picker
++                anchors {
++                    fill: panel
++                    margins: units.gu(2)
++                }
++                Binding {
++                    target: caller
++                    property: callerProperty
++                    when: callerProperty != undefined
++                    value: picker.date
++                }
++            }
++
++            InverseMouseArea {
++                anchors.fill: parent
++                onPressed: panel.state = ''
++            }
++
++            Component.onCompleted: state = 'opened'
++
++            states: [
++                State {
++                    name: 'opened'
++                    PropertyChanges {
++                        target: panel
++                        y: parent.height - height
++                    }
++                }
++            ]
++            transitions: [
++                Transition {
++                    from: ''
++                    to: 'opened'
++                    UbuntuNumberAnimation {
++                        target: panel
++                        property: 'y'
++                    }
++                },
++                Transition {
++                    from: 'opened'
++                    to: ''
++                    SequentialAnimation {
++                        UbuntuNumberAnimation {
++                            target: panel
++                            property: 'y'
++                        }
++                        ScriptAction {
++                            script: {
++                                closed();
++                                panel.destroy();
++                            }
++                        }
++                    }
++                }
++            ]
++        }
++    }
++}
 === modified file 'modules/Ubuntu/Components/Pickers/PickerRow.qml'
 --- modules/Ubuntu/Components/Pickers/PickerRow.qml	2013-12-16 14:53:37 +0000
 +++ modules/Ubuntu/Components/Pickers/PickerRow.qml	2014-01-20 07:58:18 +0000
@@ -47,6 +47,7 @@
              circular: pickerModel.circular
              live: false
              width: pickerModel.pickerWidth
++            height: parent.height
              style: Rectangle {
                  anchors.fill: parent
 === modified file 'modules/Ubuntu/Components/plugin/plugin.cpp'
 --- modules/Ubuntu/Components/plugin/plugin.cpp	2013-11-19 17:26:04 +0000
 +++ modules/Ubuntu/Components/plugin/plugin.cpp	2014-01-20 07:58:18 +0000
@@ -59,6 +59,16 @@
   * Type registration functions.
   */
++static QObject *registerPickerPanel(QQmlEngine *engine, QJSEngine *scriptEngine)
++{
++    Q_UNUSED(scriptEngine)
++
++    const char *uri = "Ubuntu.Components";
++    QString qmlFile("Pickers/PickerPanel.qml");
++    QUrl url = UbuntuComponentsPlugin::baseUrl(engine->importPathList(), uri).resolved(QUrl::fromLocalFile(qmlFile));
++    return QuickUtils::instance().createQmlObject(url);
++}
++
  static QObject *registerClipboard(QQmlEngine *engine, QJSEngine *scriptEngine)
+ {
      Q_UNUSED(engine)
@@ -164,6 +174,8 @@
      qmlRegisterSingletonType<UCUriHandler>(uri, 0, 1, "UriHandler", registerUriHandler);
      // Needed for unit tests
      qRegisterMetaType<QList <QQmlError> >();
++    // register QML singletons
++    qmlRegisterSingletonType<QObject>(uri, 0, 1, "PickerPanel", registerPickerPanel);
+ }
  void UbuntuComponentsPlugin::initializeEngine(QQmlEngine *engine, const char *uri)
 === modified file 'modules/Ubuntu/Components/plugin/plugin.h'
 --- modules/Ubuntu/Components/plugin/plugin.h	2013-10-18 08:56:39 +0000
 +++ modules/Ubuntu/Components/plugin/plugin.h	2014-01-20 07:58:18 +0000
@@ -32,7 +32,7 @@
  public:
      void registerTypes(const char *uri);
      void initializeEngine(QQmlEngine *engine, const char *uri);
--    QUrl baseUrl(const QStringList& importPathList, const char* uri);
++    static QUrl baseUrl(const QStringList& importPathList, const char* uri);
      void registerQmlSingletonType(QQmlEngine *engine, const char* uri, const char* typeName, const char* qmlFile);
  private Q_SLOTS:
 === added file 'tests/resources/pickers/PanelTest.qml'
 --- tests/resources/pickers/PanelTest.qml	1970-01-01 00:00:00 +0000
 +++ tests/resources/pickers/PanelTest.qml	2014-01-20 07:58:18 +0000
@@ -0,0 +1,42 @@
++/*
++ * Copyright 2012 Canonical Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU Lesser General Public License as published by
++ * the Free Software Foundation; version 3.
++ *
++ * This program is distributed in the hope that it will be useful,
++ * but WITHOUT ANY WARRANTY; without even the implied warranty of
++ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
++ * GNU Lesser General Public License for more details.
++ *
++ * You should have received a copy of the GNU Lesser General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ */
++
++import QtQuick 2.0
++import Ubuntu.Components 0.1
++import Ubuntu.Components.Pickers 0.1
++
++MainView {
++    width: units.gu(40)
++    height: units.gu(71)
++
++    Column {
++        Button {
++            id: datePickerButton
++            property date date: new Date()
++            text: "Date picker: " + Qt.formatDate(date, "yyyy/MMMM/dd dddd")
++            onClicked: {
++                var picker = PickerPanel.openDatePicker(datePickerButton, "date", "Years|Months|Days")
++                picker.picker.locale = Qt.locale("hu_HU")
++            }
++        }
++        Button {
++            id: timePickerButton
++            property date date: new Date()
++            text: "Time picker: " + Qt.formatTime(date, "hh:mm:ss")
++            onClicked: PickerPanel.openDatePicker(timePickerButton, "date", "Hours|Minutes|Seconds")
++        }
++    }
++}
 === modified file 'tests/unit/add_qmlmakecheck.pri'
 --- tests/unit/add_qmlmakecheck.pri	2013-12-13 15:50:35 +0000
 +++ tests/unit/add_qmlmakecheck.pri	2014-01-20 07:58:18 +0000
@@ -10,5 +10,5 @@
  check.commands += cd ../../..;
  check.commands += qmlplugindump Ubuntu.Components 0.1 modules > plugins.qmltypes;
  # Palette gets included in Qt 5.2 qmlplugindump even though it's qml
--check.commands += BUILTINS=QQuick,QQml,U1db::,Palette python tests/qmlapicheck.py modules/Ubuntu/Components/qmldir modules/Ubuntu/Components/Colors/UbuntuColors.qml modules/Ubuntu/Components/*/qmldir plugins.qmltypes > components.api.new;
++check.commands += BUILTINS=QQuick,QQml,U1db::,Palette python tests/qmlapicheck.py modules/Ubuntu/Components/qmldir modules/Ubuntu/Components/Colors/UbuntuColors.qml modules/Ubuntu/Components/Pickers/PickerPanel.qml modules/Ubuntu/Components/*/qmldir plugins.qmltypes > components.api.new;
  check.commands += diff -Fqml -u components.api components.api.new || exit 1; cd tests/unit
 === added file 'tests/unit_x11/tst_components/tst_pickerpanel.qml'
 --- tests/unit_x11/tst_components/tst_pickerpanel.qml	1970-01-01 00:00:00 +0000
 +++ tests/unit_x11/tst_components/tst_pickerpanel.qml	2014-01-20 07:58:18 +0000
@@ -0,0 +1,245 @@
++/*
++ * Copyright 2013 Canonical Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU Lesser General Public License as published by
++ * the Free Software Foundation; version 3.
++ *
++ * This program is distributed in the hope that it will be useful,
++ * but WITHOUT ANY WARRANTY; without even the implied warranty of
++ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
++ * GNU Lesser General Public License for more details.
++ *
++ * You should have received a copy of the GNU Lesser General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ */
++
++import QtQuick 2.0
++import QtTest 1.0
++import Ubuntu.Test 0.1
++import Ubuntu.Components 0.1
++import Ubuntu.Components.Pickers 0.1
++
++Item {
++    id: testSuite
++    width: units.gu(40)
++    height: units.gu(71)
++
++    Flow {
++        anchors {
++            fill: parent
++            // give a margin so we can dismiss panels
++            topMargin: units.gu(4)
++        }
++
++        Button {
++            id: defaultMode
++            text: "defaultMode"
++            property date buttonDate: new Date()
++            property Item panel
++            onClicked: panel = PickerPanel.openDatePicker(defaultMode, "buttonDate")
++        }
++        Button {
++            id: modeSet
++            text: "modeSet"
++            property string mode
++            property date buttonDate: new Date()
++            property Item panel
++            onClicked: panel = PickerPanel.openDatePicker(modeSet, "buttonDate", mode)
++        }
++    }
++
++    SignalSpy {
++        id: closeSpy
++        signalName: "closed"
++    }
++
++    UbuntuTestCase {
++        name: "PickerPanelAPI"
++        when: windowShown
++
++        function initTestCase() {
++            waitForRendering(testSuite);
++        }
++
++        function test_0_clickOndefaultMode() {
++            mouseClick(defaultMode, units.gu(1), units.gu(1));
++            verify(defaultMode.panel !== null, "the picker is not opened");
++            verify(defaultMode.panel.picker !== null, "the DatePicker is not defined");
++            compare(defaultMode.panel.pickerMode, "Years|Months|Days", "the mode from the picker is not the default");
++            compare(defaultMode.panel.date, defaultMode.buttonDate, "the date from the picker differs from the button's");
++            compare(defaultMode.panel.caller, defaultMode, "wrong caller");
++            compare(defaultMode.panel.callerProperty, "buttonDate", "wrong callerProperty");
++            verify(defaultMode.panel.hasOwnProperty("closed"), "the object has no closed signal");
++
++            // dismiss
++            closeSpy.clear();
++            closeSpy.target = defaultMode.panel;
++            mouseClick(testSuite, units.gu(1), units.gu(1));
++            closeSpy.wait();
++        }
++
++        function test_1_modeSet_YM() {
++            modeSet.mode = "Years|Months" ;
++            mouseClick(modeSet, units.gu(1), units.gu(1));
++            verify(modeSet.panel !== null, "the picker is opened");
++            compare(modeSet.panel.date, modeSet.buttonDate, "the date from the picker differs from the button's");
++            compare(modeSet.panel.pickerMode, modeSet.mode, "the mode from the picker differs from the button's");
++            // check the number of pickers
++            var picker = findChild(modeSet.panel.picker, "PickerRow_Positioner");
++            compare(picker.children.length, 3, "there is not enough pickers in the panel");
++
++            // dismiss
++            closeSpy.clear();
++            closeSpy.target = modeSet.panel;
++            mouseClick(testSuite, units.gu(1), units.gu(1));
++            closeSpy.wait();
++        }
++
++        function test_1_modeSet_YD() {
++            modeSet.mode = "Years|Days" ;
++            mouseClick(modeSet, units.gu(1), units.gu(1));
++            verify(modeSet.panel !== null, "the picker is opened");
++            compare(modeSet.panel.date, modeSet.buttonDate, "the date from the picker differs from the button's");
++            compare(modeSet.panel.pickerMode, modeSet.mode, "the mode from the picker differs from the button's");
++            // check the number of pickers
++            var picker = findChild(modeSet.panel.picker, "PickerRow_Positioner");
++            expectFailContinue("", "this mode is invalid");
++            compare(picker.children.length, 2, "there is not enough pickers in the panel");
++
++            // dismiss
++            closeSpy.clear();
++            closeSpy.target = modeSet.panel;
++            mouseClick(testSuite, units.gu(1), units.gu(1));
++            closeSpy.wait();
++        }
++
++        function test_1_modeSet_HMS() {
++            modeSet.mode = "Hours|Minutes|Seconds" ;
++            mouseClick(modeSet, units.gu(1), units.gu(1));
++            verify(modeSet.panel !== null, "the picker is opened");
++            compare(modeSet.panel.date, modeSet.buttonDate, "the date from the picker differs from the button's");
++            compare(modeSet.panel.pickerMode, modeSet.mode, "the mode from the picker differs from the button's");
++            // check the number of pickers
++            var picker = findChild(modeSet.panel.picker, "PickerRow_Positioner");
++            compare(picker.children.length, 4, "there is not enough pickers in the panel");
++
++            // dismiss
++            closeSpy.clear();
++            closeSpy.target = modeSet.panel;
++            mouseClick(testSuite, units.gu(1), units.gu(1));
++            closeSpy.wait();
++        }
++
++        function test_1_modeSet_HS() {
++            modeSet.mode = "Hours|Seconds" ;
++            mouseClick(modeSet, units.gu(1), units.gu(1));
++            verify(modeSet.panel !== null, "the picker is opened");
++            compare(modeSet.panel.date, modeSet.buttonDate, "the date from the picker differs from the button's");
++            compare(modeSet.panel.pickerMode, modeSet.mode, "the mode from the picker differs from the button's");
++            // check the number of pickers
++            var picker = findChild(modeSet.panel.picker, "PickerRow_Positioner");
++            expectFailContinue("", "this mode is invalid");
++            compare(picker.children.length, 2, "there is not enough pickers in the panel");
++
++            // dismiss
++            closeSpy.clear();
++            closeSpy.target = modeSet.panel;
++            mouseClick(testSuite, units.gu(1), units.gu(1));
++            closeSpy.wait();
++        }
++
++        // forced panel tests
++        // these should be executed as last ones
++        function test_2_clickOndefaultMode() {
++            // force panel - this is private specific!!!
++            var privates = findChild(PickerPanel, "PickerPanel_Internals");
++            privates.isPhone = true;
++
++            mouseClick(defaultMode, units.gu(1), units.gu(1));
++            verify(defaultMode.panel !== null, "the picker is not opened");
++            verify(defaultMode.panel.picker !== null, "the DatePicker is not defined");
++            compare(defaultMode.panel.pickerMode, "Years|Months|Days", "the mode from the picker is not the default");
++            compare(defaultMode.panel.date, defaultMode.buttonDate, "the date from the picker differs from the button's");
++            compare(defaultMode.panel.caller, defaultMode, "wrong caller");
++            compare(defaultMode.panel.callerProperty, "buttonDate", "wrong callerProperty");
++            verify(defaultMode.panel.hasOwnProperty("closed"), "the object has no closed signal");
++
++            // dismiss
++            closeSpy.clear();
++            closeSpy.target = defaultMode.panel;
++            mouseClick(testSuite, units.gu(1), units.gu(1));
++            closeSpy.wait();
++        }
++
++        function test_3_modeSet_YM() {
++            modeSet.mode = "Years|Months" ;
++            mouseClick(modeSet, units.gu(1), units.gu(1));
++            verify(modeSet.panel !== null, "the picker is opened");
++            compare(modeSet.panel.date, modeSet.buttonDate, "the date from the picker differs from the button's");
++            compare(modeSet.panel.pickerMode, modeSet.mode, "the mode from the picker differs from the button's");
++            // check the number of pickers
++            var picker = findChild(modeSet.panel.picker, "PickerRow_Positioner");
++            compare(picker.children.length, 3, "there is not enough pickers in the panel");
++
++            // dismiss
++            closeSpy.clear();
++            closeSpy.target = modeSet.panel;
++            mouseClick(testSuite, units.gu(1), units.gu(1));
++            closeSpy.wait();
++        }
++
++        function test_3_modeSet_YD() {
++            modeSet.mode = "Years|Days" ;
++            mouseClick(modeSet, units.gu(1), units.gu(1));
++            verify(modeSet.panel !== null, "the picker is opened");
++            compare(modeSet.panel.date, modeSet.buttonDate, "the date from the picker differs from the button's");
++            compare(modeSet.panel.pickerMode, modeSet.mode, "the mode from the picker differs from the button's");
++            // check the number of pickers
++            var picker = findChild(modeSet.panel.picker, "PickerRow_Positioner");
++            expectFailContinue("", "this mode is invalid");
++            compare(picker.children.length, 2, "there is not enough pickers in the panel");
++
++            // dismiss
++            closeSpy.clear();
++            closeSpy.target = modeSet.panel;
++            mouseClick(testSuite, units.gu(1), units.gu(1));
++            closeSpy.wait();
++        }
++
++        function test_3_modeSet_HMS() {
++            modeSet.mode = "Hours|Minutes|Seconds" ;
++            mouseClick(modeSet, units.gu(1), units.gu(1));
++            verify(modeSet.panel !== null, "the picker is opened");
++            compare(modeSet.panel.date, modeSet.buttonDate, "the date from the picker differs from the button's");
++            compare(modeSet.panel.pickerMode, modeSet.mode, "the mode from the picker differs from the button's");
++            // check the number of pickers
++            var picker = findChild(modeSet.panel.picker, "PickerRow_Positioner");
++            compare(picker.children.length, 4, "there is not enough pickers in the panel");
++
++            // dismiss
++            closeSpy.clear();
++            closeSpy.target = modeSet.panel;
++            mouseClick(testSuite, units.gu(1), units.gu(1));
++            closeSpy.wait();
++        }
++
++        function test_3_modeSet_HS() {
++            modeSet.mode = "Hours|Seconds" ;
++            mouseClick(modeSet, units.gu(1), units.gu(1));
++            verify(modeSet.panel !== null, "the picker is opened");
++            compare(modeSet.panel.date, modeSet.buttonDate, "the date from the picker differs from the button's");
++            compare(modeSet.panel.pickerMode, modeSet.mode, "the mode from the picker differs from the button's");
++            // check the number of pickers
++            var picker = findChild(modeSet.panel.picker, "PickerRow_Positioner");
++            expectFailContinue("", "this mode is invalid");
++            compare(picker.children.length, 2, "there is not enough pickers in the panel");
++
++            // dismiss
++            closeSpy.clear();
++            closeSpy.target = modeSet.panel;
++            mouseClick(testSuite, units.gu(1), units.gu(1));
++            closeSpy.wait();
++        }
++    }
++}

Ubuntu UI Toolkit

Merge lp:~zsombi/ubuntu-ui-toolkit/pickerpanel into lp:ubuntu-ui-toolkit

Commit message

Description of the change

Preview Diff

Subscribers