fix(CommunitiesPortal): fixed status input as per design

Closes #https://github.com/status-im/status-desktop/issues/6358
This commit is contained in:
Alexandra Betouni 2022-07-22 13:28:04 +03:00 committed by Alexandra Betouni
parent 3b0dbd6052
commit 84522bd7fe
38 changed files with 73 additions and 64 deletions

@ -1 +1 @@
Subproject commit 9de0e8ffc5a7394a6bcf2f8d2e3ad21afa70b97f Subproject commit 59b2fe4641021f17702f1d4ce7abc074e5e9c825

View File

@ -83,7 +83,7 @@ ModalPopup {
rightPadding: 0 rightPadding: 0
label: qsTr("URL") label: qsTr("URL")
input.text: ogUrl input.text: ogUrl
input.placeholderText: qsTr("Paste URL") placeholderText: qsTr("Paste URL")
input.rightComponent: StatusButton { input.rightComponent: StatusButton {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
border.width: 1 border.width: 1
@ -110,7 +110,7 @@ ModalPopup {
rightPadding: 0 rightPadding: 0
label: qsTr("Name") label: qsTr("Name")
input.text: ogName input.text: ogName
input.placeholderText: qsTr("Name of the website") placeholderText: qsTr("Name of the website")
validators: [ validators: [
StatusMinLengthValidator { StatusMinLengthValidator {
errorMessage: qsTr("Please enter a name") errorMessage: qsTr("Please enter a name")

View File

@ -15,7 +15,7 @@ StatusInput {
label: qsTr("Description") label: qsTr("Description")
charLimit: 140 charLimit: 140
input.placeholderText: qsTr("What your community is about") placeholderText: qsTr("What your community is about")
input.multiline: true input.multiline: true
input.implicitHeight: 88 input.implicitHeight: 88

View File

@ -14,7 +14,7 @@ StatusInput {
rightPadding: 0 rightPadding: 0
label: qsTr("Community name") label: qsTr("Community name")
charLimit: 30 charLimit: 30
input.placeholderText: qsTr("A catchy name") placeholderText: qsTr("A catchy name")
validators: [ validators: [
StatusMinLengthValidator { StatusMinLengthValidator {
minLength: 1 minLength: 1

View File

@ -38,7 +38,7 @@ SettingsPageLayout {
leftPadding: 0 leftPadding: 0
rightPadding: 0 rightPadding: 0
input.placeholderText: qsTr("Member name") placeholderText: qsTr("Member name")
} }
StatusContactRequestsIndicatorListItem { StatusContactRequestsIndicatorListItem {

View File

@ -100,18 +100,16 @@ StatusModal {
spacing: Style.current.padding spacing: Style.current.padding
StatusBaseInput { StatusInput {
id: searchBox id: searchBox
Layout.fillWidth: true Layout.fillWidth: true
Layout.alignment: Qt.AlignTop Layout.alignment: Qt.AlignTop
maximumHeight: 36
implicitHeight: 36
placeholderText: qsTr("Search") placeholderText: qsTr("Search")
placeholderFont.pixelSize: 15 input.placeholderFont.pixelSize: 15
input.icon.name: "search"
icon.name: "search" input.icon.width: 17
icon.width: 17 input.icon.height: 17
icon.height: 17
} }
NoFriendsRectangle { NoFriendsRectangle {

View File

@ -62,7 +62,7 @@ StatusModal {
StatusInput { StatusInput {
id: searchBox id: searchBox
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
input.placeholderText: qsTr("Search for communities or topics") placeholderText: qsTr("Search for communities or topics")
input.icon.name: "search" input.icon.name: "search"
} }

View File

@ -59,7 +59,7 @@ StatusModal {
label: qsTr("Category title") label: qsTr("Category title")
charLimit: maxCategoryNameLength charLimit: maxCategoryNameLength
input.placeholderText: qsTr("Name the category") placeholderText: qsTr("Name the category")
validators: [StatusMinLengthValidator { validators: [StatusMinLengthValidator {
minLength: 1 minLength: 1
errorMessage: Utils.getErrorMessage(nameInput.errors, qsTr("category name")) errorMessage: Utils.getErrorMessage(nameInput.errors, qsTr("category name"))

View File

@ -108,7 +108,7 @@ StatusModal {
label: qsTr("Channel name") label: qsTr("Channel name")
charLimit: popup.maxChannelNameLength charLimit: popup.maxChannelNameLength
input.placeholderText: qsTr("Name the channel") placeholderText: qsTr("Name the channel")
input.onTextChanged: { input.onTextChanged: {
input.text = Utils.convertSpacesToDashesAndUpperToLowerCase(input.text); input.text = Utils.convertSpacesToDashesAndUpperToLowerCase(input.text);
input.cursorPosition = input.text.length input.cursorPosition = input.text.length
@ -215,7 +215,7 @@ StatusModal {
label: qsTr("Description") label: qsTr("Description")
charLimit: 140 charLimit: 140
input.placeholderText: qsTr("Describe the channel") placeholderText: qsTr("Describe the channel")
input.multiline: true input.multiline: true
input.implicitHeight: 88 input.implicitHeight: 88
validationMode: StatusInput.ValidationMode.Always validationMode: StatusInput.ValidationMode.Always

View File

@ -103,12 +103,13 @@ Item {
} }
// search field // search field
StatusBaseInput { StatusInput {
id: searchInput id: searchInput
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 36 Layout.preferredHeight: 36
maximumHeight: 36
placeholderText: qsTr("Search") placeholderText: qsTr("Search")
icon.name: "search" input.icon.name: "search"
leftPadding: 10 leftPadding: 10
topPadding: 4 topPadding: 4
bottomPadding: 4 bottomPadding: 4

View File

@ -41,6 +41,7 @@ StatusScrollView {
ColumnLayout { ColumnLayout {
id: column id: column
width: parent.width
spacing: 18 spacing: 18
StatusBaseText { StatusBaseText {
@ -53,19 +54,25 @@ StatusScrollView {
} }
RowLayout { RowLayout {
width: 230/*Card Width by design*/ * featuredGrid.columns + 2 * featuredGrid.rowSpacing implicitWidth: parent.width
spacing: 24 implicitHeight: 38
spacing: Style.current.bigPadding
StatusBaseInput { StatusInput {
id: searcher id: searcher
enabled: false // Out of scope implicitWidth: 327
Layout.leftMargin: d.layoutHMargin Layout.leftMargin: d.layoutHMargin
height: 36 // by design Layout.alignment: Qt.AlignVCenter
width: 351 // by design enabled: false // Out of scope
placeholderText: qsTr("Search") placeholderText: qsTr("Search")
input.icon.name: "search"
leftPadding: 0
rightPadding: 0
topPadding: 0
bottomPadding: 0
minimumHeight: 36
maximumHeight: 36
text: d.searchText text: d.searchText
icon.name: "search"
onTextChanged: { onTextChanged: {
console.warn("TODO: Community Cards searcher algorithm.") console.warn("TODO: Community Cards searcher algorithm.")
// 1. Filter Community Cards by title, description or tags category. // 1. Filter Community Cards by title, description or tags category.
@ -78,6 +85,7 @@ StatusScrollView {
StatusButton { StatusButton {
id: importBtn id: importBtn
Layout.fillHeight: true
text: qsTr("Import Community") text: qsTr("Import Community")
onClicked: Global.openPopup(importCommunitiesPopupComponent) onClicked: Global.openPopup(importCommunitiesPopupComponent)
} }
@ -85,6 +93,7 @@ StatusScrollView {
StatusButton { StatusButton {
id: createBtn id: createBtn
objectName: "createCommunityButton" objectName: "createCommunityButton"
Layout.fillHeight: true
text: qsTr("Create New Community") text: qsTr("Create New Community")
onClicked: Global.openPopup(createCommunitiesPopupComponent) onClicked: Global.openPopup(createCommunitiesPopupComponent)
} }

View File

@ -81,7 +81,7 @@ StatusScrollView {
rightPadding: 0 rightPadding: 0
label: qsTr("Select tags that will fit your Community") label: qsTr("Select tags that will fit your Community")
input.icon.name: "search" input.icon.name: "search"
input.placeholderText: qsTr("Search tags") placeholderText: qsTr("Search tags")
Layout.fillWidth: true Layout.fillWidth: true
} }

View File

@ -137,7 +137,7 @@ StatusStackModal {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
input.maximumHeight: 0 maximumHeight: 0
} }
CommunityOutroMessageInput { CommunityOutroMessageInput {

View File

@ -126,7 +126,7 @@ Item {
StatusInput { StatusInput {
id: nameInput id: nameInput
width: parent.width width: parent.width
input.placeholderText: qsTr("Display name") placeholderText: qsTr("Display name")
input.rightComponent: RoundedIcon { input.rightComponent: RoundedIcon {
width: 14 width: 14
height: 14 height: 14

View File

@ -36,7 +36,7 @@ StatusModal {
StatusInput { StatusInput {
id: nameInput id: nameInput
label: qsTr("Name") label: qsTr("Name")
input.placeholderText: qsTr("Specify a name") placeholderText: qsTr("Specify a name")
validators: [StatusMinLengthValidator { validators: [StatusMinLengthValidator {
minLength: 1 minLength: 1
errorMessage: qsTr("You need to enter a name") errorMessage: qsTr("You need to enter a name")
@ -47,7 +47,7 @@ StatusModal {
StatusInput { StatusInput {
id: enodeInput id: enodeInput
label: qsTr("History node address") 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 { validators: [StatusMinLengthValidator {
minLength: 1 minLength: 1
errorMessage: qsTr("You need to enter the enode address") errorMessage: qsTr("You need to enter the enode address")

View File

@ -49,7 +49,7 @@ StatusModal {
StatusInput { StatusInput {
id: accountNameInput id: accountNameInput
input.isIconSelectable: true input.isIconSelectable: true
input.placeholderText: qsTr("Enter an account name...") placeholderText: qsTr("Enter an account name...")
input.text: currentAccount.name input.text: currentAccount.name
input.icon.emoji: currentAccount.emoji input.icon.emoji: currentAccount.emoji
input.icon.color: currentAccount.color input.icon.color: currentAccount.color

View File

@ -93,7 +93,7 @@ StatusModal {
StatusInput { StatusInput {
id: chatKeyInput 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.text: input.edit.focus? d.realChatKey : d.elidedChatKey
input.rightComponent: { input.rightComponent: {
if(d.showPasteButton) if(d.showPasteButton)
@ -127,7 +127,7 @@ StatusModal {
id: messageInput id: messageInput
charLimit: d.maxMsgLength 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.multiline: true
input.implicitHeight: d.msgHeight input.implicitHeight: d.msgHeight
input.verticalAlignment: TextEdit.AlignTop input.verticalAlignment: TextEdit.AlignTop

View File

@ -42,7 +42,7 @@ StatusScrollView {
input.implicitHeight: 44 input.implicitHeight: 44
validationMode: StatusInput.ValidationMode.Always validationMode: StatusInput.ValidationMode.Always
label: qsTr("Word #%1").arg(wordRandomNumber + 1) label: qsTr("Word #%1").arg(wordRandomNumber + 1)
input.placeholderText: qsTr("Enter word") placeholderText: qsTr("Enter word")
validators: [ validators: [
StatusValidator { StatusValidator {
validate: function (t) { return (root.wordAtRandomNumber === inputText.text); } validate: function (t) { return (root.wordAtRandomNumber === inputText.text); }

View File

@ -44,7 +44,7 @@ SettingsContentBase {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
input.implicitHeight: 44 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 { StatusTabBar {

View File

@ -524,7 +524,7 @@ SettingsContentBase {
Layout.leftMargin: Style.current.padding Layout.leftMargin: Style.current.padding
Layout.rightMargin: Style.current.padding Layout.rightMargin: Style.current.padding
input.implicitHeight: 44 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 { StatusBaseText {

View File

@ -42,7 +42,7 @@ ColumnLayout {
text: qsTr("Other") text: qsTr("Other")
} }
StatusBaseInput { StatusInput {
id: customUrlInput id: customUrlInput
Layout.alignment: Qt.AlignTop Layout.alignment: Qt.AlignTop
Layout.topMargin: 10 Layout.topMargin: 10

View File

@ -73,7 +73,7 @@ ColumnLayout {
id: displayNameInput id: displayNameInput
Layout.fillWidth: true Layout.fillWidth: true
label: qsTr("Display name") label: qsTr("Display name")
input.placeholderText: qsTr("Display Name") placeholderText: qsTr("Display Name")
charLimit: 24 charLimit: 24
input.text: root.profileStore.displayName input.text: root.profileStore.displayName
validators: Constants.validators.displayName validators: Constants.validators.displayName

View File

@ -57,13 +57,14 @@ ColumnLayout {
onClicked: derivationPathSelect.reset() onClicked: derivationPathSelect.reset()
} }
} }
StatusBaseInput { StatusInput {
id: derivationPathInput id: derivationPathInput
Layout.preferredHeight: 64 Layout.preferredHeight: 64
Layout.preferredWidth: parent.width Layout.preferredWidth: parent.width
maximumHeight: 64
text: _internal.defaultDerivationPath text: _internal.defaultDerivationPath
color: _internal.pathError ? Theme.palette.dangerColor1 : Theme.palette.directColor1 input.color: _internal.pathError ? Theme.palette.dangerColor1 : Theme.palette.directColor1
rightComponent: _internal.derivationAddressLoading ? loadingIcon : loadedIcon input.rightComponent: _internal.derivationAddressLoading ? loadingIcon : loadedIcon
onTextChanged: _internal.userInputTimer.start() onTextChanged: _internal.userInputTimer.start()

View File

@ -48,9 +48,9 @@ ColumnLayout {
label: qsTr("Private key") label: qsTr("Private key")
charLimit: _internal.privateKeyCharLimit charLimit: _internal.privateKeyCharLimit
input.multiline: true input.multiline: true
input.minimumHeight: 80 minimumHeight: 80
input.maximumHeight: 108 maximumHeight: 108
input.placeholderText: qsTr("Paste the contents of your private key") placeholderText: qsTr("Paste the contents of your private key")
errorMessage: _internal.errorString errorMessage: _internal.errorString
validators: [ validators: [
StatusMinLengthValidator { StatusMinLengthValidator {

View File

@ -168,7 +168,7 @@ StatusModal {
spacing: Style.current.halfPadding spacing: Style.current.halfPadding
topPadding: Style.dp(20) 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 { Item {
width: parent.width width: parent.width
height: passwordInput.height height: passwordInput.height
@ -199,7 +199,7 @@ StatusModal {
StatusInput { StatusInput {
id: accountNameInput id: accountNameInput
input.placeholderText: qsTr("Enter an account name...") placeholderText: qsTr("Enter an account name...")
label: qsTr("Account name") label: qsTr("Account name")
input.isIconSelectable: true input.isIconSelectable: true
input.icon.color: colorSelectionGrid.selectedColor ? colorSelectionGrid.selectedColor : Theme.palette.directColor1 input.icon.color: colorSelectionGrid.selectedColor ? colorSelectionGrid.selectedColor : Theme.palette.directColor1

View File

@ -59,7 +59,7 @@ StatusModal {
id: nameInput id: nameInput
width: parent.width width: parent.width
input.implicitHeight: 56 input.implicitHeight: 56
input.placeholderText: qsTr("Enter a name") placeholderText: qsTr("Enter a name")
label: qsTr("Name") label: qsTr("Name")
validators: [ validators: [
StatusMinLengthValidator { StatusMinLengthValidator {

View File

@ -126,7 +126,7 @@ ColumnLayout {
StatusInput { StatusInput {
id: addressInput id: addressInput
visible: advancedSection.addAccountType === SelectGeneratedAccount.AddAccountType.WatchOnly && advancedSection.visible visible: advancedSection.addAccountType === SelectGeneratedAccount.AddAccountType.WatchOnly && advancedSection.visible
input.placeholderText: qsTr("Enter address...") placeholderText: qsTr("Enter address...")
label: qsTr("Account address") label: qsTr("Account address")
validators: [ validators: [
StatusAddressValidator { StatusAddressValidator {

View File

@ -13,7 +13,7 @@ StatusInput {
leftPadding: 0 leftPadding: 0
rightPadding: 0 rightPadding: 0
input.placeholderText: "" placeholderText: ""
input.edit.cursorVisible: true input.edit.cursorVisible: true
input.edit.font.pixelSize: 32 input.edit.font.pixelSize: 32
input.placeholderFont.pixelSize: 32 input.placeholderFont.pixelSize: 32

View File

@ -8,7 +8,7 @@ import StatusQ.Controls 0.1
StatusInput { StatusInput {
id: searchBox id: searchBox
input.placeholderText: qsTr("Search") placeholderText: qsTr("Search")
input.icon.name: "search" input.icon.name: "search"
input.clearable: true input.clearable: true
leftPadding: 0 leftPadding: 0

View File

@ -79,7 +79,7 @@ StatusModal {
anchors.top: verificationMessage.bottom anchors.top: verificationMessage.bottom
anchors.topMargin: 5 anchors.topMargin: 5
input.multiline: true 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 input.implicitHeight: 152
width: parent.width width: parent.width
input.verticalAlignment: TextEdit.AlignTop input.verticalAlignment: TextEdit.AlignTop

View File

@ -27,7 +27,7 @@ StatusModal {
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: Style.current.padding anchors.topMargin: Style.current.padding
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
input.placeholderText: qsTr("Display Name") placeholderText: qsTr("Display Name")
input.text: root.profileStore.displayName input.text: root.profileStore.displayName
validators: Constants.validators.displayName validators: Constants.validators.displayName
} }

View File

@ -53,7 +53,7 @@ StatusModal {
StatusInput { StatusInput {
id: nicknameInput id: nicknameInput
input.placeholderText: qsTr("Nickname") placeholderText: qsTr("Nickname")
width: parent.width width: parent.width

View File

@ -53,7 +53,7 @@ StatusModal {
id: messageInput id: messageInput
charLimit: d.maxMsgLength 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.multiline: true
input.implicitHeight: d.msgHeight input.implicitHeight: d.msgHeight
input.verticalAlignment: TextEdit.AlignTop input.verticalAlignment: TextEdit.AlignTop

View File

@ -155,7 +155,7 @@ StatusModal {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left anchors.left: parent.left
width: parent.width - assetSelector.width width: parent.width - assetSelector.width
input.placeholderText: "0.00" + " " + assetSelector.selectedAsset.symbol placeholderText: "0.00" + " " + assetSelector.selectedAsset.symbol
errorMessageCmp.anchors.rightMargin: -100 errorMessageCmp.anchors.rightMargin: -100
input.edit.color: d.errorMode ? Theme.palette.dangerColor1 : Theme.palette.directColor1 input.edit.color: d.errorMode ? Theme.palette.dangerColor1 : Theme.palette.directColor1
validators: [ validators: [

View File

@ -94,7 +94,7 @@ Popup {
SearchBox { SearchBox {
id: searchBox id: searchBox
input.placeholderText: qsTr("Search Tenor") placeholderText: qsTr("Search Tenor")
enabled: RootStore.isTenorWarningAccepted enabled: RootStore.isTenorWarningAccepted
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: gifHeader.headerMargin anchors.rightMargin: gifHeader.headerMargin

View File

@ -54,7 +54,7 @@ Popup {
Layout.fillWidth: true Layout.fillWidth: true
leftPadding: 0 leftPadding: 0
rightPadding: 0 rightPadding: 0
input.placeholderText: root.searchBoxPlaceholder placeholderText: root.searchBoxPlaceholder
input.icon: StatusIconSettings { input.icon: StatusIconSettings {
width: 24 width: 24
height: 24 height: 24

View File

@ -343,7 +343,7 @@ Rectangle {
Layout.leftMargin: d.contentMargins Layout.leftMargin: d.contentMargins
input.multiline: true input.multiline: true
input.implicitHeight: 152 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 { MessageView {

View File

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