Ubuntu UI Toolkit

Merge lp:~tpeeters/ubuntu-ui-toolkit/120-HeaderState into lp:ubuntu-ui-toolkit/staging

120-HeaderState
Merge into staging

Proposed by Tim Peeters on 2014-06-27

Status:	Merged
Approved by:	Cris Dywan on 2014-07-03
Approved revision:	1130
Merged at revision:	1136
Proposed branch:	lp:~tpeeters/ubuntu-ui-toolkit/120-HeaderState
Merge into:	lp:ubuntu-ui-toolkit/staging
Prerequisite:	lp:~tpeeters/ubuntu-ui-toolkit/110-headerInput
Diff against target:	329 lines (+183/-68) 6 files modified components.api (+6/-0) modules/Ubuntu/Components/PageHeadConfiguration.qml (+3/-0) modules/Ubuntu/Components/PageHeadState.qml (+113/-0) modules/Ubuntu/Components/qmldir (+1/-0) tests/resources/toolbar/header.qml (+18/-32) tests/resources/toolbar/headerTextInput.qml (+42/-36)
To merge this branch:	bzr merge lp:~tpeeters/ubuntu-ui-toolkit/120-HeaderState
Related bugs:	Link a bug report
Related blueprints:	New header and bottom edge (Essential)

Reviewer	Review Type	Date Requested	Status
PS Jenkins bot	continuous-integration		Approve on 2014-07-03
Cris Dywan		2014-06-27	Approve on 2014-07-03
Review via email: mp+224813@code.launchpad.net

Commit message

Add PageHeadState component.

Description of the change

Add PageHeadState to make it easier to configure the page header when changing states.

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-06-28:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/501/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-06-30:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/506/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

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

FAILED: Continuous integration, rev:1122
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/524/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/1404/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-utopic/1214/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-amd64-ci/356/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/356/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-i386-ci/356/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/2354/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-amd64/1360/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/524/rebuild

review: Needs Fixing (continuous-integration)

lp:~tpeeters/ubuntu-ui-toolkit/120-HeaderState updated on 2014-07-01

1123. By Tim Peeters on 2014-07-01: merge 110-headerInput

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-07-02:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/529/rebuild

review: Needs Fixing (continuous-integration)

lp:~tpeeters/ubuntu-ui-toolkit/120-HeaderState updated on 2014-07-02

1124. By Tim Peeters on 2014-07-02: kick jenkins

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-07-02:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/532/rebuild

review: Approve (continuous-integration)

Revision history for this message

Cris Dywan (kalikiana) wrote on 2014-07-02:

Could PageHeadState potentially be used instead of the State { PropertyChanges } hack, if there's no way to correctly reset the actions otherwise? It seems like a bad idea to push internal details into app logic.

review: Needs Information

lp:~tpeeters/ubuntu-ui-toolkit/120-HeaderState updated on 2014-07-02

1125. By Tim Peeters on 2014-07-02: use PageHeadState for all States in example

Revision history for this message

Tim Peeters (tpeeters) wrote on 2014-07-02:

I updated the example to use PageHeadState instead of the state there. But still this state is needed to reset the actions after the state was changed, so I am not sure this is what you meant.

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-07-02:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/542/rebuild

review: Approve (continuous-integration)

Revision history for this message

Cris Dywan (kalikiana) wrote on 2014-07-03:

How about defining the search action in the default state? That way there's no redundancy, it's less hacky and less confusing to read. Like so http://paste.ubuntu.com/7740992/

lp:~tpeeters/ubuntu-ui-toolkit/120-HeaderState updated on 2014-07-03

1126. By Tim Peeters on 2014-07-03: name the default state
1127. By Tim Peeters on 2014-07-03: fix example code
1128. By Tim Peeters on 2014-07-03: remove searchAction
1129. By Tim Peeters on 2014-07-03: fix
1130. By Tim Peeters on 2014-07-03: remove comment

Revision history for this message

Cris Dywan (kalikiana) wrote on 2014-07-03:

Looking nice now!

review: Approve

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-07-03:

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/544/rebuild

review: Approve (continuous-integration)

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:

Dan Chapman 

Tim Peeters

Tom Mirmar

Ubuntu SDK team

 === modified file 'components.api'
 --- components.api	2014-07-02 13:39:29 +0000
 +++ components.api	2014-07-03 11:13:13 +0000
@@ -250,6 +250,12 @@
      property list<Action> actions
      property Action backAction
      property Item contents
++PageHeadState 1.1
++State
++    property PageHeadConfiguration head
++    property list<Action> actions
++    property Action backAction
++    property Item contents
  PageStack 0.1 1.0
  PageTreeNode
      property bool __showHeader
 === modified file 'modules/Ubuntu/Components/PageHeadConfiguration.qml'
 --- modules/Ubuntu/Components/PageHeadConfiguration.qml	2014-06-30 17:49:31 +0000
 +++ modules/Ubuntu/Components/PageHeadConfiguration.qml	2014-07-03 11:13:13 +0000
@@ -59,6 +59,9 @@
+             }
+         }
        \endqml
++
++      See \l PageHeadState for an example that shows how search mode can
++      be implemented.
       */
      property Item contents: null
+ }
 === added file 'modules/Ubuntu/Components/PageHeadState.qml'
 --- modules/Ubuntu/Components/PageHeadState.qml	1970-01-01 00:00:00 +0000
 +++ modules/Ubuntu/Components/PageHeadState.qml	2014-07-03 11:13:13 +0000
@@ -0,0 +1,113 @@
++/*
++ * 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.2
++
++/*!
++    \qmltype PageHeadState
++    \inqmlmodule Ubuntu.Components 1.1
++    \ingroup ubuntu
++    \since Ubuntu.Components 1.1
++    \brief PageHeadState is a helper component to make it easier to
++        configure the page header when changing states.
++
++   This example shows how to add an action to the header that
++   enables the user to enter search/input mode:
++   \qml
++        import QtQuick 2.2
++        import Ubuntu.Components 1.1
++
++        MainView {
++            id: mainView
++            width: units.gu(40)
++            height: units.gu(50)
++            useDeprecatedToolbar: false
++
++            Page {
++                id: searchPage
++                title: "Click the icon"
++
++                Label {
++                    anchors.centerIn: parent
++                    text: searchPage.state == "search" ? "search mode" : "normal mode"
++                }
++
++                state: "default"
++                states: [
++                    PageHeadState {
++                        name: "default"
++                        head: searchPage.head
++                        actions: Action {
++                            iconName: "search"
++                            onTriggered: searchPage.state = "search"
++                        }
++                    },
++                    PageHeadState {
++                        id: headerState
++                        name: "search"
++                        head: searchPage.head
++                        actions: [
++                            Action {
++                                iconName: "contact"
++                            }
++                        ]
++                        backAction: Action {
++                            id: leaveSearchAction
++                            text: "back"
++                            iconName: "back"
++                            onTriggered: searchPage.state = "default"
++                        }
++                        contents: TextField {
++                            placeholderText: "search..."
++                        }
++                    }
++                ]
++            }
++        }
++   \endqml
++ */
++State {
++    id: state
++
++    /*!
++      The head property of the \l Page which will be the target of
++      the property changes of this State. This property must always
++      be set before the State can be used.
++     */
++    property PageHeadConfiguration head
++
++    /*!
++      The actions to be shown in the header with this state.
++     */
++    property list<Action> actions
++
++    /*!
++      The back action for this state.
++     */
++    property Action backAction
++
++    /*!
++      The contents of the header when this state is active.
++     */
++    property Item contents
++
++    PropertyChanges {
++        target: state.head
++        backAction: state.backAction
++        actions: state.actions
++        contents: state.contents
++    }
++}
 === modified file 'modules/Ubuntu/Components/qmldir'
 --- modules/Ubuntu/Components/qmldir	2014-07-02 13:39:29 +0000
 +++ modules/Ubuntu/Components/qmldir	2014-07-03 11:13:13 +0000
@@ -99,3 +99,4 @@
  internal PageBase Page10.qml
  Page 1.1 Page11.qml
  PageHeadConfiguration 1.1 PageHeadConfiguration.qml
++PageHeadState 1.1 PageHeadState.qml
 === modified file 'tests/resources/toolbar/header.qml'
 --- tests/resources/toolbar/header.qml	2014-06-30 12:09:25 +0000
 +++ tests/resources/toolbar/header.qml	2014-07-03 11:13:13 +0000
@@ -145,49 +145,35 @@
                          text: searchPage.state == "search" ? "search mode" : "normal mode"
+                     }
--                    head.actions: Action {
--                        id: searchAction
--                        iconName: "search"
--                        onTriggered: searchPage.state = "search"
--                    }
--
--                    state: ""
++                    state: "default"
                      states: [
--                        State {
--                            name: ""
--                            PropertyChanges {
--                                target: searchPage.head
--                                // needed otherwise actions will not be
--                                // returned to its original state.
--                                actions: [ searchAction ]
++                        PageHeadState {
++                            name: "default"
++                            head: searchPage.head
++                            actions: Action {
++                                id: searchAction
++                                iconName: "search"
++                                onTriggered: searchPage.state = "search"
+                             }
                          },
--                        State {
--                            // TODO: The definition of this state will be
--                            // simplified a lot in a following MR that
--                            // introduces the HeaderState component.
++                        PageHeadState {
                              id: headerState
                              name: "search"
--                            property Action back: Action {
--                                id: leaveSearchAction
--                                text: "back"
--                                iconName: "back"
--                                onTriggered: searchPage.state = ""
--                            }
--                            property list<Action> actions: [
++                            head: searchPage.head
++                            actions: [
                                  Action {
                                      iconName: "contact"
+                                 }
+                             ]
--                            property TextField input: TextField {
++                            backAction: Action {
++                                id: leaveSearchAction
++                                text: "back"
++                                iconName: "back"
++                                onTriggered: searchPage.state = "default"
++                            }
++                            contents: TextField {
                                  placeholderText: "search..."
+                             }
--                            PropertyChanges {
--                                target: searchPage.head
--                                backAction: headerState.back
--                                actions: headerState.actions
--                                contents: headerState.input
--                            }
+                         }
+                     ]
+                 }
 === modified file 'tests/resources/toolbar/headerTextInput.qml'
 --- tests/resources/toolbar/headerTextInput.qml	2014-05-06 16:20:50 +0000
 +++ tests/resources/toolbar/headerTextInput.qml	2014-07-03 11:13:13 +0000
@@ -14,53 +14,59 @@
   * along with this program.  If not, see <http://www.gnu.org/licenses/>.
   */
--import QtQuick 2.0
++import QtQuick 2.2
  import Ubuntu.Components 1.1
  MainView {
--    width: units.gu(50)
--    height: units.gu(80)
++    width: units.gu(40)
++    height: units.gu(50)
      useDeprecatedToolbar: false
      Page {
--        title: "test page"
--
--        id: page
--
--        __customHeaderContents: Item {
--            TextField {
--                anchors {
--                    left: parent.left
--                    verticalCenter: parent.verticalCenter
--                }
--            }
--        }
++        id: searchPage
++        title: "Click the icon"
          Label {
              anchors.centerIn: parent
--            text: "Hello, world"
--        }
--
--        tools: ToolbarItems {
--            ToolbarButton {
--                action: Action {
--                    iconName: "contact"
--                    text: "oh"
--                    onTriggered: print("lala")
--                    enabled: false
++            text: searchPage.state == "search" ? "search mode" : "normal mode"
++        }
++
++        head.actions: Action {
++            id: searchAction
++            iconName: "search"
++            onTriggered: searchPage.state = "search"
++        }
++
++        state: ""
++        states: [
++            State {
++                name: ""
++                PropertyChanges {
++                    target: searchPage.head
++                    // needed otherwise actions will not be
++                    // returned to its original state.
++                    actions: [ searchAction ]
+                 }
--            }
--
--            back: ToolbarButton {
--                action: Action {
--                    text: "cancel"
--                    iconName: "cancel"
--                    onTriggered: {
--                        page.__customHeaderContents = null;
++            },
++            PageHeadState {
++                id: headerState
++                name: "search"
++                head: searchPage.head
++                actions: [
++                    Action {
++                        iconName: "contact"
+                     }
--                }
--                anchors.verticalCenter: parent.verticalCenter
++                ]
++                backAction: Action {
++                    id: leaveSearchAction
++                    text: "back"
++                    iconName: "back"
++                    onTriggered: searchPage.state = ""
++                }
++                contents: TextField {
++                    placeholderText: "search..."
++                }
+             }
--        }
++        ]
+     }
+ }