From 3515eb178d45a0a545d4d28e01a98b08d7ec302a Mon Sep 17 00:00:00 2001 From: Mentalflow <312902918@qq.com> Date: Sat, 30 Mar 2024 01:31:03 +0800 Subject: [PATCH] RibbonScrollBar: Added. --- lib_source/CMakeLists.txt | 1 + lib_source/qml/RibbonComboBox.qml | 2 +- lib_source/qml/RibbonMenu.qml | 2 +- lib_source/qml/RibbonPaperView.qml | 2 +- lib_source/qml/RibbonScrollBar.qml | 149 +++++++++++++++++++++++ lib_source/qml/RibbonScrollIndicator.qml | 6 +- 6 files changed, 156 insertions(+), 6 deletions(-) create mode 100644 lib_source/qml/RibbonScrollBar.qml diff --git a/lib_source/CMakeLists.txt b/lib_source/CMakeLists.txt index dc0470c..91266cb 100644 --- a/lib_source/CMakeLists.txt +++ b/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}) diff --git a/lib_source/qml/RibbonComboBox.qml b/lib_source/qml/RibbonComboBox.qml index 292482e..fd0d20e 100644 --- a/lib_source/qml/RibbonComboBox.qml +++ b/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{ diff --git a/lib_source/qml/RibbonMenu.qml b/lib_source/qml/RibbonMenu.qml index a9d8551..db58fbf 100644 --- a/lib_source/qml/RibbonMenu.qml +++ b/lib_source/qml/RibbonMenu.qml @@ -39,7 +39,7 @@ Menu { : false clip: true currentIndex: control.currentIndex - ScrollIndicator.vertical: ScrollIndicator {} + ScrollBar.vertical: RibbonScrollBar {} } background: Rectangle { diff --git a/lib_source/qml/RibbonPaperView.qml b/lib_source/qml/RibbonPaperView.qml index 8b1bf75..47503cc 100644 --- a/lib_source/qml/RibbonPaperView.qml +++ b/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 } diff --git a/lib_source/qml/RibbonScrollBar.qml b/lib_source/qml/RibbonScrollBar.qml new file mode 100644 index 0000000..247cacf --- /dev/null +++ b/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 + } + } + } + } +} diff --git a/lib_source/qml/RibbonScrollIndicator.qml b/lib_source/qml/RibbonScrollIndicator.qml index cfff327..049090d 100644 --- a/lib_source/qml/RibbonScrollIndicator.qml +++ b/lib_source/qml/RibbonScrollIndicator.qml @@ -1,9 +1,8 @@ import QtQuick -import QtQuick.Controls.impl -import QtQuick.Templates as T +import QtQuick.Controls 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"