status-desktop/storybook/pages/LinkPreviewMiniCardPage.qml

174 lines
5.5 KiB
QML
Raw Permalink Normal View History

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
type: previewTypeInput.currentIndex
previewState: stateInput.currentIndex
feat(LinkPreviews): Integrate Link previews with the backend (#12523) * feat(StatusQ): Adding numberToLocaleStringInCompactForm function to LocaleUtils This function will format the number in a compact form E.g: 1000 -> 1K; 1000000 -> 1M; 1100000 -> 1.1M + adding tests fix(statusQ): Update numberToLocaleStringInCompactForm to return the locale number when greter than 999T fix(StatusQ): extend the test_numberToLocaleStringInCompactForm with new data * feat(LinkPreviews): Update the link preview area in StatusChatInput to use the new model Changes: 1. Create a new component `LinkPreviewMiniCardDelegate.qml` that filters the model data to properly fill the link preview card with the needed data based on the preview type 2. Update storybook pages 3. Small updates to LinkPreviewMiniCard * feat(LinkPreviews): Update the link previews in message history to use the new backend Changes: 1. Create delegate items for LinkPreviewCard and gif link preview to clean the LinksMessageView component and filter the model data based on the preview type 2. Remove UserProfileCard and reuse the LinkPreviewCard to display contacts link previews 3. Update LinkPreviewCard so that it can accommodate status link previews (communities, channels, contacts). The generic properties (title, description, footer) have been dropped and replaced with specialised properties for each preview type. 4. Fix LinkPreviewCard layout to better accommodate different content variants (missing properties, long/short title, missing description, missing icon) 5. Fixing the link preview context menu and click actions fix: Move inline components to separate files Fixing the linux builds using Qt 5.15.2 affected by this bug: https://bugreports.qt.io/browse/QTBUG-89180 * fix: Align LinkPreviewMiniCard implementation with LinkPreviewCard and remove state based model filtering
2023-10-25 15:20:02 +00:00
linkData {
title: titleInput.text
description: ""
domain: domainInput.text
thumbnail: externalImageInput.text
image: faviconInput.text
}
userData {
name: userNameInput.text
publicKey: "zQ3shgmVJjmwwhkfAemjDizYJtv9nzot7QD4iRJ52ZkgdU6Ci"
image: faviconInput.text
ensVerified: false
}
communityData {
name: communityNameInput.text
banner: externalImageInput.text
image: faviconInput.text
color: "orchid"
}
channelData {
name: channelNameInput.text
emoji: ""
color: "blue"
communityData {
name: communityNameInput.text
banner: externalImageInput.text
image: faviconInput.text
color: "orchid"
}
}
}
}
Pane {
SplitView.preferredWidth: 300
SplitView.fillHeight: true
ColumnLayout {
spacing: 24
ColumnLayout {
Label {
text: "Preview type"
}
ComboBox {
id: previewTypeInput
Layout.fillHeight: true
Layout.fillWidth: true
feat(LinkPreviews): Integrate Link previews with the backend (#12523) * feat(StatusQ): Adding numberToLocaleStringInCompactForm function to LocaleUtils This function will format the number in a compact form E.g: 1000 -> 1K; 1000000 -> 1M; 1100000 -> 1.1M + adding tests fix(statusQ): Update numberToLocaleStringInCompactForm to return the locale number when greter than 999T fix(StatusQ): extend the test_numberToLocaleStringInCompactForm with new data * feat(LinkPreviews): Update the link preview area in StatusChatInput to use the new model Changes: 1. Create a new component `LinkPreviewMiniCardDelegate.qml` that filters the model data to properly fill the link preview card with the needed data based on the preview type 2. Update storybook pages 3. Small updates to LinkPreviewMiniCard * feat(LinkPreviews): Update the link previews in message history to use the new backend Changes: 1. Create delegate items for LinkPreviewCard and gif link preview to clean the LinksMessageView component and filter the model data based on the preview type 2. Remove UserProfileCard and reuse the LinkPreviewCard to display contacts link previews 3. Update LinkPreviewCard so that it can accommodate status link previews (communities, channels, contacts). The generic properties (title, description, footer) have been dropped and replaced with specialised properties for each preview type. 4. Fix LinkPreviewCard layout to better accommodate different content variants (missing properties, long/short title, missing description, missing icon) 5. Fixing the link preview context menu and click actions fix: Move inline components to separate files Fixing the linux builds using Qt 5.15.2 affected by this bug: https://bugreports.qt.io/browse/QTBUG-89180 * fix: Align LinkPreviewMiniCard implementation with LinkPreviewCard and remove state based model filtering
2023-10-25 15:20:02 +00:00
model: ["unknown", "standard", "user profile", "community", "channel"]
}
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
feat(LinkPreviews): Integrate Link previews with the backend (#12523) * feat(StatusQ): Adding numberToLocaleStringInCompactForm function to LocaleUtils This function will format the number in a compact form E.g: 1000 -> 1K; 1000000 -> 1M; 1100000 -> 1.1M + adding tests fix(statusQ): Update numberToLocaleStringInCompactForm to return the locale number when greter than 999T fix(StatusQ): extend the test_numberToLocaleStringInCompactForm with new data * feat(LinkPreviews): Update the link preview area in StatusChatInput to use the new model Changes: 1. Create a new component `LinkPreviewMiniCardDelegate.qml` that filters the model data to properly fill the link preview card with the needed data based on the preview type 2. Update storybook pages 3. Small updates to LinkPreviewMiniCard * feat(LinkPreviews): Update the link previews in message history to use the new backend Changes: 1. Create delegate items for LinkPreviewCard and gif link preview to clean the LinksMessageView component and filter the model data based on the preview type 2. Remove UserProfileCard and reuse the LinkPreviewCard to display contacts link previews 3. Update LinkPreviewCard so that it can accommodate status link previews (communities, channels, contacts). The generic properties (title, description, footer) have been dropped and replaced with specialised properties for each preview type. 4. Fix LinkPreviewCard layout to better accommodate different content variants (missing properties, long/short title, missing description, missing icon) 5. Fixing the link preview context menu and click actions fix: Move inline components to separate files Fixing the linux builds using Qt 5.15.2 affected by this bug: https://bugreports.qt.io/browse/QTBUG-89180 * fix: Align LinkPreviewMiniCard implementation with LinkPreviewCard and remove state based model filtering
2023-10-25 15:20:02 +00:00
//"https://www.figma.com/file/Mr3rqxxgKJ2zMQ06UAKiWL/💬-Chat⎜Desktop?type=design&node-id=22341-184809&mode=design&t=VWBVK4DOUxr1BmTp-0"