Refactor ContentView to add animated scrolling

layouts/components/BrowserView/ContentView.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.12
 import QtQuick.Layouts 1.12
 import QtQuick.Controls 1.4
+import QtQuick.Controls 2.15
 
 import Ikinuki.Client 1.0
 
@@ -27,42 +28,38 @@ StackLayout {
                     width: 40
                 }
                 Column {
-                    Row {
+                    height: tabView.height
-                        Item {
+                    width: tabView.width - 40
-                            height: parent.height
+                    ShowDetails {
-                            width: 16
+                        z: 1.2
-                        }
+                        height: parent.height * 0.25
-                        Column {
-                            spacing: 20
-                            Item {
-                                height: 20
                         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
                     }
-                            Text {
+                    ScrollView {
-                                text: elementColumn.children[ySelect].provider.getShow(xSelect).title
+                        z: 1.0
-                                font.pointSize: 30
+                        height: parent.height * 0.75
-                                color: "#cdd7d9"
-                            }
-                            Text {
-                                text: elementColumn.children[ySelect].provider.getShow(xSelect).year
-                                font.pointSize: 15
-                                color: "#99afb4"
-                            }
-                            Text {
-                                text: elementColumn.children[ySelect].provider.getShow(xSelect).description
-                                font.pointSize: 13
-                                color: "#cdd7d9"
-                                width: tabView.parent.width * 0.6
-                                wrapMode: Text.WordWrap
-                                maximumLineCount: 4
-                                elide: Text.ElideRight
-                            }
-                        }
-                    }
-                    Item {
-                        height: 40
                         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
                             }
+                        }
+                        Behavior on ScrollBar.vertical.position {
+                            NumberAnimation {
+                                duration: 200
+                                easing.type: Easing.Linear
+                            }
+                        }
+                        Flickable{
+                            clip: true
                             Column {
                                 id: elementColumn
                                 spacing: 20
@@ -85,6 +82,8 @@ StackLayout {
                     }
                 }
             }
+        }
+    }
     states: [
         State {
             name: "deselected"

layouts/components/BrowserView/ContentView/Element.qml

@@ -15,7 +15,13 @@ Column {
     Row {
         Item {
             height: parent.height
-            width: 16
+            width: 16  + (xIndex * 270)
+            Behavior on width {
+                NumberAnimation {
+                    duration: 200
+                    easing.type: Easing.Linear
+                }
+            }
         }
         Text {
             text: title

layouts/components/BrowserView/ContentView/ShowDetails.qml

@@ -0,0 +1,40 @@
+import QtQuick 2.12
+
+Row {
+    id: root
+    property string title
+    property int year
+    property string description
+    Item {
+        height: parent.height
+        width: 16
+    }
+    Column {
+        height: parent.height
+        width: parent.width - 16
+        spacing: 20
+        Item {
+            height: 20
+            width: parent.width
+        }
+        Text {
+            text: title
+            font.pointSize: 30
+            color: "#cdd7d9"
+        }
+        Text {
+            text: year
+            font.pointSize: 15
+            color: "#99afb4"
+        }
+        Text {
+            text: description
+            font.pointSize: 13
+            color: "#cdd7d9"
+            width: parent.width * 0.6
+            wrapMode: Text.WordWrap
+            maximumLineCount: 4
+            elide: Text.ElideRight
+        }
+    }
+}