status-desktop/ui/imports/shared/controls/chat/LinkPreviewMiniCard.qml

250 lines
9.2 KiB
QML

import QtQuick 2.15
import QtQuick.Layouts 1.15
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
import shared 1.0
import utils 1.0
CalloutCard {
id: root
enum State {
Invalid,
Loading,
LoadingFailed,
Loaded
}
enum Type {
Link,
Image,
Community,
Channel,
User
}
required property string titleStr
required property string domain
required property string communityName
required property string channelName
required property url favIconUrl
required property url thumbnailImageUrl
required property int previewState
required property int type
readonly property bool containsMouse: mouseArea.hovered || reloadButton.hovered || closeButton.hovered
signal close()
signal retry()
signal clicked(var eventPoint)
implicitWidth: 260
implicitHeight: 64
verticalPadding: 15
horizontalPadding: 12
borderColor: Theme.palette.directColor7
backgroundColor: root.containsMouse ? Theme.palette.directColor7 : Theme.palette.baseColor4
// behavior
states: [
State {
name: "invalid"
when: root.previewState === LinkPreviewMiniCard.State.Invalid
PropertyChanges {
target: root
visible: false
}
},
State {
name: "loading"
when: root.previewState === LinkPreviewMiniCard.State.Loading
PropertyChanges { target: root; visible: true; dashedBorder: true; }
PropertyChanges { target: loadingAnimation; visible: true; }
PropertyChanges { target: titleText; text: qsTr("Generating preview..."); color: Theme.palette.baseColor1 }
PropertyChanges { target: subtitleText; visible: false; }
PropertyChanges { target: reloadButton; visible: false; }
},
State {
name: "loadingFailed"
when: root.previewState === LinkPreviewMiniCard.State.LoadingFailed
PropertyChanges { target: root; visible: true; dashedBorder: true; }
PropertyChanges { target: loadingAnimation; visible: false; }
PropertyChanges { target: titleText; text: qsTr("Failed to generate preview"); color: Theme.palette.directColor1 }
PropertyChanges { target: subtitleText; visible: false; }
PropertyChanges { target: reloadButton; visible: true; }
},
State {
name: "loaded"
when: root.previewState === LinkPreviewMiniCard.State.Loaded && root.type === LinkPreviewMiniCard.Type.Link
PropertyChanges {
target: root; visible: true; dashedBorder: false; borderWidth: 0;
backgroundColor: root.containsMouse ? Theme.palette.directColor8 : Theme.palette.indirectColor1;
borderColor: backgroundColor;
}
PropertyChanges { target: loadingAnimation; visible: false; }
PropertyChanges { target: titleText; text: root.titleStr; color: Theme.palette.directColor1 }
PropertyChanges { target: subtitleText; visible: true; }
PropertyChanges { target: reloadButton; visible: false; }
PropertyChanges { target: favIcon; visible: true }
},
State {
name: "loadedImage"
when: root.previewState === LinkPreviewMiniCard.State.Loaded && root.type === LinkPreviewMiniCard.Type.Image
extend: "loaded"
PropertyChanges { target: thumbnailImage; visible: root.thumbnailImageUrl != "" }
PropertyChanges { target: favIcon; visible: true; name: root.domain; asset.isLetterIdenticon: true; asset.color: Theme.palette.baseColor2; }
},
State {
name: "loadedCommunity"
when: root.previewState === LinkPreviewMiniCard.State.Loaded && root.type === LinkPreviewMiniCard.Type.Community
extend: "loaded"
PropertyChanges { target: titleText; text: root.communityName; }
},
State {
name: "loadedChannel"
when: root.previewState === LinkPreviewMiniCard.State.Loaded && root.type === LinkPreviewMiniCard.Type.Channel
extend: "loaded"
PropertyChanges { target: titleText; text: root.communityName; Layout.fillWidth: false; Layout.maximumWidth: Math.min(92, implicitWidth); }
PropertyChanges { target: secondTitleText; text: root.channelName; visible: true; }
},
State {
name: "loadedUser"
when: root.previewState === LinkPreviewMiniCard.State.Loaded && root.type === LinkPreviewMiniCard.Type.User
extend: "loaded"
PropertyChanges {
target: favIcon
visible: true
name: root.titleStr
asset.isLetterIdenticon: true
asset.charactersLen: 2
asset.color: Theme.palette.miscColor9
}
}
]
contentItem: Item {
implicitHeight: layout.implicitHeight
implicitWidth: layout.implicitWidth
RowLayout {
id: layout
anchors.fill: parent
spacing: 0
LoadingAnimation {
id: loadingAnimation
Layout.alignment: Qt.AlignVCenter
Layout.margins: 4
visible: false
}
StatusSmartIdenticon {
id: favIcon
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
Layout.topMargin: 1
Layout.preferredWidth: 16
Layout.preferredHeight: 16
visible: false
name: root.titleStr
asset.name: root.favIconUrl
asset.letterSize: asset.charactersLen == 1 ? 10 : 7
}
ColumnLayout {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.leftMargin: 8
spacing: 0
RowLayout {
id: titleRow
Layout.fillWidth: true
Layout.fillHeight: true
spacing: 0
StatusBaseText {
id: titleText
text: root.titleStr
Layout.fillWidth: true
Layout.fillHeight: true
font.pixelSize: Style.current.additionalTextSize
font.weight: Font.Medium
wrapMode: Text.Wrap
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
maximumLineCount: 1
}
StatusIcon {
id: secondTitleIcon
width: 16
height: 16
icon: "tiny/chevron-right"
color: Theme.palette.baseColor1
visible: secondTitleText.visible
}
StatusBaseText {
id: secondTitleText
Layout.fillWidth: true
Layout.fillHeight: true
font.pixelSize: Style.current.additionalTextSize
font.weight: Font.Medium
wrapMode: Text.Wrap
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
maximumLineCount: 1
visible: false
}
}
StatusBaseText {
id: subtitleText
Layout.fillWidth: true
Layout.fillHeight: true
font.pixelSize: Style.current.tertiaryTextFontSize
color: Theme.palette.baseColor1
text: root.domain
wrapMode: Text.WordWrap
elide: Text.ElideRight
}
}
StatusRoundedImage {
id: thumbnailImage
Layout.alignment: Qt.AlignRight
Layout.rightMargin: 4
implicitWidth: 34
implicitHeight: 34
radius: 4
image.source: root.thumbnailImageUrl
visible: false
}
StatusFlatButton {
id: reloadButton
icon.name: "refresh"
size: StatusBaseButton.Size.Small
hoverColor: Theme.palette.directColor8
textColor: Theme.palette.directColor1
onClicked: root.retry()
}
StatusFlatButton {
id: closeButton
icon.name: "close"
size: StatusBaseButton.Size.Small
hoverColor: Theme.palette.directColor8
textColor: Theme.palette.directColor1
onClicked: root.close()
}
}
}
HoverHandler {
id: mouseArea
target: background
cursorShape: Qt.PointingHandCursor
}
TapHandler {
id: tapHandler
target: background
onTapped: root.clicked(eventPoint)
}
}