iOS Style: Add TabBar, ToolBar, and MenuBar control

These controls have a similar look and feel in iOS.

Change-Id: I0a918db266a93f1c949a21f58761df525627c6f3
Reviewed-by: Richard Moe Gustavsen <richard.gustavsen@qt.io>
(cherry picked from commit e444026167aa53197c4e05b033380522b4568258)
Reviewed-by: Doris Verria <doris.verria@qt.io>

7 files changed, 123 insertions, 2 deletions

diff --git a/src/quickcontrols2/ios/CMakeLists.txt b/src/quickcontrols2/ios/CMakeLists.txt
index fbe829fa07..199a3d0e0c 100644
--- a/src/quickcontrols2/ios/CMakeLists.txt
+++ b/src/quickcontrols2/ios/CMakeLists.txt
@@ -30,7 +30,11 @@ set(qml_files
     "Frame.qml"
     "GroupBox.qml"
     "SplitView.qml"
+    "TabBar.qml"
+    "ToolBar.qml"
+    "MenuBar.qml"
 )
+
 set_source_files_properties(Slider.qml PROPERTIES
     QT_QML_SOURCE_VERSIONS "2.2;6.0"
 )
diff --git a/src/quickcontrols2/ios/MenuBar.qml b/src/quickcontrols2/ios/MenuBar.qml
new file mode 100644
index 0000000000..d20d118ea8
--- /dev/null
+++ b/src/quickcontrols2/ios/MenuBar.qml
@@ -0,0 +1,35 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+
+T.MenuBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    delegate: MenuBarItem { }
+
+    contentItem: Row {
+        spacing: control.spacing
+        Repeater {
+            model: control.contentModel
+        }
+    }
+
+    background: Rectangle {
+        opacity: 0.98
+        color: control.IOS.theme === IOS.Dark ? control.palette.light : control.palette.base
+        Rectangle {
+            height: 1
+            width: parent.width
+            color: control.palette.mid
+            y: control.position === T.TabBar.Footer ? 0 : parent.height - 1
+        }
+    }
+}
diff --git a/src/quickcontrols2/ios/MenuBarItem.qml b/src/quickcontrols2/ios/MenuBarItem.qml
index cd8aa01dca..68dd7f2349 100644
--- a/src/quickcontrols2/ios/MenuBarItem.qml
+++ b/src/quickcontrols2/ios/MenuBarItem.qml
@@ -35,4 +35,8 @@ T.MenuBarItem {
         color: control.enabled ? (control.down ? control.palette.highlight : control.palette.button)
                                : control.palette.mid
     }
+
+    background: Item {
+        implicitHeight: 49
+    }
 }
diff --git a/src/quickcontrols2/ios/TabBar.qml b/src/quickcontrols2/ios/TabBar.qml
new file mode 100644
index 0000000000..4c465799c6
--- /dev/null
+++ b/src/quickcontrols2/ios/TabBar.qml
@@ -0,0 +1,44 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.iOS
+
+T.TabBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    spacing: 1
+
+    contentItem: ListView {
+        model: control.contentModel
+        currentIndex: control.currentIndex
+
+        spacing: control.spacing
+        orientation: ListView.Horizontal
+        boundsBehavior: Flickable.StopAtBounds
+        flickableDirection: Flickable.AutoFlickIfNeeded
+        snapMode: ListView.SnapToItem
+
+        highlightMoveDuration: 0
+        highlightRangeMode: ListView.ApplyRange
+        preferredHighlightBegin: 40
+        preferredHighlightEnd: width - 40
+    }
+
+    background: Rectangle {
+        implicitHeight: 49
+        color: control.IOS.theme === IOS.Dark ? control.palette.light : control.palette.base
+        Rectangle {
+            height: 1
+            width: parent.width
+            color: control.palette.mid
+            y: control.position === T.TabBar.Footer ? 0 : parent.height - 1
+        }
+    }
+}
diff --git a/src/quickcontrols2/ios/TabButton.qml b/src/quickcontrols2/ios/TabButton.qml
index 61f1cf15be..0dc84e4f1d 100644
--- a/src/quickcontrols2/ios/TabButton.qml
+++ b/src/quickcontrols2/ios/TabButton.qml
@@ -13,7 +13,6 @@ T.TabButton {
                             implicitContentWidth + leftPadding + rightPadding)
     implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                              implicitContentHeight + topPadding + bottomPadding)
-
     padding: 6
     spacing: 6
 
@@ -22,12 +21,13 @@ T.TabButton {
     icon.color: checked ? control.palette.button : control.palette.dark
 
     display: TabButton.TextUnderIcon
-    font.pointSize: 13
+    font.pointSize: 12
 
     contentItem: IconLabel {
         spacing: control.spacing
         mirrored: control.mirrored
         display: control.display
+        alignment: Qt.AlignCenter
 
         icon: control.icon
         text: control.text
@@ -35,4 +35,8 @@ T.TabButton {
         color: checked ? control.palette.button : control.palette.dark
         opacity: control.enabled ? 1 : 0.5
     }
+
+    background: Item {
+        implicitHeight: 49
+    }
 }
diff --git a/src/quickcontrols2/ios/ToolBar.qml b/src/quickcontrols2/ios/ToolBar.qml
new file mode 100644
index 0000000000..b0e4f0ed90
--- /dev/null
+++ b/src/quickcontrols2/ios/ToolBar.qml
@@ -0,0 +1,26 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Templates as T
+
+T.ToolBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
+    background: Rectangle {
+        implicitHeight: 49
+        color: control.IOS.theme === IOS.Dark ? control.palette.light : control.palette.base
+        Rectangle {
+            height: 1
+            width: parent.width
+            y: control.position === T.TabBar.Footer ? 0 : parent.height - 1
+            color: control.palette.mid
+        }
+    }
+}
diff --git a/src/quickcontrols2/ios/ToolButton.qml b/src/quickcontrols2/ios/ToolButton.qml
index 7bb7da5cfc..4eb55fd414 100644
--- a/src/quickcontrols2/ios/ToolButton.qml
+++ b/src/quickcontrols2/ios/ToolButton.qml
@@ -33,4 +33,8 @@ T.ToolButton {
         color: control.enabled ? (control.down ? control.palette.highlight : control.palette.button)
                                : control.palette.mid
     }
+
+    background: Item {
+        implicitHeight: 49
+    }
 }