MiddlePanel: add scrollbars :lipstick:

2 files changed, 20 insertions, 9 deletions

diff --git a/MiddlePanel.qml b/MiddlePanel.qml
index 7a2dff31..183dd688 100644
--- a/MiddlePanel.qml
+++ b/MiddlePanel.qml
@@ -29,13 +29,12 @@
 
 import QtQml 2.0
 import QtQuick 2.2
-// QtQuick.Controls 2.0 isn't stable enough yet. Needs more testing.
-//import QtQuick.Controls 2.0
 import QtQuick.Controls 1.4
 import QtQuick.Layouts 1.1
 import QtGraphicalEffects 1.0
 import moneroComponents.Wallet 1.0
 
+import "components" as MoneroComponents
 import "./pages"
 import "./pages/settings"
 
@@ -184,12 +183,19 @@ Rectangle {
 
             onFlickingChanged: {
                 releaseFocus();
+                flickableScroll.flickableContentYChanged();
             }
 
-            // Disabled scrollbars, gives crash on startup on windows
-//            ScrollIndicator.vertical: ScrollIndicator { }
-//            ScrollBar.vertical: ScrollBar { }       // uncomment to test
-
+            MoneroComponents.Scroll {
+                id: flickableScroll
+                parent: mainFlickable.parent
+                anchors.left: parent.right
+                anchors.leftMargin: 3
+                anchors.top: parent.top
+                anchors.bottom: parent.bottom
+                flickable: mainFlickable
+                scrollWidth: 6
+            }
             // Views container
             StackView {
                 id: stackView
diff --git a/components/Scroll.qml b/components/Scroll.qml
index 43876a49..67b0c304 100644
--- a/components/Scroll.qml
+++ b/components/Scroll.qml
@@ -27,10 +27,14 @@
 // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 import QtQuick 2.0
+import "." as MoneroComponents
 
 Item {
     id: scrollItem
     property var flickable
+    property alias scrollColor: scroll.color
+    property alias scrollWidth: scroll.width
+    property alias scrollRadius: scroll.radius
     width: 15
     z: 1
 
@@ -52,13 +56,14 @@ Item {
         id: scroll
 
         width: 4
+        radius: width / 2
         height: {
             var t = (flickable.height * flickable.height) / flickable.contentHeight
-            return t < 20 ? 20 : t
+            return t < 50 ? 50 : t
         }
         y: 0; x: 0
-        color: "#DBDBDB"
-        opacity: flickable.moving || handleArea.pressed || scrollArea.containsMouse ? 0.5 : 0
+        color: MoneroComponents.Style.orange
+        opacity: flickable.moving || handleArea.pressed || scrollArea.containsMouse ? 0.8 : 0
         visible: flickable.contentHeight > flickable.height
 
         Behavior on opacity {