use roundshadow for sliders

This commit is contained in:
Marco Martin 2011-11-08 15:12:44 +01:00
parent c644d41709
commit 2e5afa765b
2 changed files with 36 additions and 67 deletions

View File

@ -24,13 +24,19 @@ import org.kde.plasma.core 0.1 as PlasmaCore
Item {
id: main
state: parent.state
property alias imagePath: shadowSvg.imagePath
property string hoverElement: "hover"
property string focusElement: "focus"
property alias shadowElement: shadow.elementId
PlasmaCore.Svg {
id: shadowSvg
imagePath: "widgets/actionbutton"
}
PlasmaCore.SvgItem {
id: hover
svg: PlasmaCore.Svg {
id: hoverSvg
imagePath: "widgets/actionbutton"
}
svg: shadowSvg
elementId: "hover"
anchors.fill: parent
@ -40,10 +46,7 @@ Item {
PlasmaCore.SvgItem {
id: shadow
svg: PlasmaCore.Svg {
id: shadowSvg
imagePath: "widgets/actionbutton"
}
svg: shadowSvg
elementId: "shadow"
anchors.fill: parent
@ -59,7 +62,7 @@ Item {
PropertyChanges {
target: hover
opacity: 0
elementId: "hover"
elementId: hoverElement
}
},
State {
@ -71,7 +74,7 @@ Item {
PropertyChanges {
target: hover
opacity: 1
elementId: "hover"
elementId: hoverElement
}
},
State {
@ -83,7 +86,7 @@ Item {
PropertyChanges {
target: hover
opacity: 1
elementId: "focus"
elementId: focusElement
}
},
State {
@ -95,7 +98,7 @@ Item {
PropertyChanges {
target: hover
opacity: 0
elementId: "hover"
elementId: hoverElement
}
}
]

View File

@ -40,7 +40,7 @@ Item {
property bool updateValueWhileDragging: true
property real handleSize: 22
// Convinience API
// Convenience API
property bool _isVertical: orientation == Qt.Vertical
width: _isVertical ? 22 : 200
@ -109,8 +109,8 @@ Item {
value: 0
stepSize: 0.0
inverted: false
positionAtMinimum: 0 + handle.width / 2
positionAtMaximum: contents.width - handle.width / 2
positionAtMinimum: 0
positionAtMaximum: contents.width - handle.width
}
PlasmaCore.Svg {
@ -134,51 +134,26 @@ Item {
imagePath: "widgets/slider"
prefix: "groove-highlight"
height: groove.height
width: inverted ? groove.width - handle.x : fakeHandle.x
width: inverted ? groove.width - handle.x : fakeHandle.x + handle.width/2
x: inverted ? handle.x : 0
anchors.verticalCenter: parent.verticalCenter
visible: range.position > 0 && slider.enabled
}
PlasmaCore.SvgItem {
id: focus
transform: Translate { x: - handle.width / 2 }
anchors {
fill: handle
margins: -1 // Hardcoded
}
opacity: slider.activeFocus ? 1 : 0
svg: PlasmaCore.Svg { imagePath: "widgets/slider" }
elementId: "horizontal-slider-hover"
Behavior on opacity {
PropertyAnimation { duration: 250 }
}
}
PlasmaCore.SvgItem {
id: hover
transform: Translate { x: - handle.width / 2 }
anchors {
fill: handle
margins: -2 // Hardcoded
}
opacity: 0
svg: PlasmaCore.Svg { imagePath: "widgets/slider" }
elementId: "horizontal-slider-hover"
Behavior on opacity {
PropertyAnimation { duration: 250 }
}
RoundShadow {
id: shadow
imagePath: "widgets/slider"
focusElement: "horizontal-slider-focus"
hoverElement: "horizontal-slider-hover"
shadowElement: "horizontal-slider-shadow"
state: slider.activeFocus ? "focus" : (mouseArea.containsMouse ? "hover" : "hidden")
anchors.fill: handle
}
PlasmaCore.SvgItem {
id: handle
transform: Translate { x: - handle.width / 2 }
x: fakeHandle.x
anchors {
verticalCenter: groove.verticalCenter
@ -203,7 +178,6 @@ Item {
id: fakeHandle
width: handle.width
height: handle.height
transform: Translate { x: - handle.width / 2 }
}
MouseArea {
@ -219,33 +193,25 @@ Item {
}
hoverEnabled: true
onEntered: {
hover.opacity = 1;
}
onExited: {
if (!pressed)
hover.opacity = 0;
}
onPressed: {
// Clamp the value
var newX = Math.max(mouse.x, drag.minimumX);
newX = Math.min(newX, drag.maximumX);
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;
if (Math.abs(newX - fakeHandle.x) > handle.width / 2) {
range.position = newX
}
slider.forceActiveFocus();
slider.forceActiveFocus()
}
onReleased: {
// If we don't update while dragging, this is the only
// moment that the range is updated.
if (!slider.updateValueWhileDragging)
range.position = fakeHandle.x;
if (!containsMouse)
hover.opacity = 0;
if (!slider.updateValueWhileDragging) {
range.position = fakeHandle.x
}
}
}
}