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

11 files changed, 97 insertions, 94 deletions

diff --git a/bitmonero.pro.user b/bitmonero.pro.user
index e31c9890..a3d58da4 100644
--- a/bitmonero.pro.user
+++ b/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>
diff --git a/components/DatePicker.qml b/components/DatePicker.qml
index 1f9d8f80..6a56f58d 100644
--- a/components/DatePicker.qml
+++ b/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
diff --git a/components/Scroll.qml b/components/Scroll.qml
index f0a3027e..25aeee8d 100644
--- a/components/Scroll.qml
+++ b/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
-        y = (flickable.contentY / (flickable.contentHeight - flickable.height)) * t + yPos
+        var t = flickable.height - scroll.height
+        scroll.y = (flickable.contentY / (flickable.contentHeight - flickable.height)) * t
     }
 
-    width: 15
-    height: {
-        var t = (flickable.height * flickable.height) / flickable.contentHeight
-        return t < 20 ? 20 : t
+    MouseArea {
+        id: scrollArea
+        anchors.fill: parent
+        hoverEnabled: true
     }
-    z: 1; y: yPos
-    color: "#DBDBDB"
-    anchors.right: flickable.right
-    opacity: flickable.moving ? 0.5 : 0
-    visible: flickable.contentHeight > flickable.height
 
-    Behavior on opacity {
-        NumberAnimation { duration: 100; easing.type: Easing.InQuad }
+    Rectangle {
+        id: scroll
+
+        width: 15
+        height: {
+            var t = (flickable.height * flickable.height) / flickable.contentHeight
+            return t < 20 ? 20 : t
+        }
+        y: 0; x: 0
+        color: "#DBDBDB"
+        opacity: flickable.moving || handleArea.pressed || scrollArea.containsMouse ? 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
+            }
+        }
     }
 }
diff --git a/images/resize.png b/images/resize.png
new file mode 100644
index 00000000..ecc0c880
--- /dev/null
+++ b/images/resize.png
diff --git a/images/resizeHovered.png b/images/resizeHovered.png
new file mode 100644
index 00000000..f19e5056
--- /dev/null
+++ b/images/resizeHovered.png
diff --git a/main.qml b/main.qml
index 3f4eb529..34f7a3d5 100644
--- a/main.qml
+++ b/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
@@ -282,49 +321,6 @@ ApplicationWindow {
 //            }
 //        }
 
-//        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 {
             id: titleBar
             anchors.left: parent.left
diff --git a/pages/AddressBook.qml b/pages/AddressBook.qml
index ab526709..73ea500f 100644
--- a/pages/AddressBook.qml
+++ b/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 {
diff --git a/pages/Dashboard.qml b/pages/Dashboard.qml
index 13f72c18..88480c9a 100644
--- a/pages/Dashboard.qml
+++ b/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 {
diff --git a/pages/History.qml b/pages/History.qml
index 492b50e8..17eb130d 100644
--- a/pages/History.qml
+++ b/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 {
diff --git a/qml.qrc b/qml.qrc
index b0a0e6f2..bc40ee0d 100644
--- a/qml.qrc
+++ b/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>
diff --git a/tabs/Twitter.qml b/tabs/Twitter.qml
index b8b55760..b3bded43 100644
--- a/tabs/Twitter.qml
+++ b/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 {