alecs/plasma-framework
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

use roundshadow for sliders

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
declarativeimports/plasmacomponents/qml/RoundShadow.qml
View File

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

76
declarativeimports/plasmacomponents/qml/Slider.qml
View File

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