Files

102 lines
2.8 KiB
QML

pragma ComponentBehavior: Bound
import QtQuick
import qs.Common
import qs.DCommon.Widgets
Item {
id: root
required property var controller
required property string activityId
required property string label
property string value: ""
property string iconName: ""
property color iconColor: Theme.primary
property Component leading: null
readonly property bool isVertical: root.controller.isVertical
function pushMeasuredLength() {
root.controller.setDestinationContentLength(root.activityId, root.isVertical ? compactColumn.implicitHeight : compactRow.implicitWidth);
}
Component.onCompleted: root.pushMeasuredLength()
onIsVerticalChanged: root.pushMeasuredLength()
Row {
id: compactRow
anchors.centerIn: parent
visible: !root.isVertical
spacing: Theme.spacingS
onImplicitWidthChanged: root.pushMeasuredLength()
Loader {
anchors.verticalCenter: parent.verticalCenter
active: !root.isVertical && root.leading !== null
visible: active
sourceComponent: root.leading
}
DIcon {
anchors.verticalCenter: parent.verticalCenter
visible: root.iconName !== ""
name: root.iconName
size: Theme.iconSizeSmall
color: root.iconColor
}
StyledText {
anchors.verticalCenter: parent.verticalCenter
text: root.label
color: Theme.surfaceText
font.pixelSize: Theme.fontSizeMedium
font.weight: Theme.fontWeightMedium
}
StyledText {
anchors.verticalCenter: parent.verticalCenter
visible: root.value !== ""
text: root.value
color: Theme.surfaceTextSecondary
font.pixelSize: Theme.fontSizeMedium
}
}
// The pill is only as wide as the strip on a side edge, so the label is dropped.
Column {
id: compactColumn
anchors.centerIn: parent
visible: root.isVertical
spacing: Theme.spacingXS
onImplicitHeightChanged: root.pushMeasuredLength()
Loader {
anchors.horizontalCenter: parent.horizontalCenter
active: root.isVertical && root.leading !== null
visible: active
sourceComponent: root.leading
}
DIcon {
anchors.horizontalCenter: parent.horizontalCenter
visible: root.iconName !== ""
name: root.iconName
size: Theme.iconSizeSmall
color: root.iconColor
}
StyledText {
anchors.horizontalCenter: parent.horizontalCenter
visible: root.value !== ""
text: root.value
color: Theme.surfaceTextSecondary
font.pixelSize: Theme.fontSizeSmall
}
}
}