Create new ContentViewTab to control input logic

2022-09-08 11:48:50 -06:00
parent 0f77be4b0d
commit 34aa28529d
7 changed files with 101 additions and 89 deletions
@@ -0,0 +1,62 @@
+import QtQuick 2.12
+import QtQuick.Controls 1.4
+import QtQuick.Controls 2.15
+
+Column {
+    property var title
+    property var provider
+    property var repeaterModel
+    property bool elemSelected
+    property int xIndex: 0
+    property int showId: repeaterModel[xIndex]
+    width: parent.width
+    Item {
+        width: 10
+        height: 20
+    }
+    Row {
+        Item {
+            height: parent.height
+            width: 16
+        }
+        Text {
+            text: title
+            font.pointSize: 15
+            color: "#cdd7d9"
+        }
+    }
+    Item {
+        width: 10
+        height: 15
+    }
+    ScrollView {
+        width: parent.width
+        height: 400
+        ScrollBar.horizontal.position: xIndex * 0.135
+        Behavior on ScrollBar.horizontal.position {
+            NumberAnimation {
+                duration: 200
+                easing.type: Easing.Linear
+            }
+        }
+        Flickable {
+            clip: true
+            Column {
+                Item {
+                    width: parent.width
+                    height: 20
+                }
+                Row {
+                    Repeater {
+                        id: repeater
+                        property var provider: modelData
+                        model: repeaterModel
+                        Show {
+                            show: provider.getShow(modelData)
+                        }
+                    }
+                }
+            }
+        }
+    }
+ }
@@ -0,0 +1,98 @@
+import QtQuick 2.12
+import QtQuick.Controls 1.4
+import QtGraphicalEffects 1.12
+
+Item {
+    property var show
+    property int baseHeight: 350
+    property int childHeight: baseHeight
+    property int childWidth: baseHeight * 0.68
+    property int childHeightExpanded: baseHeight * 15 / 14
+    property int childWidthExpanded: (baseHeight * 15 / 14) * 0.68
+    property int borderWidth: 3
+    property int borderRadius: 1
+    property int borderRectHeight: childHeight + (borderWidth * 2)
+    property int borderRectWidth: childWidth + (borderWidth * 2)
+    property int borderRectHeightExpanded: childHeightExpanded + (borderWidth * 2)
+    property int borderRectWidthExpanded: childWidthExpanded + (borderWidth * 2)
+
+    height: baseHeight
+    width: (baseHeight * 8 / 7) * 0.68
+    Item {
+        id: parentElem
+        state: (elemSelected && (index == xIndex)) ? "selected" : "deselected"
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.fill: parent
+        DropShadow {
+            id: dropShadow
+            anchors.fill: img
+            verticalOffset: 15
+            samples: 80
+            opacity: 0.5
+            color: "black"
+            source: img
+        }
+        Rectangle {
+            id: rect
+            color: "transparent"
+            border.color: "orange"
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            radius: borderRadius
+        }
+        Image {
+            id: img
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            source: show.poster
+            mipmap: true
+        }
+        states: [
+            State {
+                name: "deselected"
+                PropertyChanges {
+                    target: rect
+                    border.width: 0
+                    height: borderRectHeight
+                    width: borderRectWidth
+                }
+                PropertyChanges {
+                    target: dropShadow
+                    visible: false
+                }
+                PropertyChanges {
+                    target: img
+                    width: childWidth
+                    height: childHeight
+                }
+            },
+            State {
+                name: "selected"
+                PropertyChanges {
+                    target: rect
+                    border.width: borderWidth
+                    height: borderRectHeightExpanded
+                    width: borderRectWidthExpanded
+                }
+                PropertyChanges {
+                    target: dropShadow
+                    visible: true
+                }
+                PropertyChanges {
+                    target: img
+                    width: childWidthExpanded
+                    height: childHeightExpanded
+                }
+            }
+        ]
+        transitions: [
+            Transition {
+                NumberAnimation {
+                    properties: "border.width,width,height"
+                    duration: 100
+                    easing.type: Easing.Linear
+                }
+            }
+        ]
+    }
+}
@@ -0,0 +1,37 @@
+import QtQuick 2.12
+
+Row {
+    property var show
+    Item {
+        height: parent.height
+        width: 16
+    }
+    Column {
+        height: parent.height
+        width: parent.width - 16
+        spacing: 20
+        Item {
+            height: 20
+            width: parent.width
+        }
+        Text {
+            text: show.title
+            font.pointSize: 30
+            color: "#cdd7d9"
+        }
+        Text {
+            text: show.year
+            font.pointSize: 15
+            color: "#99afb4"
+        }
+        Text {
+            text: show.description
+            font.pointSize: 13
+            color: "#cdd7d9"
+            width: parent.width * 0.6
+            wrapMode: Text.WordWrap
+            maximumLineCount: 4
+            elide: Text.ElideRight
+        }
+    }
+}