From ff32c0ef68705c8a7c2e8d28c69f468659b19dc1 Mon Sep 17 00:00:00 2001
From: Mahmoud Badri <mahmoud.badri@qt.io>
Date: Tue, 15 Oct 2024 15:22:53 +0300
Subject: [PATCH] QmlDesigner: Ensure Content library tabs always visible

Tabs are now responsive with the width of the view. Also a tooltip
makes sure user can view the name of the tab in case it is elided.
Also wrapped the message that appears when the materials view is empty.

Fixes: QDS-13795
Change-Id: I43c08124696e252b834c846ae24975dd837400c5
Reviewed-by: Shrief Gabr <shrief.gabr@qt.io>
Reviewed-by: Ali Kianian <ali.kianian@qt.io>
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>
---
 .../ContentLibraryMaterialsView.qml                    |  2 ++
 .../contentLibraryQmlSource/ContentLibraryTabBar.qml   |  4 +++-
 .../ContentLibraryTabButton.qml                        | 10 ++++++++--
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryMaterialsView.qml b/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryMaterialsView.qml
index c7b2f5a0822..8cfabf06d22 100644
--- a/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryMaterialsView.qml
+++ b/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryMaterialsView.qml
@@ -133,6 +133,8 @@ HelperWidgets.ScrollView {
             topPadding: 10
             leftPadding: 10
             visible: root.materialsModel.isEmpty
+            wrapMode: Text.WordWrap
+            width: root.width - x
         }
     }
 }
diff --git a/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryTabBar.qml b/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryTabBar.qml
index ca8fb64eccf..a0942bc64a6 100644
--- a/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryTabBar.qml
+++ b/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryTabBar.qml
@@ -2,11 +2,12 @@
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
 
 import QtQuick
+import QtQuick.Layouts
 import HelperWidgets 2.0 as HelperWidgets
 import StudioControls 1.0 as StudioControls
 import StudioTheme 1.0 as StudioTheme
 
-Row {
+RowLayout {
     id: root
 
     property int currIndex: 0
@@ -24,6 +25,7 @@ Row {
             icon: modelData.icon
             selected: root.currIndex === index
             onClicked: root.currIndex = index
+            Layout.fillWidth: true
         }
     }
 }
diff --git a/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryTabButton.qml b/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryTabButton.qml
index 587f846a10b..cc8efbf7168 100644
--- a/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryTabButton.qml
+++ b/share/qtcreator/qmldesigner/contentLibraryQmlSource/ContentLibraryTabButton.qml
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
 
 import QtQuick
+import QtQuick.Controls
 import HelperWidgets 2.0 as HelperWidgets
 import StudioControls 1.0 as StudioControls
 import StudioTheme 1.0 as StudioTheme
@@ -16,7 +17,6 @@ Rectangle {
     property bool selected: false
 
     height: button.height
-    width: button.width + label.width + contentRow.spacing + 6
     color: StudioTheme.Values.themeToolbarBackground
     radius: StudioTheme.Values.smallRadius
 
@@ -43,9 +43,9 @@ Rectangle {
             color: StudioTheme.Values.themeTextColor
             text: qsTr("Materials")
             font.pixelSize: StudioTheme.Values.baseFontSize
-            horizontalAlignment: Text.AlignLeft
             verticalAlignment: Text.AlignVCenter
             elide: Text.ElideRight
+            width: root.width - x
         }
     }
 
@@ -56,6 +56,12 @@ Rectangle {
         onClicked: root.clicked()
     }
 
+    StudioControls.ToolTip {
+        visible: mouseArea.containsMouse
+        text: label.text
+        delay: 1000
+    }
+
     states: [
         State {
             name: "default"