65 lines
1.9 KiB
QML
65 lines
1.9 KiB
QML
// A pill-shaped button, for the places a row's trailing slot needs several
|
|
// small targets rather than one.
|
|
//
|
|
// Two of them exist on the Applications page and they want the same shape: the
|
|
// catalog's category filter, where one chip is active and the rest are not, and
|
|
// the per-application "elsewhere in Settings" links, where none is. `active`
|
|
// covers the first case; leaving it false gives the second.
|
|
//
|
|
// SettingsButton stays the control for a row's primary action -- it is taller,
|
|
// squarer, and reads as a button. A chip reads as a tag you can press.
|
|
|
|
import QtQuick
|
|
import qs.config
|
|
|
|
Rectangle {
|
|
id: root
|
|
|
|
property string text: ""
|
|
property bool active: false
|
|
|
|
signal clicked
|
|
|
|
implicitWidth: caption.implicitWidth + 22
|
|
implicitHeight: 26
|
|
radius: Theme.pillRadius
|
|
opacity: root.enabled ? 1 : 0.45
|
|
color: root.active
|
|
? Theme.alpha(Theme.accent, 0.14)
|
|
: Theme.alpha(Theme.fg, chipHover.hovered ? 0.12 : 0.055)
|
|
border.width: root.activeFocus || root.active ? 2 : 1
|
|
border.color: root.activeFocus
|
|
? Theme.accentSecondary
|
|
: (root.active ? Theme.alpha(Theme.accent, 0.5) : Theme.alpha(Theme.fg, 0.1))
|
|
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.onSpacePressed: root.clicked()
|
|
|
|
Text {
|
|
id: caption
|
|
|
|
anchors.centerIn: parent
|
|
text: root.text
|
|
color: root.active ? Theme.fg : Theme.fgDim
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSizeSmall
|
|
font.weight: Font.Medium
|
|
}
|
|
|
|
HoverHandler {
|
|
id: chipHover
|
|
cursorShape: Qt.PointingHandCursor
|
|
}
|
|
|
|
TapHandler {
|
|
onTapped: root.clicked()
|
|
}
|
|
}
|