85 lines
3.0 KiB
QML
85 lines
3.0 KiB
QML
import QtQuick
|
|
import QtQuick.Controls.Basic
|
|
|
|
// Glossy pill, 40px. variant: "filled" | "tonal" | "text". Cyan glow on hover.
|
|
Button {
|
|
id: b
|
|
property string iconName: ""
|
|
property string variant: "filled"
|
|
property color tone: Theme.primary
|
|
property int pillHeight: 40
|
|
readonly property bool filled: variant === "filled"
|
|
readonly property bool tonal: variant === "tonal"
|
|
readonly property color fg: filled ? "#FFFFFF" : (variant === "text" ? tone : Theme.textHi)
|
|
|
|
implicitHeight: pillHeight
|
|
implicitWidth: Math.max(pillHeight, row.implicitWidth + leftPadding + rightPadding)
|
|
leftPadding: text.length ? (iconName.length ? 14 : 18) : 0
|
|
rightPadding: text.length ? 18 : 0
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fs14
|
|
font.weight: Font.DemiBold
|
|
hoverEnabled: true
|
|
focusPolicy: Qt.TabFocus
|
|
opacity: enabled ? 1 : 0.4
|
|
|
|
contentItem: Item {
|
|
implicitWidth: row.implicitWidth
|
|
implicitHeight: row.implicitHeight
|
|
Row {
|
|
id: row
|
|
anchors.centerIn: parent
|
|
spacing: 8
|
|
Icon {
|
|
visible: b.iconName.length > 0
|
|
name: b.iconName
|
|
color: b.fg
|
|
size: 18
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
}
|
|
Txt {
|
|
visible: b.text.length > 0
|
|
text: b.text
|
|
font: b.font
|
|
color: b.fg
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
}
|
|
}
|
|
}
|
|
|
|
background: Item {
|
|
implicitHeight: b.pillHeight
|
|
Glow {
|
|
radius: Math.round(b.pillHeight / 2)
|
|
opacity: (b.hovered || b.visualFocus) && b.enabled ? (b.filled ? 0.55 : 0.35) : 0
|
|
}
|
|
Rectangle {
|
|
id: base
|
|
anchors.fill: parent
|
|
radius: height / 2
|
|
color: b.filled ? b.tone : (b.tonal ? Theme.alpha(b.tone, 0.16) : "transparent")
|
|
border.width: b.variant === "text" ? 0 : 1
|
|
border.color: b.filled ? Qt.lighter(b.tone, 1.3) : Theme.alpha(b.tone, 0.35)
|
|
|
|
// Aero gloss on the top half
|
|
Rectangle {
|
|
visible: b.variant !== "text"
|
|
anchors { left: parent.left; right: parent.right; top: parent.top; margins: 1 }
|
|
height: (parent.height - 2) / 2
|
|
topLeftRadius: height
|
|
topRightRadius: height
|
|
gradient: Gradient {
|
|
GradientStop { position: 0; color: Qt.rgba(1, 1, 1, b.filled ? 0.32 : 0.10) }
|
|
GradientStop { position: 1; color: Qt.rgba(1, 1, 1, b.filled ? 0.06 : 0.0) }
|
|
}
|
|
}
|
|
Rectangle {
|
|
anchors.fill: parent
|
|
radius: parent.radius
|
|
color: b.down ? Qt.rgba(0, 0, 0, 0.18) : (b.hovered ? Qt.rgba(1, 1, 1, 0.07) : "transparent")
|
|
Behavior on color { ColorAnimation { duration: Theme.fast } }
|
|
}
|
|
}
|
|
}
|
|
}
|