100 lines
2.6 KiB
QML
100 lines
2.6 KiB
QML
import QtQuick
|
|
import "../services" as S
|
|
|
|
// Collapsible card for the applet dock.
|
|
// Set icon, title, and place applet content as children.
|
|
Rectangle {
|
|
id: root
|
|
|
|
property string icon: ""
|
|
property string title: ""
|
|
property bool expanded: false
|
|
property color accentColor: S.Theme.base0C
|
|
|
|
default property alias content: _contentColumn.children
|
|
|
|
width: parent?.width ?? 300
|
|
height: _header.height + (_contentColumn.visible ? _contentColumn.height : 0)
|
|
radius: S.Theme.radius + 2
|
|
color: Qt.rgba(S.Theme.base01.r, S.Theme.base01.g, S.Theme.base01.b, 0.7)
|
|
border.color: Qt.rgba(S.Theme.base03.r, S.Theme.base03.g, S.Theme.base03.b, 0.3)
|
|
border.width: 1
|
|
clip: true
|
|
|
|
Behavior on height {
|
|
enabled: !S.Theme.reducedMotion
|
|
NumberAnimation {
|
|
duration: 150
|
|
easing.type: Easing.OutCubic
|
|
}
|
|
}
|
|
|
|
// Header
|
|
Item {
|
|
id: _header
|
|
width: parent.width
|
|
height: 28
|
|
|
|
Text {
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: 10
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
text: root.icon
|
|
color: root.accentColor
|
|
font.pixelSize: S.Theme.fontSize
|
|
font.family: S.Theme.iconFontFamily
|
|
}
|
|
|
|
Text {
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: 30
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
text: root.title
|
|
color: S.Theme.base05
|
|
font.pixelSize: S.Theme.fontSize - 1
|
|
font.bold: true
|
|
font.family: S.Theme.fontFamily
|
|
}
|
|
|
|
Text {
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: 10
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
text: root.expanded ? "\uF078" : "\uF054"
|
|
color: S.Theme.base04
|
|
font.pixelSize: S.Theme.fontSize - 2
|
|
font.family: S.Theme.iconFontFamily
|
|
|
|
Behavior on text {
|
|
enabled: false
|
|
}
|
|
}
|
|
|
|
HoverHandler {
|
|
cursorShape: Qt.PointingHandCursor
|
|
}
|
|
|
|
TapHandler {
|
|
onTapped: root.expanded = !root.expanded
|
|
}
|
|
|
|
// Divider
|
|
Rectangle {
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.bottom: parent.bottom
|
|
height: 1
|
|
color: S.Theme.base03
|
|
opacity: root.expanded ? 0.5 : 0
|
|
}
|
|
}
|
|
|
|
// Content area
|
|
Column {
|
|
id: _contentColumn
|
|
anchors.top: _header.bottom
|
|
anchors.topMargin: 4
|
|
width: parent.width
|
|
visible: root.expanded
|
|
}
|
|
}
|