Refactor cover display into component w/resdesign

layouts/components/ContentViewElement.qml

@@ -1,6 +1,5 @@
 import QtQuick 2.12
 import QtQuick.Controls 1.4
-import QtGraphicalEffects 1.12
 
 
 Column {
@@ -26,91 +25,12 @@ Column {
         Repeater {
             property var provider: modelData
             model: repeaterModel
-            Row{
             Item {
-                height: 10
-                width: 80
-            }
-            Column {
-                id: showColumn
-                property var show: provider.getShow(modelData)
-                Item {
-                    property int childHeight: 300
-                    property int childWidth: 300 * 0.68
-                    property int borderWidth: 7
-                    property int borderRadius: 3
-                    height: 300 + (borderWidth * 2)
-                    width: (300 * 0.68) + (borderWidth * 2)
-                    state: (elemSelected && (index == xIndex)) ? "selected" : "deselected"
-                    Image {
-                        id: img
-                        height: parent.childHeight
-                        width: parent.childWidth
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        anchors.verticalCenter: parent.verticalCenter
-                        source: showColumn.show.poster
-                        mipmap: true
-                    }
-                    Rectangle {
-                        id: rect
-                        color: "transparent"
-                        border.color: "orange"
-                        width: parent.width
-                        height: parent.height
-                        border.width: parent.borderWidth
-                        radius: parent.borderRadius
-                    }
-                    DropShadow {
-                        anchors.fill: img
-                        horizontalOffset: 5
-                        verticalOffset: 5
-                        radius: 8.0
-                        samples: 17
-                        color: "#80000000"
-                        source: img
-                    }
-                    states: [
-                        State {
-                            name: "deselected"
-                            PropertyChanges {
-                                target: rect
-                                border.width: 0
-                            }
-                        },
-                        State {
-                            name: "selected"
-                            PropertyChanges {
-                                target: rect
-                                border.width: parent.borderWidth
-                            }
-                        }
-                    ]
-                    transitions: [
-                        Transition {
-                            NumberAnimation {
-                                properties: "border.width"
-                                duration: 100
-                                easing.type: Easing.Linear
-                            }
-                        }
-                    ]
-
+                height: 300
+                width: 350 * 0.68
+                ContentViewElementShow {
+                    show: provider.getShow(modelData)
                 }
-                Item {width: 1; height: 15}
-                Text {
-                    text: showColumn.show.title
-                    color: "white"
-                    font.pointSize: 14
-                    anchors.horizontalCenter: parent.horizontalCenter
-                }
-                Item {width: 1; height: 5}
-                Text {
-                    text: showColumn.show.year
-                    color: "white"
-                    font.pointSize: 14
-                    anchors.horizontalCenter: parent.horizontalCenter
-                }
-            }
             }
         }
     }