From 311cf5332c397d6003d52bf8fa122f5a58da5bc4 Mon Sep 17 00:00:00 2001 From: Alexandra Betouni Date: Tue, 20 Sep 2022 13:54:28 +0300 Subject: [PATCH] fix(Createchat/EditGroupChat view): fixed spacing all over Closes #7369 --- .../Chat/panels/InlineSelectorPanel.qml | 66 ++++++------------- .../Chat/views/ChatHeaderContentView.qml | 3 +- .../AppLayouts/Chat/views/CreateChatView.qml | 37 +++-------- .../Chat/views/MembersSelectorView.qml | 1 - 4 files changed, 30 insertions(+), 77 deletions(-) diff --git a/ui/app/AppLayouts/Chat/panels/InlineSelectorPanel.qml b/ui/app/AppLayouts/Chat/panels/InlineSelectorPanel.qml index 17d108a6f6..7bd1d003e7 100644 --- a/ui/app/AppLayouts/Chat/panels/InlineSelectorPanel.qml +++ b/ui/app/AppLayouts/Chat/panels/InlineSelectorPanel.qml @@ -9,6 +9,8 @@ import StatusQ.Core.Theme 0.1 import StatusQ.Core.Utils 0.1 import StatusQ.Popups.Dialog 0.1 +import utils 1.0 + Item { id: root @@ -33,46 +35,34 @@ Item { RowLayout { id: mainLayout - - spacing: 8 - anchors.fill: parent + spacing: Style.current.padding Rectangle { Layout.fillWidth: true Layout.preferredHeight: 44 + Layout.alignment: Qt.AlignVCenter + Layout.leftMargin: Style.current.halfPadding color: Theme.palette.baseColor2 - radius: 8 - + radius: Style.current.radius RowLayout { - anchors { - fill: parent - leftMargin: 16 - rightMargin: 16 - topMargin: 7 - bottomMargin: 7 - } - + anchors.fill: parent + spacing: Style.current.halfPadding StatusBaseText { id: label - + Layout.leftMargin: Style.current.padding Layout.alignment: Qt.AlignVCenter visible: text !== "" font.pixelSize: 15 color: Theme.palette.baseColor1 } - Item { Layout.fillWidth: true Layout.fillHeight: true - StatusScrollView { id: scrollView - anchors.fill: parent - padding: 0 - onContentWidthChanged: { if (scrollView.contentWidth > scrollView.width) { scrollView.contentX = scrollView.contentWidth - scrollView.width @@ -83,36 +73,27 @@ Item { RowLayout { height: scrollView.height - - spacing: 8 - StatusListView { id: listView - Layout.fillWidth: true - Layout.fillHeight: true + Layout.preferredHeight: 30 implicitWidth: contentWidth - orientation: ListView.Horizontal - spacing: 8 + spacing: Style.current.halfPadding } TextInput { id: edit - - Layout.fillHeight: true Layout.minimumWidth: 4 - + Layout.fillHeight: true verticalAlignment: Text.AlignVCenter font.pixelSize: 15 color: Theme.palette.directColor1 - cursorDelegate: Rectangle { color: Theme.palette.primaryColor1 implicitWidth: 2 radius: 1 visible: edit.cursorVisible - SequentialAnimation on visible { loops: Animation.Infinite running: edit.cursorVisible @@ -163,8 +144,8 @@ Item { StatusBaseText { id: warningLabel - - Layout.alignment: Qt.AlignVCenter + Layout.alignment: Qt.AlignVCenter | Qt.AlignRight + Layout.rightMargin: Style.current.padding visible: text !== "" font.pixelSize: 10 color: Theme.palette.dangerColor1 @@ -174,7 +155,6 @@ Item { MouseArea { anchors.fill: parent propagateComposedEvents: true - onPressed: { edit.forceActiveFocus() mouse.accepted = false @@ -183,30 +163,26 @@ Item { } StatusButton { - Layout.leftMargin: 10 + Layout.alignment: Qt.AlignVCenter text: qsTr("Confirm") - onClicked: root.confirmed() } StatusButton { + Layout.alignment: Qt.AlignVCenter text: qsTr("Reject") type: StatusBaseButton.Type.Danger - onClicked: root.rejected() } } Popup { id: suggestionsDialog - - visible: edit.text !== "" && root.suggestionsModel.count - parent: edit - y: parent.height - - padding: 8 - + x: (parent.contentWidth - Style.current.halfPadding) + y: (parent.height + Style.current.halfPadding) + visible: edit.text !== "" && root.suggestionsModel.count + padding: Style.current.halfPadding background: StatusDialogBackground { id: bg layer.enabled: true @@ -223,11 +199,9 @@ Item { StatusListView { id: suggestionsListView - anchors.fill: parent implicitWidth: contentItem.childrenRect.width implicitHeight: contentItem.childrenRect.height - onVisibleChanged: currentIndex = 0 } } diff --git a/ui/app/AppLayouts/Chat/views/ChatHeaderContentView.qml b/ui/app/AppLayouts/Chat/views/ChatHeaderContentView.qml index 4c80f51ca6..17c9bda64d 100644 --- a/ui/app/AppLayouts/Chat/views/ChatHeaderContentView.qml +++ b/ui/app/AppLayouts/Chat/views/ChatHeaderContentView.qml @@ -22,7 +22,7 @@ RowLayout { property var rootStore property var chatContentModule: root.rootStore.currentChatContentModule() property var emojiPopup - property int padding: 8 + property int padding: Style.current.halfPadding signal searchButtonClicked() @@ -41,6 +41,7 @@ RowLayout { Layout.fillHeight: true Layout.alignment: Qt.AlignLeft Layout.leftMargin: padding + Layout.rightMargin: Style.current.padding sourceComponent: { if (d.selectingMembers) return membersSelector diff --git a/ui/app/AppLayouts/Chat/views/CreateChatView.qml b/ui/app/AppLayouts/Chat/views/CreateChatView.qml index fe11daeb40..204bd2c946 100644 --- a/ui/app/AppLayouts/Chat/views/CreateChatView.qml +++ b/ui/app/AppLayouts/Chat/views/CreateChatView.qml @@ -31,22 +31,15 @@ Page { header: Item { implicitHeight: headerLayout.implicitHeight + headerLayout.anchors.topMargin + headerLayout.anchors.bottomMargin - RowLayout { id: headerLayout - anchors { - fill: parent - topMargin: 8 - } - + anchors.fill: parent MembersSelectorView { id: membersSelector - Layout.fillWidth: true Layout.fillHeight: true - Layout.leftMargin: 16 - Layout.rightMargin: 16 - + Layout.leftMargin: Style.current.halfPadding + Layout.rightMargin: Style.current.halfPadding rootStore: root.rootStore enabled: root.rootStore.contactsModel.count > 0 @@ -55,7 +48,6 @@ Page { console.warn("Can't create chat with no members") return } - if (model.count === 1) { const member = model.get(0) const ensName = member.displayName.includes(".eth") ? member.displayName : "" @@ -90,9 +82,7 @@ Page { } StatusActivityCenterButton { - Layout.preferredWidth: 32 - Layout.preferredHeight: 32 - + Layout.alignment: Qt.AlignVCenter unreadNotificationsCount: root.rootStore.unreadNotificationsCount onClicked: Global.openActivityCenterPopup() } @@ -103,17 +93,15 @@ Page { ColumnLayout { anchors { fill: parent - topMargin: 32 - bottomMargin: 12 - leftMargin: 8 + topMargin: Style.current.bigPadding + bottomMargin: Style.current.padding + leftMargin: Style.current.halfPadding } StatusBaseText { Layout.alignment: Qt.AlignTop - Layout.leftMargin: 8 - + Layout.leftMargin: Style.current.halfPadding visible: contactsList.visible - font.pixelSize: 15 text: qsTr("Contacts") color: Theme.palette.baseColor1 @@ -126,9 +114,7 @@ Page { visible: membersSelector.suggestionsModel.count && !(membersSelector.edit.text !== "") - implicitWidth: contentItem.childrenRect.width - model: membersSelector.suggestionsModel delegate: ContactListItemDelegate { onClicked: membersSelector.entryAccepted(this) @@ -137,35 +123,28 @@ Page { StatusChatInput { id: chatInput - Layout.alignment: Qt.AlignBottom Layout.fillWidth: true - visible: membersSelector.model.count > 0 chatType: membersSelector.model.count === 1? Constants.chatType.oneToOne : Constants.chatType.privateGroupChat - emojiPopup: root.emojiPopup recentStickers: root.rootStore.stickersModuleInst.recent stickerPackList: root.rootStore.stickersModuleInst.stickerPacks closeGifPopupAfterSelection: true - onSendTransactionCommandButtonClicked: { root.rootStore.createChatStartSendTransactionProcess = true; root.createChat(); } - onReceiveTransactionCommandButtonClicked: { root.rootStore.createChatStartReceiveTransactionProcess = true; root.createChat(); } - onStickerSelected: { root.rootStore.createChatStickerHashId = hashId; root.rootStore.createChatStickerPackId = packId; root.rootStore.createChatStickerUrl = url; root.createChat(); } - onSendMessage: { root.rootStore.createChatFileUrls = chatInput.fileUrls; root.rootStore.createChatInitMessage = chatInput.textInput.text; diff --git a/ui/app/AppLayouts/Chat/views/MembersSelectorView.qml b/ui/app/AppLayouts/Chat/views/MembersSelectorView.qml index 756c5d17a1..3fd4c5167d 100644 --- a/ui/app/AppLayouts/Chat/views/MembersSelectorView.qml +++ b/ui/app/AppLayouts/Chat/views/MembersSelectorView.qml @@ -36,7 +36,6 @@ MembersSelectorBase { delegate: StatusTagItem { readonly property string _pubKey: model.pubKey - height: ListView.view.height text: model.displayName