From 5f884321eab555e12ab2d1cf3ec25053399b699e Mon Sep 17 00:00:00 2001
From: Ghostkeeper <rubend@tutanota.com>
Date: Thu, 28 Oct 2021 18:08:51 +0200
Subject: [PATCH] Add design for tabs of package type selector

The width here is implementation-defined. Looks like it matches the design though. Seems like the design has 0 margins.

Contributes to issue CURA-8557.
---
 .../Marketplace/resources/qml/Marketplace.qml |  6 +++--
 .../resources/qml/PackageTypeTab.qml          | 26 +++++++++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 plugins/Marketplace/resources/qml/PackageTypeTab.qml

diff --git a/plugins/Marketplace/resources/qml/Marketplace.qml b/plugins/Marketplace/resources/qml/Marketplace.qml
index 13780c2aa8..308474a242 100644
--- a/plugins/Marketplace/resources/qml/Marketplace.qml
+++ b/plugins/Marketplace/resources/qml/Marketplace.qml
@@ -77,12 +77,14 @@ Window
                     anchors.right: parent.right
                     anchors.rightMargin: UM.Theme.getSize("default_margin").width
 
-                    TabButton
+                    spacing: 0
+
+                    PackageTypeTab
                     {
                         width: implicitWidth
                         text: catalog.i18nc("@button", "Plug-ins")
                     }
-                    TabButton
+                    PackageTypeTab
                     {
                         width: implicitWidth
                         text: catalog.i18nc("@button", "Materials")
diff --git a/plugins/Marketplace/resources/qml/PackageTypeTab.qml b/plugins/Marketplace/resources/qml/PackageTypeTab.qml
new file mode 100644
index 0000000000..9b6136f1f0
--- /dev/null
+++ b/plugins/Marketplace/resources/qml/PackageTypeTab.qml
@@ -0,0 +1,26 @@
+// Copyright (c) 2021 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import UM 1.0 as UM
+
+TabButton
+{
+    background: Rectangle
+    {
+        anchors.fill: parent
+        color: parent.checked ? UM.Theme.getColor("main_background") : UM.Theme.getColor("detail_background")
+        border.color: UM.Theme.getColor("detail_background")
+        border.width: UM.Theme.getSize("thick_lining").width
+    }
+
+    contentItem: Label
+    {
+        text: parent.text
+        font: UM.Theme.getFont("medium")
+        color: UM.Theme.getColor("text")
+        width: contentWidth
+        anchors.centerIn: parent
+    }
+}
\ No newline at end of file