mediasrv/htpc-client
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor cover display into component w/resdesign

Browse Source
This commit is contained in:
restitux
2022-08-29 13:54:00 -04:00
parent 66c6ba9437
commit e7bedd4048
2 changed files with 115 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/components/ContentViewElement.qml
+4 -84
View File
@@ -1,6 +1,5 @@
import QtQuick 2.12 import QtQuick 2.12
import QtQuick.Controls 1.4 import QtQuick.Controls 1.4
import QtGraphicalEffects 1.12
Column { Column {
@@ -26,91 +25,12 @@ Column {
Repeater { Repeater {
property var provider: modelData property var provider: modelData
model: repeaterModel model: repeaterModel
Row{
Item { Item {
height: 10 height: 300
width: 80 width: 350 * 0.68
} ContentViewElementShow {
Column { show: provider.getShow(modelData)
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
}
}
]
} }
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
}
}
} }
} }
} }
layouts/components/ContentViewElementShow.qml
+111
View File
@@ -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
//}
}