From ef9eba82884c73816562f23aa89fd007310eb259 Mon Sep 17 00:00:00 2001
From: Jens Bache-Wiig <jens.bache-wiig@digia.com>
Date: Sat, 23 Feb 2013 12:24:52 +0100
Subject: [PATCH] Update TabView API and allow inser/remove of tabs
Change-Id: I6b10f539b036811243676f34c0fabe403c263923
Reviewed-by: J-P Nurmi <jpnurmi@digia.com>
---
examples/gallery/content/Controls.qml | 4 +-
examples/gallery/content/Panel.qml | 2 +-
examples/gallery/main.qml | 8 +-
src/controls/ScrollView.qml | 8 +-
src/controls/Tab.qml | 16 ++-
src/controls/TabView.qml | 125 ++++++++++++++------
src/controls/TableView.qml | 2 +-
src/controls/TextArea.qml | 2 +-
src/private/TabBar.qml | 19 +--
src/private/qstyleitem.cpp | 2 +-
src/styles/Desktop/TabViewStyle.qml | 8 +-
src/styles/ToolBarStyle.qml | 2 +-
tests/auto/controls/data/tst_scrollview.qml | 6 +-
tests/auto/controls/data/tst_tabview.qml | 47 ++++++++
14 files changed, 185 insertions(+), 66 deletions(-)
diff --git a/examples/gallery/content/Controls.qml b/examples/gallery/content/Controls.qml
index c3a37d171..49315d3c7 100644
--- a/examples/gallery/content/Controls.qml
+++ b/examples/gallery/content/Controls.qml
@@ -51,7 +51,7 @@ Item {
anchors.fill: parent
enabled: enabledCheck.checked
- property string tabPosition: tabPositionGroup.current === r2 ? "South" : "North"
+ property string tabPosition: tabPositionGroup.current === r2 ? "Bottom" : "Top"
Row {
id: contentRow
@@ -176,7 +176,7 @@ Item {
TextArea {
id: area
- frame: frameCheckbox.checked
+ frameVisible: frameCheckbox.checked
text: loremIpsum + loremIpsum
KeyNavigation.tab: button1
width: contentRow.width - firstColumn.width - contentRow.spacing
diff --git a/examples/gallery/content/Panel.qml b/examples/gallery/content/Panel.qml
index f6081d0bd..60905fd7f 100644
--- a/examples/gallery/content/Panel.qml
+++ b/examples/gallery/content/Panel.qml
@@ -52,7 +52,7 @@ Rectangle {
height: 340
color:"#c3c3c3"
ScrollView {
- frame:false
+ frameVisible: false
anchors.fill: parent
Item {
diff --git a/examples/gallery/main.qml b/examples/gallery/main.qml
index 63047003c..6f581f0d7 100644
--- a/examples/gallery/main.qml
+++ b/examples/gallery/main.qml
@@ -253,15 +253,17 @@ ApplicationWindow {
TabView {
id:frame
enabled: enabledCheck.checked
- position: controlPage.tabPosition
+ tabPosition: controlPage.item ? controlPage.item.tabPosition : "Top"
anchors.top: toolbar.bottom
anchors.bottom: parent.bottom
anchors.right: parent.right
anchors.left: parent.left
anchors.margins: styleitem.style == "mac" ? 12 : 0
+
Tab {
+ id: controlPage
title: "Control"
- Controls { id: controlPage }
+ Controls { }
}
Tab {
title: "Itemviews"
@@ -269,7 +271,7 @@ ApplicationWindow {
}
Tab {
title: "Styles"
- Styles { anchors.fill: parent}
+ Styles { anchors.fill: parent }
}
Tab {
title: "Sidebar"
diff --git a/src/controls/ScrollView.qml b/src/controls/ScrollView.qml
index a8f2621a4..9c69bc181 100644
--- a/src/controls/ScrollView.qml
+++ b/src/controls/ScrollView.qml
@@ -91,7 +91,7 @@ FocusScope {
The default value is \c false
*/
- property bool frame: false
+ property bool frameVisible: false
/*!
This property controls if there should be a highlight
@@ -252,8 +252,8 @@ FocusScope {
ScrollViewHelper {
id: scroller
anchors.fill: parent
- property int frameWidth: frame ? styleitem.pixelMetric("defaultframewidth") : 0
- property bool outerFrame: !frame || !styleitem.styleHint("frameOnlyAroundContents")
+ property int frameWidth: frameVisible ? styleitem.pixelMetric("defaultframewidth") : 0
+ property bool outerFrame: !frameVisible || !styleitem.styleHint("frameOnlyAroundContents")
property int scrollBarSpacing: outerFrame ? 0 : styleitem.pixelMetric("scrollbarspacing")
property int verticalScrollbarOffset: verticalScrollBar.visible && !verticalScrollBar.isTransient ?
verticalScrollBar.width + scrollBarSpacing : 0
@@ -264,7 +264,7 @@ FocusScope {
id: styleitem
elementType: "frame"
sunken: true
- visible: frame
+ visible: frameVisible
anchors.fill: parent
anchors.rightMargin: scroller.outerFrame ? 0 : scroller.verticalScrollbarOffset
anchors.bottomMargin: scroller.outerFrame ? 0 : scroller.horizontalScrollbarOffset
diff --git a/src/controls/Tab.qml b/src/controls/Tab.qml
index fbec51df3..91fa7ba90 100644
--- a/src/controls/Tab.qml
+++ b/src/controls/Tab.qml
@@ -45,14 +45,24 @@ import QtQuick 2.0
\inqmlmodule QtQuick.Controls 1.0
\ingroup viewaddons
\brief Tab represents the content of a tab in a TabView.
+
+ A Tab item inherits from Loader and provides a similar
+ api.
*/
-Item {
- id:tab
+Loader {
+ id: tab
anchors.fill: parent
/*! This property holds the title of the tab. */
property string title
-
Accessible.role: Accessible.PageTab
+ active: false
+ visible: false
+
+ /*! \internal */
+ onVisibleChanged: if (visible) active = true
+
+ /*! \internal */
+ default property alias component: tab.sourceComponent
}
diff --git a/src/controls/TabView.qml b/src/controls/TabView.qml
index fcf347448..d8e848890 100644
--- a/src/controls/TabView.qml
+++ b/src/controls/TabView.qml
@@ -56,48 +56,96 @@ FocusScope {
width: 100
height: 100
- property int current: 0
+ /*! The current tab index */
+ property int currentIndex: 0
+
+ /*! The current tab count */
property int count: 0
- property bool frame: true
+
+ /*! The visibility of the tab frame around contents */
+ property bool frameVisible: true
+
+ /*! The visibility of the tab bar */
property bool tabsVisible: true
- property string position: "North"
- default property alias tabs : stack.children
- property Component style: Qt.createComponent(Settings.THEME_PATH + "/TabViewStyle.qml", root)
- property var __styleItem: loader.item
- onCurrentChanged: __setOpacities()
- Component.onCompleted: __setOpacities()
+ /*!
+ \qmlproperty string TabView::tabPosition
- function __setOpacities() {
- var tabCount = 0;
- for (var i = 0; i < stack.children.length; ++i) {
- stack.children[i].visible = (i == current ? true : false)
- // count real tabs - ignore for instance Repeater
- if (stack.children[i].Accessible.role == Accessible.PageTab)
- ++tabCount;
- }
- root.count = tabCount;
- }
+ \list
+ \li "Top" (default)
+ \li "Bottom"
+ \endlist
+ */
+ property string tabPosition: "Top"
- Component {
- id: tabcomp
- Tab {}
+ /*! \internal */
+ default property alias data: stack.data
+
+ /*! Adds a new tab page with title with and optional Component.
+ \return the newly added tab
+ */
+ function addTab(title, component) {
+ var tab = tabcomp.createObject(this);
+ tab.sourceComponent = component
+ __tabs.push(tab)
+ tab.parent = stack
+ tab.title = title
+ __setOpacities()
+ return tab
}
- function addTab(component, title) {
+ /*! Inserts a new tab with title at index, with an optional Component.
+ \return the newly added tab
+ */
+ function insertTab(index, title, component) {
var tab = tabcomp.createObject(this);
- component.createObject(tab)
+ tab.sourceComponent = component
tab.parent = stack
tab.title = title
+ __tabs.splice(index, 0, tab);
__setOpacities()
return tab
}
- function removeTab(id) {
- var tab = tabs[id]
+ /*! Removes and destroys a tab at the given index */
+ function removeTab(index) {
+ var tab = __tabs[index]
+ __tabs.splice(index, 1);
tab.destroy()
- if (current > 0)
- current-=1
+ if (currentIndex > 0)
+ currentIndex--
+ __setOpacities()
+ }
+
+ /*! Returns the \l Tab item at index */
+ function tabAt(index) {
+ return __tabs[index]
+ }
+
+ /*! \internal */
+ property var __tabs: new Array()
+
+ /*! \internal */
+ property Component style: Qt.createComponent(Settings.THEME_PATH + "/TabViewStyle.qml", root)
+
+ /*! \internal */
+ property var __styleItem: loader.item
+
+ /*! \internal */
+ onCurrentIndexChanged: __setOpacities()
+
+ /*! \internal */
+ function __setOpacities() {
+ for (var i = 0; i < __tabs.length; ++i) {
+ var child = __tabs[i];
+ child.visible = (i == currentIndex ? true : false)
+ }
+ count = __tabs.length
+ }
+
+ Component {
+ id: tabcomp
+ Tab {}
}
TabBar {
@@ -121,28 +169,39 @@ FocusScope {
z: tabbarItem.z - 1
anchors.fill: parent
- anchors.topMargin: tabbarItem && tabsVisible && position == "North" ? Math.max(0, tabbarItem.height - stack.baseOverlap) : 0
- anchors.bottomMargin: tabbarItem && tabsVisible && position == "South" ? Math.max(0, tabbarItem.height - stack.baseOverlap) : 0
- sourceComponent: frame && loader.item ? loader.item.frame : null
+ anchors.topMargin: tabbarItem && tabsVisible && tabPosition == "Top" ? Math.max(0, tabbarItem.height - stack.baseOverlap) : 0
+ anchors.bottomMargin: tabbarItem && tabsVisible && tabPosition == "Bottom" ? Math.max(0, tabbarItem.height - stack.baseOverlap) : 0
+ sourceComponent: frameVisible && loader.item ? loader.item.frame : null
property var control: root
Item {
id: stack
+
anchors.fill: parent
- anchors.margins: (frame ? frameWidth : 0)
+ anchors.margins: (frameVisible ? frameWidth : 0)
anchors.topMargin: anchors.margins + (style =="mac" ? 6 : 0)
anchors.bottomMargin: anchors.margins + (style =="mac" ? 6 : 0)
+
property int frameWidth
property string style
property int baseOverlap
+
+ /*! \internal */
+ Component.onCompleted: {
+ for (var i = 0 ; i < stack.children.length ; ++i) {
+ if (stack.children[i].Accessible.role === Accessible.PageTab)
+ __tabs.push(stack.children[i])
+ }
+ __setOpacities()
+ }
}
onLoaded: { item.z = -1 }
}
states: [
State {
- name: "South"
- when: position == "South" && tabbarItem != undefined
+ name: "Bottom"
+ when: tabPosition == "Bottom" && tabbarItem != undefined
PropertyChanges {
target: tabbarItem
anchors.topMargin: tabbarItem.height
diff --git a/src/controls/TableView.qml b/src/controls/TableView.qml
index d61c9945b..b246e6a35 100644
--- a/src/controls/TableView.qml
+++ b/src/controls/TableView.qml
@@ -167,7 +167,7 @@ ScrollView {
/*! This property sets if the frame should be visible.
The default value is \c true. */
- frame: true
+ frameVisible: true
/*! Index of the currently selected sort column
The default value is \c 0. */
diff --git a/src/controls/TextArea.qml b/src/controls/TextArea.qml
index ad317e416..94212022d 100644
--- a/src/controls/TextArea.qml
+++ b/src/controls/TextArea.qml
@@ -587,7 +587,7 @@ ScrollView {
height: 120
flickableItem.contentWidth: edit.paintedWidth + (2 * documentMargins)
- frame: true
+ frameVisible: true
Accessible.role: Accessible.EditableText
diff --git a/src/private/TabBar.qml b/src/private/TabBar.qml
index ad5bdc922..7663270c3 100644
--- a/src/private/TabBar.qml
+++ b/src/private/TabBar.qml
@@ -52,7 +52,7 @@ FocusScope {
width: tabrow.width
Keys.onRightPressed: {
- if (tabView && tabView.current < tabView.count - 1)
+ if (tabView && tabView.currentIndex < tabView.count - 1)
tabView.current = tabView.current + 1
}
Keys.onLeftPressed: {
@@ -68,7 +68,7 @@ FocusScope {
property var styleItem: tabView.__styleItem ? tabView.__styleItem : null
property string tabBarAlignment: styleItem ? styleItem.tabBarAlignment : "left"
- property string position: tabView ? tabView.position : "North"
+ property string position: tabView ? tabView.tabPosition : "Top"
property int tabOverlap: styleItem ? styleItem.tabOverlap : 0
property int tabBaseOverlap: styleItem ? styleItem.tabBaseOverlap : 0
@@ -111,17 +111,18 @@ FocusScope {
Repeater {
id: repeater
focus: true
- model: tabView ? tabView.count : null
+ model: tabView.count
+
delegate: Item {
id: tabitem
focus: true
property int tabindex: index
property bool selectedHelper: selected
- property bool selected : tabView.current == index
+ property bool selected : tabView.currentIndex == index
property bool hover: mousearea.containsMouse
property bool first: index === 0
- property string title: tabView.tabs[index].title
+ property string title: tabView.__tabs[index].title
z: selected ? 1 : -index
implicitWidth: Math.min(tabloader.implicitWidth, tabbar.width/repeater.count) + 1
@@ -136,8 +137,8 @@ FocusScope {
property Item control: tabView
property Item tab: tabitem
property int index: tabindex
- property bool nextSelected: tabView.current === index + 1
- property bool previousSelected: tabView.current === index - 1
+ property bool nextSelected: tabView.currentIndex === index + 1
+ property bool previousSelected: tabView.currentIndex === index - 1
property string title: tab.title
}
@@ -145,11 +146,11 @@ FocusScope {
id: mousearea
anchors.fill: parent
hoverEnabled: true
- onPressed: tabView.current = index
+ onPressed: tabView.currentIndex = index
onPressAndHold: tabitem.parent = null
}
Accessible.role: Accessible.PageTab
- Accessible.name: tabView.tabs[index].title
+ Accessible.name: tabView.__tabs[index].title
}
}
}
diff --git a/src/private/qstyleitem.cpp b/src/private/qstyleitem.cpp
index 58077e733..7b7a997dd 100644
--- a/src/private/qstyleitem.cpp
+++ b/src/private/qstyleitem.cpp
@@ -287,7 +287,7 @@ void QStyleItem::initStyleOption()
QString position = hints()[1];
QString selectedPosition = hints()[2];
- opt->shape = (shape == "South") ? QTabBar::RoundedSouth : QTabBar::RoundedNorth;
+ opt->shape = (shape == "Bottom") ? QTabBar::RoundedSouth : QTabBar::RoundedNorth;
if (position == QLatin1String("beginning"))
opt->position = QStyleOptionTab::Beginning;
diff --git a/src/styles/Desktop/TabViewStyle.qml b/src/styles/Desktop/TabViewStyle.qml
index 00bd46a4c..20ef36d12 100644
--- a/src/styles/Desktop/TabViewStyle.qml
+++ b/src/styles/Desktop/TabViewStyle.qml
@@ -58,9 +58,9 @@ Style {
anchors.topMargin: 1//stack.baseOverlap
z: style == "oxygen" ? 1 : 0
elementType: "tabframe"
- hints: position
- value: tabbarItem && tabsVisible && tabbarItem.tab(current) ? tabbarItem.tab(current).x : 0
- minimum: tabbarItem && tabsVisible && tabbarItem.tab(current) ? tabbarItem.tab(current).width : 0
+ hints: control.tabPosition
+ value: tabbarItem && tabsVisible && tabbarItem.tab(currentIndex) ? tabbarItem.tab(currentIndex).x : 0
+ minimum: tabbarItem && tabsVisible && tabbarItem.tab(currentIndex) ? tabbarItem.tab(currentIndex).width : 0
maximum: tabbarItem && tabsVisible ? tabbarItem.width : width
Component.onCompleted: {
stack.frameWidth = styleitem.pixelMetric("defaultframewidth");
@@ -85,7 +85,7 @@ Style {
anchors.fill: parent
anchors.leftMargin: (selected && style == "mac") ? -1 : 0
- hints: [control.position, tabpos, selectedpos]
+ hints: [control.tabsPosition, tabpos, selectedpos]
selected: tab.selected
text: title
diff --git a/src/styles/ToolBarStyle.qml b/src/styles/ToolBarStyle.qml
index 82710c4bb..ec1612c59 100644
--- a/src/styles/ToolBarStyle.qml
+++ b/src/styles/ToolBarStyle.qml
@@ -48,7 +48,7 @@ import QtQuick.Controls 1.0
Item {
property int __overlap : 1
- property string position: "North"
+ property string position: "Top"
property string tabBarAlignment: "Center"
property int tabOverlap: 1
property int tabBaseOverlap: 1
diff --git a/tests/auto/controls/data/tst_scrollview.qml b/tests/auto/controls/data/tst_scrollview.qml
index 95c6cccfe..1d8651ed6 100644
--- a/tests/auto/controls/data/tst_scrollview.qml
+++ b/tests/auto/controls/data/tst_scrollview.qml
@@ -92,7 +92,7 @@ TestCase {
verify(scrollView.viewport, "Viewport not defined")
verify(!scrollView.contentItem, "contentItem should be null")
verify(!scrollView.flickableItem, "flickableItem should be null")
- verify(!scrollView.frame, "Frame should be false")
+ verify(!scrollView.frameVisible, "Frame should be false")
scrollView.contentItem = textArea
verify(scrollView.viewport, "Viewport should be defined")
@@ -101,8 +101,8 @@ TestCase {
verify(scrollView.flickableItem.contentHeight === textArea.height, "Content height not set")
var prevViewportWidth = scrollView.viewport.width
- scrollView.frame = true
- verify(scrollView.frame, "Frame should be true")
+ scrollView.frameVisible = true
+ verify(scrollView.frameVisible, "Frame should be true")
verify(scrollView.viewport.width < prevViewportWidth, "Viewport should be smaller with frame")
}
}
diff --git a/tests/auto/controls/data/tst_tabview.qml b/tests/auto/controls/data/tst_tabview.qml
index 19661a3f9..43afa3726 100644
--- a/tests/auto/controls/data/tst_tabview.qml
+++ b/tests/auto/controls/data/tst_tabview.qml
@@ -56,5 +56,52 @@ TestCase {
var tabView = Qt.createQmlObject('import QtQuick 2.0; import QtQuick.Controls 1.0; TabView { Repeater { model: 3; Tab { } } }', testCase, '');
compare(tabView.count, 3)
}
+
+ Component {
+ id: newTab
+ Item {}
+ }
+
+ function test_addRemoveTab() {
+ var tabView = Qt.createQmlObject('import QtQuick 2.0; import QtQuick.Controls 1.0; TabView { }', testCase, '');
+ compare(tabView.count, 0)
+ tabView.addTab("title 1", newTab)
+ compare(tabView.count, 1)
+ tabView.addTab("title 2", newTab)
+ compare(tabView.count, 2)
+ compare(tabView.tabAt(0).title, "title 1")
+ compare(tabView.tabAt(1).title, "title 2")
+
+ tabView.insertTab(1, "title 3")
+ compare(tabView.count, 3)
+ compare(tabView.tabAt(0).title, "title 1")
+ compare(tabView.tabAt(1).title, "title 3")
+ compare(tabView.tabAt(2).title, "title 2")
+
+ tabView.insertTab(0, "title 4")
+ compare(tabView.count, 4)
+ compare(tabView.tabAt(0).title, "title 4")
+ compare(tabView.tabAt(1).title, "title 1")
+ compare(tabView.tabAt(2).title, "title 3")
+ compare(tabView.tabAt(3).title, "title 2")
+
+ tabView.removeTab(0)
+ compare(tabView.count, 3)
+ compare(tabView.tabAt(0).title, "title 1")
+ compare(tabView.tabAt(1).title, "title 3")
+ compare(tabView.tabAt(2).title, "title 2")
+
+ tabView.removeTab(1)
+ compare(tabView.count, 2)
+ compare(tabView.tabAt(0).title, "title 1")
+ compare(tabView.tabAt(1).title, "title 2")
+
+ tabView.removeTab(1)
+ compare(tabView.count, 1)
+ compare(tabView.tabAt(0).title, "title 1")
+
+ tabView.removeTab(0)
+ compare(tabView.count, 0)
+ }
}
--
GitLab