76 lines
2.5 KiB
QML
76 lines
2.5 KiB
QML
import QtQuick
|
|
import qs.config
|
|
|
|
Rectangle {
|
|
id: root
|
|
|
|
property string text: ""
|
|
// "normal", "accent", or "danger". Danger is for an action that cannot be
|
|
// undone -- it never initiates one on a single press, it marks the press
|
|
// that confirms it, so the confirming button cannot be mistaken for the
|
|
// Cancel sitting next to it.
|
|
property string tone: "normal"
|
|
property bool enabled: true
|
|
signal clicked
|
|
|
|
implicitWidth: label.implicitWidth + 22
|
|
implicitHeight: 31
|
|
radius: 9
|
|
opacity: enabled ? 1 : 0.45
|
|
|
|
// The keyboard half of this component's own contract. Eleven files used
|
|
// to bolt these on by hand while the other hundred-odd instantiations --
|
|
// including every confirming button in every destructive flow -- were
|
|
// pointer-only. The button carries them itself now, so a consumer cannot
|
|
// forget them.
|
|
activeFocusOnTab: root.enabled
|
|
Accessible.role: Accessible.Button
|
|
Accessible.name: root.text
|
|
Accessible.focusable: root.enabled
|
|
Accessible.focused: root.activeFocus
|
|
Accessible.onPressAction: root.clicked()
|
|
Keys.onReturnPressed: root.clicked()
|
|
Keys.onEnterPressed: root.clicked()
|
|
Keys.onSpacePressed: root.clicked()
|
|
|
|
Rectangle {
|
|
anchors.fill: parent
|
|
anchors.margins: -3
|
|
radius: parent.radius + 3
|
|
visible: root.activeFocus
|
|
color: "transparent"
|
|
border.width: 2
|
|
border.color: Theme.accentSecondary
|
|
}
|
|
color: {
|
|
if (tone === "accent")
|
|
return mouse.containsMouse ? Theme.mix(Theme.accent, Theme.fg, 0.12) : Theme.accent;
|
|
if (tone === "danger")
|
|
return mouse.containsMouse ? Theme.alpha(Theme.danger, 0.22) : Theme.alpha(Theme.danger, 0.12);
|
|
return mouse.containsMouse ? Theme.alpha(Theme.fg, 0.13) : Theme.alpha(Theme.fg, 0.075);
|
|
}
|
|
border.width: tone === "accent" ? 0 : 1
|
|
border.color: tone === "danger" ? Theme.alpha(Theme.danger, 0.45) : Theme.alpha(Theme.fg, 0.08)
|
|
|
|
Text {
|
|
id: label
|
|
anchors.centerIn: parent
|
|
text: root.text
|
|
color: root.tone === "accent"
|
|
? Theme.bgDark
|
|
: (root.tone === "danger" ? Theme.danger : Theme.fg)
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSizeSmall
|
|
font.weight: Font.Medium
|
|
}
|
|
|
|
MouseArea {
|
|
id: mouse
|
|
anchors.fill: parent
|
|
enabled: root.enabled
|
|
hoverEnabled: true
|
|
cursorShape: Qt.PointingHandCursor
|
|
onClicked: root.clicked()
|
|
}
|
|
}
|