FluentWinUI3: Improve Dialog when using high contrast themesHEADdev

The Dialog type was lacking the iconic outline which Dialogs get when
high contrast themes are enabled on Windows 11.

Add it to both Dialog, and DialogButtonBox, and make adjustments in
order to make a Dialog with and without a DialogButtonBox look similar
to a Windows App SDK ContentDialog, when using a high contrast theme.

Task-number: QTBUG-129088
Pick-to: 6.10
Change-Id: Ie158a46566dceaa343f9120cc44969b410b5abe4
Reviewed-by: Doris Verria <[email protected]>

2 files changed, 23 insertions, 10 deletions

diff --git a/src/quickcontrols/fluentwinui3/Dialog.qml b/src/quickcontrols/fluentwinui3/Dialog.qml
index d17baba946..86bf6d49d8 100644
--- a/src/quickcontrols/fluentwinui3/Dialog.qml
+++ b/src/quickcontrols/fluentwinui3/Dialog.qml
@@ -18,10 +18,12 @@ T.Dialog {
                              + (implicitHeaderHeight > 0 ? implicitHeaderHeight + spacing : 0)
                              + (implicitFooterHeight > 0 ? implicitFooterHeight + spacing : 0))
 
-    leftInset: -32
-    topInset: -32
-    rightInset: -32
-    bottomInset: -32
+    readonly property bool __isHighContrast: Application.styleHints.accessibility.contrastPreference === Qt.HighContrast
+
+    leftInset: __isHighContrast ? 0 : -32
+    topInset: __isHighContrast ? 0 : -32
+    rightInset: __isHighContrast ? 0 : -32
+    bottomInset: __isHighContrast ? 0 : -32
 
     padding: 24
     topPadding: 12
@@ -37,8 +39,13 @@ T.Dialog {
         NumberAnimation { property: "scale"; from: 1; to: control.modal ? 1.05 : 1; easing.type: Easing.OutCubic; duration: 167 }
     }
 
-    background: Item {
+    background: Rectangle {
+        color: control.__isHighContrast ? control.palette.window : "transparent"
+        border.color: control.__isHighContrast ? control.palette.text : "transparent"
+        border.width: 2
+        radius: 8
         MultiEffect {
+            visible: !control.__isHighContrast
             x: -control.leftInset
             y: -control.topInset
             width: source.width
@@ -74,6 +81,10 @@ T.Dialog {
 
     footer: DialogButtonBox {
         visible: count > 0
+        leftInset: control.__isHighContrast ? 1 : 0
+        topInset: control.__isHighContrast ? 1 : 0
+        rightInset: control.__isHighContrast ? 1 : 0
+        bottomInset: control.__isHighContrast ? 1 : 0
     }
 
     T.Overlay.modal: Rectangle {
diff --git a/src/quickcontrols/fluentwinui3/DialogButtonBox.qml b/src/quickcontrols/fluentwinui3/DialogButtonBox.qml
index 065ec0faba..79c1e6341c 100644
--- a/src/quickcontrols/fluentwinui3/DialogButtonBox.qml
+++ b/src/quickcontrols/fluentwinui3/DialogButtonBox.qml
@@ -32,16 +32,18 @@ T.DialogButtonBox {
     }
 
     background: Item {
+        readonly property bool __isHighContrast: Application.styleHints.accessibility.contrastPreference === Qt.HighContrast
         implicitHeight: 81
         Rectangle {
-            implicitHeight: 1
-            color: Application.styleHints.colorScheme === Qt.Light ? "#0F000000" : "#15FFFFFF"
+            implicitHeight: parent.__isHighContrast ? 2 : 1
+            width: parent.width
+            color: parent.__isHighContrast ? control.palette.text : Application.styleHints.colorScheme === Qt.Light ? "#0F000000" : "#15FFFFFF"
         }
         Rectangle {
-            implicitHeight: 80
-            x: 1; y: 1
+            implicitHeight: parent.__isHighContrast ? 79 : 80
+            x: 1; y: parent.__isHighContrast ? 2 : 1
             width: parent.width - 2
-            height: parent.height - 2
+            height: parent.height - (parent.__isHighContrast ? 3 : 2)
             color: control.palette.window
             topLeftRadius: 0
             bottomLeftRadius: 7