Fusion, HeaderView: use colors from the style

Don't hard code colors in HorizontalHeaderView and
VerticalHeaderView. Instead, use colors from the
palette / style. This ensures that switching between
light and dark mode will also affect HeaderView.

Additionally, skip drawing a box around the header view
cells - doing so ends up looking quite bad, since you
will draw double lines between the cells (especially
when the columnSpace/rowSpace is 0. Instead, the border
around the cells in both TableView and HeaderView is
supposed to be drawn indirectly from setting rowSpacing
and columnSpacing to e.g 1.

Change-Id: Ibc01779526aecc4f0d40fad2a6f2ea2822427e85
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
(cherry picked from commit f8207a204b7f6b8af7d371b5fec57a135b54f0e5)

3 files changed, 21 insertions, 15 deletions

diff --git a/src/quickcontrols2/fusion/HorizontalHeaderView.qml b/src/quickcontrols2/fusion/HorizontalHeaderView.qml
index df868644f3..77a39cc5a5 100644
--- a/src/quickcontrols2/fusion/HorizontalHeaderView.qml
+++ b/src/quickcontrols2/fusion/HorizontalHeaderView.qml
@@ -3,6 +3,8 @@
 
 import QtQuick
 import QtQuick.Templates as T
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
 
 T.HorizontalHeaderView {
     id: control
@@ -16,16 +18,15 @@ T.HorizontalHeaderView {
 
         implicitWidth: text.implicitWidth + (cellPadding * 2)
         implicitHeight: Math.max(control.height, text.implicitHeight + (cellPadding * 2))
-        border.color: "#cacaca"
 
         gradient: Gradient {
             GradientStop {
                 position: 0
-                color: "#fbfbfb"
+                color: Fusion.gradientStart(control.palette.button)
             }
             GradientStop {
                 position: 1
-                color: "#e0dfe0"
+                color: Fusion.gradientStop(control.palette.button)
             }
         }
 
@@ -38,7 +39,6 @@ T.HorizontalHeaderView {
             height: parent.height
             horizontalAlignment: Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
-            color: "#ff26282a"
         }
     }
 }
diff --git a/src/quickcontrols2/fusion/VerticalHeaderView.qml b/src/quickcontrols2/fusion/VerticalHeaderView.qml
index 9cd3e57c45..a6072c0930 100644
--- a/src/quickcontrols2/fusion/VerticalHeaderView.qml
+++ b/src/quickcontrols2/fusion/VerticalHeaderView.qml
@@ -3,6 +3,8 @@
 
 import QtQuick
 import QtQuick.Templates as T
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
 
 T.VerticalHeaderView {
     id: control
@@ -16,16 +18,15 @@ T.VerticalHeaderView {
 
         implicitWidth: Math.max(control.width, text.implicitWidth + (cellPadding * 2))
         implicitHeight: text.implicitHeight + (cellPadding * 2)
-        border.color: "#cacaca"
 
         gradient: Gradient {
             GradientStop {
                 position: 0
-                color: "#fbfbfb"
+                color: Fusion.gradientStart(control.palette.button)
             }
             GradientStop {
                 position: 1
-                color: "#e0dfe0"
+                color: Fusion.gradientStop(control.palette.button)
             }
         }
 
@@ -38,7 +39,6 @@ T.VerticalHeaderView {
             height: parent.height
             horizontalAlignment: Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
-            color: "#ff26282a"
         }
     }
 }
diff --git a/tests/manual/quickcontrols2/headerview/main.qml b/tests/manual/quickcontrols2/headerview/main.qml
index f8504b9f7f..89367d91bf 100644
--- a/tests/manual/quickcontrols2/headerview/main.qml
+++ b/tests/manual/quickcontrols2/headerview/main.qml
@@ -14,6 +14,7 @@ Window {
     width: 640
     height: 480
     title: qsTr("HeaderView Test")
+    color: Qt.styleHints.appearance === Qt.Light ? palette.mid : palette.midlight
 
     TestTableModelWithHeader {
         id: tableModel
@@ -30,8 +31,8 @@ Window {
         model: tableModel
         rightMargin: 100
         bottomMargin: 100
-        columnSpacing: 4
-        rowSpacing: 4
+        columnSpacing: 1
+        rowSpacing: 1
         syncDirection: Qt.Vertical | Qt.Horizontal
         implicitWidth: parent.width + columnSpacing
         implicitHeight: parent.height + rowSpacing
@@ -39,7 +40,7 @@ Window {
         delegate: Rectangle {
             implicitWidth: 150
             implicitHeight: 50
-            color: "#e6ecf5"
+            color: tableView.palette.base
 
             CheckBox {
                 anchors.fill: parent
@@ -68,12 +69,17 @@ Window {
         clip: true
     }
 
-    ToolButton {
+    Rectangle {
         width: verticalHeader.width
         height: horizontalHeader.height
-        onClicked: {
-            horizontalHeader.contentX = 0
-            verticalHeader.contentY = 0
+        color: palette.base
+        ToolButton {
+            anchors.fill: parent
+            text: "<<"
+            onClicked: {
+                horizontalHeader.contentX = 0
+                verticalHeader.contentY = 0
+            }
         }
     }
 }