RibbonScrollBar: Added.

lib_source/CMakeLists.txt

@@ -44,6 +44,7 @@ set(
     qml/RibbonText.qml qml/RibbonTextBoxMenu.qml qml/RibbonPopup.qml
     qml/RibbonPopupDialog.qml qml/RibbonLineEdit.qml qml/RibbonTextEdit.qml
     qml/RibbonComboBox.qml qml/RibbonSpinBox.qml qml/RibbonScrollIndicator.qml
+    qml/RibbonScrollBar.qml
 )
 
 foreach(qmlfile ${qml_files})

lib_source/qml/RibbonComboBox.qml

@@ -165,7 +165,7 @@ ComboBox {
             model: control.delegateModel
             currentIndex: control.highlightedIndex
             highlightMoveDuration: 0
-            ScrollIndicator.vertical: ScrollIndicator { }
+            ScrollBar.vertical: RibbonScrollBar { }
         }
 
         background: RibbonBlur{

lib_source/qml/RibbonMenu.qml

@@ -39,7 +39,7 @@ Menu {
                      : false
         clip: true
         currentIndex: control.currentIndex
-        ScrollIndicator.vertical: ScrollIndicator {}
+        ScrollBar.vertical: RibbonScrollBar {}
     }
 
     background: Rectangle {

lib_source/qml/RibbonPaperView.qml

@@ -15,7 +15,7 @@ RibbonView {
         Layout.preferredHeight: parent.height
         contentWidth: control.width
         contentHeight: container_bg.height + container_bg.anchors.topMargin + container_bg.anchors.bottomMargin
-        ScrollBar.vertical: ScrollBar {
+        ScrollBar.vertical: RibbonScrollBar {
             anchors.right: flickview.right
             anchors.rightMargin: 2
         }

lib_source/qml/RibbonScrollBar.qml

@@ -0,0 +1,149 @@
+import QtQuick
+import QtQuick.Controls
+import RibbonUI
+
+ScrollBar {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    verticalPadding: (control.vertical ? 8 + 5 : 0) + (18 - 8) / 2
+    horizontalPadding: (control.vertical ? 0 : 8 + 5) + (18 - 8) / 2
+    visible: control.policy !== ScrollBar.AlwaysOff
+    minimumSize: orientation === Qt.Horizontal ? height / width : width / height
+
+    contentItem: Rectangle {
+        implicitWidth: 8
+        implicitHeight: 8
+        visible: control.size < 1.0
+        radius: width / 2
+        color: RibbonTheme.dark_mode ? hover_handler.hovered ? '#D6D6D6' : hover_handler.hovered && control.pressed ? '#E5E5E5' : '#999999'
+                                : hover_handler.hovered ? '#424242' : hover_handler.hovered && control.pressed ? '#333333' : '#707070'
+        opacity: 0.0
+
+        states: State {
+            name: "active"
+            when: control.policy === ScrollBar.AlwaysOn || (control.active && control.size < 1.0)
+            PropertyChanges { control.contentItem.opacity: 0.75 }
+        }
+
+        transitions: Transition {
+            from: "active"
+            SequentialAnimation {
+                PauseAnimation { duration: 450 }
+                NumberAnimation { target: control.contentItem; duration: 200; property: "opacity"; to: 0.0 }
+            }
+        }
+
+        HoverHandler{
+            id:hover_handler
+        }
+    }
+
+    background: Rectangle{
+        implicitWidth: 18
+        implicitHeight: 18
+        color: RibbonTheme.dark_mode ? '#141414' : '#F5F5F5'
+        opacity: 0.0
+        radius: implicitWidth / 2
+        visible: control.contentItem.visible
+        states: State {
+            name: "active"
+            when: control.active
+            PropertyChanges { control.background.opacity: 0.75 }
+        }
+
+        transitions: [
+            Transition {
+                from: "active"
+                SequentialAnimation {
+                    PauseAnimation { duration: 450 }
+                    NumberAnimation { target: control.background; duration: 200; property: "opacity"; to: 0.0 }
+                }
+            }
+        ]
+
+        RibbonButton{
+            id: decrease_btn
+            width: control.vertical ? control.contentItem.width : control.contentItem.height
+            height: width
+            show_bg: false
+            show_hovered_bg: false
+            icon_source: control.vertical ? RibbonIcons.CaretUp : RibbonIcons.CaretLeft
+            onClicked: control.decrease()
+            Component.onCompleted: setup()
+            ribbon_icon.filled: true
+            ribbon_icon.icon_size: 14
+            ribbon_icon.color: RibbonTheme.dark_mode ? hovered ? '#D6D6D6' : pressed ? '#E5E5E5' : '#999999'
+            : hovered ? '#424242' : pressed ? '#333333' : '#707070'
+            Connections{
+                target: control
+                function onVerticalChanged(){
+                    setup()
+                }
+            }
+            function setup()
+            {
+                if (control.vertical)
+                {
+                    anchors.top = parent.top
+                    anchors.left = undefined
+                    anchors.topMargin = 5
+                    anchors.leftMargin = 0
+                    anchors.horizontalCenter = parent.horizontalCenter
+                }
+                else
+                {
+                    anchors.left = parent.left
+                    anchors.top = undefined
+                    anchors.leftMargin = 5
+                    anchors.topMargin = 0
+                    anchors.verticalCenter = parent.verticalCenter
+                }
+            }
+        }
+
+        RibbonButton{
+            id: increase_btn
+            width: control.vertical ? control.contentItem.width : control.contentItem.height
+            height: width
+            show_bg: false
+            show_hovered_bg: false
+            icon_source: control.vertical ? RibbonIcons.CaretDown : RibbonIcons.CaretRight
+            onClicked: control.increase()
+            Component.onCompleted: setup()
+            ribbon_icon.filled: true
+            ribbon_icon.icon_size: 14
+            ribbon_icon.color: RibbonTheme.dark_mode ? hovered ? '#D6D6D6' : pressed ? '#E5E5E5' : '#999999'
+            : hovered ? '#424242' : pressed ? '#333333' : '#707070'
+            Connections{
+                target: control
+                function onVerticalChanged(){
+                    setup()
+                }
+            }
+            function setup()
+            {
+                if (control.vertical)
+                {
+                    anchors.bottom = parent.bottom
+                    anchors.right = undefined
+                    anchors.bottomMargin = 5
+                    anchors.rightMargin = 0
+                    anchors.horizontalCenter = parent.horizontalCenter
+                }
+                else
+                {
+                    anchors.right = parent.right
+                    anchors.bottom = undefined
+                    anchors.rightMargin = 5
+                    anchors.bottomMargin = 0
+                    anchors.verticalCenter = parent.verticalCenter
+                }
+            }
+        }
+    }
+}

lib_source/qml/RibbonScrollIndicator.qml

@@ -1,9 +1,8 @@
 import QtQuick
-import QtQuick.Controls.impl
+import QtQuick.Controls
-import QtQuick.Templates as T
 import RibbonUI
 
-T.ScrollIndicator {
+ScrollIndicator {
     id: control
 
     implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
@@ -45,6 +44,7 @@ T.ScrollIndicator {
         color: RibbonTheme.dark_mode ? '#141414' : '#F5F5F5'
         opacity: 0.0
         radius: implicitWidth / 2
+        visible: control.contentItem.visible
 
         states: State {
             name: "active"