From 3b535c417cfa7826c72794416a71dbe21f778b43 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, 20 Oct 2022 16:18:54 +0800
Subject: Detail view uses detail card instead of grid

---
 ClassicDetailScrollView.ui.qml |  2 +-
 DetailCardItem.ui.qml          | 61 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 DetailCardItem.ui.qml

diff --git a/ClassicDetailScrollView.ui.qml b/ClassicDetailScrollView.ui.qml
index 17ffe2e..02a91d7 100644
--- a/ClassicDetailScrollView.ui.qml
+++ b/ClassicDetailScrollView.ui.qml
@@ -4,7 +4,7 @@ import QtQuick.Controls 2.15
 ScrollView {
 	property string cardImageSource
 
-	GridCardItem {
+	DetailCardItem {
 		anchors.fill: parent
 		imageSource: cardImageSource
 	}
diff --git a/DetailCardItem.ui.qml b/DetailCardItem.ui.qml
new file mode 100644
index 0000000..f2f6ca5
--- /dev/null
+++ b/DetailCardItem.ui.qml
@@ -0,0 +1,61 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtGraphicalEffects 1.15
+
+Item {
+	property string imageSource: "Darapsa.svg"
+
+	DropShadow {
+		source: rectangle
+		color: Qt.rgba(.113, .227, .325, .15)
+		anchors.fill: rectangle
+	}
+
+	Rectangle {
+		id: rectangle
+		radius: 10
+		anchors {
+			top: parent.top
+			topMargin: 25.6
+			left: parent.left
+			leftMargin: 12.8
+			right: parent.right
+			rightMargin: 12.8
+			bottom: parent.bottom
+		}
+
+		Image {
+			id: image
+			source: imageSource
+			sourceSize {
+				width: parent.width - 16
+				height: parent.width * 3 / 4
+			}
+			width: sourceSize.width
+			height: sourceSize.height
+			anchors {
+				top: parent.top
+				topMargin: 8
+				horizontalCenter: parent.horizontalCenter
+			}
+			layer.enabled: true
+			layer.effect: OpacityMask {
+				maskSource: Rectangle {
+					width: image.width
+					height: image.height
+					radius: 10
+				}
+			}
+		}
+
+		Item {
+			id: body
+			width: parent.width
+			anchors {
+				top: image.bottom
+				bottom: parent.bottom
+			}
+
+		}
+	}
+}
-- 
cgit v1.2.3