From 6d6ff41aee46e53339aea045effd022553220cf0 Mon Sep 17 00:00:00 2001 From: Marco Martin Date: Wed, 27 Aug 2014 18:51:52 +0200 Subject: [PATCH 1/7] start port of Slider --- .../plasmacomponents/qml/Slider.qml | 235 +----------------- .../qml/styles/SliderStyle.qml | 41 +++ 2 files changed, 48 insertions(+), 228 deletions(-) create mode 100644 src/declarativeimports/plasmacomponents/qml/styles/SliderStyle.qml diff --git a/src/declarativeimports/plasmacomponents/qml/Slider.qml b/src/declarativeimports/plasmacomponents/qml/Slider.qml index c5325909e..da83db0c6 100644 --- a/src/declarativeimports/plasmacomponents/qml/Slider.qml +++ b/src/declarativeimports/plasmacomponents/qml/Slider.qml @@ -19,65 +19,20 @@ import QtQuick 2.1 import org.kde.plasma.core 2.0 as PlasmaCore -import org.kde.plasma.components 2.0 as PlasmaComponents import "private" as Private +import QtQuick.Controls 1.2 as QtControls +import "styles" as Styles + -// TODO: create a value indicator for plasma? /** * An interactive slider component with Plasma look and feel. * - * @inherit QtQuick.Item + * @inherit QtControls.Button */ -Item { +QtControls.Slider { id: slider // Common API - /** - * type:real - * How many steps the slider value can be selected within its range value. - */ - property alias stepSize: range.stepSize - - /** - * type:real - * Minimum value that the slider's value can assume. - * - * The default value is 0. - */ - property alias minimumValue: range.minimumValue - - /** - * type:real - * Maximum value that the slider's value can assume. - * - * The default value is 1. - */ - property alias maximumValue: range.maximumValue - - /** - * type:real - * This property holds the value selected inside the minimum to maximum - * range of value. - * - * The default value is 0. - */ - property alias value: range.value - - /** - * Orientation for this component. - * - * The orientation can be either Qt.Horizontal or Qt.Vertical. - * - * The default is Qt.Horizontal. - */ - property int orientation: Qt.Horizontal - - /** - * type:bool - * - * True if the Slider is being pressed. - */ - property alias pressed: mouseArea.pressed /** * This property holds if a value indicator element will be shown while is @@ -104,7 +59,7 @@ Item { * * The default value is false. */ - property alias inverted: range.inverted + property bool inverted: false width: contents.isVertical ? theme.mSize(theme.defaultFont).height*1.6 : 200 height: contents.isVertical ? 200 : theme.mSize(theme.defaultFont).height*1.6 @@ -114,10 +69,6 @@ Item { activeFocusOnTab: true - Keys.onUpPressed: { if (contents.isVertical) decrease() } - Keys.onDownPressed: { if (contents.isVertical) increase() } - Keys.onLeftPressed: { if (!contents.isVertical) increase() } - Keys.onRightPressed: { if (!contents.isVertical) decrease() } function accessibleIncreaseAction() { increase() } function accessibleDecreaseAction() { decrease() } @@ -138,177 +89,5 @@ Item { value += stepSize; } - Item { - id: contents - - // Plasma API - property bool animated: units.longDuration > 0 - property real handleWidth: handle.naturalSize.width - property real handleHeight: handle.naturalSize.height - - // Convenience API - property bool isVertical: orientation == Qt.Vertical - - width: contents.isVertical ? slider.height : slider.width - height: contents.isVertical ? slider.width : slider.height - rotation: contents.isVertical ? -90 : 0 - - anchors.centerIn: parent - - PlasmaComponents.RangeModel { - id: range - - minimumValue: 0.0 - maximumValue: 1.0 - value: 0 - stepSize: 0.0 - inverted: false - positionAtMinimum: -handle.width/8 - positionAtMaximum: contents.width - (handle.width/8) * 7 - } - - PlasmaCore.Svg { - id: grooveSvg - imagePath: "widgets/slider" - } - PlasmaCore.FrameSvgItem { - id: groove - imagePath: "widgets/slider" - prefix: "groove" - //FIXME: frameSvg should have a minimumSize attribute, could be added to kdelibs 4.7(maybe just the qml binding is enough)? - height: margins.top + margins.bottom - anchors { - left: parent.left - right: parent.right - verticalCenter: parent.verticalCenter - } - } - PlasmaCore.FrameSvgItem { - id: highlight - imagePath: "widgets/slider" - prefix: "groove-highlight" - height: groove.height - - width: inverted ? groove.width - handle.x - handle.width/4 : fakeHandle.x + handle.width/4 - x: inverted ? handle.x + handle.width/4 : 0 - anchors.verticalCenter: parent.verticalCenter - - //use the same animation when resizing a slider as moving the slider this keeps it in line when using key shortcuts - Behavior on width { - enabled: !mouseArea.drag.active && contents.animated - PropertyAnimation { - duration: behavior.enabled ? units.shortDuration : 0 - easing.type: Easing.OutSine - } - } - Behavior on x { - enabled: inverted && !mouseArea.drag.active && contents.animated - PropertyAnimation { - duration: behavior.enabled ? units.shortDuration : 0 - easing.type: Easing.OutSine - } - } - - visible: range.position > 0 && slider.enabled - } - - Private.RoundShadow { - id: shadow - imagePath: "widgets/slider" - focusElement: contents.isVertical ? "vertical-slider-focus" : "horizontal-slider-focus" - hoverElement: contents.isVertical ? "vertical-slider-hover" : "horizontal-slider-hover" - shadowElement: contents.isVertical ? "vertical-slider-shadow" : "horizontal-slider-shadow" - state: slider.activeFocus ? "focus" : (mouseArea.containsMouse ? "hover" : "shadow") - anchors.fill: handle - //We rotate the handle below, we need to rotate the shadow back as well - rotation: contents.isVertical ? 90 : 0 - } - - PlasmaCore.SvgItem { - id: handle - - x: fakeHandle.x - anchors { - verticalCenter: groove.verticalCenter - } - width: contents.handleWidth - height: contents.handleHeight - //Rotate the handle back for vertical slider so all the handles have the same shadow effect - rotation: contents.isVertical ? 90 : 0 - svg: grooveSvg - elementId: contents.isVertical ? "vertical-slider-handle" : "horizontal-slider-handle" - - Behavior on x { - id: behavior - enabled: !mouseArea.drag.active && contents.animated - - PropertyAnimation { - duration: behavior.enabled ? units.shortDuration : 0 - easing.type: Easing.OutSine - } - } - } - - Item { - id: fakeHandle - width: handle.width - height: handle.height - } - - MouseArea { - id: mouseArea - - anchors.fill: parent - enabled: slider.enabled - drag { - target: fakeHandle - axis: Drag.XAxis - minimumX: range.positionAtMinimum - maximumX: range.positionAtMaximum - } - hoverEnabled: true - - onPressed: { - // Clamp the value - var newX = Math.max(mouse.x, drag.minimumX) - newX = Math.min(newX, drag.maximumX) - - // Debounce the press: a press event inside the handler will not - // change its position, the user needs to drag it. - if (Math.abs(newX - fakeHandle.x) > handle.width / 2) { - range.position = newX - handle.width / 2 - } - - slider.forceActiveFocus() - } - onWheel: { - // horizontal scrolling (angleDelta.x) is "inverted" - // this matches QSlider's behavior - var delta = wheel.angleDelta.x ? -wheel.angleDelta.x : wheel.angleDelta.y - if (delta > 0) { // up/right - slider.value += (slider.inverted ? -slider.stepSize : slider.stepSize) - } else if (delta < 0) { - slider.value += (slider.inverted ? slider.stepSize : -slider.stepSize) - } - slider.forceActiveFocus() - } - } - } - - Binding { - target: range - property: "position" - value: fakeHandle.x - } - - // During the drag, we simply ignore position set from the range, this - // means that setting a value while dragging will not "interrupt" the - // dragging activity. - Binding { - when: !mouseArea.drag.active - target: fakeHandle - property: "x" - value: range.position - } - Accessible.role: Accessible.Slider + style: Styles.SliderStyle {} } diff --git a/src/declarativeimports/plasmacomponents/qml/styles/SliderStyle.qml b/src/declarativeimports/plasmacomponents/qml/styles/SliderStyle.qml new file mode 100644 index 000000000..1ccffd76b --- /dev/null +++ b/src/declarativeimports/plasmacomponents/qml/styles/SliderStyle.qml @@ -0,0 +1,41 @@ +/* + * Copyright (C) 2014 by 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 2.010-1301, USA. + */ + + +import QtQuick 2.1 +import QtQuick.Controls.Styles 1.1 as QtQuickControlStyle +import QtQuick.Controls 1.1 + +import org.kde.plasma.core 2.0 as PlasmaCore +import org.kde.plasma.components 2.0 as PlasmaComponents + +import "../private" as Private + +QtQuickControlStyle.SliderStyle { + id: styleitem + + padding { top: 0 ; left: 0 ; right: 0 ; bottom: 0 } + + // handle: + + // groove: + + + // tickmarks: +} From 4ec02e7b1dff65d6c44b3d1c55a978f9ae709c58 Mon Sep 17 00:00:00 2001 From: Marco Martin Date: Thu, 28 Aug 2014 13:12:04 +0200 Subject: [PATCH 2/7] style handle and groove --- .../qml/styles/SliderStyle.qml | 46 +++++++++++++++++-- 1 file changed, 43 insertions(+), 3 deletions(-) diff --git a/src/declarativeimports/plasmacomponents/qml/styles/SliderStyle.qml b/src/declarativeimports/plasmacomponents/qml/styles/SliderStyle.qml index 1ccffd76b..846df8bf5 100644 --- a/src/declarativeimports/plasmacomponents/qml/styles/SliderStyle.qml +++ b/src/declarativeimports/plasmacomponents/qml/styles/SliderStyle.qml @@ -28,13 +28,53 @@ import org.kde.plasma.components 2.0 as PlasmaComponents import "../private" as Private QtQuickControlStyle.SliderStyle { - id: styleitem + id: styleItem + property Item handleItem padding { top: 0 ; left: 0 ; right: 0 ; bottom: 0 } - // handle: + PlasmaCore.Svg { + id: grooveSvg + imagePath: "widgets/slider" + } + handle: Item { + width: handle.naturalSize.width + height: handle.naturalSize.height + Private.RoundShadow { + id: shadow + anchors.fill: parent + imagePath: "widgets/slider" + focusElement: "horizontal-slider-focus" + hoverElement: "horizontal-slider-hover" + shadowElement: "horizontal-slider-shadow" + state: control.activeFocus ? "focus" : (control.hovered ? "hover" : "shadow") + } + PlasmaCore.SvgItem { + id: handle + anchors.fill: parent + svg: grooveSvg + elementId: "horizontal-slider-handle" + } + } + - // groove: + groove: PlasmaCore.FrameSvgItem { + id: groove + imagePath: "widgets/slider" + prefix: "groove" + PlasmaCore.FrameSvgItem { + id: highlight + imagePath: "widgets/slider" + prefix: "groove-highlight" + height: groove.height + + width: styleData.handlePosition + x: 0 + anchors.verticalCenter: parent.verticalCenter + + visible: value > 0 && slider.enabled + } + } // tickmarks: From d6b08c303a71a35df294fbca0c68aba744edbcc4 Mon Sep 17 00:00:00 2001 From: Marco Martin Date: Thu, 28 Aug 2014 13:15:09 +0200 Subject: [PATCH 3/7] style tickmarks --- .../plasmacomponents/qml/styles/SliderStyle.qml | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/declarativeimports/plasmacomponents/qml/styles/SliderStyle.qml b/src/declarativeimports/plasmacomponents/qml/styles/SliderStyle.qml index 846df8bf5..b6ea4ad54 100644 --- a/src/declarativeimports/plasmacomponents/qml/styles/SliderStyle.qml +++ b/src/declarativeimports/plasmacomponents/qml/styles/SliderStyle.qml @@ -77,5 +77,14 @@ QtQuickControlStyle.SliderStyle { } - // tickmarks: + tickmarks: Repeater { + id: repeater + model: control.stepSize > 0 ? 1 + (control.maximumValue - control.minimumValue) / control.stepSize : 0 + Rectangle { + color: theme.textColor + width: 1 ; height: 3 + y: repeater.height + x: styleData.handleWidth / 2 + index * ((repeater.width - styleData.handleWidth) / (repeater.count-1)) + } + } } From 4ac3652d10d772b37c4cd8cf94b8610ed417cf02 Mon Sep 17 00:00:00 2001 From: Marco Martin Date: Thu, 28 Aug 2014 14:21:12 +0200 Subject: [PATCH 4/7] some documentation fixes --- src/declarativeimports/plasmacomponents/qml/Slider.qml | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/declarativeimports/plasmacomponents/qml/Slider.qml b/src/declarativeimports/plasmacomponents/qml/Slider.qml index da83db0c6..17ae16bc6 100644 --- a/src/declarativeimports/plasmacomponents/qml/Slider.qml +++ b/src/declarativeimports/plasmacomponents/qml/Slider.qml @@ -32,8 +32,6 @@ import "styles" as Styles QtControls.Slider { id: slider - // Common API - /** * This property holds if a value indicator element will be shown while is * dragged or not. @@ -51,13 +49,12 @@ QtControls.Slider { */ property string valueIndicatorText: value - // Plasma API /** * type:bool * This property holds if the slider visualizations has an inverted * direction. * - * The default value is false. + * @warning: deprecated and not supported, here for retrocompatibility */ property bool inverted: false From 846f740daefe6b1bf1d47d71516dcad59b2a9a45 Mon Sep 17 00:00:00 2001 From: Marco Martin Date: Thu, 28 Aug 2014 14:25:48 +0200 Subject: [PATCH 5/7] fix copyright --- src/declarativeimports/plasmacomponents/qml/Slider.qml | 1 + .../plasmacomponents/qml/styles/SliderStyle.qml | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/declarativeimports/plasmacomponents/qml/Slider.qml b/src/declarativeimports/plasmacomponents/qml/Slider.qml index 17ae16bc6..a7de3414e 100644 --- a/src/declarativeimports/plasmacomponents/qml/Slider.qml +++ b/src/declarativeimports/plasmacomponents/qml/Slider.qml @@ -1,5 +1,6 @@ /* * Copyright (C) 2011 by Daker Fernandes Pinheiro +* Copyright (C) 2014 by 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 diff --git a/src/declarativeimports/plasmacomponents/qml/styles/SliderStyle.qml b/src/declarativeimports/plasmacomponents/qml/styles/SliderStyle.qml index b6ea4ad54..1dd968139 100644 --- a/src/declarativeimports/plasmacomponents/qml/styles/SliderStyle.qml +++ b/src/declarativeimports/plasmacomponents/qml/styles/SliderStyle.qml @@ -1,5 +1,5 @@ /* - * Copyright (C) 2014 by Marco MArtin + * Copyright (C) 2014 by 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 From 60976b67aeeeaf2ba9cbda33e3b78ed06e553266 Mon Sep 17 00:00:00 2001 From: Marco Martin Date: Thu, 28 Aug 2014 16:04:02 +0200 Subject: [PATCH 6/7] more comment&docs --- examples/applets/widgetgallery/contents/ui/Sliders.qml | 1 + src/declarativeimports/plasmacomponents/qml/Slider.qml | 2 +- .../plasmacomponents/qml/styles/SliderStyle.qml | 3 ++- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/examples/applets/widgetgallery/contents/ui/Sliders.qml b/examples/applets/widgetgallery/contents/ui/Sliders.qml index 135ee3e8b..9b1eae8a0 100644 --- a/examples/applets/widgetgallery/contents/ui/Sliders.qml +++ b/examples/applets/widgetgallery/contents/ui/Sliders.qml @@ -89,6 +89,7 @@ PlasmaComponents.Page { orientation: Qt.Horizontal minimumValue: 0 maximumValue: 255 + tickmarksEnabled: true stepSize: 10 Keys.onTabPressed: blueSlider.forceActiveFocus() } diff --git a/src/declarativeimports/plasmacomponents/qml/Slider.qml b/src/declarativeimports/plasmacomponents/qml/Slider.qml index a7de3414e..676b1cd8a 100644 --- a/src/declarativeimports/plasmacomponents/qml/Slider.qml +++ b/src/declarativeimports/plasmacomponents/qml/Slider.qml @@ -28,7 +28,7 @@ import "styles" as Styles /** * An interactive slider component with Plasma look and feel. * - * @inherit QtControls.Button + * @inherit QtControls.Slider */ QtControls.Slider { id: slider diff --git a/src/declarativeimports/plasmacomponents/qml/styles/SliderStyle.qml b/src/declarativeimports/plasmacomponents/qml/styles/SliderStyle.qml index 1dd968139..f6305ccd3 100644 --- a/src/declarativeimports/plasmacomponents/qml/styles/SliderStyle.qml +++ b/src/declarativeimports/plasmacomponents/qml/styles/SliderStyle.qml @@ -69,7 +69,6 @@ QtQuickControlStyle.SliderStyle { height: groove.height width: styleData.handlePosition - x: 0 anchors.verticalCenter: parent.verticalCenter visible: value > 0 && slider.enabled @@ -84,6 +83,8 @@ QtQuickControlStyle.SliderStyle { color: theme.textColor width: 1 ; height: 3 y: repeater.height + //Position ticklines from styleData.handleWidth to width - styleData.handleWidth/2 + //position them at an handle width increment x: styleData.handleWidth / 2 + index * ((repeater.width - styleData.handleWidth) / (repeater.count-1)) } } From f7eb69f0780222360be2d41daa1b95f9bcd156c6 Mon Sep 17 00:00:00 2001 From: Marco Martin Date: Thu, 28 Aug 2014 16:06:48 +0200 Subject: [PATCH 7/7] comment++ --- .../plasmacomponents/qml/styles/SliderStyle.qml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/declarativeimports/plasmacomponents/qml/styles/SliderStyle.qml b/src/declarativeimports/plasmacomponents/qml/styles/SliderStyle.qml index f6305ccd3..0d0323779 100644 --- a/src/declarativeimports/plasmacomponents/qml/styles/SliderStyle.qml +++ b/src/declarativeimports/plasmacomponents/qml/styles/SliderStyle.qml @@ -84,8 +84,8 @@ QtQuickControlStyle.SliderStyle { width: 1 ; height: 3 y: repeater.height //Position ticklines from styleData.handleWidth to width - styleData.handleWidth/2 - //position them at an handle width increment - x: styleData.handleWidth / 2 + index * ((repeater.width - styleData.handleWidth) / (repeater.count-1)) + //position them at an half handle width increment + x: styleData.handleWidth / 2 + index * ((repeater.width - styleData.handleWidth) / (repeater.count>1 ? repeater.count-1 : 1)) } } }