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

fix(drag-zone): make drag zone only work in correct chats 

Fixes #4904

Moves drag zone to the AppMain so that we can check if the current chat accepts the images
Also disables the Input Connection if the channel is not active
This commit is contained in:
Jonathan Rainville 2022-02-28 15:14:04 -05:00 committed by Iuri Matias
parent cc55f811b1
commit 35e50d186b
6 changed files with 122 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
ui/app/AppLayouts/Chat/views/ChatColumnView.qml
View File

@ -42,6 +42,7 @@ Item {
property bool isExtendedInput: isReply || isImage
property bool isConnected: false
property string contactToRemove: ""
property bool isSectionActive: mainModule.activeSection.id === parentModule.getMySectionId()
property string activeChatId: parentModule && parentModule.activeItem.id
property string activeSubItemId: parentModule && parentModule.activeItem.activeSubItem.id
property string activeChatType: parentModule && parentModule.activeItem.type
@ -148,18 +149,7 @@ Item {
delegate: ChatContentView {
width: parent.width
clip: true
height: {
// dynamically calculate the height of the view, if the active one is the current one
// then set the height to parent otherwise set it to 0
if(!chatContentModule)
return 0
let myChatId = chatContentModule.getMyChatId()
if(myChatId === root.activeChatId || myChatId === root.activeSubItemId)
return parent.height
return 0
}
height: isActiveChannel ? parent.height : 0
rootStore: root.rootStore
contactsStore: root.contactsStore
sendTransactionNoEnsModal: cmpSendTransactionNoEns
@ -167,6 +157,18 @@ Item {
sendTransactionWithEnsModal: cmpSendTransactionWithEns
stickersLoaded: root.stickersLoaded
isBlocked: model.blocked
isActiveChannel: {
// dynamically calculate the height of the view, if the active one is the current one
// then set the height to parent otherwise set it to 0
if(!chatContentModule || !isSectionActive)
return false
let myChatId = chatContentModule.getMyChatId()
if(myChatId === root.activeChatId || myChatId === root.activeSubItemId)
return true
return false
}
Component.onCompleted: {
parentModule.prepareChatContentModuleForChatId(model.itemId)
chatContentModule = parentModule.getChatContentModule()
@ -178,18 +180,7 @@ Item {
delegate: ChatContentView {
width: parent.width
clip: true
height: {
// dynamically calculate the height of the view, if the active one is the current one
// then set the height to parent otherwise set it to 0
if(!chatContentModule)
return 0
let myChatId = chatContentModule.getMyChatId()
if(myChatId === root.activeChatId || myChatId === root.activeSubItemId)
return parent.height
return 0
}
height: isActiveChannel ? parent.height : 0
rootStore: root.rootStore
contactsStore: root.contactsStore
sendTransactionNoEnsModal: cmpSendTransactionNoEns
@ -197,6 +188,18 @@ Item {
sendTransactionWithEnsModal: cmpSendTransactionWithEns
stickersLoaded: root.stickersLoaded
isBlocked: model.blocked
isActiveChannel: {
// dynamically calculate the height of the view, if the active one is the current one
// then set the height to parent otherwise set it to 0
if(!chatContentModule || !isSectionActive)
return false
let myChatId = chatContentModule.getMyChatId()
if(myChatId === root.activeChatId || myChatId === root.activeSubItemId)
return true
return false
}
Component.onCompleted: {
parentModule.prepareChatContentModuleForChatId(itemId)
chatContentModule = parentModule.getChatContentModule()

2
ui/app/AppLayouts/Chat/views/ChatContentView.qml
View File

@ -31,6 +31,7 @@ ColumnLayout {
property var chatContentModule
property var rootStore
property var contactsStore
property bool isActiveChannel: false
property UsersStore usersStore: UsersStore {}
onChatContentModuleChanged: {
@ -416,6 +417,7 @@ ColumnLayout {
}
messageContextMenu: contextmenu
isContactBlocked: chatContentRoot.isBlocked
isActiveChannel: chatContentRoot.isActiveChannel
chatInputPlaceholder: chatContentRoot.isBlocked ?
//% "This user has been blocked."
qsTrId("this-user-has-been-blocked-") :

89
ui/app/AppMain.qml
View File

@ -32,6 +32,7 @@ Item {
anchors.fill: parent
property alias appLayout: appLayout
property alias dragAndDrop: dragTarget
property RootStore rootStore: RootStore { }
// set from main.qml
property var sysPalette
@ -645,6 +646,93 @@ Item {
}
}
DropArea {
id: dragTarget
signal droppedOnValidScreen(var drop)
property alias droppedUrls: rptDraggedPreviews.model
property var chatCommunitySectionModule: chatLayoutContainer.rootStore.chatCommunitySectionModule
property int activeChatType: chatCommunitySectionModule && chatCommunitySectionModule.activeItem.type
property bool enabled: !drag.source && !!loader.item && !!loader.item.appLayout
&& (
// in chat view
(mainModule.activeSection.sectionType === Constants.appSection.chat &&
(
// in a one-to-one chat
activeChatType === Constants.chatType.oneToOne ||
// in a private group chat
activeChatType === Constants.chatType.privateGroupChat
)
) ||
// In community section
mainModule.activeSection.sectionType === Constants.appSection.community
)
width: appMain.width
height: appMain.height
function cleanup() {
rptDraggedPreviews.model = []
}
onDropped: (drop) => {
if (enabled) {
droppedOnValidScreen(drop)
} else {
drop.accepted = false
}
cleanup()
}
onEntered: {
if (!enabled || !!drag.source) {
drag.accepted = false
return
}
// needed because drag.urls is not a normal js array
rptDraggedPreviews.model = drag.urls.filter(img => Utils.hasDragNDropImageExtension(img))
}
onPositionChanged: {
rptDraggedPreviews.x = drag.x
rptDraggedPreviews.y = drag.y
}
onExited: cleanup()
Rectangle {
id: dropRectangle
width: parent.width
height: parent.height
color: Style.current.transparent
opacity: 0.8
states: [
State {
when: dragTarget.enabled && dragTarget.containsDrag
PropertyChanges {
target: dropRectangle
color: Style.current.background
}
}
]
}
Repeater {
id: rptDraggedPreviews
Image {
source: modelData
width: 80
height: 80
sourceSize.width: 160
sourceSize.height: 160
fillMode: Image.PreserveAspectFit
x: index * 10 + rptDraggedPreviews.x
y: index * 10 + rptDraggedPreviews.y
z: 1
}
}
}
// Add SendModal here as it is used by the Wallet as well as the Browser
Loader {
id: sendModal
@ -759,6 +847,7 @@ Item {
}
Component.onCompleted: {
Global.appMain = this;
const whitelist = appMain.rootStore.privacyStore.getLinkPreviewWhitelist()
try {
const whiteListedSites = JSON.parse(whitelist)

4
ui/imports/shared/status/StatusChatInput.qml
View File

@ -40,6 +40,7 @@ Rectangle {
property bool isImage: false
property bool isEdit: false
property bool isContactBlocked: false
property bool isActiveChannel: false
property var recentStickers
property var stickerPackList
@ -591,7 +592,8 @@ Rectangle {
}
Connections {
target: Global.applicationWindow.dragAndDrop
enabled: control.isActiveChannel
target: Global.appMain.dragAndDrop
onDroppedOnValidScreen: (drop) => {
let validImages = validateImages(drop.urls)
if (validImages.length > 0) {

1
ui/imports/utils/Global.qml
View File

@ -7,6 +7,7 @@ QtObject {
id: root
property var applicationWindow
property var appMain
property bool popupOpened: false
property int settingsSubsection: Constants.settingsSubsection.profile
property var errorSound

87
ui/main.qml
View File

@ -21,7 +21,6 @@ import "./app"
StatusWindow {
property bool hasAccounts: startupModule.appState !== Constants.appState.onboarding
property alias dragAndDrop: dragTarget
property bool displayBeforeGetStartedModal: !hasAccounts
property bool appIsReady: false
@ -414,92 +413,6 @@ StatusWindow {
anchors.fill: parent
}
DropArea {
id: dragTarget
signal droppedOnValidScreen(var drop)
property alias droppedUrls: rptDraggedPreviews.model
property bool enabled: !drag.source && !!loader.item && !!loader.item.appLayout
// Not Refactored Yet
// && (
// // in chat view
// (loader.item.appLayout.appView.currentIndex === Constants.appViewStackIndex.chat &&
// (
// // in a one-to-one chat
// chatsModel.channelView.activeChannel.chatType === Constants.chatType.oneToOne ||
// // in a private group chat
// chatsModel.channelView.activeChannel.chatType === Constants.chatType.privateGroupChat
// )
// ) ||
// // In community section
// chatsModel.communities.activeCommunity.active
// )
width: applicationWindow.width
height: applicationWindow.height
function cleanup() {
rptDraggedPreviews.model = []
}
onDropped: (drop) => {
if (enabled) {
droppedOnValidScreen(drop)
} else {
drop.accepted = false
}
cleanup()
}
onEntered: {
if (!enabled || !!drag.source) {
drag.accepted = false
return
}
// needed because drag.urls is not a normal js array
rptDraggedPreviews.model = drag.urls.filter(img => Utils.hasDragNDropImageExtension(img))
}
onPositionChanged: {
rptDraggedPreviews.x = drag.x
rptDraggedPreviews.y = drag.y
}
onExited: cleanup()
Rectangle {
id: dropRectangle
width: parent.width
height: parent.height
color: Style.current.transparent
opacity: 0.8
states: [
State {
when: dragTarget.enabled && dragTarget.containsDrag
PropertyChanges {
target: dropRectangle
color: Style.current.background
}
}
]
}
Repeater {
id: rptDraggedPreviews
Image {
source: modelData
width: 80
height: 80
sourceSize.width: 160
sourceSize.height: 160
fillMode: Image.PreserveAspectFit
x: index * 10 + rptDraggedPreviews.x
y: index * 10 + rptDraggedPreviews.y
z: 1
}
}
}
Component {
id: app
AppMain {