diff --git a/src/declarativeimports/plasmacomponents3/Slider.qml b/src/declarativeimports/plasmacomponents3/Slider.qml index 3ba22e4a8..459f5ca62 100644 --- a/src/declarativeimports/plasmacomponents3/Slider.qml +++ b/src/declarativeimports/plasmacomponents3/Slider.qml @@ -1,109 +1,111 @@ /* * Copyright 2016 Marco Martin * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU Library General Public License as * published by the Free Software Foundation; either version 2, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU Library General Public License for more details * * You should have received a copy of the GNU Library General Public * License along with this program; if not, write to the * Free Software Foundation, Inc., * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import QtQuick 2.6 import QtQuick.Templates @QQC2_VERSION@ as T import org.kde.plasma.core 2.0 as PlasmaCore import "private" as Private T.Slider { id: control implicitWidth: control.orientation === Qt.Horizontal ? units.gridUnit * 12 : units.gridUnit * 1.6 implicitHeight: control.orientation === Qt.Horizontal ? units.gridUnit * 1.6 : units.gridUnit * 12 - + wheelEnabled: true snapMode: T.Slider.SnapOnRelease PlasmaCore.Svg { id: grooveSvg imagePath: "widgets/slider" colorGroup: PlasmaCore.ColorScope.colorGroup } handle: Item { property bool horizontal: control.orientation === Qt.Horizontal x: control.leftPadding + (horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2) y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height)) width: grooveSvg.hasElement("hint-handle-size") ? grooveSvg.elementSize("hint-handle-size").width : firstHandle.width height: grooveSvg.hasElement("hint-handle-size") ? grooveSvg.elementSize("hint-handle-size").height : firstHandle.height Private.RoundShadow { anchors.fill: firstHandle imagePath: "widgets/slider" focusElement: parent.horizontal ? "horizontal-slider-focus" : "vertical-slider-focus" hoverElement: parent.horizontal ? "horizontal-slider-hover" : "vertical-slider-hover" shadowElement: parent.horizontal ? "horizontal-slider-shadow" : "vertical-slider-shadow" state: control.activeFocus ? "focus" : (control.hovered ? "hover" : "shadow") } PlasmaCore.SvgItem { id: firstHandle anchors.centerIn: parent width: naturalSize.width height: naturalSize.height svg: grooveSvg elementId: parent.horizontal ? "horizontal-slider-handle" : "vertical-slider-handle" } } background: PlasmaCore.FrameSvgItem { imagePath: "widgets/slider" prefix: "groove" colorGroup: PlasmaCore.ColorScope.colorGroup readonly property bool horizontal: control.orientation === Qt.Horizontal implicitWidth: horizontal ? units.gridUnit * 8 : margins.left + margins.right implicitHeight: horizontal ? margins.top + margins.bottom : units.gridUnit * 8 width: horizontal ? control.availableWidth : implicitWidth height: horizontal ? implicitHeight : control.availableHeight anchors.centerIn: parent scale: horizontal && control.mirrored ? -1 : 1 opacity: control.enabled ? 1 : 0.6 PlasmaCore.FrameSvgItem { imagePath: "widgets/slider" prefix: "groove-highlight" colorGroup: PlasmaCore.ColorScope.colorGroup x: parent.horizontal ? 0 : (parent.width - width) / 2 y: parent.horizontal ? (parent.height - height) / 2 : parent.height - height width: Math.max(margins.left + margins.right, parent.horizontal ? control.visualPosition * (parent.width - control.handle.width) + control.handle.width/2 : parent.width) height: Math.max(margins.top + margins.bottom, parent.horizontal ? parent.height : parent.height - control.visualPosition * (parent.height + control.handle.height) + control.handle.height/2) } Repeater { id: repeater - model: control.stepSize > 0 ? 1 + (control.to - control.from) / control.stepSize : 0 + readonly property int stepCount: (control.to - control.from) / control.stepSize + model: control.stepSize && stepCount < 20 ? 1 + stepCount : 0 anchors.fill: parent Rectangle { color: PlasmaCore.ColorScope.textColor + opacity: 0.3 width: background.horizontal ? units.devicePixelRatio : units.gridUnit/2 height: background.horizontal ? units.gridUnit/2 : units.devicePixelRatio - y: background.horizontal ? background.height : handle.height / 2 + index * ((repeater.height - handle.height) / (repeater.count > 1 ? repeater.count - 1 : 1)) + y: background.horizontal ? background.height + units.devicePixelRatio : handle.height / 2 + index * ((repeater.height - handle.height) / (repeater.count > 1 ? repeater.count - 1 : 1)) x: background.horizontal ? handle.width / 2 + index * ((repeater.width - handle.width) / (repeater.count > 1 ? repeater.count - 1 : 1)) : background.width } } } } diff --git a/tests/components/slider3.qml b/tests/components/slider3.qml new file mode 100644 index 000000000..9f96eab33 --- /dev/null +++ b/tests/components/slider3.qml @@ -0,0 +1,54 @@ +import QtQuick 2.0 +import QtQuick.Layouts 1.3 + +import org.kde.kirigami 2.5 as Kirigami +import org.kde.plasma.components 3.0 +import QtQuick.Controls 2.5 as QQC2 +import org.kde.plasma.components 2.0 as PC2 + +// Run with qmlscene to use qqc2-desktop-style + +Kirigami.ApplicationWindow { + pageStack.initialPage: Kirigami.Page { + Kirigami.FormLayout { + anchors.fill: parent + PC2.Slider { + Layout.fillWidth: true + Kirigami.FormData.label: "PC2 slider" + maximumValue: slider.to + stepSize: slider.stepSize + } + QQC2.Slider { + Layout.fillWidth: true + Kirigami.FormData.label: "QQC2 slider" + to: slider.to + stepSize: slider.stepSize + } + Slider { + id: slider + Kirigami.FormData.label: "PC3 slider" + to: max.text + stepSize: 1 + clip: true + } + TextField { + id: max + Kirigami.FormData.label: "maximumValue: " + text: "100" + } + Label { + Kirigami.FormData.label: "value: " + text: slider.value + } + Slider { + Kirigami.FormData.label: "Choose step size: " + to: slider.to * 2 + onMoved: slider.stepSize = value + } + Label { + Kirigami.FormData.label: "Step size: " + text: slider.stepSize + } + } + } +}