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

support for round buttons

Browse Source
This commit is contained in:
Marco Martin 2014-07-25 14:40:13 +02:00
parent a3266857ad
commit c8cb89faa9
1 changed files with 135 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

211
src/declarativeimports/plasmacomponents/qml/styles/ToolButtonStyle.qml
View File

@ -102,101 +102,160 @@ QtQuickControlStyle.ButtonStyle {
} }
} }
background: Item { background: {
if (control.text.length == 0 && control.width == control.height && (control.parent && control.parent.checkedButton === undefined) && !control.flat) {
return roundButtonComponent
} else {
return buttonComponent
}
}
implicitHeight: Math.floor(Math.max(theme.mSize(theme.defaultFont).height*1.6, style.minimumHeight)) Component {
id: roundButtonComponent
Item {
id: roundButtonDelegate
anchors.fill: parent
property QtObject margins: QtObject {
property int left: delegate.width/8
property int top: delegate.width/8
property int right: delegate.width/8
property int bottom: delegate.width/8
}
property alias hasOverState: roundShadow.hasOverState
Private.RoundShadow {
id: roundShadow
visible: !flat
anchors.fill: parent
state: {
if (control.pressed) {
return "hidden"
} else if (control.hovered) {
return "hover"
} else if (control.activeFocus) {
return "focus"
} else {
return "shadow"
}
}
}
implicitWidth: { PlasmaCore.Svg {
if (control.text.length == 0) { id: buttonSvg
height; imagePath: "widgets/actionbutton"
} else { }
Math.max(theme.mSize(theme.defaultFont).width*12, style.minimumWidth);
PlasmaCore.SvgItem {
id: buttonItem
svg: buttonSvg
elementId: (control.pressed || control.checked) ? "pressed" : "normal"
width: Math.floor(parent.height/2) * 2
height: width
//internal: if there is no hover status, don't paint on mouse over in touchscreens
opacity: (control.pressed || control.checked || !control.flat || (roundShadow.hasOverState && mouse.containsMouse)) ? 1 : 0
Behavior on opacity {
PropertyAnimation { duration: units.longDuration }
}
} }
} }
}
Private.ButtonShadow { Component {
anchors.fill: parent id: buttonComponent
state: { Item {
if (control.pressed) { implicitHeight: Math.floor(Math.max(theme.mSize(theme.defaultFont).height*1.6, style.minimumHeight))
return "hidden"
} else if (control.hovered) { implicitWidth: {
return "hover" if (control.text.length == 0) {
} else if (control.activeFocus) { height;
return "focus"
} else { } else {
return "shadow" Math.max(theme.mSize(theme.defaultFont).width*12, style.minimumWidth);
} }
} }
}
Private.ButtonShadow {
//This code is duplicated here and Button and ToolButton anchors.fill: parent
//maybe we can make an AbstractButton class? state: {
PlasmaCore.FrameSvgItem { if (control.pressed) {
id: surfaceNormal return "hidden"
anchors.fill: parent } else if (control.hovered) {
imagePath: "widgets/button" return "hover"
prefix: "normal" } else if (control.activeFocus) {
} return "focus"
} else {
PlasmaCore.FrameSvgItem { return "shadow"
id: surfacePressed }
anchors.fill: parent
imagePath: "widgets/button"
prefix: "pressed"
opacity: 0
}
state: (control.pressed || control.checked ? "pressed" : (control.hovered ? "hover" : "normal"))
states: [
State { name: "normal"
PropertyChanges {
target: surfaceNormal
opacity: control.flat ? 0 : 1
} }
PropertyChanges { }
target: surfacePressed
opacity: 0
} //This code is duplicated here and Button and ToolButton
}, //maybe we can make an AbstractButton class?
State { name: "hover" PlasmaCore.FrameSvgItem {
PropertyChanges { id: surfaceNormal
target: surfaceNormal anchors.fill: parent
opacity: 1 imagePath: "widgets/button"
} prefix: "normal"
PropertyChanges { }
target: surfacePressed
opacity: 0 PlasmaCore.FrameSvgItem {
} id: surfacePressed
}, anchors.fill: parent
State { name: "pressed" imagePath: "widgets/button"
prefix: "pressed"
opacity: 0
}
state: (control.pressed || control.checked ? "pressed" : (control.hovered ? "hover" : "normal"))
states: [
State { name: "normal"
PropertyChanges { PropertyChanges {
target: surfaceNormal target: surfaceNormal
opacity: 0 opacity: control.flat ? 0 : 1
} }
PropertyChanges { PropertyChanges {
target: surfacePressed target: surfacePressed
opacity: 0
}
},
State { name: "hover"
PropertyChanges {
target: surfaceNormal
opacity: 1 opacity: 1
} }
} PropertyChanges {
] target: surfacePressed
opacity: 0
transitions: [ }
Transition { },
//Cross fade from pressed to normal State { name: "pressed"
ParallelAnimation { PropertyChanges {
NumberAnimation { target: surfaceNormal; property: "opacity"; duration: 100 } target: surfaceNormal
NumberAnimation { target: surfacePressed; property: "opacity"; duration: 100 } opacity: 0
}
PropertyChanges {
target: surfacePressed
opacity: 1
}
} }
} ]
]
Component.onCompleted: { transitions: [
padding.top = surfaceNormal.margins.top Transition {
padding.left = surfaceNormal.margins.left //Cross fade from pressed to normal
padding.right = surfaceNormal.margins.right ParallelAnimation {
padding.bottom = surfaceNormal.margins.bottom NumberAnimation { target: surfaceNormal; property: "opacity"; duration: 100 }
NumberAnimation { target: surfacePressed; property: "opacity"; duration: 100 }
}
}
]
Component.onCompleted: {
padding.top = surfaceNormal.margins.top
padding.left = surfaceNormal.margins.left
padding.right = surfaceNormal.margins.right
padding.bottom = surfaceNormal.margins.bottom
}
} }
} }
} }