status-desktop/ui/app/AppLayouts/Chat/controls/community/ListDropdownContent.qml

127 lines
4.4 KiB
QML

import QtQuick 2.13
import QtQuick.Layouts 1.14
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
StatusListView {
id: root
property var headerModel
property bool isHeaderVisible: true
property int maxHeight: 381 // default by design
signal headerItemClicked(string key)
signal itemClicked(var key, string name, var shortName, url iconSource, var subItems)
implicitWidth: 273
implicitHeight: Math.min(contentHeight, root.maxHeight)
currentIndex: -1
clip: true
header: Rectangle {
visible: root.isHeaderVisible
z: 3 // Above delegate (z=1) and above section.delegate (z = 2)
color: Theme.palette.statusPopupMenu.backgroundColor
width: root.width
height: root.isHeaderVisible ? columnHeader.implicitHeight + 2 * columnHeader.anchors.topMargin : 0
ColumnLayout {
id: columnHeader
anchors.top: parent.top
anchors.left: parent.left
anchors.leftMargin: 6
anchors.rightMargin: anchors.leftMargin
anchors.topMargin: 8
anchors.bottomMargin: 2 * anchors.topMargin
spacing: 20
Repeater {
model: root.headerModel
delegate: StatusIconTextButton {
z: 3 // Above delegate (z=1) and above section.delegate (z = 2)
spacing: model.spacing
statusIcon: model.icon
icon.width: model.iconSize
icon.height: model.iconSize
iconRotation: model.rotation
text: model.description
onClicked: root.headerItemClicked(model.index)
}
}
}
}// End of Header
delegate: Rectangle {
width: ListView.view.width
height: 45 // by design
color: mouseArea.containsMouse ? Theme.palette.baseColor4 : "transparent"
RowLayout {
anchors.fill: parent
anchors.leftMargin: 6
spacing: 8
StatusRoundedImage {
Layout.alignment: Qt.AlignVCenter
image.source: model.iconSource
visible: model.iconSource.toString() !== ""
Layout.preferredWidth: 32
Layout.preferredHeight: Layout.preferredWidth
}
ColumnLayout {
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
spacing: 0
StatusBaseText {
Layout.fillWidth: true
text: model.name
color: Theme.palette.directColor1
font.pixelSize: 13
clip: true
elide: Text.ElideRight
}
StatusBaseText {
visible: !!model.shortName
Layout.fillWidth: true
text: !!model.shortName ? model.shortName : ""
color: Theme.palette.baseColor1
font.pixelSize: 12
clip: true
elide: Text.ElideRight
}
}
StatusIcon {
icon: "tiny/chevron-right"
visible: !!model.subItems && model.subItems.count > 0
Layout.alignment: Qt.AlignVCenter
Layout.rightMargin: 16
color: Theme.palette.baseColor1
width: 16
height: 16
}
}
MouseArea {
id: mouseArea
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onClicked: { root.itemClicked(model.key, model.name, model.shortName, model.iconSource, model.subItems) }
}
}// End of Item
section.property: "category"
section.criteria: ViewSection.FullString
section.delegate: Item {
width: ListView.view.width
height: 34 // by design
StatusBaseText {
anchors.leftMargin: 8
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
text: section
color: Theme.palette.baseColor1
font.pixelSize: 12
elide: Text.ElideRight
}
}// End of Category item
}// End of Root