From 0418979e9cf95a908c0d5c24b4e50984e64036f7 Mon Sep 17 00:00:00 2001 From: MishkaRogachev Date: Mon, 25 Jul 2022 16:22:09 +0300 Subject: [PATCH] fix(desktop): Move Input anchors binding to client code --- .../Browser/popups/JSDialogWindow.qml | 3 +- .../popups/KeycardCreatePINModal.qml | 2 + .../Onboarding/shared/CreatePasswordModal.qml | 2 + .../AppLayouts/Onboarding/views/LoginView.qml | 2 +- .../Profile/popups/AddShowTokenModal.qml | 6 +- .../AppLayouts/Profile/views/DevicesView.qml | 4 +- .../Profile/views/EnsSearchView.qml | 1 + .../shared/controls/ContactsListAndSearch.qml | 334 +++++++++--------- ui/imports/shared/controls/GasSelector.qml | 2 - ui/imports/shared/views/ExistingContacts.qml | 26 +- ui/imports/shared/views/TransactionSigner.qml | 2 + 11 files changed, 197 insertions(+), 187 deletions(-) diff --git a/ui/app/AppLayouts/Browser/popups/JSDialogWindow.qml b/ui/app/AppLayouts/Browser/popups/JSDialogWindow.qml index 26d071a7a5..2da2965469 100644 --- a/ui/app/AppLayouts/Browser/popups/JSDialogWindow.qml +++ b/ui/app/AppLayouts/Browser/popups/JSDialogWindow.qml @@ -53,8 +53,9 @@ ModalPopup { id: prompt text: "" visible: false - Layout.fillWidth: true anchors.top: svMessage.bottom + anchors.right: parent.right + anchors.left: parent.left } footer: Item { diff --git a/ui/app/AppLayouts/Onboarding/popups/KeycardCreatePINModal.qml b/ui/app/AppLayouts/Onboarding/popups/KeycardCreatePINModal.qml index 6f6d7a4eeb..b3d4c52f94 100644 --- a/ui/app/AppLayouts/Onboarding/popups/KeycardCreatePINModal.qml +++ b/ui/app/AppLayouts/Onboarding/popups/KeycardCreatePINModal.qml @@ -35,7 +35,9 @@ StatusModal { contentItem: Item { Input { id: firstPINField + anchors.right: parent.right anchors.rightMargin: 56 + anchors.left: parent.left anchors.leftMargin: 56 anchors.top: parent.top anchors.topMargin: 88 diff --git a/ui/app/AppLayouts/Onboarding/shared/CreatePasswordModal.qml b/ui/app/AppLayouts/Onboarding/shared/CreatePasswordModal.qml index d1f39526e5..7308fef6da 100644 --- a/ui/app/AppLayouts/Onboarding/shared/CreatePasswordModal.qml +++ b/ui/app/AppLayouts/Onboarding/shared/CreatePasswordModal.qml @@ -34,6 +34,8 @@ ModalPopup { Input { id: firstPasswordField + anchors.left: parent.left + anchors.right: parent.right anchors.rightMargin: 56 anchors.leftMargin: 56 anchors.top: parent.top diff --git a/ui/app/AppLayouts/Onboarding/views/LoginView.qml b/ui/app/AppLayouts/Onboarding/views/LoginView.qml index f45dbb43df..8989a81a71 100644 --- a/ui/app/AppLayouts/Onboarding/views/LoginView.qml +++ b/ui/app/AppLayouts/Onboarding/views/LoginView.qml @@ -880,4 +880,4 @@ Item { } } ] -} +} \ No newline at end of file diff --git a/ui/app/AppLayouts/Profile/popups/AddShowTokenModal.qml b/ui/app/AppLayouts/Profile/popups/AddShowTokenModal.qml index 6cab56a81e..7fd55872a6 100644 --- a/ui/app/AppLayouts/Profile/popups/AddShowTokenModal.qml +++ b/ui/app/AppLayouts/Profile/popups/AddShowTokenModal.qml @@ -97,6 +97,8 @@ StatusModal { anchors.rightMargin: Style.current.padding Input { id: addressInput + anchors.left: parent.left + anchors.right: parent.right readOnly: !editable textField.maximumLength: 42 placeholderText: qsTr("Enter contract address...") @@ -107,9 +109,11 @@ StatusModal { Input { id: nameInput - readOnly: !editable + anchors.left: parent.left + anchors.right: parent.right anchors.top: addressInput.bottom anchors.topMargin: marginBetweenInputs + readOnly: !editable placeholderText: qsTr("The name of your token...") label: qsTr("Name") } diff --git a/ui/app/AppLayouts/Profile/views/DevicesView.qml b/ui/app/AppLayouts/Profile/views/DevicesView.qml index 919d096dec..7c5f2c1623 100644 --- a/ui/app/AppLayouts/Profile/views/DevicesView.qml +++ b/ui/app/AppLayouts/Profile/views/DevicesView.qml @@ -44,9 +44,11 @@ SettingsContentBase { Input { id: deviceNameTxt - placeholderText: qsTr("Specify a name") + anchors.left: parent.left + anchors.right: parent.right anchors.top: deviceNameLbl.bottom anchors.topMargin: Style.current.padding + placeholderText: qsTr("Specify a name") } // TODO: replace with StatusQ component diff --git a/ui/app/AppLayouts/Profile/views/EnsSearchView.qml b/ui/app/AppLayouts/Profile/views/EnsSearchView.qml index 08a8b840fb..cb3591971f 100644 --- a/ui/app/AppLayouts/Profile/views/EnsSearchView.qml +++ b/ui/app/AppLayouts/Profile/views/EnsSearchView.qml @@ -138,6 +138,7 @@ Item { Input { id: ensUsername placeholderText: !isStatus ? "vitalik94.domain.eth" : "vitalik94" + anchors.left: parent.left anchors.top: circleAt.bottom anchors.topMargin: Style.current.bigPadding anchors.right: btnContinue.left diff --git a/ui/imports/shared/controls/ContactsListAndSearch.qml b/ui/imports/shared/controls/ContactsListAndSearch.qml index 7c941ee95f..67e56c74ee 100644 --- a/ui/imports/shared/controls/ContactsListAndSearch.qml +++ b/ui/imports/shared/controls/ContactsListAndSearch.qml @@ -1,6 +1,6 @@ -import QtQuick 2.13 -import QtQuick.Controls 2.13 -import QtGraphicalEffects 1.13 +import QtQuick 2.14 +import QtQuick.Layouts 1.4 +import QtGraphicalEffects 1.14 import utils 1.0 import shared.stores 1.0 @@ -15,8 +15,6 @@ import "." Item { id: root - height: (chatKey.height + message.height + existingContacts.height - + searchResults.height + noContactsRect.height + 24) property var rootStore property var contactsStore @@ -34,14 +32,12 @@ Item { property bool showCheckbox: false property bool showContactList: true property bool showSearch: true - signal userClicked(string pubKey, bool isAddedContact, string name, string address) property var pubKeys: ([]) property bool hideCommunityMembers: false property bool addContactEnabled: true property string wrongInputValidationError: qsTr("Enter a valid chat key or ENS username"); - - property var resolveENS: Backpressure.debounce(root, 500, function (ensName) { + readonly property var resolveENS: Backpressure.debounce(root, 500, function (ensName) { noContactsRect.visible = false searchResults.loading = true searchResults.showProfileNotFoundMessage = false @@ -61,174 +57,176 @@ Item { return root.validationError === ""; } - Input { - id: chatKey - property bool hasValidSearchResult: false - height: visible ? implicitHeight : 0 - placeholderText: qsTr("Enter ENS username or chat key") - visible: showSearch - Keys.onReleased: { - successMessage = ""; - searchResults.pubKey = ""; - root.validationError = ""; - searchResults.showProfileNotFoundMessage = false; - if (chatKey.text !== "") { - if (!validate()) { - noContactsRect.visible = false; - return; - } + signal userClicked(string pubKey, bool isAddedContact, string name, string address) - chatKey.text = chatKey.text.trim(); + implicitWidth: column.implicitWidth + implicitHeight: column.implicitHeight - if (Utils.isChatKey(chatKey.text)) { - pubKey = chatKey.text; - let contactDetails = Utils.getContactDetailsAsJson(pubKey) - if (!contactDetails.isContact) { - searchResults.username = contactDetails.alias - searchResults.userAlias = Utils.compactAddress(pubKey, 4); - searchResults.pubKey = pubKey - } - noContactsRect.visible = false; - return; - } + ColumnLayout { + id: column + anchors.fill: parent + spacing: Style.current.smallPadding - chatKey.hasValidSearchResult = false - Qt.callLater(resolveENS, chatKey.text); - } else { + Input { + id: chatKey + + property bool hasValidSearchResult: false + + placeholderText: qsTr("Enter ENS username or chat key") + visible: showSearch + textField.anchors.rightMargin: clearBtn.width + Style.current.padding + 2 + + Layout.fillWidth: true + Layout.preferredHeight: visible ? implicitHeight : 0 + Keys.onReleased: { + successMessage = ""; + searchResults.pubKey = ""; root.validationError = ""; - } - } - textField.anchors.rightMargin: clearBtn.width + Style.current.padding + 2 - - Connections { - target: mainModule - onResolvedENS: { - chatKey.hasValidSearchResult = false - if (chatKey.text == "") { - ensUsername.text = ""; - pubKey = ""; - } else if(resolvedPubKey == ""){ - ensUsername.text = ""; - searchResults.pubKey = pubKey = ""; - searchResults.address = ""; - searchResults.showProfileNotFoundMessage = root.showContactList - } else { - if (userProfile.pubKey === resolvedPubKey) { - root.validationError = qsTr("Can't chat with yourself"); - } else { - chatKey.hasValidSearchResult = true - searchResults.username = Utils.addStatusEns(chatKey.text.trim()) - let userAlias = globalUtils.generateAlias(resolvedPubKey) - userAlias = userAlias.length > 20 ? userAlias.substring(0, 19) + "..." : userAlias - searchResults.userAlias = userAlias + " • " + Utils.compactAddress(resolvedPubKey, 4) - searchResults.pubKey = pubKey = resolvedPubKey; - searchResults.address = resolvedAddress; - } - searchResults.showProfileNotFoundMessage = false - } - searchResults.loading = false; - noContactsRect.visible = pubKey === "" && - ensUsername.text === "" && - root.contactsStore.myContactsModel.count === 0 && - !profileNotFoundMessage.visible - } - } - - StatusFlatRoundButton { - id: clearBtn - width: 20 - height: 20 - anchors.right: parent.right - anchors.rightMargin: Style.current.padding - anchors.verticalCenter: parent.verticalCenter - icon.name: "clear" - visible: chatKey.text !== "" && !chatKey.readOnly - icon.width: 20 - icon.height: 20 - type: StatusFlatRoundButton.Type.Tertiary - color: "transparent" - onClicked: { - chatKey.text = ""; - chatKey.forceActiveFocus(Qt.MouseFocusReason); searchResults.showProfileNotFoundMessage = false; - searchResults.pubKey = pubKey = ""; - noContactsRect.visible = false; - searchResults.loading = false; - root.validationError = ""; + if (chatKey.text !== "") { + if (!validate()) { + noContactsRect.visible = false; + return; + } + + chatKey.text = chatKey.text.trim(); + + if (Utils.isChatKey(chatKey.text)) { + pubKey = chatKey.text; + let contactDetails = Utils.getContactDetailsAsJson(pubKey); + if (!contactDetails.isContact) { + searchResults.username = contactDetails.alias; + searchResults.userAlias = Utils.compactAddress(pubKey, 4); + searchResults.pubKey = pubKey; + } + noContactsRect.visible = false; + return; + } + + chatKey.hasValidSearchResult = false + Qt.callLater(resolveENS, chatKey.text); + } else { + root.validationError = ""; + } + } + + Connections { + target: mainModule + onResolvedENS: { + chatKey.hasValidSearchResult = false + if (chatKey.text == "") { + ensUsername.text = ""; + pubKey = ""; + } else if(resolvedPubKey == ""){ + ensUsername.text = ""; + searchResults.pubKey = pubKey = ""; + searchResults.address = ""; + searchResults.showProfileNotFoundMessage = root.showContactList + } else { + if (userProfile.pubKey === resolvedPubKey) { + root.validationError = qsTr("Can't chat with yourself"); + } else { + chatKey.hasValidSearchResult = true + searchResults.username = Utils.addStatusEns(chatKey.text.trim()) + let userAlias = globalUtils.generateAlias(resolvedPubKey) + userAlias = userAlias.length > 20 ? userAlias.substring(0, 19) + "..." : userAlias + searchResults.userAlias = userAlias + " • " + Utils.compactAddress(resolvedPubKey, 4) + searchResults.pubKey = pubKey = resolvedPubKey; + searchResults.address = resolvedAddress; + } + searchResults.showProfileNotFoundMessage = false + } + searchResults.loading = false; + noContactsRect.visible = pubKey === "" && + ensUsername.text === "" && + root.contactsStore.myContactsModel.count === 0 && + !profileNotFoundMessage.visible + } + } + + StatusFlatRoundButton { + id: clearBtn + width: 20 + height: 20 + anchors.right: parent.right + anchors.rightMargin: Style.current.padding + anchors.verticalCenter: parent.verticalCenter + icon.name: "clear" + visible: chatKey.text !== "" && !chatKey.readOnly + icon.width: 20 + icon.height: 20 + type: StatusFlatRoundButton.Type.Tertiary + color: "transparent" + onClicked: { + chatKey.text = ""; + chatKey.forceActiveFocus(Qt.MouseFocusReason); + searchResults.showProfileNotFoundMessage = false; + searchResults.pubKey = pubKey = ""; + noContactsRect.visible = false; + searchResults.loading = false; + root.validationError = ""; + chatKey.hasValidSearchResult = false + } + } + } + + StyledText { + id: message + text: root.validationError || successMessage + visible: root.validationError !== "" || successMessage !== "" + font.pixelSize: 13 + color: !!root.validationError ? Style.current.danger : Style.current.success + Layout.alignment: Qt.AlignHCenter + Layout.preferredHeight: visible ? contentHeight : 0 + } + + ExistingContacts { + id: existingContacts + + contactsStore: root.contactsStore + community: root.community + visible: showContactList + hideCommunityMembers: root.hideCommunityMembers + showCheckbox: root.showCheckbox + filterText: chatKey.text + pubKeys: root.pubKeys + onContactClicked: function (contact) { + if (!contact || typeof contact === "string") { + return + } + const index = root.pubKeys.indexOf(contact.pubKey) + const pubKeysCopy = Object.assign([], root.pubKeys) + if (index === -1) { + pubKeysCopy.push(contact.pubKey) + } else { + pubKeysCopy.splice(index, 1) + } + root.pubKeys = pubKeysCopy + chatKey.hasValidSearchResult = false + userClicked(contact.pubKey, contact.isContact, contact.alias, contact.address) + } + expanded: !searchResults.loading && pubKey === "" && !searchResults.showProfileNotFoundMessage + Layout.fillWidth: true + } + + SearchResults { + id: searchResults + hasExistingContacts: existingContacts.visible + loading: false + addContactEnabled: root.addContactEnabled + onResultClicked: { + chatKey.hasValidSearchResult = false + userClicked(pubKey, isAddedContact, username, searchResults.address) + if (!validate()) { + return + } + } + onAddToContactsButtonClicked: { + root.contactsStore.addContact(pubKey) } } - } - - StyledText { - id: message - text: root.validationError || successMessage - visible: root.validationError !== "" || successMessage !== "" - height: visible ? contentHeight : 0 - font.pixelSize: 13 - color: !!root.validationError ? Style.current.danger : Style.current.success - anchors.top: chatKey.bottom - anchors.topMargin: Style.current.smallPadding - anchors.horizontalCenter: parent.horizontalCenter - } - - ExistingContacts { - id: existingContacts - - contactsStore: root.contactsStore - community: root.community - visible: showContactList - hideCommunityMembers: root.hideCommunityMembers - anchors.topMargin: this.height > 0 ? Style.current.halfPadding : 0 - anchors.top: { - if (message.visible) { - return message.bottom - } - if (chatKey.visible) { - return chatKey.bottom - } - } - showCheckbox: root.showCheckbox - filterText: chatKey.text - pubKeys: root.pubKeys - onContactClicked: function (contact) { - if (!contact || typeof contact === "string") { - return - } - const index = root.pubKeys.indexOf(contact.pubKey) - const pubKeysCopy = Object.assign([], root.pubKeys) - if (index === -1) { - pubKeysCopy.push(contact.pubKey) - } else { - pubKeysCopy.splice(index, 1) - } - root.pubKeys = pubKeysCopy - - chatKey.hasValidSearchResult = false - userClicked(contact.pubKey, contact.isContact, contact.alias, contact.address) - } - expanded: !searchResults.loading && pubKey === "" && !searchResults.showProfileNotFoundMessage - } - - SearchResults { - id: searchResults - anchors.top: existingContacts.visible ? existingContacts.bottom : - message.visible? message.bottom : chatKey.bottom - anchors.topMargin: Style.current.halfPadding - hasExistingContacts: existingContacts.visible - loading: false - width: searchResultsWidth > 0 ? searchResultsWidth : parent.width - addContactEnabled: root.addContactEnabled - onResultClicked: { - chatKey.hasValidSearchResult = false - userClicked(pubKey, isAddedContact, username, searchResults.address) - if (!validate()) { - return - } - } - onAddToContactsButtonClicked: { - root.contactsStore.addContact(pubKey) - } + Layout.fillWidth: true } NoFriendsRectangle { diff --git a/ui/imports/shared/controls/GasSelector.qml b/ui/imports/shared/controls/GasSelector.qml index 5997849f9d..0f7f1bfe9a 100644 --- a/ui/imports/shared/controls/GasSelector.qml +++ b/ui/imports/shared/controls/GasSelector.qml @@ -334,7 +334,6 @@ Item { anchors.top: parent.top anchors.right: inputGasPrice.left anchors.rightMargin: Style.current.padding - anchors.left: undefined visible: root.suggestedFees.eip1559Enabled width: 125 customHeight: 56 @@ -364,7 +363,6 @@ Item { label: qsTr("Per-gas overall limit") inputLabel.color: Style.current.secondaryText anchors.top: parent.top - anchors.left: undefined anchors.right: parent.right width: 125 customHeight: 56 diff --git a/ui/imports/shared/views/ExistingContacts.qml b/ui/imports/shared/views/ExistingContacts.qml index 3bc2e3a9f9..caa54cc6d7 100644 --- a/ui/imports/shared/views/ExistingContacts.qml +++ b/ui/imports/shared/views/ExistingContacts.qml @@ -12,9 +12,6 @@ import AppLayouts.Chat.controls 1.0 Item { id: root - anchors.left: parent.left - anchors.right: parent.right - height: visible ? Math.min(contactListView.contentHeight, (expanded ? 320 : 192)) : 0 property var contactsStore property var community @@ -24,6 +21,7 @@ Item { property bool showCheckbox: false property bool hideCommunityMembers: false property var pubKeys: ([]) + signal contactClicked(var contact) function matchesAlias(name, filter) { @@ -31,6 +29,9 @@ Item { return parts.some(p => p.startsWith(filter)) } + implicitWidth: contactListView.implicitWidth + implicitHeight: visible ? Math.min(contactListView.contentHeight, (expanded ? 320 : 192)) : 0 + StatusListView { id: contactListView anchors.fill: parent @@ -38,6 +39,7 @@ Item { model: root.contactsStore.myContactsModel delegate: Contact { + width: contactListView.availableWidth showCheckbox: root.showCheckbox isChecked: root.pubKeys.indexOf(model.pubKey) > -1 pubKey: model.pubKey @@ -47,20 +49,18 @@ Item { image: model.icon isVisible: { return model.isContact && !model.isBlocked && (root.filterText === "" || - root.matchesAlias(model.alias.toLowerCase(), root.filterText.toLowerCase()) || - model.displayName.toLowerCase().includes(root.filterText.toLowerCase()) || - model.ensName.toLowerCase().includes(root.filterText.toLowerCase()) || - model.localNickname.toLowerCase().includes(root.filterText.toLowerCase()) || - model.pubKey.toLowerCase().includes(root.filterText.toLowerCase())) && - (!root.hideCommunityMembers || - !root.community.hasMember(model.pubKey)) + root.matchesAlias(model.alias.toLowerCase(), root.filterText.toLowerCase()) || + model.displayName.toLowerCase().includes(root.filterText.toLowerCase()) || + model.ensName.toLowerCase().includes(root.filterText.toLowerCase()) || + model.localNickname.toLowerCase().includes(root.filterText.toLowerCase()) || + model.pubKey.toLowerCase().includes(root.filterText.toLowerCase())) && + (!root.hideCommunityMembers || + !root.community.hasMember(model.pubKey)); } onContactClicked: function () { - root.contactClicked(model) + root.contactClicked(model); } } - - ScrollBar.vertical: ScrollBar { policy: ScrollBar.AsNeeded } } } diff --git a/ui/imports/shared/views/TransactionSigner.qml b/ui/imports/shared/views/TransactionSigner.qml index 4374345367..0a27302946 100644 --- a/ui/imports/shared/views/TransactionSigner.qml +++ b/ui/imports/shared/views/TransactionSigner.qml @@ -96,6 +96,8 @@ Item { Input { id: txtPassword + anchors.left: parent.left + anchors.right: parent.right anchors.top: signingPhrase.bottom anchors.topMargin: Style.current.bigPadding textField.objectName: "transactionSignerPasswordInput"