From 6fb39cefe3b1ac16c74eb49a6a07d89961515c51 Mon Sep 17 00:00:00 2001
From: Volker Hilsheimer <volker.hilsheimer@qt.io>
Date: Thu, 28 Nov 2024 18:08:16 +0100
Subject: [PATCH] iconbrowser: improve the QML UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Set different icons on the button depending on whether it's checked or
not (since in Qt Quick we always ask for QIcon's pixmap in the "Off"
state), and use Qt Quick Controls and layouts instead of positioners for
proper alignments of labels and text fields.

Change-Id: I1c5bd368560042ec4af8cf4bf1b9104d0257ac40
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
Reviewed-by: Tor Arne Vestbø <tor.arne.vestbo@qt.io>
---
 tests/manual/iconbrowser/Main.qml | 57 +++++++++++++++++++++----------
 1 file changed, 39 insertions(+), 18 deletions(-)

diff --git a/tests/manual/iconbrowser/Main.qml b/tests/manual/iconbrowser/Main.qml
index fd16df58ec0..154361e7278 100644
--- a/tests/manual/iconbrowser/Main.qml
+++ b/tests/manual/iconbrowser/Main.qml
@@ -3,29 +3,50 @@
 
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Layouts
 
 Rectangle {
     anchors.fill: parent
-    Column {
-        Row {
-            ToolButton {
-                id: normalButton
-                icon.name: iconName.text
-            }
-            ToolButton {
-                id: disabledButton
-                enabled: false
-                icon.name: iconName.text
-            }
-            ToolButton {
-                id: checkedButton
-                checked: true
-                icon.name: iconName.text
+    ColumnLayout {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        ToolBar {
+            RowLayout {
+                anchors.fill: parent
+                ToolButton {
+                    id: normalButton
+                    checkable: true
+                    icon.name: checked ? iconNameOn.text : iconNameOff.text
+                }
+                ToolButton {
+                    id: checkedButton
+                    checked: true
+                    checkable: true
+                    icon.name: checked ? iconNameOn.text : iconNameOff.text
+                }
+                ToolButton {
+                    id: disabledButton
+                    enabled: false
+                    icon.name: checked ? iconNameOn.text : iconNameOff.text
+                }
             }
         }
-        TextField {
-            id: iconName
-            text: "folder"
+
+        RowLayout {
+            Label {
+                text: "Off:"
+            }
+            TextField {
+                id: iconNameOff
+                text: "mail-mark-read"
+            }
+            Label {
+                text: "On:"
+            }
+            TextField {
+                id: iconNameOn
+                text: "mail-mark-unread"
+            }
         }
     }
 }