171 lines
6.5 KiB
QML
171 lines
6.5 KiB
QML
import QtQuick 2.15
|
|
import QtQuick.Controls 2.15
|
|
import QtQuick.Layouts 1.11
|
|
import QtGraphicalEffects 1.0
|
|
import RibbonUI 1.0
|
|
|
|
Item {
|
|
id: control
|
|
height: horizontal ? container.implicitHeight : container.implicitWidth
|
|
width: horizontal ? container.implicitWidth : showButton ? Math.max(container.implicitHeight,subtract_button.width,add_button.width) : container.implicitHeight
|
|
property bool showTooltip: true
|
|
property bool showFilledColor: true
|
|
property bool showButton: true
|
|
property bool horizontal: true
|
|
property int slideWidth: 150
|
|
property int slideHeight: 4
|
|
property alias value: slide.value
|
|
property bool isDarkMode: RibbonTheme.isDarkMode
|
|
|
|
Item{
|
|
id: container
|
|
anchors.centerIn: parent
|
|
implicitHeight: slide.implicitHeight
|
|
implicitWidth: slide.implicitWidth + add_button.width + subtract_button.width
|
|
rotation: horizontal ? 0 : -90
|
|
RibbonButton{
|
|
id: add_button
|
|
anchors{
|
|
right: parent.right
|
|
verticalCenter: parent.verticalCenter
|
|
}
|
|
height: parent.height -3
|
|
iconSource: RibbonIcons.Add
|
|
iconSourceFilled: RibbonIcons_Filled.Add
|
|
showBg: false
|
|
showTooltip: false
|
|
showHoveredBg: false
|
|
rotation: horizontal ? 0 : 90
|
|
visible: showButton
|
|
enabled: slide.value !== 100
|
|
textColor: isDarkMode ? "white" : "black"
|
|
opacity: enabled ? 1 : 0.2
|
|
onClicked:
|
|
{
|
|
tooltip.show(slide.value,1000)
|
|
slide.increase()
|
|
}
|
|
Behavior on textColor {
|
|
ColorAnimation {
|
|
duration: 60
|
|
easing.type: Easing.OutSine
|
|
}
|
|
}
|
|
}
|
|
|
|
RibbonButton{
|
|
id: subtract_button
|
|
anchors{
|
|
left: parent.left
|
|
verticalCenter: parent.verticalCenter
|
|
}
|
|
height: parent.height -3
|
|
showBg: false
|
|
showTooltip: false
|
|
showHoveredBg: false
|
|
iconSource: RibbonIcons.Subtract
|
|
iconSourceFilled: RibbonIcons_Filled.Subtract
|
|
rotation: horizontal ? 0 : 90
|
|
visible: showButton
|
|
textColor: isDarkMode ? "white" : "black"
|
|
opacity: enabled ? 1 : 0.2
|
|
enabled: slide.value !== 0
|
|
onClicked:
|
|
{
|
|
tooltip.show(slide.value,1000)
|
|
slide.decrease()
|
|
}
|
|
Behavior on textColor {
|
|
ColorAnimation {
|
|
duration: 60
|
|
easing.type: Easing.OutSine
|
|
}
|
|
}
|
|
}
|
|
|
|
Slider {
|
|
id: slide
|
|
to: 100
|
|
stepSize: 1
|
|
anchors{
|
|
leftMargin: -5
|
|
left: showButton ? subtract_button.right : parent.left
|
|
right: showButton ? add_button.left : parent.right
|
|
rightMargin: -5
|
|
verticalCenter: add_button.verticalCenter
|
|
}
|
|
implicitWidth: Math.max(implicitBackgroundWidth + leftPadding + rightPadding, implicitHandleWidth + leftPadding + rightPadding)
|
|
implicitHeight: Math.max(implicitBackgroundHeight + topPadding + bottomPadding, implicitHandleHeight + topPadding + bottomPadding)
|
|
property int slide_length: 150
|
|
property int slideWidth: 5
|
|
handle: Rectangle{
|
|
x: slide.leftPadding + (slide.horizontal ? slide.visualPosition * (slide.availableWidth - width) : (slide.availableWidth - width) / 2)
|
|
y: slide.topPadding + (slide.horizontal ? (slide.availableHeight - height) / 2 : slide.visualPosition * (slide.availableHeight - height)) - 1
|
|
implicitWidth: 12
|
|
implicitHeight: 12
|
|
color: isDarkMode ? "#A1A2A1" : "#EDEEEE"
|
|
radius: 12
|
|
layer.enabled: true
|
|
layer.effect: RibbonShadow {
|
|
shadowOpacity: 0.2
|
|
shadowColor: "black"
|
|
}
|
|
scale: slide.pressed ? 1.1 : slide.hovered ? 1.2 : 1
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: 60
|
|
easing.type: Easing.OutSine
|
|
}
|
|
}
|
|
Behavior on scale {
|
|
NumberAnimation{
|
|
duration: 150
|
|
easing.type: Easing.OutSine
|
|
}
|
|
}
|
|
}
|
|
background: Item {
|
|
x: slide.leftPadding + (slide.horizontal ? 0 : (slide.availableWidth - width) / 2)
|
|
y: slide.topPadding + (slide.horizontal ? (slide.availableHeight - height) / 2 : 0) - 1
|
|
implicitWidth: slide.horizontal ? control.slideWidth : control.slideHeight
|
|
implicitHeight: slide.horizontal ? control.slideHeight : control.slideWidth
|
|
width: slide.horizontal ? slide.availableWidth : implicitWidth
|
|
height: slide.horizontal ? implicitHeight : slide.availableHeight
|
|
Rectangle{
|
|
anchors.fill: parent
|
|
radius: 2
|
|
color: isDarkMode ? "#7C7C7C" : "#8F8F8F"
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: 60
|
|
easing.type: Easing.OutSine
|
|
}
|
|
}
|
|
}
|
|
scale: slide.horizontal && slide.mirrored ? -1 : 1
|
|
Rectangle {
|
|
y: slide.horizontal ? 0 : slide.visualPosition * parent.height
|
|
width: slide.horizontal ? slide.position * parent.width : control.slideHeight
|
|
height: slide.horizontal ? control.slideHeight : slide.position * parent.height
|
|
radius: 3
|
|
color: showFilledColor ? isDarkMode ? "#8AAAEB" : "#5DA3E8" : isDarkMode ? "#7C7C7C" : "#8F8F8F"
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: 60
|
|
easing.type: Easing.OutSine
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
RibbonToolTip{
|
|
id: tooltip
|
|
parent: slide.handle
|
|
visible: showTooltip && slide.pressed
|
|
text: slide.value
|
|
}
|
|
}
|
|
}
|
|
|