diff --git a/examples/quick/controls/tableview/main.qml b/examples/quick/controls/tableview/main.qml index 0e5683147405371df385c93ad58a08e6d51057d5..02c7e6f0236ea395c6fc6d504a78faadd822cc0d 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 ca0df45a18b2379ec6d7c897df1772becbc8510a..4cde5d3e37193c550243d9043f2db9f2f2397689 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 669b934f2c74bbd0d4c04135283120350331d8fa..6d4f9feb935961e900e0efb7d8c1d804a169ede4 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 52fb963570a84777df9b6266a78b449e618bf10e..c8eac3c627a46a74769909fcc0316af64de8925a 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 a3ab621d956cc91f01235eaae5e1cc5da40b2bcc..82b08ba53df5267bd354e7850830724953369e11 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