MiddlePanel: add scrollbars 💄

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

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 {