fix(CommunitiesPortal): fixed status input as per design

Closes #https://github.com/status-im/status-desktop/issues/6358
2022-07-22 13:28:04 +03:00 · 2022-07-22 13:28:04 +03:00 · 84522bd7fe
parent 3b0dbd6052
commit 84522bd7fe
38 changed files with 73 additions and 64 deletions
--- a/ui/StatusQ
+++ b/ui/StatusQ
@ -1 +1 @@
-Subproject commit 9de0e8ffc5a7394a6bcf2f8d2e3ad21afa70b97f
+Subproject commit 59b2fe4641021f17702f1d4ce7abc074e5e9c825
--- a/ui/app/AppLayouts/Browser/popups/AddFavoriteModal.qml
+++ b/ui/app/AppLayouts/Browser/popups/AddFavoriteModal.qml
@ -83,7 +83,7 @@ ModalPopup {
            rightPadding: 0
            label: qsTr("URL")
            input.text: ogUrl
-            input.placeholderText: qsTr("Paste URL")
+            placeholderText: qsTr("Paste URL")
            input.rightComponent: StatusButton {
                anchors.verticalCenter: parent.verticalCenter
                border.width: 1
@ -110,7 +110,7 @@ ModalPopup {
            rightPadding: 0
            label: qsTr("Name")
            input.text: ogName
-            input.placeholderText: qsTr("Name of the website")
+            placeholderText: qsTr("Name of the website")
            validators: [
                StatusMinLengthValidator {
                    errorMessage: qsTr("Please enter a name")
--- a/ui/app/AppLayouts/Chat/controls/community/CommunityDescriptionInput.qml
+++ b/ui/app/AppLayouts/Chat/controls/community/CommunityDescriptionInput.qml
@ -15,7 +15,7 @@ StatusInput {
    label: qsTr("Description")
    charLimit: 140

-    input.placeholderText: qsTr("What your community is about")
+    placeholderText: qsTr("What your community is about")
    input.multiline: true
    input.implicitHeight: 88

--- a/ui/app/AppLayouts/Chat/controls/community/CommunityNameInput.qml
+++ b/ui/app/AppLayouts/Chat/controls/community/CommunityNameInput.qml
@ -14,7 +14,7 @@ StatusInput {
    rightPadding: 0
    label: qsTr("Community name")
    charLimit: 30
-    input.placeholderText: qsTr("A catchy name")
+    placeholderText: qsTr("A catchy name")
    validators: [
        StatusMinLengthValidator {
            minLength: 1
--- a/ui/app/AppLayouts/Chat/panels/communities/CommunityMembersSettingsPanel.qml
+++ b/ui/app/AppLayouts/Chat/panels/communities/CommunityMembersSettingsPanel.qml
@ -38,7 +38,7 @@ SettingsPageLayout {

            leftPadding: 0
            rightPadding: 0
-            input.placeholderText: qsTr("Member name")
+            placeholderText: qsTr("Member name")
        }

        StatusContactRequestsIndicatorListItem {
--- a/ui/app/AppLayouts/Chat/popups/GroupInfoPopup.qml
+++ b/ui/app/AppLayouts/Chat/popups/GroupInfoPopup.qml
@ -100,18 +100,16 @@ StatusModal {

        spacing: Style.current.padding

-        StatusBaseInput {
+        StatusInput {
            id: searchBox
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignTop
-
-            implicitHeight: 36
+            maximumHeight: 36
            placeholderText: qsTr("Search")
-            placeholderFont.pixelSize: 15
-
-            icon.name: "search"
-            icon.width: 17
-            icon.height: 17
+            input.placeholderFont.pixelSize: 15
+            input.icon.name: "search"
+            input.icon.width: 17
+            input.icon.height: 17
        }

        NoFriendsRectangle {
--- a/ui/app/AppLayouts/Chat/popups/community/CommunitiesPopup.qml
+++ b/ui/app/AppLayouts/Chat/popups/community/CommunitiesPopup.qml
@ -62,7 +62,7 @@ StatusModal {
            StatusInput {
                id: searchBox
                anchors.horizontalCenter: parent.horizontalCenter
-                input.placeholderText: qsTr("Search for communities or topics")
+                placeholderText: qsTr("Search for communities or topics")
                input.icon.name: "search"
            }

--- a/ui/app/AppLayouts/Chat/popups/community/CreateCategoryPopup.qml
+++ b/ui/app/AppLayouts/Chat/popups/community/CreateCategoryPopup.qml
@ -59,7 +59,7 @@ StatusModal {

            label: qsTr("Category title")
            charLimit: maxCategoryNameLength
-            input.placeholderText: qsTr("Name the category")
+            placeholderText: qsTr("Name the category")
            validators: [StatusMinLengthValidator {
                minLength: 1
                errorMessage: Utils.getErrorMessage(nameInput.errors, qsTr("category name"))
--- a/ui/app/AppLayouts/Chat/popups/community/CreateChannelPopup.qml
+++ b/ui/app/AppLayouts/Chat/popups/community/CreateChannelPopup.qml
@ -108,7 +108,7 @@ StatusModal {

                label: qsTr("Channel name")
                charLimit: popup.maxChannelNameLength
-                input.placeholderText: qsTr("Name the channel")
+                placeholderText: qsTr("Name the channel")
                input.onTextChanged: {
                    input.text = Utils.convertSpacesToDashesAndUpperToLowerCase(input.text);
                    input.cursorPosition = input.text.length
@ -215,7 +215,7 @@ StatusModal {
                label: qsTr("Description")
                charLimit: 140

-                input.placeholderText: qsTr("Describe the channel")
+                placeholderText: qsTr("Describe the channel")
                input.multiline: true
                input.implicitHeight: 88
                validationMode: StatusInput.ValidationMode.Always
--- a/ui/app/AppLayouts/Chat/views/ContactsColumnView.qml
+++ b/ui/app/AppLayouts/Chat/views/ContactsColumnView.qml
@ -103,12 +103,13 @@ Item {
        }

        // search field
-        StatusBaseInput {
+        StatusInput {
            id: searchInput
            Layout.fillWidth: true
            Layout.preferredHeight: 36
+            maximumHeight: 36
            placeholderText: qsTr("Search")
-            icon.name: "search"
+            input.icon.name: "search"
            leftPadding: 10
            topPadding: 4
            bottomPadding: 4
--- a/ui/app/AppLayouts/CommunitiesPortal/CommunitiesPortalLayout.qml
+++ b/ui/app/AppLayouts/CommunitiesPortal/CommunitiesPortalLayout.qml
@ -41,6 +41,7 @@ StatusScrollView {

    ColumnLayout {
        id: column
+        width: parent.width
        spacing: 18

        StatusBaseText {
@ -53,19 +54,25 @@ StatusScrollView {
        }

        RowLayout {
-            width: 230/*Card Width by design*/ * featuredGrid.columns  + 2 * featuredGrid.rowSpacing
-            spacing: 24
+            implicitWidth: parent.width
+            implicitHeight: 38
+            spacing: Style.current.bigPadding

-            StatusBaseInput {
+            StatusInput {
                id: searcher
-                enabled: false // Out of scope
+                implicitWidth: 327
                Layout.leftMargin: d.layoutHMargin
-                height: 36 // by design
-                width: 351 // by design
+                Layout.alignment: Qt.AlignVCenter
+                enabled: false // Out of scope
                placeholderText: qsTr("Search")
+                input.icon.name: "search"
+                leftPadding: 0
+                rightPadding: 0
+                topPadding: 0
+                bottomPadding: 0
+                minimumHeight: 36
+                maximumHeight: 36
                text: d.searchText
-                icon.name: "search"
-
                onTextChanged: {
                    console.warn("TODO: Community Cards searcher algorithm.")
                    // 1. Filter Community Cards by title, description or tags category.
@ -78,6 +85,7 @@ StatusScrollView {

            StatusButton {
                id: importBtn
+                Layout.fillHeight: true
                text: qsTr("Import Community")
                onClicked: Global.openPopup(importCommunitiesPopupComponent)
            }
@ -85,6 +93,7 @@ StatusScrollView {
            StatusButton {
                id: createBtn
                objectName: "createCommunityButton"
+                Layout.fillHeight: true
                text: qsTr("Create New Community")
                onClicked: Global.openPopup(createCommunitiesPopupComponent)
            }
--- a/ui/app/AppLayouts/CommunitiesPortal/panels/CommunityTagsPanel.qml
+++ b/ui/app/AppLayouts/CommunitiesPortal/panels/CommunityTagsPanel.qml
@ -81,7 +81,7 @@ StatusScrollView {
            rightPadding: 0
            label: qsTr("Select tags that will fit your Community")
            input.icon.name: "search"
-            input.placeholderText: qsTr("Search tags")
+            placeholderText: qsTr("Search tags")
            Layout.fillWidth: true
        }

--- a/ui/app/AppLayouts/CommunitiesPortal/popups/CreateCommunityPopup.qml
+++ b/ui/app/AppLayouts/CommunitiesPortal/popups/CreateCommunityPopup.qml
@ -137,7 +137,7 @@ StatusStackModal {
                Layout.fillWidth: true
                Layout.fillHeight: true

-                input.maximumHeight: 0
+                maximumHeight: 0
            }

            CommunityOutroMessageInput {
--- a/ui/app/AppLayouts/Onboarding/views/InsertDetailsView.qml
+++ b/ui/app/AppLayouts/Onboarding/views/InsertDetailsView.qml
@ -126,7 +126,7 @@ Item {
            StatusInput {
                id: nameInput
                width: parent.width
-                input.placeholderText: qsTr("Display name")
+                placeholderText: qsTr("Display name")
                input.rightComponent: RoundedIcon {
                    width: 14
                    height: 14
--- a/ui/app/AppLayouts/Profile/popups/AddWakuNodeModal.qml
+++ b/ui/app/AppLayouts/Profile/popups/AddWakuNodeModal.qml
@ -36,7 +36,7 @@ StatusModal {
        StatusInput {
            id: nameInput
            label: qsTr("Name")
-            input.placeholderText: qsTr("Specify a name")
+            placeholderText: qsTr("Specify a name")
            validators: [StatusMinLengthValidator {
                minLength: 1
                errorMessage: qsTr("You need to enter a name")
@ -47,7 +47,7 @@ StatusModal {
        StatusInput {
            id: enodeInput
            label: qsTr("History node address")
-            input.placeholderText:  "enode://{enode-id}:{password}@{ip-address}:{port-number}"
+            placeholderText:  "enode://{enode-id}:{password}@{ip-address}:{port-number}"
            validators: [StatusMinLengthValidator {
                minLength: 1
                errorMessage: qsTr("You need to enter the enode address")
--- a/ui/app/AppLayouts/Profile/popups/RenameAccontModal.qml
+++ b/ui/app/AppLayouts/Profile/popups/RenameAccontModal.qml
@ -49,7 +49,7 @@ StatusModal {
        StatusInput {
            id: accountNameInput
            input.isIconSelectable: true
-            input.placeholderText: qsTr("Enter an account name...")
+            placeholderText: qsTr("Enter an account name...")
            input.text: currentAccount.name
            input.icon.emoji: currentAccount.emoji
            input.icon.color: currentAccount.color
--- a/ui/app/AppLayouts/Profile/popups/SendContactRequestModal.qml
+++ b/ui/app/AppLayouts/Profile/popups/SendContactRequestModal.qml
@ -93,7 +93,7 @@ StatusModal {
            StatusInput {
                id: chatKeyInput

-                input.placeholderText: qsTr("Enter chat key here")
+                placeholderText: qsTr("Enter chat key here")
                input.text: input.edit.focus? d.realChatKey : d.elidedChatKey
                input.rightComponent: {
                    if(d.showPasteButton)
@ -127,7 +127,7 @@ StatusModal {
                id: messageInput
                charLimit: d.maxMsgLength

-                input.placeholderText: qsTr("Say who you are / why you want to become a contact...")
+                placeholderText: qsTr("Say who you are / why you want to become a contact...")
                input.multiline: true
                input.implicitHeight: d.msgHeight
                input.verticalAlignment: TextEdit.AlignTop
--- a/ui/app/AppLayouts/Profile/popups/backupseed/BackupSeedStepBase.qml
+++ b/ui/app/AppLayouts/Profile/popups/backupseed/BackupSeedStepBase.qml
@ -42,7 +42,7 @@ StatusScrollView {
            input.implicitHeight: 44
            validationMode: StatusInput.ValidationMode.Always
            label: qsTr("Word #%1").arg(wordRandomNumber + 1)
-            input.placeholderText: qsTr("Enter word")
+            placeholderText: qsTr("Enter word")
            validators: [
                StatusValidator {
                    validate: function (t) { return (root.wordAtRandomNumber === inputText.text); }
--- a/ui/app/AppLayouts/Profile/views/ContactsView.qml
+++ b/ui/app/AppLayouts/Profile/views/ContactsView.qml
@ -44,7 +44,7 @@ SettingsContentBase {
            anchors.left: parent.left
            anchors.right: parent.right
            input.implicitHeight: 44
-            input.placeholderText: qsTr("Search by a display name or chat key")
+            placeholderText: qsTr("Search by a display name or chat key")
        }

        StatusTabBar {
--- a/ui/app/AppLayouts/Profile/views/NotificationsView.qml
+++ b/ui/app/AppLayouts/Profile/views/NotificationsView.qml
@ -524,7 +524,7 @@ SettingsContentBase {
                        Layout.leftMargin: Style.current.padding
                        Layout.rightMargin: Style.current.padding
                        input.implicitHeight: 44
-                        input.placeholderText: qsTr("Search Communities, Group Chats and 1:1 Chats")
+                        placeholderText: qsTr("Search Communities, Group Chats and 1:1 Chats")
                    }

                    StatusBaseText {
--- a/ui/app/AppLayouts/Profile/views/browser/HomePageView.qml
+++ b/ui/app/AppLayouts/Profile/views/browser/HomePageView.qml
@ -42,7 +42,7 @@ ColumnLayout {
        text: qsTr("Other")
    }

-    StatusBaseInput {
+    StatusInput {
        id: customUrlInput
        Layout.alignment: Qt.AlignTop
        Layout.topMargin: 10
--- a/ui/app/AppLayouts/Profile/views/profile/MyProfileSettingsView.qml
+++ b/ui/app/AppLayouts/Profile/views/profile/MyProfileSettingsView.qml
@ -73,7 +73,7 @@ ColumnLayout {
        id: displayNameInput
        Layout.fillWidth: true
        label: qsTr("Display name")
-        input.placeholderText: qsTr("Display Name")
+        placeholderText: qsTr("Display Name")
        charLimit: 24
        input.text: root.profileStore.displayName
        validators: Constants.validators.displayName
--- a/ui/app/AppLayouts/Wallet/panels/DerivationPathsPanel.qml
+++ b/ui/app/AppLayouts/Wallet/panels/DerivationPathsPanel.qml
@ -57,13 +57,14 @@ ColumnLayout {
            onClicked: derivationPathSelect.reset()
        }
    }
-    StatusBaseInput {
+    StatusInput {
        id: derivationPathInput
        Layout.preferredHeight: 64
        Layout.preferredWidth: parent.width
+        maximumHeight: 64
        text: _internal.defaultDerivationPath
-        color: _internal.pathError ? Theme.palette.dangerColor1 : Theme.palette.directColor1
-        rightComponent: _internal.derivationAddressLoading ? loadingIcon : loadedIcon
+        input.color: _internal.pathError ? Theme.palette.dangerColor1 : Theme.palette.directColor1
+        input.rightComponent: _internal.derivationAddressLoading ? loadingIcon : loadedIcon

        onTextChanged: _internal.userInputTimer.start()

--- a/ui/app/AppLayouts/Wallet/panels/ImportPrivateKeyPanel.qml
+++ b/ui/app/AppLayouts/Wallet/panels/ImportPrivateKeyPanel.qml
@ -48,9 +48,9 @@ ColumnLayout {
        label: qsTr("Private key")
        charLimit: _internal.privateKeyCharLimit
        input.multiline: true
-        input.minimumHeight: 80
-        input.maximumHeight: 108
-        input.placeholderText: qsTr("Paste the contents of your private key")
+        minimumHeight: 80
+        maximumHeight: 108
+        placeholderText: qsTr("Paste the contents of your private key")
        errorMessage: _internal.errorString
        validators: [
            StatusMinLengthValidator {
--- a/ui/app/AppLayouts/Wallet/popups/AddAccountModal.qml
+++ b/ui/app/AppLayouts/Wallet/popups/AddAccountModal.qml
@ -168,7 +168,7 @@ StatusModal {
            spacing: Style.current.halfPadding
            topPadding: Style.dp(20)

-            // To-Do Password hidden option not supported in StatusQ StatusBaseInput
+            // To-Do Password hidden option not supported in StatusQ StatusInput
            Item {
                width: parent.width
                height: passwordInput.height
@ -199,7 +199,7 @@ StatusModal {

            StatusInput {
                id: accountNameInput
-                input.placeholderText: qsTr("Enter an account name...")
+                placeholderText: qsTr("Enter an account name...")
                label: qsTr("Account name")
                input.isIconSelectable: true
                input.icon.color: colorSelectionGrid.selectedColor ? colorSelectionGrid.selectedColor : Theme.palette.directColor1
--- a/ui/app/AppLayouts/Wallet/popups/AddEditSavedAddressPopup.qml
+++ b/ui/app/AppLayouts/Wallet/popups/AddEditSavedAddressPopup.qml
@ -59,7 +59,7 @@ StatusModal {
            id: nameInput
            width: parent.width
            input.implicitHeight: 56
-            input.placeholderText: qsTr("Enter a name")
+            placeholderText: qsTr("Enter a name")
            label: qsTr("Name")
            validators: [
                StatusMinLengthValidator {
--- a/ui/app/AppLayouts/Wallet/views/AdvancedAddAccountView.qml
+++ b/ui/app/AppLayouts/Wallet/views/AdvancedAddAccountView.qml
@ -126,7 +126,7 @@ ColumnLayout {
    StatusInput {
        id: addressInput
        visible: advancedSection.addAccountType === SelectGeneratedAccount.AddAccountType.WatchOnly && advancedSection.visible
-        input.placeholderText: qsTr("Enter address...")
+        placeholderText: qsTr("Enter address...")
        label: qsTr("Account address")
        validators: [
            StatusAddressValidator {
--- a/ui/imports/shared/controls/AmountInputWithCursor.qml
+++ b/ui/imports/shared/controls/AmountInputWithCursor.qml
@ -13,7 +13,7 @@ StatusInput {
    leftPadding: 0
    rightPadding: 0

-    input.placeholderText: ""
+    placeholderText: ""
    input.edit.cursorVisible: true
    input.edit.font.pixelSize: 32
    input.placeholderFont.pixelSize: 32
--- a/ui/imports/shared/controls/SearchBox.qml
+++ b/ui/imports/shared/controls/SearchBox.qml
@ -8,7 +8,7 @@ import StatusQ.Controls 0.1

 StatusInput {
    id: searchBox
-    input.placeholderText: qsTr("Search")
+    placeholderText: qsTr("Search")
    input.icon.name: "search"
    input.clearable: true
    leftPadding: 0
--- a/ui/imports/shared/popups/ContactVerificationRequestPopup.qml
+++ b/ui/imports/shared/popups/ContactVerificationRequestPopup.qml
@ -79,7 +79,7 @@ StatusModal {
            anchors.top: verificationMessage.bottom
            anchors.topMargin: 5
            input.multiline: true
-            input.placeholderText: qsTr("Provide answer to verification request from this contact.")
+            placeholderText: qsTr("Provide answer to verification request from this contact.")
            input.implicitHeight: 152
            width: parent.width
            input.verticalAlignment: TextEdit.AlignTop
--- a/ui/imports/shared/popups/DisplayNamePopup.qml
+++ b/ui/imports/shared/popups/DisplayNamePopup.qml
@ -27,7 +27,7 @@ StatusModal {
            anchors.top: parent.top
            anchors.topMargin: Style.current.padding
            anchors.horizontalCenter: parent.horizontalCenter
-            input.placeholderText: qsTr("Display Name")
+            placeholderText: qsTr("Display Name")
            input.text: root.profileStore.displayName
            validators: Constants.validators.displayName
        }
--- a/ui/imports/shared/popups/NicknamePopup.qml
+++ b/ui/imports/shared/popups/NicknamePopup.qml
@ -53,7 +53,7 @@ StatusModal {

            StatusInput {
                id: nicknameInput
-                input.placeholderText: qsTr("Nickname")
+                placeholderText: qsTr("Nickname")

                width: parent.width

--- a/ui/imports/shared/popups/SendContactRequestModal.qml
+++ b/ui/imports/shared/popups/SendContactRequestModal.qml
@ -53,7 +53,7 @@ StatusModal {
            id: messageInput
            charLimit: d.maxMsgLength

-            input.placeholderText: qsTr("Say who you are / why you want to become a contact...")
+            placeholderText: qsTr("Say who you are / why you want to become a contact...")
            input.multiline: true
            input.implicitHeight: d.msgHeight
            input.verticalAlignment: TextEdit.AlignTop
--- a/ui/imports/shared/popups/SendModal.qml
+++ b/ui/imports/shared/popups/SendModal.qml
@ -155,7 +155,7 @@ StatusModal {
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: parent.left
                        width: parent.width - assetSelector.width
-                        input.placeholderText: "0.00" + " " + assetSelector.selectedAsset.symbol
+                        placeholderText: "0.00" + " " + assetSelector.selectedAsset.symbol
                        errorMessageCmp.anchors.rightMargin: -100
                        input.edit.color: d.errorMode ? Theme.palette.dangerColor1 : Theme.palette.directColor1
                        validators: [
--- a/ui/imports/shared/status/StatusGifPopup.qml
+++ b/ui/imports/shared/status/StatusGifPopup.qml
@ -94,7 +94,7 @@ Popup {

            SearchBox {
                id: searchBox
-                input.placeholderText: qsTr("Search Tenor")
+                placeholderText: qsTr("Search Tenor")
                enabled: RootStore.isTenorWarningAccepted
                anchors.right: parent.right
                anchors.rightMargin: gifHeader.headerMargin
--- a/ui/imports/shared/status/StatusSearchListPopup.qml
+++ b/ui/imports/shared/status/StatusSearchListPopup.qml
@ -54,7 +54,7 @@ Popup {
            Layout.fillWidth: true
            leftPadding: 0
            rightPadding: 0
-            input.placeholderText: root.searchBoxPlaceholder
+            placeholderText: root.searchBoxPlaceholder
            input.icon: StatusIconSettings {
                width: 24
                height: 24
--- a/ui/imports/shared/views/ProfileView.qml
+++ b/ui/imports/shared/views/ProfileView.qml
@ -343,7 +343,7 @@ Rectangle {
            Layout.leftMargin: d.contentMargins
            input.multiline: true
            input.implicitHeight: 152
-            input.placeholderText: qsTr("Ask a question that only the real %1 will be able to answer e.g. a question about a shared experience, or ask Mark to enter a code or phrase you have sent to them via a different communication channel (phone, post, etc...).").arg(userIsEnsVerified ? userEnsName : userDisplayName)
+            placeholderText: qsTr("Ask a question that only the real %1 will be able to answer e.g. a question about a shared experience, or ask Mark to enter a code or phrase you have sent to them via a different communication channel (phone, post, etc...).").arg(userIsEnsVerified ? userEnsName : userDisplayName)
        }

        MessageView {
--- a/ui/imports/shared/views/TabAddressSelectorView.qml
+++ b/ui/imports/shared/views/TabAddressSelectorView.qml
@ -95,12 +95,12 @@ Item {
                    id: search
                    ColumnLayout {
                        width: parent.width
-                        StatusBaseInput {
+                        StatusInput {
                            Layout.preferredHeight: 55
                            Layout.preferredWidth: parent.width
-                            showBackground: false
+                            input.showBackground: false
                            placeholderText: qsTr("Search for saved address")
-                            rightComponent: StatusIcon {
+                            input.rightComponent: StatusIcon {
                                icon: "search"
                                height: 17
                                color: Theme.palette.baseColor1