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.

Pick-to: 6.5 6.4
Change-Id: Ibc01779526aecc4f0d40fad2a6f2ea2822427e85
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

src/quickcontrols/fusion/HorizontalHeaderView.qml

@@ -3,6 +3,7 @@
 
 import QtQuick
 import QtQuick.Templates as T
+import QtQuick.Controls.Fusion.impl
 
 T.HorizontalHeaderView {
     id: control
@@ -21,16 +22,16 @@ T.HorizontalHeaderView {
 
         implicitWidth: text.implicitWidth + (cellPadding * 2)
         implicitHeight: Math.max(control.height, text.implicitHeight + (cellPadding * 2))
-        border.color: "#cacaca"
 
         gradient: Gradient {
+            id: buttonGradient
             GradientStop {
                 position: 0
-                color: "#fbfbfb"
+                color: Fusion.gradientStart(control.palette.button)
             }
             GradientStop {
                 position: 1
-                color: "#e0dfe0"
+                color: Fusion.gradientStop(control.palette.button)
             }
         }
 
@@ -43,7 +44,6 @@ T.HorizontalHeaderView {
             height: parent.height
             horizontalAlignment: Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
-            color: "#ff26282a"
         }
     }
 }

src/quickcontrols/fusion/VerticalHeaderView.qml

@@ -3,6 +3,7 @@
 
 import QtQuick
 import QtQuick.Templates as T
+import QtQuick.Controls.Fusion.impl
 
 T.VerticalHeaderView {
     id: control
@@ -21,16 +22,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)
             }
         }
 
@@ -43,7 +43,6 @@ T.VerticalHeaderView {
             height: parent.height
             horizontalAlignment: Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
-            color: "#ff26282a"
         }
     }
 }

tests/manual/quickcontrols/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
+        columnSpacing: 1
-        rowSpacing: 4
+        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: {
+        color: palette.base
-            horizontalHeader.contentX = 0
+        ToolButton {
-            verticalHeader.contentY = 0
+            anchors.fill: parent
+            text: "<<"
+            onClicked: {
+                horizontalHeader.contentX = 0
+                verticalHeader.contentY = 0
+            }
         }
     }
 }