Migrate GridComicsView and InfoComicsView to QtQuick and QtQuick.Controls 2.15

YACReaderLibrary/qml/GridComicsView.qml

@@ -1,10 +1,12 @@
-import QtQuick 2.9
+import QtQuick 2.15
 
-import QtQuick.Controls 1.4
+import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.3
+import QtQuick.Layouts 1.12
 
 import QtGraphicalEffects 1.0
-import QtQuick.Controls.Styles 1.4
+
+
+import Qt.labs.animation 1.0
 
 import com.yacreader.ComicModel 1.0
 
@@ -12,12 +14,11 @@ import com.yacreader.ComicInfo 1.0
 import com.yacreader.ComicDB 1.0
 
 SplitView {
-    //anchors.fill: parent
     orientation: Qt.Horizontal
-    handleDelegate:Rectangle {
+    handle: Rectangle {
-        width: 1
+        border.width : 0
-        height: 1
+        implicitWidth: 10
-        color: "#202020"
+        color: info_container.color
     }
 
 Rectangle {
@@ -47,8 +48,8 @@ Rectangle {
 
     color: backgroundColor
     width: parent.width - (info_container.visible ? info_container.width : 0)
-    Layout.fillWidth: true
+    SplitView.fillWidth: true
-    Layout.minimumWidth: coverWidth + 100
+    SplitView.minimumWidth: coverWidth + 100
     height: parent.height
     anchors.margins: 0
 
@@ -364,12 +365,24 @@ Rectangle {
                 }
 
                 Menu {
+                    background: Rectangle {
+                        implicitWidth: 42
+                        implicitHeight: 100
+                        //border.color: "#222"
+                        //color: "#444"
+                    }
+
                     id: ratingConextMenu
-                    MenuItem { text: "1"; enabled: true; iconSource:"star_menu.png"; onTriggered: comicRatingHelper.rate(index,1) }
+
-                    MenuItem { text: "2"; enabled: true; iconSource:"star_menu.png"; onTriggered: comicRatingHelper.rate(index,2) }
+                    Action { text: "1"; enabled: true; icon.source:"star_menu.png"; onTriggered: comicRatingHelper.rate(index,1) }
-                    MenuItem { text: "3"; enabled: true; iconSource:"star_menu.png"; onTriggered: comicRatingHelper.rate(index,3) }
+                    Action { text: "2"; enabled: true; icon.source:"star_menu.png"; onTriggered: comicRatingHelper.rate(index,2) }
-                    MenuItem { text: "4"; enabled: true; iconSource:"star_menu.png"; onTriggered: comicRatingHelper.rate(index,4) }
+                    Action { text: "3"; enabled: true; icon.source:"star_menu.png"; onTriggered: comicRatingHelper.rate(index,3) }
-                    MenuItem { text: "5"; enabled: true; iconSource:"star_menu.png"; onTriggered: comicRatingHelper.rate(index,5) }
+                    Action { text: "4"; enabled: true; icon.source:"star_menu.png"; onTriggered: comicRatingHelper.rate(index,4) }
+                    Action { text: "5"; enabled: true; icon.source:"star_menu.png"; onTriggered: comicRatingHelper.rate(index,5) }
+
+                    delegate: MenuItem {
+                        implicitHeight: 30
+                    }
                 }
             }
 
@@ -383,41 +396,18 @@ Rectangle {
         }
     }
 
-    ScrollView {
+    Rectangle {
-        __wheelAreaScrollSpeed: grid.cellHeight * 0.40
         id: scrollView
         objectName: "topScrollView"
         anchors.fill: parent
         anchors.margins: 0
+        children: grid
+
+        color: "transparent"
 
         function scrollToOrigin() {
-            flickableItem.contentY = showCurrentComic ? -270 : -20
+            grid.contentY = grid.originY
-            flickableItem.contentX = 0
+            grid.contentX = grid.originX
-        }
-
-        style: YACReaderScrollViewStyle {
-            transientScrollBars: false
-            incrementControl: Item {}
-            decrementControl: Item {}
-            handle: Item {
-                implicitWidth: 16
-                implicitHeight: 26
-                Rectangle {
-                    color: "#88424242"
-                    anchors.fill: parent
-                    anchors.topMargin: 6
-                    anchors.leftMargin: 4
-                    anchors.rightMargin: 4
-                    anchors.bottomMargin: 6
-                    border.color: "#AA313131"
-                    border.width: 1
-                    radius: 8
-                }
-            }
-            scrollBarBackground: Item {
-                implicitWidth: 16
-                implicitHeight: 26
-            }
         }
 
         DropArea {
@@ -620,34 +610,13 @@ Rectangle {
                             Layout.maximumHeight: (currentComicVisualView.height * 0.32)
                             Layout.maximumWidth: 960
 
-                            contentItem: currentComicInfoSinopsis
+                            ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
 
-                            horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
+                            contentItem: currentComicInfoSinopsis
 
                             id: synopsisScroller
 
-                            style: ScrollViewStyle {
+                            clip: true
-                                transientScrollBars: false
-                                incrementControl: Item {}
-                                decrementControl: Item {}
-                                handle: Item {
-                                    implicitWidth: 12
-                                    implicitHeight: 26
-                                    Rectangle {
-                                        color: "#424246"
-                                        anchors.fill: parent
-                                        anchors.topMargin: 6
-                                        anchors.leftMargin: 9
-                                        anchors.rightMargin: 0
-                                        anchors.bottomMargin: 6
-                                        radius: 2
-                                    }
-                                }
-                                scrollBarBackground: Item {
-                                    implicitWidth: 14
-                                    implicitHeight: 26
-                                }
-                            }
 
                             Text {
                                 Layout.maximumWidth: 960
@@ -680,18 +649,16 @@ Rectangle {
                         anchors.bottomMargin: 15
 
                         onClicked: comicOpener.triggerOpenCurrentComic()
-
-                        style: ButtonStyle {
                             background: Rectangle {
                                 implicitWidth: 100
                                 implicitHeight: 30
-                                border.width: control.activeFocus ? 2 : 1
+                                border.width: readButton.activeFocus ? 2 : 1
                                 border.color: "#FFCC00"
                                 radius: height / 2
                                 color: "#FFCC00"
-
                             }
-                            label: Text {
+
+                            contentItem: Text {
                                 renderType: Text.NativeRendering
                                 verticalAlignment: Text.AlignVCenter
                                 horizontalAlignment: Text.AlignHCenter
@@ -699,8 +666,7 @@ Rectangle {
                                 font.pointSize: 12
                                 font.bold: true
                                 color: "white"
-                                text: control.text
+                                text: readButton.text
-                            }
                             }
                     }
 
@@ -725,26 +691,21 @@ Rectangle {
             anchors.fill: parent
             cellHeight: cellCustomHeight
             header: currentComicView
-            //highlight: appHighlight
             focus: true
             model: comicsList
             delegate: appDelegate
-            anchors.topMargin: 0 //showCurrentComic ? 0 : 20
+            anchors.topMargin: 0
-            anchors.bottomMargin: 20
+            anchors.bottomMargin: 10
             anchors.leftMargin: 0
             anchors.rightMargin: 0
             pixelAligned: true
-            //flickDeceleration: -2000
+            highlightFollowsCurrentItem: true
-
 
             currentIndex: 0
             cacheBuffer: 0
 
-            footer: Rectangle { //fix for the scroll issue, TODO find what causes the issue (some times the bottoms cells are hidden for the toolbar, no full scroll)
+            //disable flickable behaviour
-                height : 25
+            interactive: false
-                width : parent.width
-                color : "#00000000"
-            }
 
             move: Transition {
                 NumberAnimation { properties: "x,y"; duration: 250 }
@@ -780,21 +741,51 @@ Rectangle {
             }
 
            function calculateCellWidths(cWidth) {
-
                var wholeCells = Math.floor(width / cWidth);
                var rest = width - (cWidth * wholeCells)
 
                grid.cellWidth = cWidth + Math.floor(rest / wholeCells);
-               //console.log("cWidth",cWidth,"wholeCells=",wholeCells,"rest=",rest,"cellWidth=",cellWidth,"width=",width);
+           }
+
+           WheelHandler {
+               onWheel: {
+                   if (grid.contentHeight <= grid.height) {
+                       return;
+                   }
+
+                   var newValue =  Math.min((grid.contentHeight - grid.height - (showCurrentComic ? 270 : 20)), (Math.max(grid.originY , grid.contentY - event.angleDelta.y)));
+                   grid.contentY = newValue;
+               }
+           }
+
+           ScrollBar.vertical: ScrollBar {
+               visible: grid.contentHeight > grid.height
+
+               contentItem: Item {
+                   implicitWidth: 12
+                   implicitHeight: 26
+                   Rectangle {
+                       color: "#88424242"
+                       anchors.fill: parent
+                       anchors.topMargin: 6
+                       anchors.leftMargin: 3
+                       anchors.rightMargin: 2
+                       anchors.bottomMargin: 6
+                       border.color: "#AA313131"
+                       border.width: 1
+                       radius: 3.5
+                   }
                }
            }
 
-        focus: true
            Keys.onPressed: {
-            if (event.modifiers & Qt.ControlModifier || event.modifiers & Qt.ShiftModifier)
+               if (event.modifiers & Qt.ControlModifier || event.modifiers & Qt.ShiftModifier) {
+                   event.accepted = true
                    return;
+               }
+
                var numCells = grid.numCellsPerRow();
-            var ci
+               var ci = 0;
                if (event.key === Qt.Key_Right) {
                    ci = Math.min(grid.currentIndex+1,grid.count - 1);
                }
@@ -811,85 +802,69 @@ Rectangle {
                }
 
                event.accepted = true;
-            //var ci = grid.currentIndex;
                grid.currentIndex = -1
                comicsSelectionHelper.clear();
                currentIndexHelper.setCurrentIndex(ci);
                grid.currentIndex = ci;
            }
-        //}
-
-        /*MouseArea {
-        anchors.fill: parent
-        onClicked: {
-                        clicked.accepted = false;
-            console.log("xx");
         }
-
-        onWheel: {
-            var newValue =  Math.max(0,scrollView.flickableItem.contentY - wheel.angleDelta.y)
-            scrollView.flickableItem.contentY = newValue
-
-        }
-    }*/
-        /*ScrollBar {
-        flickable: grid;
-    }
-
-    PerformanceMeter {
-        anchors {top: parent.top; left: parent.left; margins: 4}
-        id: performanceMeter
-        width: 128
-        height: 64
-        enabled: (dummyValue || !dummyValue)
-    }*/
-
     }
 }
+
 Rectangle {
     id: info_container
     objectName: "infoContainer"
-    Layout.preferredWidth: 350
+    SplitView.preferredWidth: 350
-    Layout.minimumWidth: 350
+    SplitView.minimumWidth: 350
-    Layout.maximumWidth: 960
+    SplitView.maximumWidth: 960
     height: parent.height
 
     color: infoBackgroundColor
 
     visible: showInfo
 
-    ScrollView {
+    Flickable{
-        __wheelAreaScrollSpeed: 75
+        id: infoFlickable
         anchors.fill: parent
         anchors.margins: 0
 
-        horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
+        contentWidth: infoView.width
+        contentHeight: infoView.height
 
-        style: ScrollViewStyle {
+        ComicInfoView {
-            transientScrollBars: false
+            id: infoView
-            incrementControl: Item {}
+            width: info_container.width
-            decrementControl: Item {}
+        }
-            handle: Item {
+
-                implicitWidth: 10
+        WheelHandler {
+            onWheel: {
+                if (infoFlickable.contentHeight <= infoFlickable.height) {
+                    return;
+                }
+
+                var newValue =  Math.min((infoFlickable.contentHeight - infoFlickable.height), (Math.max(infoFlickable.originY , infoFlickable.contentY - event.angleDelta.y)));
+                infoFlickable.contentY = newValue;
+            }
+        }
+
+        ScrollBar.vertical: ScrollBar {
+            visible: infoFlickable.contentHeight > infoFlickable.height
+
+            contentItem: Item {
+                implicitWidth: 12
                 implicitHeight: 26
                 Rectangle {
                     color: "#424246"
                     anchors.fill: parent
                     anchors.topMargin: 6
-                    anchors.leftMargin: 4
+                    anchors.leftMargin: 5
                     anchors.rightMargin: 4
                     anchors.bottomMargin: 6
+                    radius: 2
                 }
             }
-            scrollBarBackground: Item {
-                implicitWidth: 14
-                implicitHeight: 26
         }
     }
 
-        ComicInfoView {
-            width: info_container.width
-        }
-    }
 }
 }

YACReaderLibrary/qml/InfoComicsView.qml

@@ -1,8 +1,6 @@
-import QtQuick 2.5
+import QtQuick 2.15
 
-import QtQuick.Controls 1.2
+import QtQuick.Controls 2.15
-import QtGraphicalEffects 1.0
-import QtQuick.Controls.Styles 1.4
 
 import com.yacreader.ComicModel 1.0
 
@@ -59,39 +57,49 @@ Rectangle {
         y: flow.height + flow.additionalBottomSpace - 6
         height: parent.height - y
 
+        clip: true
+
         color: infoBackgroundColor
 
-        ScrollView {
+        Flickable{
-            __wheelAreaScrollSpeed: 75
+            id: infoFlickable
             anchors.fill: parent
             anchors.margins: 0
 
-            horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
+            contentWidth: infoView.width
+            contentHeight: infoView.height
 
-            style: ScrollViewStyle {
+            WheelHandler {
-                transientScrollBars: false
+                onWheel: {
-                incrementControl: Item {}
+                    if (infoFlickable.contentHeight <= infoFlickable.height) {
-                decrementControl: Item {}
+                        return;
-                handle: Item {
+                    }
-                    implicitWidth: 10
+
+                    var newValue =  Math.min((infoFlickable.contentHeight - infoFlickable.height), (Math.max(infoFlickable.originY , infoFlickable.contentY - event.angleDelta.y)));
+                    infoFlickable.contentY = newValue;
+                }
+            }
+
+            ScrollBar.vertical: ScrollBar {
+                visible: infoFlickable.contentHeight > infoFlickable.height
+
+                contentItem: Item {
+                    implicitWidth: 12
                     implicitHeight: 26
                     Rectangle {
                         color: "#424246"
                         anchors.fill: parent
                         anchors.topMargin: 6
-                        anchors.leftMargin: 4
+                        anchors.leftMargin: 5
                         anchors.rightMargin: 4
                         anchors.bottomMargin: 6
+                        radius: 2
                     }
                 }
-
-                scrollBarBackground: Item {
-                    implicitWidth: 14
-                    implicitHeight: 26
-                }
             }
 
             ComicInfoView {
+                id: infoView
                 width: info_container.width - 14
             }
         }