summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorJens Bache-Wiig <jens.bache-wiig@digia.com>2013-05-27 17:54:54 +0200
committerThe Qt Project <gerrit-noreply@qt-project.org>2013-05-27 19:17:37 +0200
commitbb64aef56bd43891bd6f91aee25bdfe6633c3a98 (patch)
tree11cbf366e2aebb984e45003162a7eeccf87f0f03
parent5b36fa87bca007c0fac50b5b99f424e2fed59fab (diff)
Refactor TableView styling API
We don't want to directly expose the item properties in the namespace of the loader. Instead we standardize on styleData as a property container. Change-Id: Ib451e06ab393ba4945c96076d71dd3f96489e0c7 Reviewed-by: J-P Nurmi <jpnurmi@digia.com>
Diffstat
-rw-r--r--examples/quick/controls/tableview/main.qml86
-rw-r--r--src/controls/TableView.qml119
-rw-r--r--src/styles/Base/TableViewStyle.qml23
-rw-r--r--src/styles/Desktop/TableViewStyle.qml28
-rw-r--r--tests/auto/controls/data/tableview/table_delegate.qml6
5 files changed, 134 insertions, 128 deletions
diff --git a/examples/quick/controls/tableview/main.qml b/examples/quick/controls/tableview/main.qml
index 0e5683147..02c7e6f02 100644
--- a/examples/quick/controls/tableview/main.qml
+++ b/examples/quick/controls/tableview/main.qml
@@ -183,7 +183,7 @@ Window {
itemDelegate: Item {
Rectangle{
- color: itemValue.get(0).color
+ color: styleData.value.get(0).color
anchors.top:parent.top
anchors.right:parent.right
anchors.bottom:parent.bottom
@@ -196,9 +196,9 @@ Window {
anchors.margins: 4
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
- elide: itemElideMode
- text: itemValue.get(0).description
- color: itemTextColor
+ elide: styleData.elideMode
+ text: styleData.value.get(0).description
+ color: styleData.textColor
}
}
@@ -251,32 +251,23 @@ Window {
anchors.margins: 4
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
- elide: itemElideMode
- text: itemValue !== undefined ? itemValue : ""
- color: itemTextColor
+ elide: styleData.elideMode
+ text: styleData.value !== undefined ? styleData.value : ""
+ color: styleData.textColor
}
}
}
Component {
- id: slickRowDelegate
- Rectangle { color: alternateBackground ? "#cef" : "white" }
- }
-
- Component {
id: delegate2
- Item {
- height: itemSelected? 60 : 20
- Behavior on height{ NumberAnimation{} }
- Text {
- width: parent.width
- anchors.margins: 4
- anchors.left: parent.left
- anchors.verticalCenter: parent.verticalCenter
- elide: itemElideMode
- text: itemValue !== undefined ? itemValue : ""
- color: itemTextColor
- }
+ Text {
+ width: parent.width
+ anchors.margins: 4
+ anchors.left: parent.left
+ anchors.verticalCenter: parent.verticalCenter
+ elide: styleData.elideMode
+ text: styleData.value !== undefined ? styleData.value : ""
+ color: styleData.textColor
}
}
@@ -289,10 +280,10 @@ Window {
anchors.margins: 4
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
- elide: itemElideMode
- text: itemValue !== undefined ? itemValue : ""
- color: itemTextColor
- visible: !itemSelected
+ elide: styleData.elideMode
+ text: styleData.value !== undefined ? styleData.value : ""
+ color: styleData.textColor
+ visible: !styleData.selected
}
Loader { // Initialize text editor lazily to improve performance
id: loaderEditor
@@ -301,19 +292,19 @@ Window {
Connections {
target: loaderEditor.item
onAccepted: {
- if (typeof itemValue === 'number')
- model.setProperty(row, role, Number(parseFloat(loaderEditor.item.text).toFixed(0)))
+ if (typeof styleData.value === 'number')
+ model.setProperty(styleData.row, styleData.role, Number(parseFloat(loaderEditor.item.text).toFixed(0)))
else
- model.setProperty(row, role, loaderEditor.item.text)
+ model.setProperty(styleData.row, styleData.role, loaderEditor.item.text)
}
}
- sourceComponent: itemSelected ? editor : null
+ sourceComponent: styleData.selected ? editor : null
Component {
id: editor
TextInput {
id: textinput
- color: itemTextColor
- text: itemValue
+ color: styleData.textColor
+ text: styleData.value
MouseArea {
id: mouseArea
anchors.fill: parent
@@ -354,25 +345,22 @@ Window {
source: "images/header.png"
border{left:2;right:2;top:2;bottom:2}
Text {
- text: itemValue
+ text: styleData.value
anchors.centerIn:parent
color:"#333"
}
}
rowDelegate: Rectangle {
- height: 20
- color: rowSelected ? "#448" : (alternateBackground ? "#eee" : "#fff")
- border.color:"#ccc"
- border.width: 1
- anchors.left: parent ? parent.left : undefined
- anchors.leftMargin: -2
- anchors.rightMargin: -1
+ height: (delegateChooser.currentIndex == 1 && styleData.selected) ? 30 : 20
+ Behavior on height{ NumberAnimation{} }
+
+ color: styleData.selected ? "#448" : (styleData.alternate? "#eee" : "#fff")
BorderImage{
id: selected
anchors.fill: parent
source: "images/selectedrow.png"
- visible: rowSelected
+ visible: styleData.selected
border{left:2; right:2; top:2; bottom:2}
SequentialAnimation {
running: true; loops: Animation.Infinite
@@ -383,14 +371,10 @@ Window {
}
itemDelegate: {
- switch (delegateChooser.currentIndex) {
- case 0:
- return delegate1
- case 1:
- return delegate2
- case 2:
- return editableDelegate
- }
+ if (delegateChooser.currentIndex == 2)
+ return editableDelegate;
+ else
+ return delegate1;
}
}
}
diff --git a/src/controls/TableView.qml b/src/controls/TableView.qml
index ca0df45a1..4cde5d3e3 100644
--- a/src/controls/TableView.qml
+++ b/src/controls/TableView.qml
@@ -128,22 +128,23 @@ ScrollView {
In the item delegate you have access to the following special properties:
\list
- \li itemSelected - if the item is currently selected
- \li itemValue - the value or text for this item
- \li itemTextColor - the default text color for an item
- \li row - the index of the row
- \li column - the index of the column
- \li itemElideMode - the elide mode of the column
- \li itemTextAlignment - the horizontal text alignment of the column
+ \li styleData.selected - if the item is currently selected
+ \li styleData.value - the value or text for this item
+ \li styleData.textColor - the default text color for an item
+ \li styleData.row - the index of the row
+ \li styleData.column - the index of the column
+ \li styleData.elideMode - the elide mode of the column
+ \li styleData.textAlignment - the horizontal text alignment of the column
\endlist
+
Example:
\code
itemDelegate: Item {
Text {
anchors.verticalCenter: parent.verticalCenter
- color: itemTextColor
- elide: itemElideMode
- text: itemValue
+ color: styleData.textColor
+ elide: styleData.elideMode
+ text: styleData.value
}
}
\endcode */
@@ -153,9 +154,9 @@ ScrollView {
In the row delegate you have access to the following special properties:
\list
- \li alternateBackground - if the row uses the alternate background color
- \li rowSelected - if the row is currently selected
- \li index - the index of the row
+ \li styleData.alternate - true when the row uses the alternate background color
+ \li styleData.selected - true when the row is currently selected
+ \li styleData.row - the index of the row
\endlist
*/
property Component rowDelegate: __style ? __style.rowDelegate : null
@@ -166,7 +167,16 @@ ScrollView {
The default value is the base color of the SystemPalette. */
property alias backgroundColor: colorRect.color
- /*! This property defines a delegate to draw a header. */
+ /*! This property defines a delegate to draw a header.
+
+ In the header delegate you have access to the following special properties:
+ \list
+ \li styleData.value - the value or text for this item
+ \li styleData.column - the index of the column
+ \li styleData.pressed - true when the column is being pressed
+ \li styleData.containsMouse - true when the column is under the mouse
+ \endlist
+ */
property Component headerDelegate: __style ? __style.headerDelegate : null
/*! Index of the current sort column.
@@ -408,11 +418,13 @@ ScrollView {
width: rowfiller.width
height: rowfiller.rowHeight
sourceComponent: root.rowDelegate
- readonly property bool alternateBackground: (index + rowCount) % 2 === 1
- readonly property bool rowSelected: false
+ property QtObject styleData: QtObject {
+ readonly property bool alternate: (index + rowCount) % 2 === 1
+ readonly property bool selected: false
+ readonly property bool hasActiveFocus: root.activeFocus
+ }
readonly property var model: listView.model
readonly property var modelData: null
- readonly property bool hasActiveFocus: root.activeFocus
}
}
}
@@ -439,7 +451,7 @@ ScrollView {
height: rowstyle.height
readonly property int rowIndex: model.index
- readonly property bool alternateBackground: alternatingRowColors && rowIndex % 2 == 1
+ readonly property bool alternate: alternatingRowColors && rowIndex % 2 == 1
readonly property var itemModelData: typeof modelData == "undefined" ? null : modelData
readonly property var itemModel: model
readonly property bool itemSelected: ListView.isCurrentItem
@@ -457,12 +469,14 @@ ScrollView {
// these properties are exposed to the row delegate
// Note: these properties should be mirrored in the row filler as well
- readonly property bool alternateBackground: rowitem.alternateBackground
- readonly property bool rowSelected: rowitem.itemSelected
- readonly property int row: rowitem.rowIndex
+ property QtObject styleData: QtObject {
+ readonly property int row: rowitem.rowIndex
+ readonly property bool alternate: rowitem.alternate
+ readonly property bool selected: rowitem.itemSelected
+ readonly property bool hasActiveFocus: root.activeFocus
+ }
readonly property var model: listView.model
readonly property var modelData: rowitem.itemModelData
- readonly property bool hasActiveFocus: root.activeFocus
}
Row {
id: itemrow
@@ -482,20 +496,22 @@ ScrollView {
readonly property var model: listView.model
readonly property var modelData: itemModelData
- readonly property var itemValue: __hasModelRole ? itemModel[role] // Qml ListModel and QAbstractItemModel
- : __hasModelDataRole ? modelData[role] // QObjectList / QObject
- : modelData != undefined ? modelData : "" // Models without role
- readonly property bool itemSelected: rowitem.itemSelected
- readonly property color itemTextColor: rowitem.itemTextColor
- readonly property int row: rowitem.rowIndex
- readonly property int column: index
- readonly property int itemElideMode: __column.elideMode
- readonly property int itemTextAlignment: __column.horizontalAlignment
- readonly property string role: __column.role
+ property QtObject styleData: QtObject {
+ readonly property var value: __hasModelRole ? itemModel[role] // Qml ListModel and QAbstractItemModel
+ : __hasModelDataRole ? modelData[role] // QObjectList / QObject
+ : modelData != undefined ? modelData : "" // Models without role
+ readonly property int row: rowitem.rowIndex
+ readonly property int column: index
+ readonly property int elideMode: __column.elideMode
+ readonly property int textAlignment: __column.horizontalAlignment
+ readonly property bool selected: rowitem.itemSelected
+ readonly property color textColor: rowitem.itemTextColor
+ readonly property string role: __column.role
+ }
readonly property TableViewColumn __column: columns[index]
- readonly property bool __hasModelRole: role && itemModel.hasOwnProperty(role)
- readonly property bool __hasModelDataRole: role && modelData && modelData.hasOwnProperty(role)
+ readonly property bool __hasModelRole: styleData.role && itemModel.hasOwnProperty(styleData.role)
+ readonly property bool __hasModelDataRole: styleData.role && modelData && modelData.hasOwnProperty(styleData.role)
}
}
onWidthChanged: listView.contentWidth = width
@@ -545,13 +561,12 @@ ScrollView {
sourceComponent: root.headerDelegate
anchors.left: parent.left
anchors.right: parent.right
- property string itemValue: columns[index].title
- property string itemSort: (sortIndicatorVisible && index == sortIndicatorColumn) ? (sortIndicatorOrder == Qt.AscendingOrder ? "up" : "down") : "";
- property bool itemPressed: headerClickArea.pressed
- property bool itemContainsMouse: headerClickArea.containsMouse
- property string itemPosition: columnCount === 1 ? "only" :
- index===columnCount-1 ? "end" :
- index===0 ? "beginning" : ""
+ property QtObject styleData: QtObject {
+ readonly property string value: columns[index].title
+ readonly property bool pressed: headerClickArea.pressed
+ readonly property bool containsMouse: headerClickArea.containsMouse
+ readonly property int column: index
+ }
}
Rectangle{
id: targetmark
@@ -612,11 +627,12 @@ ScrollView {
Loader {
id: draghandle
- property string itemValue: columns[index].title
- property string itemSort: (sortIndicatorVisible && index == sortIndicatorColumn) ? (sortIndicatorOrder == Qt.AscendingOrder ? "up" : "down") : "";
- property bool itemPressed: headerClickArea.pressed
- property bool itemContainsMouse: headerClickArea.containsMouse
- property string itemPosition
+ property QtObject styleData: QtObject{
+ readonly property string value: columns[index].title
+ readonly property bool pressed: headerClickArea.pressed
+ readonly property bool containsMouse: headerClickArea.containsMouse
+ readonly property int column: index
+ }
parent: tableHeader
width: columns[index].width
@@ -661,11 +677,12 @@ ScrollView {
}
Loader {
id: loader
- property string itemValue
- property string itemSort
- property bool itemPressed
- property bool itemContainsMouse
- property string itemPosition
+ property QtObject styleData: QtObject{
+ readonly property string value: ""
+ readonly property bool pressed: false
+ readonly property bool containsMouse: false
+ readonly property int column: -1
+ }
anchors.top: parent.top
anchors.right: parent.right
diff --git a/src/styles/Base/TableViewStyle.qml b/src/styles/Base/TableViewStyle.qml
index 669b934f2..6d4f9feb9 100644
--- a/src/styles/Base/TableViewStyle.qml
+++ b/src/styles/Base/TableViewStyle.qml
@@ -70,12 +70,13 @@ ScrollViewStyle {
/* Delegate for header. This delegate is described in \l TableView::headerDelegate */
property Component headerDelegate: BorderImage {
source: "images/header.png"
+ border.left: 4
Text {
anchors.fill: parent
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
anchors.leftMargin: 4
- text: itemValue
+ text: styleData.value
color: textColor
renderType: Text.NativeRendering
}
@@ -93,21 +94,21 @@ ScrollViewStyle {
property Component rowDelegate: Rectangle {
implicitHeight: 20
implicitWidth: 80
- property color selectedColor: hasActiveFocus ? "#38d" : "#999"
+ property color selectedColor: styleData.hasActiveFocus ? "#38d" : "#999"
gradient: Gradient {
- GradientStop { color: rowSelected ? Qt.lighter(selectedColor, 1.3) : alternateBackground ? "#f2f2f2" : "white" ; position: 0 }
- GradientStop { color: rowSelected ? Qt.lighter(selectedColor, 1.0) : alternateBackground ? "#f2f2f2" : "white" ; position: 1 }
+ GradientStop { color: styleData.selected ? Qt.lighter(selectedColor, 1.3) : styleData.alternate ? "#f2f2f2" : "white" ; position: 0 }
+ GradientStop { color: styleData.selected ? Qt.lighter(selectedColor, 1.0) : styleData.alternate ? "#f2f2f2" : "white" ; position: 1 }
}
Rectangle {
anchors.bottom: parent.bottom
width: parent.width
height: 1
- color: rowSelected ? Qt.darker(selectedColor, 1.4) : "transparent"
+ color: styleData.elected ? Qt.darker(selectedColor, 1.4) : "transparent"
}
Rectangle {
anchors.top: parent.top
width: parent.width ; height: 1
- color: rowSelected ? Qt.darker(selectedColor, 1.1) : "transparent"
+ color: styleData.elected ? Qt.darker(selectedColor, 1.1) : "transparent"
}
}
@@ -123,18 +124,18 @@ ScrollViewStyle {
anchors.margins: 6
anchors.left: parent.left
anchors.right: parent.right
- horizontalAlignment: itemTextAlignment
+ horizontalAlignment: styleData.textAlignment
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1
- elide: itemElideMode
- text: itemValue != undefined ? itemValue : ""
- color: itemTextColor
+ elide: styleData.elideMode
+ text: styleData.value != undefined ? styleData.value : ""
+ color: styleData.textColor
renderType: Text.NativeRendering
}
Text {
id: sizehint
font: label.font
- text: itemValue ? itemValue : ""
+ text: styleData.value ? styleData.value : ""
visible: false
}
}
diff --git a/src/styles/Desktop/TableViewStyle.qml b/src/styles/Desktop/TableViewStyle.qml
index 52fb96357..c8eac3c62 100644
--- a/src/styles/Desktop/TableViewStyle.qml
+++ b/src/styles/Desktop/TableViewStyle.qml
@@ -65,19 +65,23 @@ ScrollViewStyle {
elementType: "header"
activeControl: itemSort
raised: true
- sunken: itemPressed
- text: itemValue
- hover: itemContainsMouse
- hints: itemPosition
+ sunken: styleData.pressed
+ text: styleData.value
+ hover: styleData.containsMouse
+ hints: headerPosition
+ property string itemSort: (control.sortIndicatorVisible && styleData.column === control.sortIndicatorColumn) ? (control.sortIndicatorOrder == Qt.AscendingOrder ? "up" : "down") : "";
+ property string headerPosition: control.columnCount === 1 ? "only" :
+ styleData.column === control.columnCount-1 ? "end" :
+ styleData.column === 0 ? "beginning" : ""
}
property Component rowDelegate: StyleItem {
id: rowstyle
elementType: "itemrow"
- activeControl: alternateBackground ? "alternate" : ""
- selected: rowSelected ? true : false
+ activeControl: styleData.alternate ? "alternate" : ""
+ selected: styleData.selected ? true : false
height: Math.max(16, rowstyle.implicitHeight)
- active: hasActiveFocus
+ active: styleData.hasActiveFocus
}
property Component itemDelegate: Item {
@@ -92,17 +96,17 @@ ScrollViewStyle {
font: __styleitem.font
anchors.left: parent.left
anchors.right: parent.right
- horizontalAlignment: itemTextAlignment
+ horizontalAlignment: styleData.textAlignment
anchors.verticalCenter: parent.verticalCenter
- elide: itemElideMode
- text: itemValue != undefined ? itemValue : ""
- color: itemTextColor
+ elide: styleData.elideMode
+ text: styleData.value !== undefined ? styleData.value : ""
+ color: styleData.textColor
renderType: Text.NativeRendering
}
Text {
id: sizehint
font: label.font
- text: itemValue ? itemValue : ""
+ text: styleData.value ? styleData.value : ""
visible: false
}
}
diff --git a/tests/auto/controls/data/tableview/table_delegate.qml b/tests/auto/controls/data/tableview/table_delegate.qml
index a3ab621d9..82b08ba53 100644
--- a/tests/auto/controls/data/tableview/table_delegate.qml
+++ b/tests/auto/controls/data/tableview/table_delegate.qml
@@ -56,14 +56,14 @@ TableView {
}
headerDelegate: Text {
height: 40
- text: itemValue
+ text: styleData.value
}
itemDelegate: Text {
width: parent.width
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
- text: itemValue !== undefined ? itemValue : ""
- color: itemTextColor
+ text: styleData.value !== undefined ? styleData.value : ""
+ color: styleData.textColor
MouseArea {
anchors.fill: parent
onClicked: table.test = 1
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-15 09:53:34 +0000