From e7bedd40489c12607fbcbf36bc4b2f49789fd4d8 Mon Sep 17 00:00:00 2001 From: restitux Date: Mon, 29 Aug 2022 13:54:00 -0400 Subject: [PATCH] Refactor cover display into component w/resdesign --- layouts/components/ContentViewElement.qml | 88 +------------- layouts/components/ContentViewElementShow.qml | 111 ++++++++++++++++++ 2 files changed, 115 insertions(+), 84 deletions(-) create mode 100644 layouts/components/ContentViewElementShow.qml diff --git a/layouts/components/ContentViewElement.qml b/layouts/components/ContentViewElement.qml index 2213e0d..ca54259 100644 --- a/layouts/components/ContentViewElement.qml +++ b/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 - } - } } } } diff --git a/layouts/components/ContentViewElementShow.qml b/layouts/components/ContentViewElementShow.qml new file mode 100644 index 0000000..778969b --- /dev/null +++ b/layouts/components/ContentViewElementShow.qml @@ -0,0 +1,111 @@ +import QtQuick 2.12 +import QtQuick.Controls 1.4 +import QtGraphicalEffects 1.12 + +Column { + property var show + anchors.fill: parent + Item { + id: parentElem + property int baseHeight: 300 + property int childHeight: baseHeight + property int childWidth: baseHeight * 0.68 + property int childHeightExpanded: baseHeight + 50 + property int childWidthExpanded: (baseHeight + 50) * 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: 300 + (borderWidth * 2) + width: (300 * 0.68) + (borderWidth * 2) + state: (elemSelected && (index == xIndex)) ? "selected" : "deselected" + anchors.horizontalCenter: parent.horizontalCenter + DropShadow { + id: dropShadow + anchors.fill: img + verticalOffset: 15 + samples: 80 + color: "black" + source: img + } + Rectangle { + id: rect + color: "transparent" + border.color: "orange" + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + radius: parent.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: parent.borderRectHeight + width: parent.borderRectWidth + } + PropertyChanges { + target: dropShadow + visible: false + } + PropertyChanges { + target: img + width: parent.childWidth + height: parent.childHeight + } + }, + State { + name: "selected" + PropertyChanges { + target: rect + border.width: parent.borderWidth + height: parent.borderRectHeightExpanded + width: parent.borderRectWidthExpanded + } + PropertyChanges { + target: dropShadow + visible: true + } + PropertyChanges { + target: img + width: parent.childWidthExpanded + height: parent.childHeightExpanded + } + } + ] + transitions: [ + Transition { + NumberAnimation { + properties: "border.width,width,height" + duration: 100 + easing.type: Easing.Linear + } + } + ] + + } + //Item {width: 1; height: 15} + //Text { + // text: show.title + // color: "white" + // font.pointSize: 14 + // anchors.horizontalCenter: parent.horizontalCenter + //} + //Item {width: 1; height: 5} + //Text { + // text: show.year + // color: "white" + // font.pointSize: 14 + // anchors.horizontalCenter: parent.horizontalCenter + //} +}