status-desktop/ui/imports/shared/controls/delegates/InfoCard.qml

158 lines
4.9 KiB
QML

import QtQuick 2.14
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.0
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import AppLayouts.Wallet.controls 1.0
import utils 1.0
Control {
id: root
padding: 12
property bool highlight: false
property string title: ""
property string subTitle: ""
property string tagIcon: ""
property var enabledNetworks
property bool loading: false
property alias rightSideButtons: rightSideButtonsLoader.sourceComponent
signal clicked(var mouse)
signal communityTagClicked(var mouse)
property StatusAssetSettings asset: StatusAssetSettings {
height: 32
width: 32
bgRadius: bgWidth / 2
}
background: Rectangle {
id: background
anchors.fill: parent
color: Style.current.background
radius: Style.current.radius
border.width: 1
border.color: Theme.palette.baseColor2
layer.enabled: mouseArea.containsMouse || root.highlight
layer.effect: DropShadow {
source: background
horizontalOffset: 0
verticalOffset: 2
radius: 16
samples: 25
spread: 0
color: Theme.palette.backdropColor
}
}
contentItem: Item {
MouseArea {
id: mouseArea
anchors.fill: parent
acceptedButtons: Qt.LeftButton|Qt.RightButton
hoverEnabled: true
onClicked: {
root.clicked(mouse);
}
}
ColumnLayout {
id: titleColumn
anchors.fill: parent
spacing: 0
RowLayout {
Layout.fillWidth: true
Layout.preferredHeight: root.asset.height
StatusSmartIdenticon {
asset: root.asset
active: ((root.asset.isLetterIdenticon ||
!!root.asset.name ||
!!root.asset.emoji) && !root.showLoadingIndicator)
loading: root.loading
}
Item { Layout.fillWidth: true }
Loader {
id: rightSideButtonsLoader
Layout.alignment: Qt.AlignRight | Qt.AlignTop
}
}
StatusTextWithLoadingState {
Layout.fillWidth: true
Layout.preferredHeight: 22
Layout.topMargin: Style.current.halfPadding
text: root.title
elide: Text.ElideRight
font.weight: Font.Medium
loading: root.loading
}
StatusTextWithLoadingState {
id: statusListItemSubTitle
objectName: "statusListItemSubTitle"
Layout.fillWidth: true
Layout.preferredHeight: 16
text: root.subTitle
font.pixelSize: Style.current.tertiaryTextFontSize
lineHeight: 16
customColor: !root.enabled || !root.tertiaryTitle ?
Theme.palette.baseColor1 : Theme.palette.directColor1
visible: !!root.subTitle
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
loading: root.loading
maximumLineCount: 3
elide: Text.ElideRight
}
Item { Layout.fillHeight: true }
Row {
Layout.fillWidth: true
Layout.preferredHeight: 20
spacing: -4
visible: (chainRepeater.count > 0)
Repeater {
id: chainRepeater
model: root.enabledNetworks
delegate: StatusRoundedComponent {
width: 20
height: 20
visible: model.iconUrl !== ""
color: Theme.palette.baseColor3
z: index + 1
border.color: Style.current.background
StatusIcon {
anchors.fill:parent
anchors.margins: 1
icon: Style.svg(model.iconUrl)
}
}
}
}
ManageTokensCommunityTag {
Layout.preferredWidth: 24
Layout.preferredHeight: 24
horizontalPadding: 2
verticalPadding: 0
spacing: 0
visible: !!root.tagIcon
communityImage: root.tagIcon
asset.width: 20
asset.height: 20
MouseArea {
anchors.fill: parent
onClicked: {
root.communityTagClicked(mouse);
}
}
}
}
}
}