Merge lp:~tpeeters/ubuntu-ui-toolkit/tabbar-expose into lp:ubuntu-ui-toolkit

Proposed by Tim Peeters on 2013-08-01
Status: Merged
Approved by: Tim Peeters on 2013-08-01
Approved revision: 678
Merged at revision: 671
Proposed branch: lp:~tpeeters/ubuntu-ui-toolkit/tabbar-expose
Merge into: lp:ubuntu-ui-toolkit
Diff against target: 226 lines (+65/-60)
7 files modified
components.api (+2/-0)
modules/Ubuntu/Components/TabBar.qml (+19/-1)
modules/Ubuntu/Components/Tabs.qml (+0/-1)
modules/Ubuntu/Components/Themes/Ambiance/TabBarStyle.qml (+11/-5)
tests/resources/navigation/MyCustomPage.qml (+2/-0)
tests/resources/navigation/StackWithTabs.qml (+31/-3)
tests/resources/tabs/MyCustomPage.qml (+0/-50)
To merge this branch: bzr merge lp:~tpeeters/ubuntu-ui-toolkit/tabbar-expose
Reviewer Review Type Date Requested Status
PS Jenkins bot continuous-integration Approve on 2013-08-01
Christian Dywan (community) 2013-08-01 Approve on 2013-08-01
Review via email: mp+178066@code.launchpad.net

Commit message

Add bool properties alwaysSelectionMode and animate to TabBar for greater control of its behavior.

To post a comment you must log in.
Christian Dywan (kalikiana) wrote :

I see an initially unexpected phenomenon: with 'animate:false' I can still see the delay when selectionMode changes to false. I think, though, after discussing this on IRC and thinking it through, that it's only an issue in a demo like tests/resources/navigation/StackWithTabs.qml - users don't use buttons to change the values in practise. And it's far from a trivial aspect because it's separate from the fade duration.

So it works as advertised, given real apps.

review: Approve
review: Approve (continuous-integration)

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'components.api'
2--- components.api 2013-07-29 11:31:00 +0000
3+++ components.api 2013-08-01 13:42:29 +0000
4@@ -183,6 +183,8 @@
5 StyledItem
6 property Item tabsItem
7 property bool selectionMode
8+ property bool alwaysSelectionMode
9+ property bool animate
10 modules/Ubuntu/Components/Tabs.qml
11 PageTreeNode
12 property int selectedTabIndex
13
14=== modified file 'modules/Ubuntu/Components/TabBar.qml'
15--- modules/Ubuntu/Components/TabBar.qml 2013-07-29 11:31:00 +0000
16+++ modules/Ubuntu/Components/TabBar.qml 2013-08-01 13:42:29 +0000
17@@ -43,7 +43,25 @@
18 An inactive tab bar only displays the currently selected tab,
19 and an active tab bar can be interacted with to select a tab.
20 */
21- property bool selectionMode: false
22+ property bool selectionMode: alwaysSelectionMode
23+
24+ /*!
25+ Do not deactivate the tab bar after a specified idle time or when the user selects a new tab.
26+ Off by default.
27+ */
28+ property bool alwaysSelectionMode: false
29+
30+ /*!
31+ Automatically activate the tab bar when \l alwaysSelectionMode is set.
32+ */
33+ onAlwaysSelectionModeChanged: {
34+ if (tabBar.alwaysSelectionMode) selectionMode = true;
35+ }
36+
37+ /*!
38+ Show animations when the state changes. Default: true.
39+ */
40+ property bool animate: true
41
42 style: Theme.createStyleComponent("TabBarStyle.qml", tabBar)
43 }
44
45=== modified file 'modules/Ubuntu/Components/Tabs.qml'
46--- modules/Ubuntu/Components/Tabs.qml 2013-07-25 12:14:09 +0000
47+++ modules/Ubuntu/Components/Tabs.qml 2013-08-01 13:42:29 +0000
48@@ -145,7 +145,6 @@
49 }
50 \endqml
51 */
52-
53 PageTreeNode {
54 id: tabs
55 anchors.fill: parent
56
57=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/TabBarStyle.qml'
58--- modules/Ubuntu/Components/Themes/Ambiance/TabBarStyle.qml 2013-07-30 14:47:26 +0000
59+++ modules/Ubuntu/Components/Themes/Ambiance/TabBarStyle.qml 2013-08-01 13:42:29 +0000
60@@ -23,7 +23,7 @@
61 property color headerTextColor: Theme.palette.normal.backgroundText
62 property color headerTextSelectedColor: Theme.palette.selected.backgroundText
63
64- property int headerTextFadeDuration: 350
65+ property int headerTextFadeDuration: styledItem.animate ? 350 : 0
66 property url indicatorImageSource: "artwork/chevron.png"
67
68 property string headerFontSize: "x-large"
69@@ -32,7 +32,7 @@
70 property real headerTextRightMargin: units.gu(2)
71 property real headerTextBottomMargin: units.gu(2)
72
73- property real buttonPositioningVelocity: 1.0
74+ property real buttonPositioningVelocity: styledItem.animate ? 1.0 : -1
75
76 // The time of inactivity before leaving selection mode automatically
77 property int deactivateTime: 3000
78@@ -187,7 +187,9 @@
79 onClicked: {
80 if (!activatingTimer.running) {
81 tabs.selectedTabIndex = index;
82- styledItem.selectionMode = false;
83+ if (!styledItem.alwaysSelectionMode) {
84+ styledItem.selectionMode = false;
85+ }
86 button.select();
87 } else {
88 activatingTimer.stop();
89@@ -288,11 +290,15 @@
90
91 // deactivate the tab bar after inactivity
92 onMovementStarted: idleTimer.stop()
93- onMovementEnded: idleTimer.restart()
94+ onMovementEnded: {
95+ if (!styledItem.alwaysSelectionMode) {
96+ idleTimer.restart();
97+ }
98+ }
99 Timer {
100 id: idleTimer
101 interval: tabBarStyle.deactivateTime
102- running: styledItem.selectionMode
103+ running: styledItem.selectionMode && !styledItem.alwaysSelectionMode
104 onTriggered: styledItem.selectionMode = false
105 }
106 }
107
108=== renamed directory 'tests/resources/pagestack' => 'tests/resources/navigation'
109=== modified file 'tests/resources/navigation/MyCustomPage.qml'
110--- tests/resources/pagestack/MyCustomPage.qml 2013-07-22 10:39:03 +0000
111+++ tests/resources/navigation/MyCustomPage.qml 2013-08-01 13:42:29 +0000
112@@ -38,9 +38,11 @@
113 tools: ToolbarItems {
114 ToolbarButton {
115 text: "action 1"
116+ iconSource: Qt.resolvedUrl("call_icon.png")
117 }
118 ToolbarButton {
119 text: "action 2"
120+ iconSource: Qt.resolvedUrl("call_icon.png")
121 }
122 opened: true
123 locked: true
124
125=== modified file 'tests/resources/navigation/StackWithTabs.qml'
126--- tests/resources/pagestack/StackWithTabs.qml 2013-07-23 13:17:43 +0000
127+++ tests/resources/navigation/StackWithTabs.qml 2013-08-01 13:42:29 +0000
128@@ -41,9 +41,37 @@
129 Tab {
130 title: "Tab 2"
131 page: Page {
132- Label {
133- anchors.centerIn: parent
134- text: "Use header to navigate between tabs"
135+ Column {
136+ anchors {
137+ centerIn: parent
138+ }
139+ width: childrenRect.width
140+ height: childrenRect.height
141+ spacing: units.gu(1)
142+
143+ Label {
144+ text: "Tab bar always in selection mode?"
145+ }
146+ Switch {
147+ id: alwaysSelectionModeSwitch
148+ Binding {
149+ target: tabs.tabBar
150+ property: "alwaysSelectionMode"
151+ value: alwaysSelectionModeSwitch.checked
152+ }
153+ }
154+ Label {
155+ text: "Animate tab bar."
156+ }
157+ Switch {
158+ id: animateSwitch
159+ checked: true
160+ Binding {
161+ target: tabs.tabBar
162+ property: "animate"
163+ value: animateSwitch.checked
164+ }
165+ }
166 }
167 }
168 }
169
170=== renamed file 'tests/resources/tabs/Tabs.qml' => 'tests/resources/navigation/Tabs.qml'
171=== renamed file 'tests/resources/tabs/call_icon@8.png' => 'tests/resources/navigation/call_icon@8.png'
172=== removed directory 'tests/resources/tabs'
173=== removed file 'tests/resources/tabs/MyCustomPage.qml'
174--- tests/resources/tabs/MyCustomPage.qml 2013-07-29 11:31:00 +0000
175+++ tests/resources/tabs/MyCustomPage.qml 1970-01-01 00:00:00 +0000
176@@ -1,50 +0,0 @@
177-/*
178- * Copyright 2012 Canonical Ltd.
179- *
180- * This program is free software; you can redistribute it and/or modify
181- * it under the terms of the GNU Lesser General Public License as published by
182- * the Free Software Foundation; version 3.
183- *
184- * This program is distributed in the hope that it will be useful,
185- * but WITHOUT ANY WARRANTY; without even the implied warranty of
186- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
187- * GNU Lesser General Public License for more details.
188- *
189- * You should have received a copy of the GNU Lesser General Public License
190- * along with this program. If not, see <http://www.gnu.org/licenses/>.
191- */
192-
193-import QtQuick 2.0
194-import Ubuntu.Components 0.1
195-
196-Page {
197- title: i18n.tr("My custom page")
198-
199- Flickable {
200- anchors.fill: parent
201- contentHeight: parent.height + units.gu(10)
202- Label {
203- anchors {
204- top: parent.top
205- topMargin: units.gu(16)
206- horizontalCenter: parent.horizontalCenter
207- }
208-
209- text: i18n.tr("This is an external page\nwith a locked toolbar.")
210- color: "#757373"
211- }
212- }
213-
214- tools: ToolbarItems {
215- ToolbarButton {
216- text: "action 1"
217- iconSource: Qt.resolvedUrl("call_icon.png")
218- }
219- ToolbarButton {
220- text: "action 2"
221- iconSource: Qt.resolvedUrl("call_icon.png")
222- }
223- opened: true
224- locked: true
225- }
226-}

Subscribers

People subscribed via source and target branches

to status/vote changes: