QmlDesigner.ItemLibrary: Updated scroll bar style

src/plugins/qmldesigner/components/itemlibrary/itemlibrarywidgets.cpp

@@ -104,7 +104,7 @@ ItemLibraryTreeView::ItemLibraryTreeView(QWidget *parent) :
     connect(this, SIGNAL(clicked(const QModelIndex &)), this, SLOT(activateItem(const QModelIndex &)));
     setHeaderHidden(true);
     setIndentation(20);
-    setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOn);
+    setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);
     setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
     setAttribute(Qt::WA_MacShowFocusRect, false);
 

src/plugins/qmldesigner/components/itemlibrary/qml/ItemsView.qml

@@ -181,7 +181,7 @@ reasons and then passed to the section views */
                                 anchors.topMargin: 3
                                 anchors.bottom: parent.bottom
                                 anchors.left: parent.left
-                                anchors.right: scrollbar.left
+                                anchors.right: scrollbarFrame.left
                                 overShoot: false
 
                                 interactive: false
@@ -211,17 +211,25 @@ content position out of scope regarding the scrollbar. */
                                 }
                             }
 
-                            Scrollbar {
-                                id: scrollbar
+                            Item {
+                                id: scrollbarFrame
 
                                 anchors.top: parent.top
                                 anchors.topMargin: 2
                                 anchors.bottom: parent.bottom
-                                anchors.bottomMargin: 2
-                                anchors.left: parent.right
-                                anchors.leftMargin: -10
+                                anchors.bottomMargin: 1
                                 anchors.right: parent.right
+// The next line unfortunately introduces a cyclic property binding (strangely,
+// in SectionView)
+//                                width: (itemsFlickable.contentHeight > itemsFlickable.height)? 11:0
+                                width: 11
 
-                                flickable: itemsFlickable
+                                Scrollbar {
+                                    id: scrollbar
+                                    anchors.fill: parent
+                                    anchors.leftMargin: 1
+
+                                    flickable: itemsFlickable
+                                }
                             }
                         }

src/plugins/qmldesigner/components/itemlibrary/qml/ItemsViewStyle.qml

@@ -35,9 +35,11 @@ Item {
     property string backgroundColor: "#4f4f4f"
     property string raisedBackgroundColor: "#e0e0e0"
 
-    property string scrollbarBorderColor: "#8F8F8F"
-    property string scrollbarGradientStartColor: "#7E7E7E"
-    property string scrollbarGradientEndColor: "#C6C6C6"
+    property string scrollbarColor: "#444444"
+    property string scrollbarBorderColor: "#333333"
+    property string scrollbarGradientStartColor: "#393939"
+    property string scrollbarGradientMiddleColor: "#656565"
+    property string scrollbarGradientEndColor: "#888888"
     property int scrollbarClickScrollAmount: 40
 
     property string itemNameTextColor: "#FFFFFF"

src/plugins/qmldesigner/components/itemlibrary/qml/Scrollbar.qml

@@ -50,11 +50,17 @@ Item {
 
     property int scrollHeight: height - handle.height
 
+    clip: true
+
     Rectangle {
-        anchors.fill: parent;
-        anchors.rightMargin: 1
-        anchors.bottomMargin: 1
-        color: "transparent"
+        anchors.top: parent.top
+        anchors.topMargin: 2
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 3
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: 6
+        radius: 3
+        color: style.scrollbarColor
         border.width: 1
         border.color: style.scrollbarBorderColor
     }
@@ -101,9 +107,7 @@ Item {
         id: handle
 
         anchors.left: parent.left
-        anchors.leftMargin: 1
         anchors.right: parent.right
-        //        anchors.rightMargin: 1
         height: Math.max(width, bar.height * Math.min(1, flickable.height / flickable.contentHeight))
 
         property bool updateFlickable: true
@@ -113,29 +117,25 @@ Item {
                 flickable.contentY = Math.max(0, flickable.contentHeight * y / bar.height)
             }
 			
-			    Rectangle {
-				    width: parent.height - 1
-                    height: parent.width - 1
-                    y: 1 - height
-					
-					rotation: 90
-                    transformOrigin: Item.BottomLeft
+                Rectangle {
+                    width: parent.height
+                    height: parent.width
+                    y: -height - 2
+                    x: -2
 
-				    color: "black"
-			    
+                    rotation: 90
+                    transformOrigin: Item.BottomLeft
 
-                Rectangle {
-                    width: parent.width - 2
-                    height: parent.height - 2
-                    y: 1
-					x: 1                    
+                    border.color: style.scrollbarBorderColor
+                    border.width: 1
+                    radius: 3
 
                     gradient: Gradient {
-                        GradientStop { position: 0.0; color: style.scrollbarGradientStartColor }
-                        GradientStop { position: 1.0; color: style.scrollbarGradientEndColor }
+                        GradientStop { position: 0.15; color: style.scrollbarGradientStartColor }
+                        GradientStop { position: 0.78; color: style.scrollbarGradientMiddleColor }
+                        GradientStop { position: 0.80; color: style.scrollbarGradientEndColor }
                     }
                 }
-				}
 
                 MouseArea {
                     anchors.fill: parent