Adjust QML view

Add transitions on button showing / hiding
Add a ScrollView to make scollbars appear
Formatting fixes for readability

src/qml/danbooruimageview.qml

@@ -32,19 +32,13 @@ Rectangle {
     width: 500
     height: 500
 
+
     KRun {
         id: runner
     }
 
     signal downloadRequested(url url)
 
-    FileDialog {
-        id: saveFileDialog
-        title: "Select a file to save to"
-        selectExisting: false
-        nameFilters: [ "Image files (*.jpg *.png *.tiff *.gif)", "All files (*)" ]
-    }
-
     Component {
         id: highlight
         Rectangle {
@@ -55,7 +49,6 @@ Rectangle {
         }
     }
 
-
     Component {
         id: viewDelegate
         Item {
@@ -63,12 +56,10 @@ Rectangle {
             width: grid.cellWidth
             height: grid.cellHeight
 
-
             Column {
                 id: postElement
                 anchors.fill: parent
 
-
                 QPixmapItem {
                     id: pixItem
                     pixmap: thumbPix
@@ -90,54 +81,73 @@ Rectangle {
                         }
 
                         onEntered: {
-                            viewButton.visible = mouseArea.containsMouse ? true: false
+
-                            downloadButton.visible = mouseArea.containsMouse ? true: false
+                            viewButton.visible = true
+                            downloadButton.visible = true
+                            viewButton.opacity = 1
+                            downloadButton.opacity = 1
+
                         }
 
                         onExited: {
-                            viewButton.visible = mouseArea.containsMouse ? true: false
+                            viewButton.opacity = 0
-                            downloadButton.visible = mouseArea.containsMouse ? true: false
+                            downloadButton.opacity = 0
                         }
 
                         Button {
                             id: viewButton
                             iconName: "view-preview"
                             visible: false
+                            opacity: 0
+
                             anchors.top: parent.top
                             anchors.left: parent.left
                             anchors.topMargin: (pixItem.height - pixItem.paintedHeight) / 2
                             anchors.leftMargin: (pixItem.width - pixItem.paintedWidth) / 2
+
                             height: pixItem.height * 0.15
                             width: pixItem.height * 0.15
                             z: 1
+
                             onClicked: {
                                 runner.openUrl(fileUrl)
                             }
+
+                            Behavior on opacity {
+
+                                NumberAnimation {
+                                    duration: 200
+                                }
+                            }
                         }
 
                         Button {
 
-
-
                             id: downloadButton
                             iconName: "download"
                             visible: false
+
                             anchors.bottom: parent.bottom
                             anchors.left: parent.left
                             anchors.bottomMargin: (pixItem.height - pixItem.paintedHeight) / 2
                             anchors.leftMargin: (pixItem.width - pixItem.paintedWidth) / 2
+
                             height: pixItem.height * 0.15
                             width: pixItem.height * 0.15
                             z: 1
+
                             onClicked: {
-                                console.log("AA" + pixItem.paintedHeight)
                                 rootObj.downloadRequested(fileUrl)
                             }
+
+                            Behavior on opacity {
+
+                                NumberAnimation {
+                                    duration: 200
+                                }
+                            }
                         }
-
-
                     }
-
                 }
                 Text {
                     id: sizeText
@@ -168,26 +178,31 @@ Rectangle {
         }
     }
 
-    GridView {
+    ScrollView {
-        id: grid
+        id: scrollView
-        cellWidth: 230
-        cellHeight: 230
-
-        flow: GridView.FlowLeftToRight
         anchors.fill: parent
-        highlight: highlight
+        GridView {
-        highlightFollowsCurrentItem: false
+            id: grid
+            cellWidth: 230
+            cellHeight: 230
 
-        model: danbooruModel
+            flow: GridView.FlowLeftToRight
-        delegate: viewDelegate
+            anchors.fill: parent
-        focus: true
+            highlight: highlight
-        Component.onCompleted: currentIndex = -1
+            highlightFollowsCurrentItem: false
-        onAtYEndChanged: {
+
-            if (grid.atYEnd) {
+            model: danbooruModel
-//                 danbooruService.getPostList(2, "", 10)
+            delegate: viewDelegate
+            focus: true
+            Component.onCompleted: currentIndex = -1
+            onAtYEndChanged: {
+                if (grid.atYEnd) {
+    //                 danbooruService.getPostList(2, "", 10)
+                }
             }
-        }
 
+        }
     }
 
+
 }