import QtQuick import QtQuick.Effects import "." as M Item { id: root default property alias content: row.children property color borderColor: M.Theme.base02 visible: row.visibleChildren.length > 0 implicitWidth: row.implicitWidth + _pad * 2 implicitHeight: M.Theme.barHeight - 3 - _pad readonly property int _pad: 6 // Shadow source — rendered offscreen, only its glow is visible Rectangle { id: shadowSource anchors.fill: parent color: "transparent" border.color: root.borderColor border.width: 1 radius: M.Theme.radius visible: false } MultiEffect { source: shadowSource anchors.fill: shadowSource shadowEnabled: true shadowColor: root.borderColor shadowBlur: 1.0 shadowVerticalOffset: 0 shadowHorizontalOffset: 0 } // Solid background Rectangle { anchors.fill: parent radius: M.Theme.radius color: M.Theme.base01 } // Accent gradient overlay Rectangle { anchors.fill: parent radius: M.Theme.radius gradient: Gradient { GradientStop { position: 0 color: Qt.rgba(root.borderColor.r, root.borderColor.g, root.borderColor.b, 0.15) } GradientStop { position: 1 color: "transparent" } } } // Visible border Rectangle { anchors.fill: parent color: "transparent" border.color: root.borderColor border.width: 1 radius: M.Theme.radius } Row { id: row anchors.centerIn: parent spacing: M.Theme.moduleSpacing + 2 } // Separator lines overlaid between visible row children Repeater { model: row.visibleChildren.length > 1 ? row.visibleChildren.length - 1 : 0 delegate: Rectangle { required property int index readonly property Item _left: row.visibleChildren[index] readonly property real _rightEdge: _left ? _left.x + _left.width : 0 x: row.x + _rightEdge + row.spacing / 2 y: root._pad width: 1 height: row.implicitHeight color: Qt.rgba(root.borderColor.r, root.borderColor.g, root.borderColor.b, 0.4) } } }