view/qml/EffectSlider.qml

0001 /*
0002     SPDX-FileCopyrightText: 2017 Jean-Baptiste Mardelle <jb@kdenlive.org>
0003     SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
0004 */
0005
0006 import QtQuick 2.15
0007 import QtQuick.Controls 2.15
0008 import QtQuick.Controls.Styles 1.4
0009 import QtQuick.Layouts 1.15
0010
0011 Item {
0012     id: sliderroot
0013     property string sliderIcon
0014     property string sliderLabel
0015     property string paramName
0016     property int slider_max: 100
0017     property int slider_min: 0
0018     property int slider_def: 100
0019     property bool blockSignals: false
0020     implicitHeight: 20
0021     anchors.fill: parent
0022
0023     function resetSlider() {
0024         slider.value = sliderroot.slider_def
0025     }
0026
0027     function setValue(val) {
0028         sliderroot.blockSignals = true
0029         slider.value = val
0030         sliderroot.blockSignals = false
0031     }
0032
0033     RowLayout{
0034         spacing: 0
0035         anchors.fill: parent
0036         anchors.margins: 0
0037     ToolButton {
0038         id: enableButton
0039         implicitHeight: 20
0040         implicitWidth: 20
0041         iconName: sliderroot.sliderIcon
0042         visible: sliderroot.sliderIcon != ''
0043         checkable: true
0044         checked: true
0045         Layout.rightMargin: 2
0046     }
0047     Slider {
0048         id: slider
0049         Layout.fillWidth: true
0050         Layout.minimumWidth: 50
0051         Layout.maximumWidth: 500
0052         //TODO: don't hardcode
0053         height: sliderroot.sliderLabel == '' ? 12 : 20
0054         tickmarksEnabled: false
0055         maximumValue: sliderroot.slider_max
0056         minimumValue: sliderroot.slider_min
0057         value: sliderroot.slider_def
0058         stepSize: 1
0059         enabled: enableButton.checked
0060         opacity: enabled ? 1 : 0.4
0061         updateValueWhileDragging: true
0062         onValueChanged: {
0063             spinbox.value = value
0064             if (!sliderroot.blockSignals) {
0065                 root.valueChanged(sliderroot.paramName, value)
0066             }
0067         }
0068         /*Text {
0069             text: sliderroot.sliderLabel
0070             leftPadding: 5
0071             opacity: 0.5
0072             color: activePalette.text
0073         }*/
0074         style: SliderStyle {
0075             handle: Rectangle {
0076                 height: slider.height
0077                 width: 4
0078                 radius: 2
0079                 color: container.containsMouse ? activePalette.highlight : activePalette.text
0080             }
0081             groove: Rectangle {
0082                 anchors.bottom: parent.bottom
0083                 implicitHeight: slider.height / 4
0084                 implicitWidth: 100
0085                 radius: 4
0086                 border.color: activePalette.dark
0087                 color: activePalette.base
0088                 Rectangle {
0089                     height: parent.height
0090                     width: styleData.handlePosition + 2
0091                     implicitHeight: slider.height
0092                     implicitWidth: 100
0093                     radius: 4
0094                     color: activePalette.highlight
0095                     opacity: container.containsMouse ? 0.6 : 0.3
0096                 }
0097             }
0098
0099         }
0100         Repeater {
0101             id: repeater
0102             model: 9
0103             Rectangle {
0104                 color: activePalette.text
0105                 width: 1 ; height: (index % 2 == 0) ? 5 : 3
0106                 y: slider.height - height
0107                 x: (index * slider.width) / (repeater.count-1)
0108                 opacity: 0.5
0109             }
0110         }
0111         Component.onCompleted: {
0112         // Create some controls.
0113         //slider.onValueChanged.connect(appWindow.sliderChanged)
0114         //spinBox.onValueChanged.connect(appWindow.spinBoxChanged)
0115     }
0116 }
0117 SpinBox {
0118     id: spinbox
0119     maximumValue: sliderroot.slider_max
0120     minimumValue: sliderroot.slider_min
0121     value: sliderroot.slider_def
0122     enabled: enableButton.checked
0123     onValueChanged: {
0124         slider.value = value
0125     }
0126     style: SpinBoxStyle{
0127         textColor: activePalette.highlight
0128         background: Rectangle {
0129             implicitWidth: 60
0130             implicitHeight: 20
0131             //control.hoverEnabled: true
0132             border.color: control.focus ? "red" : control.hovered ? activePalette.highlight : "transparent"
0133             color: 'transparent'
0134             radius: 2
0135         }
0136     }
0137 }
0138     }
0139     MouseArea {
0140             id: container
0141             anchors.fill: parent
0142             hoverEnabled: true
0143             acceptedButtons: Qt.NoButton
0144             enabled: enableButton.checked
0145     }
0146 }