status-desktop/storybook/pages/LinkPreviewMiniCardPage.qml

149 lines
4.8 KiB
QML

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import Qt.labs.settings 1.0
import StatusQ.Core.Theme 0.1
import shared.controls 1.0
import shared.controls.chat 1.0
import utils 1.0
SplitView {
id: root
Pane {
SplitView.fillWidth: true
SplitView.fillHeight: true
layer.enabled: true
layer.samples: 4
background: Rectangle {
color: Theme.palette.statusChatInput.secondaryBackgroundColor
}
LinkPreviewMiniCard {
id: previewMiniCard
anchors.centerIn: parent
titleStr: type === LinkPreviewMiniCard.Type.User ? userNameInput.text : titleInput.text
domain: domainInput.text
favIconUrl: faviconInput.text
previewState: stateInput.currentIndex
thumbnailImageUrl: externalImageInput.text
type: previewTypeInput.currentIndex
communityName: communityNameInput.text
channelName: channelNameInput.text
}
}
Pane {
SplitView.preferredWidth: 300
SplitView.fillHeight: true
ColumnLayout {
spacing: 24
ColumnLayout {
Label {
text: "Preview type"
}
ComboBox {
id: previewTypeInput
Layout.fillHeight: true
Layout.fillWidth: true
model: ["link", "image", "community", "channel", "user profile"]
}
Label {
text: "Community name"
}
TextField {
id: communityNameInput
Layout.fillHeight: true
Layout.fillWidth: true
text: "Socks"
}
Label {
text: "Channel name"
}
TextField {
id: channelNameInput
Layout.fillHeight: true
Layout.fillWidth: true
text: "General"
}
Label {
text: "User name"
}
TextField {
id: userNameInput
Layout.fillHeight: true
Layout.fillWidth: true
text: "John Doe"
}
Label {
text: "Title"
}
TextField {
id: titleInput
Layout.fillHeight: true
Layout.fillWidth: true
text: "What Is Web3? A Decentralized Internet Via Blockchain Technology That Will Revolutionise All Sectors- Decrypt (@decryptmedia) August 31 2021"
}
Label {
text: "Domain"
}
TextField {
id: domainInput
Layout.fillHeight: true
Layout.fillWidth: true
text: "rarible.com"
}
Label {
text: "Favicon URL"
}
TextField {
id: faviconInput
Layout.fillHeight: true
Layout.fillWidth: true
text: "https://rarible.com/public/favicon.png"
}
Label {
text: "External image URL"
}
TextField {
id: externalImageInput
Layout.fillHeight: true
Layout.fillWidth: true
text: "https://rarible.com/public/favicon.png"
}
Label {
text: "State"
}
ComboBox {
id: stateInput
Layout.fillHeight: true
Layout.fillWidth: true
model: ["invalid", "loading", "loading failed", "loaded"]
}
}
}
}
Settings {
property alias linkPreviewMiniCardState: stateInput.currentIndex
property alias linkPreviewMiniCardCommunityName: communityNameInput.text
property alias linkPreviewMiniCardChannelName: channelNameInput.text
property alias linkPreviewMiniCardTitle: titleInput.text
property alias linkPreviewMiniCardDomain: domainInput.text
property alias linkPreviewMiniCardFavIconUrl: faviconInput.text
property alias linkPreviewMiniCardThumbnailImageUrl: externalImageInput.text
property alias linkPreviewMiniCardType: previewTypeInput.currentIndex
}
}
//Category: Controls
//"https://www.figma.com/file/Mr3rqxxgKJ2zMQ06UAKiWL/💬-ChatDesktop?type=design&node-id=22341-184809&mode=design&t=VWBVK4DOUxr1BmTp-0"