https://trello.com/c/GZwvrma5/55-scrollable-lists-should-have-scrollbars-that-come-into-view-when-hovering-over-that-area-the-extreme-right-of-the-list

bitmonero.pro.user

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE QtCreatorProject>
-<!-- Written by QtCreator 3.1.2, 2014-07-22T17:23:59. -->
+<!-- Written by QtCreator 3.1.2, 2014-07-23T12:38:50. -->
 <qtcreator>
  <data>
   <variable>ProjectExplorer.Project.ActiveTarget</variable>

components/DatePicker.qml

@@ -179,22 +179,6 @@ Item {
                 }
             }
         }
-
-//        Rectangle {
-//            anchors.left: parent.left
-//            anchors.bottom: parent.bottom
-//            height: 3; width: 3
-//            color: "#FFFFFF"
-//            visible: datePicker.expanded
-//        }
-
-//        Rectangle {
-//            anchors.right: parent.right
-//            anchors.bottom: parent.bottom
-//            height: 3; width: 3
-//            color: "#FFFFFF"
-//            visible: datePicker.expanded
-//        }
     }
 
     Rectangle {
@@ -223,20 +207,6 @@ Item {
             height: 1
         }
 
-//        Rectangle {
-//            anchors.left: parent.left
-//            anchors.top: parent.top
-//            height: 3; width: 3
-//            color: "#FFFFFF"
-//        }
-
-//        Rectangle {
-//            anchors.right: parent.right
-//            anchors.top: parent.top
-//            height: 3; width: 3
-//            color: "#FFFFFF"
-//        }
-
         Calendar {
             id: calendar
             anchors.left: parent.left

components/Scroll.qml

@@ -1,29 +1,56 @@
 import QtQuick 2.0
 
-Rectangle {
+Item {
+    id: scrollItem
     property var flickable
-    property int yPos: 0
+    width: 15
+    z: 1
 
     function flickableContentYChanged() {
         if(flickable === undefined)
             return
 
-        var t = flickable.height - height
+        var t = flickable.height - scroll.height
-        y = (flickable.contentY / (flickable.contentHeight - flickable.height)) * t + yPos
+        scroll.y = (flickable.contentY / (flickable.contentHeight - flickable.height)) * t
     }
 
+    MouseArea {
+        id: scrollArea
+        anchors.fill: parent
+        hoverEnabled: true
+    }
+
+    Rectangle {
+        id: scroll
+
         width: 15
         height: {
             var t = (flickable.height * flickable.height) / flickable.contentHeight
             return t < 20 ? 20 : t
         }
-    z: 1; y: yPos
+        y: 0; x: 0
         color: "#DBDBDB"
-    anchors.right: flickable.right
+        opacity: flickable.moving || handleArea.pressed || scrollArea.containsMouse ? 0.5 : 0
-    opacity: flickable.moving ? 0.5 : 0
         visible: flickable.contentHeight > flickable.height
 
         Behavior on opacity {
             NumberAnimation { duration: 100; easing.type: Easing.InQuad }
         }
+
+        MouseArea {
+            id: handleArea
+            anchors.fill: parent
+            drag.target: scroll
+            drag.axis: Drag.YAxis
+            drag.minimumY: 0
+            drag.maximumY: flickable.height - height
+            propagateComposedEvents: true
+
+            onPositionChanged: {
+                if(!pressed) return
+                var dy = scroll.y / (flickable.height - scroll.height)
+                flickable.contentY = (flickable.contentHeight - flickable.height) * dy
+            }
+        }
+    }
 }

main.qml

@@ -86,7 +86,6 @@ ApplicationWindow {
     height: 800
     color: "#FFFFFF"
     flags: Qt.FramelessWindowHint | Qt.WindowSystemMenuHint | Qt.Window | Qt.WindowMinimizeButtonHint
-    onVisibilityChanged: visible = visibility !== Window.Minimized
     onWidthChanged: x -= 0
 
     Component.onCompleted: {
@@ -263,6 +262,46 @@ ApplicationWindow {
         }
 
         property int maxWidth: leftPanel.width + 655 + rightPanel.width
+        property int maxHeight: 700
+        MouseArea {
+            hoverEnabled: true
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            height: 48
+            width: 48
+
+            Rectangle {
+                anchors.fill: parent
+                color: parent.containsMouse || parent.pressed ? "#4A4949" : "transparent"
+            }
+
+            Image {
+                anchors.centerIn: parent
+                source: parent.containsMouse || parent.pressed ? "images/resizeHovered.png" :
+                                                                 "images/resize.png"
+            }
+
+            property int previousX: 0
+            property int previousY: 0
+            onPressed: {
+                previousX = mouseX
+                previousY = mouseY
+            }
+
+            onPositionChanged: {
+                if(!pressed) return
+                var dx = previousX - mouseX
+                var dy = previousY - mouseY
+
+                if(appWindow.width - dx > parent.maxWidth)
+                    appWindow.width -= dx
+                else appWindow.width = parent.maxWidth
+
+                if(appWindow.height - dy > parent.maxHeight)
+                    appWindow.height -= dy
+                else appWindow.height = parent.maxHeight
+            }
+        }
 
 //        MouseArea {
 //            anchors.top: parent.top
@@ -280,49 +319,6 @@ ApplicationWindow {
 //                    appWindow.width -= diff
 //                else appWindow.width = parent.maxWidth
 //            }
-//        }
-
-//        MouseArea {
-//            anchors.left: parent.left
-//            anchors.top: parent.top
-//            anchors.bottom: parent.bottom
-//            anchors.topMargin: 30
-//            anchors.bottomMargin: 3
-//            cursorShape: Qt.SizeHorCursor
-//            width: 3
-//            property int previousX: 0
-//            property int maximumX: 0
-//            onPressed: {
-//                var diff = appWindow.width - parent.maxWidth
-//                maximumX = appWindow.x + diff
-//                previousX = mouseX
-//            }
-//            onPositionChanged: {
-//                var diff = previousX - mouseX
-//                if(appWindow.x + diff < maximumX) {
-//                    appWindow.width += diff
-//                    appWindow.x -= diff
-//                } else {
-//                    appWindow.width = parent.maxWidth
-//                    appWindow.x = maximumX
-//                }
-//            }
-//        }
-
-//        MouseArea {
-//            anchors.left: parent.left
-//            anchors.right: parent.right
-//            anchors.bottom: parent.bottom
-//            anchors.leftMargin: 3
-//            anchors.rightMargin: 3
-//            height: 3
-//            cursorShape: Qt.SizeVerCursor
-//            property int previousY: 0
-//            onPressed: previousY = mouseY
-//            onPositionChanged: {
-//                var diff = previousY - mouseY
-//                appWindow.height -= diff
-//            }
 //        }
 
         TitleBar {

pages/AddressBook.qml

@@ -178,9 +178,11 @@ Rectangle {
 
         Scroll {
             id: flickableScroll
+            anchors.right: table.right
             anchors.rightMargin: -14
+            anchors.top: table.top
+            anchors.bottom: table.bottom
             flickable: table
-            yPos: table.y
         }
 
         AddressBookTable {

pages/Dashboard.qml

@@ -130,9 +130,11 @@ Rectangle {
 
         Scroll {
             id: flickableScroll
+            anchors.right: table.right
             anchors.rightMargin: -14
+            anchors.top: table.top
+            anchors.bottom: table.bottom
             flickable: table
-            yPos: table.y
         }
 
         DashboardTable {

pages/History.qml

@@ -319,9 +319,11 @@ Rectangle {
 
         Scroll {
             id: flickableScroll
+            anchors.right: table.right
             anchors.rightMargin: -14
+            anchors.top: table.top
+            anchors.bottom: table.bottom
             flickable: table
-            yPos: table.y
         }
 
         HistoryTable {

qml.qrc

@@ -78,5 +78,7 @@
         <file>images/moneroLogo2.png</file>
         <file>components/PrivacyLevelSmall.qml</file>
         <file>images/checkedVioletIcon.png</file>
+        <file>images/resize.png</file>
+        <file>images/resizeHovered.png</file>
     </qresource>
 </RCC>

tabs/Twitter.qml

@@ -75,9 +75,11 @@ Item {
 
     Scroll {
         id: flickableScroll
+        anchors.right: listView.right
         anchors.rightMargin: -14
+        anchors.top: listView.top
+        anchors.bottom: listView.bottom
         flickable: listView
-        yPos: listView.y
     }
 
     ListView {