Fix horizontal scrolling to be row independent

This commit is contained in:
2022-09-07 21:49:22 -06:00
parent 5c8d0dacf5
commit d691aeb6e9
2 changed files with 98 additions and 74 deletions
+68 -59
View File
@@ -13,69 +13,74 @@ StackLayout {
property bool viewSelected
property int selectedElement
state: viewSelected ? "selected" : "deselected"
property int xSelect: 0
property int ySelect: 0
width: parent.width * viewSelected ? 0.95 : 0.8
height: parent.height
Repeater {
model: providers
Rectangle {
color: "#22282A"
Row {
Item {
height: 10
width: 40
}
Column {
height: tabView.height
width: tabView.width - 40
ShowDetails {
z: 1.2
height: parent.height * 0.25
width: parent.width
title: elementColumn.children[ySelect].provider.getShow(xSelect).title
year: elementColumn.children[ySelect].provider.getShow(xSelect).year
description: elementColumn.children[ySelect].provider.getShow(xSelect).description
Item {
Item { // fake object to create notifying array
id: rowSelector
Item {
property int xIndex: 0
}
Item {
property int xIndex: 0
}
}
Repeater {
model: providers
Rectangle {
anchors.fill: parent
color: "#22282A"
Row {
Item {
height: 10
width: 40
}
ScrollView {
z: 1.0
height: parent.height * 0.75
width: parent.width
contentWidth: 2000
contentHeight: 2000
ScrollBar.horizontal.position: xSelect * 0.135
ScrollBar.vertical.position: ySelect * 0.22
Behavior on ScrollBar.horizontal.position {
NumberAnimation {
duration: 200
easing.type: Easing.Linear
}
Column {
height: tabView.height
width: tabView.width - 40
ShowDetails {
z: 1.2
height: parent.height * 0.25
width: parent.width
title: elementColumn.children[ySelect].provider.getShow(rowSelector.children[ySelect].xIndex).title
year: elementColumn.children[ySelect].provider.getShow(rowSelector.children[ySelect].xIndex).year
description: elementColumn.children[ySelect].provider.getShow(rowSelector.children[ySelect].xIndex).description
}
Behavior on ScrollBar.vertical.position {
NumberAnimation {
duration: 200
easing.type: Easing.Linear
}
}
Flickable{
clip: true
Column {
id: elementColumn
spacing: 20
Element {
title: "In Progress"
provider: modelData
repeaterModel: modelData.inProgress
elemSelected: viewSelected && (0 == ySelect)
xIndex: xSelect
ScrollView {
z: 1.0
height: parent.height * 0.75
width: parent.width
contentWidth: 2000
contentHeight: 2000
ScrollBar.vertical.position: ySelect * 0.22
Behavior on ScrollBar.vertical.position {
NumberAnimation {
duration: 200
easing.type: Easing.Linear
}
Element {
title: "Recently Added"
provider: modelData
repeaterModel: modelData.recentlyAdded
elemSelected: viewSelected && (1 == ySelect)
xIndex: xSelect
}
Flickable{
clip: true
Column {
id: elementColumn
spacing: 20
width: parent.width
Element {
title: "In Progress"
provider: modelData
repeaterModel: modelData.inProgress
elemSelected: viewSelected && (0 == ySelect)
xIndex: rowSelector.children[0].xIndex
}
Element {
title: "Recently Added"
provider: modelData
repeaterModel: modelData.recentlyAdded
elemSelected: viewSelected && (1 == ySelect)
xIndex: rowSelector.children[1].xIndex
}
}
}
}
@@ -112,13 +117,17 @@ StackLayout {
Keys.onPressed: (event)=> {
if (event.key == Qt.Key_Left) {
if (xSelect == 0) {
if (rowSelector.children[ySelect].xIndex == 0) {
ySelect = 0;
parent.selectedView = 0;
for (var i = 0; i < rowSelector.children.length; i++) {
rowSelector.children[i].xIndex = 0;
}
} else {
xSelect--;
rowSelector.children[ySelect].xIndex--;
}
} else if (event.key == Qt.Key_Right) {
xSelect++;
rowSelector.children[ySelect].xIndex++;
} else if (event.key == Qt.Key_Down) {
ySelect++;
} else if (event.key == Qt.Key_Up) {
@@ -1,6 +1,6 @@
import QtQuick 2.12
import QtQuick.Controls 1.4
import QtQuick.Controls 2.15
Column {
property var title
@@ -8,6 +8,7 @@ Column {
property var repeaterModel
property bool elemSelected
property int xIndex
width: parent.width
Item {
width: 10
height: 20
@@ -15,13 +16,7 @@ Column {
Row {
Item {
height: parent.height
width: 16 + (xIndex * 270)
Behavior on width {
NumberAnimation {
duration: 200
easing.type: Easing.Linear
}
}
width: 16
}
Text {
text: title
@@ -33,13 +28,33 @@ Column {
width: 10
height: 15
}
Row {
Repeater {
id: repeater
property var provider: modelData
model: repeaterModel
Show {
show: provider.getShow(modelData)
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)
}
}
}
}
}
}