From 2dca7904b8bab1998687cf889c40b621b854821e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Tinkl?= Date: Thu, 15 Sep 2022 00:17:55 +0200 Subject: [PATCH] fix(PinnedMessagesPopup): pinned messages modal design issues - align the dialog to design - fix radio button logic (it was possible to uncheck a mutually exclusive checked button eventhough it's inside the button group, leaving the Unpin button in an undefined state) - port to StatusDialog and layouts, dropping a lot of needless code - remove dead code for passing around the `property Component pinnedMessagesListPopupComponent`; the popup is being invoked via `Global.openPopup()` Fixes #7316 Fixes #7315 --- .../Chat/popups/PinnedMessagesPopup.qml | 167 +++++++----------- .../AppLayouts/Chat/views/ChatColumnView.qml | 3 - .../AppLayouts/Chat/views/ChatContentView.qml | 1 - ui/app/AppLayouts/Chat/views/ChatView.qml | 3 - .../Chat/views/CommunityColumnView.qml | 1 - ui/imports/shared/views/chat/MessageView.qml | 3 +- 6 files changed, 63 insertions(+), 115 deletions(-) diff --git a/ui/app/AppLayouts/Chat/popups/PinnedMessagesPopup.qml b/ui/app/AppLayouts/Chat/popups/PinnedMessagesPopup.qml index c9fde003c5..b7a6e82986 100644 --- a/ui/app/AppLayouts/Chat/popups/PinnedMessagesPopup.qml +++ b/ui/app/AppLayouts/Chat/popups/PinnedMessagesPopup.qml @@ -1,24 +1,17 @@ -import QtQuick 2.13 -import QtQuick.Controls 2.3 +import QtQuick 2.14 +import QtQuick.Controls 2.14 +import QtQuick.Layouts 1.14 +import QtQml.Models 2.14 import StatusQ.Core 0.1 -import StatusQ.Controls 0.1 as StatusQControls +import StatusQ.Controls 0.1 +import StatusQ.Popups.Dialog 0.1 import utils 1.0 -import shared 1.0 -import shared.views 1.0 -import shared.panels 1.0 -import shared.popups 1.0 import shared.views.chat 1.0 -import "../controls" -import "../panels" -//TODO remove or make view? -import "../views" - -// TODO: replace with StatusMOdal -ModalPopup { - id: popup +StatusDialog { + id: root property var store property var messageStore @@ -27,56 +20,26 @@ ModalPopup { property string messageToUnpin property var emojiReactionsModel - header: Item { - height: childrenRect.height - width: parent.width + width: 800 + height: 428 + padding: 0 - StyledText { - id: title - text: !!popup.messageToPin ? qsTr("Pin limit reached") : - qsTr("Pinned messages") - anchors.top: parent.top - anchors.left: parent.left - font.bold: true - font.pixelSize: 17 - } + title: root.messageToPin ? qsTr("Pin limit reached") : qsTr("Pinned messages") - StyledText { - property int nbMessages: pinnedMessageListView.count - - id: nbPinnedMessages - text: { - if (!!popup.messageToPin) { - return qsTr("Unpin a previous message first") - } - - return nbMessages > 1 ? qsTr("%1 messages").arg(nbMessages) : - qsTr("%1 message").arg(nbMessages) - } - anchors.left: parent.left - anchors.top: title.bottom - anchors.topMargin: 2 - font.pixelSize: 15 - color: Style.current.secondaryText - } - - Separator { - anchors.top: nbPinnedMessages.bottom - anchors.topMargin: Style.current.padding - anchors.left: parent.left - anchors.leftMargin: -Style.current.padding - anchors.right: parent.right - anchors.rightMargin: -Style.current.padding - } + header: StatusDialogHeader { + visible: root.title + headline.title: root.title + headline.subtitle: root.messageToPin ? qsTr("Unpin a previous message first") + : qsTr("%n message(s)", "", pinnedMessageListView.count) + actions.closeButton.onClicked: root.close() } - Item { - anchors.fill: parent - - StyledText { + contentItem: ColumnLayout { + StatusBaseText { visible: pinnedMessageListView.count === 0 text: qsTr("Pinned messages will appear here.") - anchors.centerIn: parent + Layout.alignment: Qt.AlignCenter + verticalAlignment: Text.AlignVCenter color: Style.current.secondaryText } @@ -86,15 +49,9 @@ ModalPopup { StatusListView { id: pinnedMessageListView - model: popup.pinnedMessagesModel - height: parent.height - anchors.left: parent.left - anchors.leftMargin: -Style.current.padding - anchors.right: parent.right - anchors.rightMargin: -Style.current.padding - topMargin: Style.current.halfPadding - anchors.top: parent.top - anchors.topMargin: -Style.current.halfPadding + model: root.pinnedMessagesModel + Layout.fillWidth: true + Layout.fillHeight: count delegate: Item { id: messageDelegate @@ -107,8 +64,8 @@ ModalPopup { width: parent.width - rootStore: popup.store - messageStore: popup.messageStore + rootStore: root.store + messageStore: root.messageStore messageContextMenu: msgContextMenu messageId: model.id @@ -134,13 +91,13 @@ ModalPopup { // This is possible since we have all data loaded before we load qml. // When we fetch messages to fulfill a gap we have to set them at once. prevMessageIndex: index - 1 - prevMessageAsJsonObj: popup.messageStore? popup.messageStore.getMessageByIndexAsJson(index - 1) : {} + prevMessageAsJsonObj: root.messageStore? root.messageStore.getMessageByIndexAsJson(index - 1) : {} nextMessageIndex: index + 1 - nextMessageAsJsonObj: popup.messageStore? popup.messageStore.getMessageByIndexAsJson(index + 1) : {} + nextMessageAsJsonObj: root.messageStore? root.messageStore.getMessageByIndexAsJson(index + 1) : {} // Additional params isInPinnedPopup: true - disableHover: !!popup.messageToPin + disableHover: !!root.messageToPin } MouseArea { @@ -148,45 +105,46 @@ ModalPopup { enabled: !!popup.messageToPin cursorShape: Qt.PointingHandCursor z: 55 - onClicked: radio.toggle() + onClicked: { + if (!radio.checked) + radio.checked = true + } } - StatusQControls.StatusRadioButton { + StatusRadioButton { id: radio - visible: !!popup.messageToPin + visible: !!root.messageToPin anchors.right: parent.right - anchors.rightMargin: 18 + anchors.rightMargin: Style.current.bigPadding anchors.verticalCenter: parent.verticalCenter ButtonGroup.group: pinButtonGroup - function toggle() { - radio.checked = !radio.checked - if (radio.checked) { - popup.messageToUnpin = model.id - } + onCheckedChanged: { // NB this should be `onToggled` but MouseArea above handles the whole delegate + root.messageToUnpin = checked ? model.id : "" } } } } + MessageContextMenuView { id: msgContextMenu - reactionModel: popup.emojiReactionsModel - store: popup.store + reactionModel: root.emojiReactionsModel + store: root.store pinnedPopup: true pinnedMessage: true onShouldCloseParentPopup: { - popup.close() + root.close() } onPinMessage: { - popup.messageStore.pinMessage(messageId) + root.messageStore.pinMessage(messageId) } onUnpinMessage: { - popup.messageStore.unpinMessage(messageId) + root.messageStore.unpinMessage(messageId) } onToggleReaction: { - popup.messageStore.toggleReaction(messageId, emojiId) + root.messageStore.toggleReaction(messageId, emojiId) } onOpenProfileClicked: { @@ -195,24 +153,21 @@ ModalPopup { } } - - footer: Item { - width: parent.width - height: btnUnpin.height - - StatusQControls.StatusButton { - id: btnUnpin - visible: !!popup.messageToPin - enabled: !!popup.messageToUnpin - text: qsTr("Unpin") - type: StatusQControls.StatusBaseButton.Type.Danger - anchors.right: parent.right - onClicked: { - popup.messageStore.unpinMessage(popup.messageToUnpin) - popup.messageToUnpin = "" - popup.messageStore.pinMessage(popup.messageToPin) - popup.messageToPin = "" - popup.close() + footer: StatusDialogFooter { + id: footer + visible: !!root.messageToPin + rightButtons: ObjectModel { + StatusButton { + visible: footer.visible + enabled: !!root.messageToUnpin && pinButtonGroup.checkedButton + text: qsTr("Unpin selected message and pin new message") + onClicked: { + root.messageStore.unpinMessage(root.messageToUnpin) + root.messageToUnpin = "" + root.messageStore.pinMessage(root.messageToPin) + root.messageToPin = "" + root.close() + } } } } diff --git a/ui/app/AppLayouts/Chat/views/ChatColumnView.qml b/ui/app/AppLayouts/Chat/views/ChatColumnView.qml index 23dff7da21..14628b851e 100644 --- a/ui/app/AppLayouts/Chat/views/ChatColumnView.qml +++ b/ui/app/AppLayouts/Chat/views/ChatColumnView.qml @@ -54,7 +54,6 @@ Item { property var contactDetails: Utils.getContactDetailsAsJson(root.activeChatId) property bool isUserAdded: root.contactDetails.isAdded property bool contactRequestReceived: root.contactDetails.requestReceived - property Component pinnedMessagesListPopupComponent signal openAppSearch() signal openStickerPackPopup(string stickerPackId) @@ -222,7 +221,6 @@ Item { stickersLoaded: root.stickersLoaded isBlocked: model.blocked isActiveChannel: categoryChatLoader.isActiveChannel - pinnedMessagesPopupComponent: root.pinnedMessagesListPopupComponent onOpenStickerPackPopup: { root.openStickerPackPopup(stickerPackId) } @@ -271,7 +269,6 @@ Item { stickersLoaded: root.stickersLoaded isBlocked: model.blocked isActiveChannel: chatLoader.isActiveChannel - pinnedMessagesPopupComponent: root.pinnedMessagesListPopupComponent onOpenStickerPackPopup: { root.openStickerPackPopup(stickerPackId) } diff --git a/ui/app/AppLayouts/Chat/views/ChatContentView.qml b/ui/app/AppLayouts/Chat/views/ChatContentView.qml index a98aa879e9..46136e46fd 100644 --- a/ui/app/AppLayouts/Chat/views/ChatContentView.qml +++ b/ui/app/AppLayouts/Chat/views/ChatContentView.qml @@ -38,7 +38,6 @@ ColumnLayout { property var emojiPopup property alias textInputField: chatInput property UsersStore usersStore: UsersStore {} - property Component pinnedMessagesPopupComponent onChatContentModuleChanged: { root.usersStore.usersModule = root.chatContentModule.usersModule diff --git a/ui/app/AppLayouts/Chat/views/ChatView.qml b/ui/app/AppLayouts/Chat/views/ChatView.qml index d631b95743..7d4dd99f60 100644 --- a/ui/app/AppLayouts/Chat/views/ChatView.qml +++ b/ui/app/AppLayouts/Chat/views/ChatView.qml @@ -29,7 +29,6 @@ StatusSectionLayout { property RootStore rootStore - property Component pinnedMessagesListPopupComponent property Component membershipRequestPopup property var emojiPopup property bool stickersLoaded: false @@ -84,7 +83,6 @@ StatusSectionLayout { parentModule: root.rootStore.chatCommunitySectionModule rootStore: root.rootStore contactsStore: root.contactsStore - pinnedMessagesListPopupComponent: root.pinnedMessagesListPopupComponent stickersLoaded: root.stickersLoaded emojiPopup: root.emojiPopup onOpenStickerPackPopup: { @@ -160,7 +158,6 @@ StatusSectionLayout { store: root.rootStore emojiPopup: root.emojiPopup hasAddedContacts: root.hasAddedContacts - pinnedMessagesPopupComponent: root.pinnedMessagesListPopupComponent membershipRequestPopup: root.membershipRequestPopup onInfoButtonClicked: root.communityInfoButtonClicked() onManageButtonClicked: root.communityManageButtonClicked() diff --git a/ui/app/AppLayouts/Chat/views/CommunityColumnView.qml b/ui/app/AppLayouts/Chat/views/CommunityColumnView.qml index a8e990801c..2ef18ca1f6 100644 --- a/ui/app/AppLayouts/Chat/views/CommunityColumnView.qml +++ b/ui/app/AppLayouts/Chat/views/CommunityColumnView.qml @@ -32,7 +32,6 @@ Item { property var store property bool hasAddedContacts: false property var communityData: store.mainModuleInst ? store.mainModuleInst.activeSection || {} : {} - property Component pinnedMessagesPopupComponent property Component membershipRequestPopup signal infoButtonClicked diff --git a/ui/imports/shared/views/chat/MessageView.qml b/ui/imports/shared/views/chat/MessageView.qml index 9f9fc7a4d2..e438682603 100644 --- a/ui/imports/shared/views/chat/MessageView.qml +++ b/ui/imports/shared/views/chat/MessageView.qml @@ -428,7 +428,8 @@ Loader { hideQuickActions: root.isChatBlocked || root.placeholderMessage || - root.activityCenterMessage + root.activityCenterMessage || + root.isInPinnedPopup overrideBackground: root.activityCenterMessage || root.placeholderMessage overrideBackgroundColor: {