From bb64aef56bd43891bd6f91aee25bdfe6633c3a98 Mon Sep 17 00:00:00 2001 From: Jens Bache-Wiig Date: Mon, 27 May 2013 17:54:54 +0200 Subject: 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 --- src/styles/Base/TableViewStyle.qml | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) (limited to 'src/styles/Base/TableViewStyle.qml') diff --git a/src/styles/Base/TableViewStyle.qml b/src/styles/Base/TableViewStyle.qml index 669b934f..6d4f9feb 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 } } -- cgit v1.2.1 From eb7cb933b8ba592f9086c5392e246aebbf921d7a Mon Sep 17 00:00:00 2001 From: Jens Bache-Wiig Date: Tue, 28 May 2013 09:30:26 +0200 Subject: Fix typo in TableViewStyle Change-Id: I0b4a917500ec7a520ebd38a4158e707e4dd80c9c Reviewed-by: Caroline Chao Reviewed-by: J-P Nurmi --- src/styles/Base/TableViewStyle.qml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/styles/Base/TableViewStyle.qml') diff --git a/src/styles/Base/TableViewStyle.qml b/src/styles/Base/TableViewStyle.qml index 6d4f9feb..f44893f6 100644 --- a/src/styles/Base/TableViewStyle.qml +++ b/src/styles/Base/TableViewStyle.qml @@ -103,12 +103,12 @@ ScrollViewStyle { anchors.bottom: parent.bottom width: parent.width height: 1 - color: styleData.elected ? Qt.darker(selectedColor, 1.4) : "transparent" + color: styleData.selected ? Qt.darker(selectedColor, 1.4) : "transparent" } Rectangle { anchors.top: parent.top width: parent.width ; height: 1 - color: styleData.elected ? Qt.darker(selectedColor, 1.1) : "transparent" + color: styleData.selected ? Qt.darker(selectedColor, 1.1) : "transparent" } } -- cgit v1.2.1 From 5eb54a1a9fcb25790fa7e54c4c20f61b39368e8b Mon Sep 17 00:00:00 2001 From: Jens Bache-Wiig Date: Tue, 28 May 2013 16:06:31 +0200 Subject: Fixed incorrect size hints for TableView This ensures that double click to adjust content size on headers doesn't end up eliding text. We also added significantly more space by default. Change-Id: I05a05649a41ef4b70ee839195a87c684786760b1 Reviewed-by: J-P Nurmi Reviewed-by: Gabriel de Dietrich --- src/styles/Base/TableViewStyle.qml | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'src/styles/Base/TableViewStyle.qml') diff --git a/src/styles/Base/TableViewStyle.qml b/src/styles/Base/TableViewStyle.qml index f44893f6..b53b3c64 100644 --- a/src/styles/Base/TableViewStyle.qml +++ b/src/styles/Base/TableViewStyle.qml @@ -75,8 +75,9 @@ ScrollViewStyle { anchors.fill: parent verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignLeft - anchors.leftMargin: 4 + anchors.leftMargin: 12 text: styleData.value + elide: Text.ElideRight color: textColor renderType: Text.NativeRendering } @@ -92,8 +93,7 @@ ScrollViewStyle { /* Delegate for header. This delegate is described in \l TableView::rowDelegate */ property Component rowDelegate: Rectangle { - implicitHeight: 20 - implicitWidth: 80 + height: 20 property color selectedColor: styleData.hasActiveFocus ? "#38d" : "#999" gradient: Gradient { GradientStop { color: styleData.selected ? Qt.lighter(selectedColor, 1.3) : styleData.alternate ? "#f2f2f2" : "white" ; position: 0 } @@ -115,13 +115,13 @@ ScrollViewStyle { /* Delegate for header. This delegate is described in \l TableView::itemDelegate */ property Component itemDelegate: Item { height: Math.max(16, label.implicitHeight) - property int implicitWidth: sizehint.paintedWidth + 4 + property int implicitWidth: sizehint.paintedWidth + 20 Text { id: label objectName: "label" width: parent.width - anchors.margins: 6 + anchors.leftMargin: 12 anchors.left: parent.left anchors.right: parent.right horizontalAlignment: styleData.textAlignment -- cgit v1.2.1 From c6389d78fc51fb404043848f5d7da2d4e3e19599 Mon Sep 17 00:00:00 2001 From: Jens Bache-Wiig Date: Tue, 28 May 2013 13:14:15 +0200 Subject: Move backgroundColor from TableView to TableViewStyle This property was not respected by some of the native styles and makes more sense as a styling attribute. Change-Id: I9cc1d3a130b764a67552ed7f0cec49ccc87ea246 Reviewed-by: J-P Nurmi --- src/styles/Base/TableViewStyle.qml | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) (limited to 'src/styles/Base/TableViewStyle.qml') diff --git a/src/styles/Base/TableViewStyle.qml b/src/styles/Base/TableViewStyle.qml index b53b3c64..a7b3ba49 100644 --- a/src/styles/Base/TableViewStyle.qml +++ b/src/styles/Base/TableViewStyle.qml @@ -59,7 +59,13 @@ ScrollViewStyle { /*! The text color. */ property color textColor: __syspal.text - /*! The text highlight color, used behind selections. */ + /*! The background color. */ + property color backgroundColor: __syspal.base + + /*! The alternate background color. */ + property color alternateBackgroundColor: Qt.darker(__syspal.base, 1.06) + + /*! The text highlight color, used within selections. */ property color highlightedTextColor: "white" /*! Activates items on single click. */ @@ -96,8 +102,16 @@ ScrollViewStyle { height: 20 property color selectedColor: styleData.hasActiveFocus ? "#38d" : "#999" gradient: Gradient { - 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 } + GradientStop { + color: styleData.selected ? Qt.lighter(selectedColor, 1.3) : + styleData.alternate ? alternateBackgroundColor : backgroundColor + position: 0 + } + GradientStop { + color: styleData.selected ? Qt.lighter(selectedColor, 1.0) : + styleData.alternate ? alternateBackgroundColor : backgroundColor + position: 1 + } } Rectangle { anchors.bottom: parent.bottom -- cgit v1.2.1 From 3eee91908e8bd0c5f3c3ebe59ef1e179c8d1eb68 Mon Sep 17 00:00:00 2001 From: Caroline Chao Date: Sat, 1 Jun 2013 17:16:10 +0200 Subject: Doc: Add doc structure for Styles And: - Add an index page for the Styles - Add missing documentation for some properties (Component) - Fix unexpected curly brackets in a couple of code snippets Change-Id: Ib7265d1cd011a81012eb4b7f69738b84fba5b531 Reviewed-by: Jerome Pasion --- src/styles/Base/TableViewStyle.qml | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) (limited to 'src/styles/Base/TableViewStyle.qml') diff --git a/src/styles/Base/TableViewStyle.qml b/src/styles/Base/TableViewStyle.qml index a7b3ba49..1a0605dc 100644 --- a/src/styles/Base/TableViewStyle.qml +++ b/src/styles/Base/TableViewStyle.qml @@ -45,6 +45,7 @@ import QtQuick.Controls.Private 1.0 \qmltype TableViewStyle \inqmlmodule QtQuick.Controls.Styles 1.0 \since QtQuick.Controls.Styles 1.0 + \ingroup viewsstyling \brief Provides custom styling for TableView Note that this class derives from \l ScrollViewStyle @@ -73,7 +74,9 @@ ScrollViewStyle { padding.top: control.headerVisible ? 0 : 1 - /* Delegate for header. This delegate is described in \l TableView::headerDelegate */ + /*! \qmlproperty Component TableViewStyle::headerDelegate + Delegate for header. This delegate is described in \l {TableView::headerDelegate} + */ property Component headerDelegate: BorderImage { source: "images/header.png" border.left: 4 @@ -97,7 +100,9 @@ ScrollViewStyle { } } - /* Delegate for header. This delegate is described in \l TableView::rowDelegate */ + /*! \qmlproperty Component TableViewStyle::rowDelegate + Delegate for header. This delegate is described in \l {TableView::rowDelegate} + */ property Component rowDelegate: Rectangle { height: 20 property color selectedColor: styleData.hasActiveFocus ? "#38d" : "#999" @@ -126,7 +131,9 @@ ScrollViewStyle { } } - /* Delegate for header. This delegate is described in \l TableView::itemDelegate */ + /*! \qmlproperty Component TableViewStyle::rowDelegate + Delegate for item. This delegate is described in \l {TableView::itemDelegate} + */ property Component itemDelegate: Item { height: Math.max(16, label.implicitHeight) property int implicitWidth: sizehint.paintedWidth + 20 -- cgit v1.2.1 From 3b10c17e34bd6da6278600f57a0ecafe5eb58431 Mon Sep 17 00:00:00 2001 From: Caroline Chao Date: Mon, 10 Jun 2013 09:38:28 +0200 Subject: Move doc from the index to the overview page Cleanup the links. And doc fix in TableViewStyle.qml Change-Id: Id61fcff49af79f35f68696900142bb200ae18042 Reviewed-by: Jens Bache-Wiig Reviewed-by: Nico Vertriest --- src/styles/Base/TableViewStyle.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/styles/Base/TableViewStyle.qml') diff --git a/src/styles/Base/TableViewStyle.qml b/src/styles/Base/TableViewStyle.qml index 1a0605dc..ff7237b0 100644 --- a/src/styles/Base/TableViewStyle.qml +++ b/src/styles/Base/TableViewStyle.qml @@ -131,7 +131,7 @@ ScrollViewStyle { } } - /*! \qmlproperty Component TableViewStyle::rowDelegate + /*! \qmlproperty Component TableViewStyle::itemDelegate Delegate for item. This delegate is described in \l {TableView::itemDelegate} */ property Component itemDelegate: Item { -- cgit v1.2.1