Home default popular tab item

2 files changed, 57 insertions, 20 deletions

diff --git a/HomeDefault.ui.qml b/HomeDefault.ui.qml
index be551b4..bd143ba 100644
--- a/HomeDefault.ui.qml
+++ b/HomeDefault.ui.qml
@@ -5,7 +5,8 @@ import QtGraphicalEffects 1.15
 
 Flickable {
 	property alias counter: counter
-	property alias popular: popular
+	property alias tabs: tabs
+	property alias tabPane: tabPane
 	property alias getStarted: getStarted
 	property bool doesntEmbed: Qt.platform.os === "android"
 				|| Qt.platform.os === "linux"
@@ -242,8 +243,6 @@ Flickable {
 				}
 			}
 
-			property int currentIndex: 0
-
 			Rectangle {
 				color: Qt.rgba(.0235, .416, .788, .1)
 				radius: 10
@@ -265,34 +264,40 @@ Flickable {
 					cellHeight: 46
 					implicitHeight: width < 284 ? cellHeight * 5 : width < 426 ? cellHeight * 3 : width < 710 ? cellHeight * 2 : cellHeight
 
-					model: ["Web Design", "Development", "Graphic Design", "Marketing", "Finance"]
-
-					delegate: Label {
-						text: modelData
-						font {
-							family: doesntEmbed ? "Roboto" : regular.name
-							pointSize: 15
+					model: ListModel {
+						ListElement {
+							label: "Web Design"
+							index: 0
+						}
+						ListElement {
+							label: "Development"
+							index: 1
 						}
-						height: 38
-						topPadding: 8
-						leftPadding: 16
-						rightPadding: 16
-						bottomPadding: 8
-						background: Rectangle {
-							color: "#066ac9"
-							radius: 5.2
+						ListElement {
+							label: "Graphic Design"
+							index: 2
+						}
+						ListElement {
+							label: "Marketing"
+							index: 3
+						}
+						ListElement {
+							label: "Finance"
+							index: 4
 						}
 					}
+
+					delegate: TabItem {}
 				}
 			}
 
 			StackLayout {
 				id: tabsContent
 				currentIndex: tabs.currentIndex
-				Layout.preferredHeight: popular.height
+				Layout.preferredHeight: tabPane.height
 
 				GridView {
-					id: popular
+					id: tabPane
 					interactive: false
 					Layout.fillWidth: true
 					cellWidth: width < 576 ? width
diff --git a/TabItem.ui.qml b/TabItem.ui.qml
new file mode 100644
index 0000000..a704822
--- /dev/null
+++ b/TabItem.ui.qml
@@ -0,0 +1,32 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+Button {
+	property int currentIndex: 0
+	property bool doesntEmbed: Qt.platform.os === "android"
+				|| Qt.platform.os === "linux"
+				|| Qt.platform.os === "osx"
+				|| Qt.platform.os === "unix"
+				|| Qt.platform.os === "windows"
+
+	FontLoader {
+		id: regular
+		source: doesntEmbed ? "" : "Roboto/Roboto-Regular.ttf"
+	}
+
+	height: 38
+	horizontalPadding: 16
+	verticalPadding: 8
+	contentItem: Text {
+		text: label
+		color: index == currentIndex ? "white" : "#066ac9"
+		font {
+			family: doesntEmbed ? "Roboto" : regular.name
+			pointSize: 15
+		}
+	}
+	background: Rectangle {
+		color: index == currentIndex ? "#066ac9" : "transparent"
+		radius: 5.2
+	}
+}