status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
status-desktop/storybook/pages/ChatInputLinksPreviewAreaPa...

146 lines
4.9 KiB
QML
Raw Normal View History

feat: Generate link previews in StatusChatInput - introduce ChatInputLinksPreviewArea This component is a wrapper for LinkPreviewMiniCard and StatusChatInputImageArea. The purpose of this component is to arrange the cards in a row layout and provide scrolling behaviour. This component also has an opacity mask that will provide a fade out appearance when the items are scrolled out of view. + adding storybook page + integrate ChatInputLinksPreviewArea in StatusChatInput
2023-09-26 14:16:53 +00:00
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
import StatusQ.Core.Theme 0.1
import shared.controls.chat 1.0
feat: Generate link previews in StatusChatInput - Small updates + Add basic zoom to Storybook InspectionWindow
2023-09-26 14:20:59 +00:00
Page {
Rectangle {
id: wrapper
anchors.fill: parent
color: Theme.palette.statusChatInput.secondaryBackgroundColor
feat: Generate link previews in StatusChatInput - introduce ChatInputLinksPreviewArea This component is a wrapper for LinkPreviewMiniCard and StatusChatInputImageArea. The purpose of this component is to arrange the cards in a row layout and provide scrolling behaviour. This component also has an opacity mask that will provide a fade out appearance when the items are scrolled out of view. + adding storybook page + integrate ChatInputLinksPreviewArea in StatusChatInput
2023-09-26 14:16:53 +00:00
feat: Generate link previews in StatusChatInput - Small updates + Add basic zoom to Storybook InspectionWindow
2023-09-26 14:20:59 +00:00
ChatInputLinksPreviewArea {
id: chatInputLinkPreviewsArea
anchors.centerIn: parent
width: parent.width
imagePreviewModel: ["https://picsum.photos/200/300?random=1", "https://picsum.photos/200/300?random=1"]
linkPreviewModel: linkPreviewListModel
onLinkRemoved: linkPreviewListModel.remove(index)
feat: Generate link previews in StatusChatInput - introduce ChatInputLinksPreviewArea This component is a wrapper for LinkPreviewMiniCard and StatusChatInputImageArea. The purpose of this component is to arrange the cards in a row layout and provide scrolling behaviour. This component also has an opacity mask that will provide a fade out appearance when the items are scrolled out of view. + adding storybook page + integrate ChatInputLinksPreviewArea in StatusChatInput
2023-09-26 14:16:53 +00:00
}
}
ListModel {
id: linkPreviewListModel
ListElement {
url: "https://www.youtube.com/watch?v=9bZkp7q19f0"
unfurled: true
immutable: false
hostname: "youtube.com"
title: "PSY - GANGNAM STYLE(강남스타일) M/V"
description: ""
linkType: 0
thumbnailWidth: 480
thumbnailHeight: 360
thumbnailUrl: "https://picsum.photos/480/360?random=1"
thumbnailDataUri: ""
}
ListElement {
url: "https://www.youtube.com/watch?v=9bZkp7q19f0"
unfurled: false
immutable: false
hostname: "youtube.com"
title: "PSY - GANGNAM STYLE(강남스타일) M/V"
description: ""
linkType: 0
thumbnailWidth: 480
thumbnailHeight: 360
thumbnailUrl: "https://picsum.photos/480/360?random=2"
thumbnailDataUri: ""
}
ListElement {
url: "https://www.youtube.com/watch?v=9bZkp7q19f0"
unfurled: true
immutable: false
hostname: ""
title: "PSY - GANGNAM STYLE(강남스타일) M/V"
description: ""
linkType: 0
thumbnailWidth: 480
thumbnailHeight: 360
thumbnailUrl: "https://picsum.photos/480/360?random=3"
thumbnailDataUri: ""
}
ListElement {
url: "https://www.youtube.com/watch?v=9bZkp7q19f0"
unfurled: true
hostname: "youtube.com"
title: "PSY - GANGNAM STYLE(강남스타일) M/V"
description: ""
linkType: 0
thumbnailWidth: 480
thumbnailHeight: 360
thumbnailUrl: "https://picsum.photos/480/360?random=4"
thumbnailDataUri: ""
}
ListElement {
url: "https://www.youtube.com/watch?v=9bZkp7q19f0"
unfurled: true
immutable: false
hostname: "youtube.com"
title: "PSY - GANGNAM STYLE(강남스타일) M/V"
description: ""
linkType: 0
thumbnailWidth: 480
thumbnailHeight: 360
thumbnailUrl: "https://picsum.photos/480/360?random=5"
thumbnailDataUri: ""
}
ListElement {
url: "https://www.youtube.com/watch?v=9bZkp7q19f0"
unfurled: true
hostname: "youtube.com"
title: "PSY - GANGNAM STYLE(강남스타일) M/V"
description: ""
linkType: 0
thumbnailWidth: 480
thumbnailHeight: 360
thumbnailUrl: "https://picsum.photos/480/360?random=6"
thumbnailDataUri: ""
}
ListElement {
url: "https://www.youtube.com/watch?v=9bZkp7q19f0"
unfurled: true
immutable: false
hostname: "youtube.com"
title: "PSY - GANGNAM STYLE(강남스타일) M/V"
description: ""
linkType: 0
thumbnailWidth: 480
thumbnailHeight: 360
thumbnailUrl: "https://picsum.photos/480/360?random=7"
thumbnailDataUri: ""
}
ListElement {
url: "https://www.youtube.com/watch?v=9bZkp7q19f0"
unfurled: true
immutable: false
hostname: "youtube.com"
title: "PSY - GANGNAM STYLE(강남스타일) M/V"
description: ""
linkType: 0
thumbnailWidth: 480
thumbnailHeight: 360
thumbnailUrl: "https://picsum.photos/480/360?random=8"
thumbnailDataUri: ""
}
ListElement {
url: "https://www.youtube.com/watch?v=9bZkp7q19f0"
unfurled: true
immutable: false
hostname: "youtube.com"
title: "PSY - GANGNAM STYLE(강남스타일) M/V"
description: ""
linkType: 0
thumbnailWidth: 480
thumbnailHeight: 360
thumbnailUrl: "https://picsum.photos/480/360?random=9"
thumbnailDataUri: ""
}
}
}
// category: Panels
// https://www.figma.com/file/Mr3rqxxgKJ2zMQ06UAKiWL/💬-Chat⎜Desktop?type=design&node-id=22341-184809&mode=design&t=VWBVK4DOUxr1BmTp-0