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...

204 lines
7.1 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
feat: Add settings card to control link previews settings in chat input This commit adds the link preview settings card in the chat input area and connects the settings to the controller. Not included in this commit: Backend for the preserving the settings, syncing the settings and enforcing the settings on the backend side. Whenever an url is detected in the chat input area, the link preview settings card is presented. This card enables the user to choose one of the following options: 1. `Show for this message` - All the link previews in the current message will be loaded without asking again. The current message can be defined as the message currently typed/pasted in the chat input. Deleting or sending the current content is resetting this setting and the link preview settings card will be presented again when a new url is detected. 2. `Always show previews` - All the link previews will be loaded automatically. The link preview settings card will not be presented again (in the current state, this settings is enabled for the lifetime of the controller. This will change once the settings are preserved and synced) 3. `Never show previews` - No link preview will be loaded. Same as the `Always show previews` option, this will be preserved for the lifetime of the controller for now. 4. Dismiss (x button) - The link preview settings card will be dismissed. It will be loaded again when a new link preview is detected The same options can be loaded as a context menu on the link preview card. Changes: 1. Adding `LinkPreviewSettingsCard` 2. Adding the settings context menu to `LinkPreviewSettingsCard` and `LinkPreviewMiniCard` 3. Connect settings events to the nim controller 4. Adding the controller logic for settings change 5. Adding the link preview dismiss settings flag to the preserverd properties and use it as a condition to load the settings. 6. Adding/Updating corresponding storybook pages
2023-10-09 08:45:16 +00:00
import QtQuick.Layouts 1.15
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 QtGraphicalEffects 1.15
feat: Add settings card to control link previews settings in chat input This commit adds the link preview settings card in the chat input area and connects the settings to the controller. Not included in this commit: Backend for the preserving the settings, syncing the settings and enforcing the settings on the backend side. Whenever an url is detected in the chat input area, the link preview settings card is presented. This card enables the user to choose one of the following options: 1. `Show for this message` - All the link previews in the current message will be loaded without asking again. The current message can be defined as the message currently typed/pasted in the chat input. Deleting or sending the current content is resetting this setting and the link preview settings card will be presented again when a new url is detected. 2. `Always show previews` - All the link previews will be loaded automatically. The link preview settings card will not be presented again (in the current state, this settings is enabled for the lifetime of the controller. This will change once the settings are preserved and synced) 3. `Never show previews` - No link preview will be loaded. Same as the `Always show previews` option, this will be preserved for the lifetime of the controller for now. 4. Dismiss (x button) - The link preview settings card will be dismissed. It will be loaded again when a new link preview is detected The same options can be loaded as a context menu on the link preview card. Changes: 1. Adding `LinkPreviewSettingsCard` 2. Adding the settings context menu to `LinkPreviewSettingsCard` and `LinkPreviewMiniCard` 3. Connect settings events to the nim controller 4. Adding the controller logic for settings change 5. Adding the link preview dismiss settings flag to the preserverd properties and use it as a condition to load the settings. 6. Adding/Updating corresponding storybook pages
2023-10-09 08:45:16 +00:00
import Storybook 1.0
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 StatusQ.Core.Theme 0.1
import shared.controls.chat 1.0
feat: Add settings card to control link previews settings in chat input This commit adds the link preview settings card in the chat input area and connects the settings to the controller. Not included in this commit: Backend for the preserving the settings, syncing the settings and enforcing the settings on the backend side. Whenever an url is detected in the chat input area, the link preview settings card is presented. This card enables the user to choose one of the following options: 1. `Show for this message` - All the link previews in the current message will be loaded without asking again. The current message can be defined as the message currently typed/pasted in the chat input. Deleting or sending the current content is resetting this setting and the link preview settings card will be presented again when a new url is detected. 2. `Always show previews` - All the link previews will be loaded automatically. The link preview settings card will not be presented again (in the current state, this settings is enabled for the lifetime of the controller. This will change once the settings are preserved and synced) 3. `Never show previews` - No link preview will be loaded. Same as the `Always show previews` option, this will be preserved for the lifetime of the controller for now. 4. Dismiss (x button) - The link preview settings card will be dismissed. It will be loaded again when a new link preview is detected The same options can be loaded as a context menu on the link preview card. Changes: 1. Adding `LinkPreviewSettingsCard` 2. Adding the settings context menu to `LinkPreviewSettingsCard` and `LinkPreviewMiniCard` 3. Connect settings events to the nim controller 4. Adding the controller logic for settings change 5. Adding the link preview dismiss settings flag to the preserverd properties and use it as a condition to load the settings. 6. Adding/Updating corresponding storybook pages
2023-10-09 08:45:16 +00:00
SplitView {
Logs { id: logs }
orientation: Qt.Vertical
SplitView {
SplitView.fillWidth: true
SplitView.fillHeight: true
Pane {
SplitView.fillWidth: true
Rectangle {
id: wrapper
anchors.fill: parent
color: Theme.palette.statusChatInput.secondaryBackgroundColor
ChatInputLinksPreviewArea {
id: chatInputLinkPreviewsArea
anchors.centerIn: parent
width: parent.width
imagePreviewArray: ["https://picsum.photos/200/300?random=1", "https://picsum.photos/200/300?random=1"]
linkPreviewModel: showLinkPreviewSettings ? emptyModel : linkPreviewListModel
showLinkPreviewSettings: !linkPreviewEnabledSwitch.checked
visible: hasContent
onImageRemoved: (index) => logs.logEvent("ChatInputLinksPreviewArea::onImageRemoved: " + index)
onImageClicked: (chatImage) => logs.logEvent("ChatInputLinksPreviewArea::onImageClicked: " + chatImage)
onLinkReload: (link) => logs.logEvent("ChatInputLinksPreviewArea::onLinkReload: " + link)
onLinkClicked: (link) => logs.logEvent("ChatInputLinksPreviewArea::onLinkClicked: " + link)
onEnableLinkPreview: () => {
linkPreviewEnabledSwitch.checked = true
logs.logEvent("ChatInputLinksPreviewArea::onEnableLinkPreview")
}
onEnableLinkPreviewForThisMessage: () => logs.logEvent("ChatInputLinksPreviewArea::onEnableLinkPreviewForThisMessage")
onDisableLinkPreview: () => logs.logEvent("ChatInputLinksPreviewArea::onDisableLinkPreview")
onDismissLinkPreviewSettings: () => logs.logEvent("ChatInputLinksPreviewArea::onDismissLinkPreviewSettings")
onDismissLinkPreview: (index) => logs.logEvent("ChatInputLinksPreviewArea::onDismissLinkPreview: " + 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
}
feat: Add settings card to control link previews settings in chat input This commit adds the link preview settings card in the chat input area and connects the settings to the controller. Not included in this commit: Backend for the preserving the settings, syncing the settings and enforcing the settings on the backend side. Whenever an url is detected in the chat input area, the link preview settings card is presented. This card enables the user to choose one of the following options: 1. `Show for this message` - All the link previews in the current message will be loaded without asking again. The current message can be defined as the message currently typed/pasted in the chat input. Deleting or sending the current content is resetting this setting and the link preview settings card will be presented again when a new url is detected. 2. `Always show previews` - All the link previews will be loaded automatically. The link preview settings card will not be presented again (in the current state, this settings is enabled for the lifetime of the controller. This will change once the settings are preserved and synced) 3. `Never show previews` - No link preview will be loaded. Same as the `Always show previews` option, this will be preserved for the lifetime of the controller for now. 4. Dismiss (x button) - The link preview settings card will be dismissed. It will be loaded again when a new link preview is detected The same options can be loaded as a context menu on the link preview card. Changes: 1. Adding `LinkPreviewSettingsCard` 2. Adding the settings context menu to `LinkPreviewSettingsCard` and `LinkPreviewMiniCard` 3. Connect settings events to the nim controller 4. Adding the controller logic for settings change 5. Adding the link preview dismiss settings flag to the preserverd properties and use it as a condition to load the settings. 6. Adding/Updating corresponding storybook pages
2023-10-09 08:45:16 +00:00
Pane {
SplitView.preferredWidth: 300
SplitView.fillHeight: true
ColumnLayout {
Label {
text: "Links preview enabled"
}
Switch {
id: linkPreviewEnabledSwitch
}
}
}
}
LogsAndControlsPanel {
id: logsAndControlsPanel
SplitView.minimumHeight: 100
SplitView.preferredHeight: 200
logsView.logText: logs.logText
}
ListModel {
id: emptyModel
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
feat: Add settings card to control link previews settings in chat input This commit adds the link preview settings card in the chat input area and connects the settings to the controller. Not included in this commit: Backend for the preserving the settings, syncing the settings and enforcing the settings on the backend side. Whenever an url is detected in the chat input area, the link preview settings card is presented. This card enables the user to choose one of the following options: 1. `Show for this message` - All the link previews in the current message will be loaded without asking again. The current message can be defined as the message currently typed/pasted in the chat input. Deleting or sending the current content is resetting this setting and the link preview settings card will be presented again when a new url is detected. 2. `Always show previews` - All the link previews will be loaded automatically. The link preview settings card will not be presented again (in the current state, this settings is enabled for the lifetime of the controller. This will change once the settings are preserved and synced) 3. `Never show previews` - No link preview will be loaded. Same as the `Always show previews` option, this will be preserved for the lifetime of the controller for now. 4. Dismiss (x button) - The link preview settings card will be dismissed. It will be loaded again when a new link preview is detected The same options can be loaded as a context menu on the link preview card. Changes: 1. Adding `LinkPreviewSettingsCard` 2. Adding the settings context menu to `LinkPreviewSettingsCard` and `LinkPreviewMiniCard` 3. Connect settings events to the nim controller 4. Adding the controller logic for settings change 5. Adding the link preview dismiss settings flag to the preserverd properties and use it as a condition to load the settings. 6. Adding/Updating corresponding storybook pages
2023-10-09 08:45:16 +00:00
// https://www.figma.com/file/Mr3rqxxgKJ2zMQ06UAKiWL/💬-Chat⎜Desktop?type=design&node-id=22341-184809&mode=design&t=VWBVK4DOUxr1BmTp-0