From 836e0e02fddf150d26c29e7f44a1214dc6f69755 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=A6=8C=EA=A6=AB=EA=A6=B6=EA=A6=8F=EA=A7=80=EA=A6=A6?=
 =?UTF-8?q?=EA=A6=BF=EA=A6=A7=EA=A6=AE=EA=A6=91=EA=A6=A9=EA=A6=AD=EA=A7=80?=
 <erik@darapsa.co.id>
Date: Thu, 19 Jan 2023 14:27:48 +0800
Subject: Default Home header

And fix counter distribution.
---
 DefaultHomeFlickable.ui.qml | 154 ++++++++++++++++++++++++++++----------------
 1 file changed, 98 insertions(+), 56 deletions(-)

diff --git a/DefaultHomeFlickable.ui.qml b/DefaultHomeFlickable.ui.qml
index 83ba02f..e2f89fe 100644
--- a/DefaultHomeFlickable.ui.qml
+++ b/DefaultHomeFlickable.ui.qml
@@ -1,74 +1,116 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
 
 Flickable {
 	property alias counter: counter
 	property alias popular: popular
-	contentHeight: counter.height + popular.height
+	contentHeight: body.height
 
-	GridView {
-		id: counter
-		interactive: false
-
-		model: ListModel {
-			ListElement {
-				icon: "Font-Awesome/svgs/solid/tv.svg"
-				count: "10K"
-				title: qsTr("Online Courses")
-				bgColor: "#26f7c32e"
-			}
-			ListElement {
-				icon: "Font-Awesome/svgs/solid/user-tie.svg"
-				count: "200+"
-				title: qsTr("Expert Tutors")
-				bgColor: "#1a1d3b53"
-			}
-			ListElement {
-				icon: "Font-Awesome/svgs/solid/user-graduate.svg"
-				count: "60K+"
-				title: qsTr("Online Students")
-				bgColor: "#1a6f42c1"
-			}
-			ListElement {
-				icon: "Bootstrap/icons/patch-check-fill.svg"
-				count: "6K+"
-				title: qsTr("Certified Courses")
-				bgColor: "#1a17a2b8"
-			}
-		}
-
-		cellWidth: width < 576 ? width : width < 768 ? width / 2
-		: width < 992 ? width / 3 : width / 4
-		cellHeight: 125.6
-
-		height: width < 576 ? cellHeight * 4
-		: width < 768 ? cellHeight * 3
-		: width < 992 ? cellHeight * 2 : cellHeight
+	ColumnLayout {
+		id: body
 		anchors {
 			top: parent.top
 			left: parent.left
 			right: parent.right
 		}
-	}
 
-	GridView {
-		id: popular
-		interactive: false
+		ToolBar {
+			Layout.fillWidth: true
+			RowLayout {
+				anchors.fill: parent
+				layoutDirection: Qt.RightToLeft
+				ToolButton {
+					onClicked: optionsMenu.open()
+					Menu {
+						id: optionsMenu
+						y: parent.height
+						Action {
+							text: qsTr("Edit Profile")
+						}
+						Action {
+							text: qsTr("Account Settings")
+						}
+						Action {
+							text: qsTr("Help")
+						}
+						Action {
+							text: qsTr("Sign Out")
+						}
+						Action {
+							text: qsTr("Dark Mode")
+						}
+					}
+				}
+			}
+		}
 
-		cellWidth: width < 576 ? width
-		: width < 768 ? width / 2
-		: width < 992 ? width / 3
-		: width / 4
-		cellHeight: cellWidth * 1.3
+		Item {
+			implicitHeight: counter.height + popular.height
+			Layout.fillWidth: true
 
-		height: width < 576 ? cellHeight * count
-		: width < 768 ? cellHeight * count / 2
-		: width < 992 ? cellHeight * count / 3
-		: cellHeight * count / 4
-		anchors {
-			top: counter.bottom
-			left: parent.left
-			right: parent.right
+			GridView {
+				id: counter
+				interactive: false
+				cellWidth: width < 576 ? width
+				: width < 1200 ? width / 2
+				: width / 4
+				cellHeight: 125.6
+				height: width < 576 ? cellHeight * count
+				: width < 1200 ? cellHeight * count / 2
+				: cellHeight
+				anchors {
+					top: parent.top
+					left: parent.left
+					right: parent.right
+				}
+
+				model: ListModel {
+					ListElement {
+						icon: "Font-Awesome/svgs/solid/tv.svg"
+						count: "10K"
+						title: qsTr("Online Courses")
+						bgColor: "#26f7c32e"
+					}
+					ListElement {
+						icon: "Font-Awesome/svgs/solid/user-tie.svg"
+						count: "200+"
+						title: qsTr("Expert Tutors")
+						bgColor: "#1a1d3b53"
+					}
+					ListElement {
+						icon: "Font-Awesome/svgs/solid/user-graduate.svg"
+						count: "60K+"
+						title: qsTr("Online Students")
+						bgColor: "#1a6f42c1"
+					}
+					ListElement {
+						icon: "Bootstrap/icons/patch-check-fill.svg"
+						count: "6K+"
+						title: qsTr("Certified Courses")
+						bgColor: "#1a17a2b8"
+					}
+				}
+			}
+
+			GridView {
+				id: popular
+				interactive: false
+				cellWidth: width < 576 ? width
+				: width < 768 ? width / 2
+				: width < 992 ? width / 3
+				: width / 4
+				cellHeight: cellWidth * 1.3
+				height: width < 576 ? cellHeight * count
+				: width < 768 ? cellHeight * count / 2
+				: width < 992 ? cellHeight * count / 3
+				: cellHeight * count / 4
+				anchors {
+					top: counter.bottom
+					left: parent.left
+					right: parent.right
+				}
+			}
 		}
 	}
 }
-- 
cgit v1.2.3