108 lines
2.8 KiB
QML
108 lines
2.8 KiB
QML
import QtQuick
|
|
import "root:/config"
|
|
import "root:/components"
|
|
|
|
// Shared chrome for every bar module: a leaning slab that lifts and lights up
|
|
// under the pointer, and forwards clicks and scrolls to the widget.
|
|
Item {
|
|
id: root
|
|
|
|
property color accent: Theme.primary
|
|
property bool active: false
|
|
property bool slash: false
|
|
property real lean: Theme.skew
|
|
property real padding: Theme.padM
|
|
property bool interactive: true
|
|
property bool halftone: false
|
|
|
|
readonly property bool hovered: hover.hovered
|
|
readonly property real leanInset: panel.leanInset
|
|
|
|
// Total horizontal inset a pill must add on top of its content width.
|
|
readonly property real contentPad: panel.contentPad
|
|
readonly property alias panelItem: panel
|
|
|
|
default property alias content: holder.data
|
|
|
|
signal clicked()
|
|
signal rightClicked()
|
|
signal middleClicked()
|
|
signal scrolled(real delta)
|
|
|
|
implicitHeight: Theme.barHeight
|
|
|
|
P5Panel {
|
|
id: panel
|
|
anchors.fill: parent
|
|
lean: root.lean
|
|
padding: root.padding
|
|
halftone: root.halftone
|
|
halftoneColor: root.accent
|
|
sheen: true
|
|
|
|
fill: root.active ? Theme.surfaceAlt : Theme.surface
|
|
fillOpacity: root.hovered ? 0.98 : 0.88
|
|
border: root.hovered || root.active
|
|
? Theme.alpha(root.accent, 0.9)
|
|
: Theme.alpha(Theme.outline, 0.7)
|
|
borderWidth: root.hovered || root.active ? Theme.stroke : 1
|
|
|
|
slash: root.slash || root.active
|
|
slashColor: root.accent
|
|
|
|
Behavior on fillOpacity {
|
|
NumberAnimation { duration: Theme.durFast }
|
|
}
|
|
Behavior on border {
|
|
ColorAnimation { duration: Theme.durBase }
|
|
}
|
|
|
|
Item {
|
|
id: holder
|
|
anchors.fill: parent
|
|
}
|
|
}
|
|
|
|
// Lift toward the pointer. Subtle, but it makes the bar feel alive.
|
|
transform: Translate {
|
|
y: root.hovered && root.interactive ? -2 : 0
|
|
|
|
Behavior on y {
|
|
NumberAnimation {
|
|
duration: Theme.durBase
|
|
easing.type: Easing.OutBack
|
|
}
|
|
}
|
|
}
|
|
|
|
HoverHandler {
|
|
id: hover
|
|
enabled: root.interactive
|
|
cursorShape: Qt.PointingHandCursor
|
|
}
|
|
|
|
TapHandler {
|
|
enabled: root.interactive
|
|
acceptedButtons: Qt.LeftButton
|
|
onTapped: root.clicked()
|
|
}
|
|
|
|
TapHandler {
|
|
enabled: root.interactive
|
|
acceptedButtons: Qt.RightButton
|
|
onTapped: root.rightClicked()
|
|
}
|
|
|
|
TapHandler {
|
|
enabled: root.interactive
|
|
acceptedButtons: Qt.MiddleButton
|
|
onTapped: root.middleClicked()
|
|
}
|
|
|
|
WheelHandler {
|
|
enabled: root.interactive
|
|
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
|
|
onWheel: event => root.scrolled(event.angleDelta.y)
|
|
}
|
|
}
|