use roundshadow for sliders
This commit is contained in:
parent
c644d41709
commit
2e5afa765b
@ -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
|
||||
}
|
||||
}
|
||||
]
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user