status-im/status-desktop
2
0
Fork 0
mirror of https://github.com/status-im/status-desktop.git synced 2025-02-17 09:08:49 +00:00
Code Issues Projects Releases Wiki Activity

feat(@desktop/wallet): Add emoji to Wallet accounts.

Browse Source 
Support added to:
1. Wallet list
2. Adding a new account
3. Editing an account

fixes #4926
This commit is contained in:
Khushboo Mehta 2022-03-10 18:01:17 +01:00 committed by Khushboo-dev-cpp
parent b07910e27f
commit 4c677d55e8
13 changed files with 226 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
ui/app/AppLayouts/Chat/popups/community/CreateChannelPopup.qml
View File

@ -40,13 +40,18 @@ StatusModal {
onOpened: {
contentItem.channelName.input.text = ""
contentItem.channelName.input.icon.emoji = ""
contentItem.channelName.input.forceActiveFocus(Qt.MouseFocusReason)
if (isEdit) {
//% "Edit #%1"
header.title = qsTrId("edit---1").arg(popup.channelName);
contentItem.channelName.input.text = popup.channelName
contentItem.channelDescription.input.text = popup.channelDescription
contentItem.channelEmoji.text = StatusQUtils.Emoji.parse(popup.channelEmoji)
contentItem.channelName.input.icon.emoji = popup.channelEmoji
scrollView.channelColorDialog.color = popup.channelColor
}
else {
contentItem.channelName.input.icon.emoji = StatusQUtils.Emoji.getRandomEmoji()
}
}
@ -57,7 +62,7 @@ StatusModal {
target: emojiPopup
onEmojiSelected: function (emojiText, atCursor) {
scrollView.channelEmoji.text = emojiText
scrollView.channelName.input.icon.emoji = emojiText
}
onClosed: {
popup.emojiPopupOpened = false
@ -80,7 +85,6 @@ StatusModal {
property alias channelName: nameInput
property alias channelDescription: descriptionTextArea
property alias channelColorDialog: colorDialog
property alias channelEmoji: emojiText
contentHeight: content.height
height: Math.min(content.height, 432)
@ -95,7 +99,7 @@ StatusModal {
Column {
id: content
width: popup.width
width: popup.width
StatusInput {
id: nameInput
@ -106,6 +110,14 @@ StatusModal {
input.text = Utils.convertSpacesToDashesAndUpperToLowerCase(input.text);
input.cursorPosition = input.text.length
}
input.isIconSelectable: true
input.icon.color: colorDialog.color.toString()
onIconClicked: {
popup.emojiPopupOpened = true
popup.emojiPopup.open()
popup.emojiPopup.x = popup.x + Style.current.padding
popup.emojiPopup.y = popup.y + nameInput.height + 2*Style.current.xlPadding
}
validationMode: StatusInput.ValidationMode.Always
validators: [StatusMinLengthValidator {
minLength: 1
@ -187,46 +199,6 @@ StatusModal {
}]
}
// TODO replace this with the new emoji + name + color input when it is implemented in StatusQ
Item {
width: parent.width
height: childrenRect.height + 8
StatusButton {
id: emojiBtn
text: qsTr("Choose emoji")
anchors.top: parent.top
anchors.topMargin: 8
anchors.left: parent.left
anchors.leftMargin: 16
onClicked: {
popup.emojiPopupOpened = true
popup.emojiPopup.open()
popup.emojiPopup.x = Global.applicationWindow.width/2 - popup.emojiPopup.width/2 + popup.width/2
popup.emojiPopup.y = Global.applicationWindow.height/2 - popup.emojiPopup.height/2
}
}
StatusBaseText {
id: emojiText
font.pixelSize: 15
anchors.verticalCenter: emojiBtn.verticalCenter
anchors.left: emojiBtn.right
anchors.leftMargin: 8
}
StatusButton {
id: removeEmojiBtn
visible: !!emojiText.text
text: qsTr("Remove emoji")
anchors.top: parent.top
anchors.topMargin: 8
anchors.left: emojiText.right
anchors.leftMargin: 8
onClicked: {
emojiText.text = ""
}
}
}
/* TODO: use the code below to enable private channels and message limit */
/* StatusListItem { */
/* width: parent.width */
@ -302,22 +274,17 @@ StatusModal {
return
}
let error = "";
let emoji = ""
const found = RegExp(emojiRegexStr, 'g').exec(popup.contentItem.channelEmoji.text);
if (found) {
emoji = found[1]
}
if (!isEdit) {
//popup.contentItem.communityColor.color.toString().toUpperCase()
popup.createCommunityChannel(Utils.filterXSS(popup.contentItem.channelName.input.text),
Utils.filterXSS(popup.contentItem.channelDescription.input.text),
emoji,
popup.contentItem.channelName.input.icon.emoji,
popup.contentItem.channelColorDialog.color.toString().toUpperCase(),
popup.categoryId)
} else {
popup.editCommunityChannel(Utils.filterXSS(popup.contentItem.channelName.input.text),
Utils.filterXSS(popup.contentItem.channelDescription.input.text),
emoji,
popup.contentItem.channelName.input.icon.emoji,
popup.contentItem.channelColorDialog.color.toString().toUpperCase(),
popup.categoryId)
}

2
ui/app/AppLayouts/Profile/ProfileLayout.qml
View File

@ -17,6 +17,7 @@ StatusAppTwoPanelLayout {
property ProfileSectionStore store
property var globalStore
property var systemPalette
property var emojiPopup
Component.onCompleted: {
Global.privacyModuleInst = store.privacyStore.privacyModule
@ -68,6 +69,7 @@ StatusAppTwoPanelLayout {
WalletView {
id: walletView
walletStore: profileView.store.walletStore
emojiPopup: profileView.emojiPopup
}
PrivacyView {

10
ui/app/AppLayouts/Profile/controls/WalletAccountDelegate.qml
View File

@ -10,11 +10,13 @@ StatusListItem {
title: account.name
subTitle: account.address
icon.isLetterIdenticon: true
icon.color: account.color
icon.emoji: account.emoji
icon.name: !account.emoji ? "filled-account": ""
icon.letterSize: 14
icon.isLetterIdenticon: !!account.emoji
icon.background.color: Theme.palette.indirectColor1
width: parent.width
leftPadding: 0
rightPadding: 0
components: [
StatusIcon {
icon: "chevron-down"
@ -26,4 +28,4 @@ StatusListItem {
onClicked: {
goToAccountView()
}
}
}

133
ui/app/AppLayouts/Profile/popups/RenameAccontModal.qml Normal file
View File

@ -0,0 +1,133 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtQuick.Dialogs 1.3
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Popups 0.1
import StatusQ.Controls.Validators 0.1
import utils 1.0
import shared.panels 1.0
import shared.controls 1.0
import "../stores"
StatusModal {
id: popup
property WalletStore walletStore
property var currentAccount: walletStore.currentAccount
property var emojiPopup
//% "'%1' would like to connect to"
header.title: qsTr("Rename %1").arg(currentAccount.name)
property int marginBetweenInputs: 30
onOpened: {
accountNameInput.forceActiveFocus(Qt.MouseFocusReason)
}
Connections {
enabled: popup.opened
target: emojiPopup
onEmojiSelected: function (emojiText, atCursor) {
popup.contentItem.accountNameInput.input.icon.emoji = emojiText
}
}
contentItem: Column {
property alias accountNameInput: accountNameInput
width: popup.width
spacing: marginBetweenInputs
topPadding: Style.current.padding
StatusInput {
id: accountNameInput
//% "Enter an account name..."
input.isIconSelectable: true
input.placeholderText: qsTrId("enter-an-account-name...")
input.text: currentAccount.name
input.icon.emoji: currentAccount.emoji
input.icon.color: currentAccount.color
input.icon.name: !currentAccount.emoji ? "filled-account": ""
onIconClicked: {
popup.emojiPopup.open()
popup.emojiPopup.x = popup.x + accountNameInput.x + Style.current.padding
popup.emojiPopup.y = popup.y + contentItem.y + accountNameInput.y + accountNameInput.height + Style.current.halfPadding
}
validators: [
StatusMinLengthValidator {
//% "You need to enter an account name"
errorMessage: qsTrId("you-need-to-enter-an-account-name")
minLength: 1
}
]
}
StatusColorSelectorGrid {
id: accountColorInput
anchors.top: selectedColor.bottom
anchors.topMargin: 10
anchors.horizontalCenter: parent.horizontalCenter
//% "color"
titleText: qsTr("color").toUpperCase()
selectedColor: currentAccount.color
selectedColorIndex: {
for (let i = 0; i < model.length; i++) {
if(model[i] === currentAccount.color)
return i
}
}
onSelectedColorChanged: {
if(selectedColor !== currentAccount.color) {
accountNameInput.input.icon.color = selectedColor
}
}
}
Item {
width: parent.width
height: 8
}
}
rightButtons: [
StatusButton {
id: saveBtn
//% "Change Name"
text: qsTr("Change Name")
enabled: accountNameInput.text !== ""
MessageDialog {
id: changeError
title: qsTr("Changing settings failed")
icon: StandardIcon.Critical
standardButtons: StandardButton.Ok
}
onClicked : {
if (!accountNameInput.valid) {
return
}
const error = walletStore.updateCurrentAccount(currentAccount.address, accountNameInput.text, accountColorInput.selectedColor, accountNameInput.input.icon.emoji);
if (error) {
Global.playErrorSound();
changeError.text = error
changeError.open()
return
}
popup.close();
}
}
]
}

4
ui/app/AppLayouts/Profile/stores/WalletStore.qml
View File

@ -40,6 +40,10 @@ QtObject {
return walletSectionAccounts.deleteAccount(address)
}
function updateCurrentAccount(address, accountName, color, emoji) {
return walletSectionCurrent.update(address, accountName, color, emoji)
}
property var dappList: dappPermissionsModule.dapps
function disconnect(dappName) {

3
ui/app/AppLayouts/Profile/views/WalletView.qml
View File

@ -18,6 +18,8 @@ import "./wallet"
ScrollView {
id: root
property var emojiPopup
anchors.fill: parent
contentHeight: advancedContainer.height + 100
clip: true
@ -68,6 +70,7 @@ ScrollView {
AccountView {
walletStore: root.walletStore
emojiPopup: root.emojiPopup
anchors.fill: parent
onGoBack: {
stackContainer.currentIndex = 0

82
ui/app/AppLayouts/Profile/views/wallet/AccountView.qml
View File

@ -10,12 +10,14 @@ import utils 1.0
import "../../stores"
import "../../controls"
import "../../popups"
Item {
id: root
signal goBack
property WalletStore walletStore
property var emojiPopup
StatusFlatButton {
id: backButton
@ -40,48 +42,52 @@ Item {
anchors.left: root.left
width: 560
Item {
Row {
id: header
height: 60
width: parent.width
spacing: Style.current.smallPadding
StatusSmartIdenticon {
id: accountImage
anchors.left: parent.left
anchors.topMargin: Style.current.halfPadding
anchors.top: parent.top
image.isIdenticon: true
anchors.verticalCenter: parent.verticalCenter
icon: StatusIconSettings {
width: 40
height: 40
letterSize: 21
width: isLetterIdenticon ? 40 : 20
height: isLetterIdenticon ? 40 : 20
color: walletStore.currentAccount.color
emoji: walletStore.currentAccount.emoji
name: !walletStore.currentAccount.emoji ? "filled-account": ""
letterSize: 14
isLetterIdenticon: !!walletStore.currentAccount.emoji
background: StatusIconBackgroundSettings {
width: 40
height: 40
color: Theme.palette.primaryColor3
}
}
name: walletStore.currentAccount.name
}
Item {
id: accountNameAndAddress
anchors.left: accountImage.right
anchors.leftMargin: Style.current.padding
anchors.top: parent.top
StatusBaseText {
id: accountName
text: walletStore.currentAccount.name
font.weight: Font.Bold
font.pixelSize: 28
color: Theme.palette.directColor1
anchors.left: parent.left
}
Column {
spacing: Style.current.halfPadding
Row {
spacing: Style.current.halfPadding
StatusBaseText {
id: accountName
text: walletStore.currentAccount.name
font.weight: Font.Bold
font.pixelSize: 28
color: Theme.palette.directColor1
}
StatusFlatRoundButton {
width: 28
height: 28
anchors.verticalCenter: accountName.verticalCenter
type: StatusFlatRoundButton.Type.Tertiary
color: "transparent"
icon.name: "pencil"
onClicked: Global.openPopup(renameAccountModalComponent)
}
}
StatusAddress {
text: walletStore.currentAccount.address
anchors.top: accountName.bottom
anchors.topMargin: Style.current.halfPadding
anchors.left: parent.left
font.pixelSize: 15
}
}
}
@ -224,4 +230,14 @@ Item {
}
}
}
}
Component {
id: renameAccountModalComponent
RenameAccontModal {
anchors.centerIn: parent
onClosed: destroy()
walletStore: root.walletStore
emojiPopup: root.emojiPopup
}
}
}

4
ui/app/AppLayouts/Wallet/popups/AccountSettingsModal.qml
View File

@ -63,8 +63,8 @@ StatusModal {
input.icon.name: !currentAccount.emoji ? "filled-account": ""
onIconClicked: {
popup.emojiPopup.open()
popup.emojiPopup.x = Global.applicationWindow.width/2 - popup.emojiPopup.width/2 + popup.width/2
popup.emojiPopup.y = Global.applicationWindow.height/2 - popup.emojiPopup.height/2
popup.emojiPopup.x = popup.x + accountNameInput.x + Style.current.padding
popup.emojiPopup.y = popup.y + contentItem.y + accountNameInput.y + accountNameInput.height + Style.current.halfPadding
}
validators: [
StatusMinLengthValidator {

4
ui/app/AppLayouts/Wallet/popups/AddAccountWithPrivateKeyModal.qml
View File

@ -135,8 +135,8 @@ StatusModal {
input.icon.color: accountColorInput.selectedColor ? accountColorInput.selectedColor : Theme.palette.directColor1
onIconClicked: {
popup.emojiPopup.open()
popup.emojiPopup.x = Global.applicationWindow.width/2 - popup.emojiPopup.width/2 + popup.width/2
popup.emojiPopup.y = Global.applicationWindow.height/2 - popup.emojiPopup.height/2
popup.emojiPopup.x = popup.x + Style.current.padding
popup.emojiPopup.y = popup.y + contentItem.y + accountNameInput.y + accountNameInput.height + Style.current.halfPadding
}
validators: [
StatusMinLengthValidator {

4
ui/app/AppLayouts/Wallet/popups/AddAccountWithSeedModal.qml
View File

@ -123,8 +123,8 @@ StatusModal {
input.icon.color: accountColorInput.selectedColor ? accountColorInput.selectedColor : Theme.palette.directColor1
onIconClicked: {
popup.emojiPopup.open()
popup.emojiPopup.x = Global.applicationWindow.width/2 - popup.emojiPopup.width/2 + popup.width/2
popup.emojiPopup.y = Global.applicationWindow.height/2 - popup.emojiPopup.height/2
popup.emojiPopup.x = popup.x + Style.current.padding
popup.emojiPopup.y = popup.y + contentItem.y + accountNameInput.y + accountNameInput.height + Style.current.halfPadding
}
validators: [
StatusMinLengthValidator {

4
ui/app/AppLayouts/Wallet/popups/AddWatchOnlyAccountModal.qml
View File

@ -81,8 +81,8 @@ StatusModal {
input.icon.color: accountColorInput.selectedColor ? accountColorInput.selectedColor : Theme.palette.directColor1
onIconClicked: {
popup.emojiPopup.open()
popup.emojiPopup.x = Global.applicationWindow.width/2 - popup.emojiPopup.width/2 + popup.width/2
popup.emojiPopup.y = Global.applicationWindow.height/2 - popup.emojiPopup.height/2
popup.emojiPopup.x = popup.x + Style.current.padding
popup.emojiPopup.y = popup.y + contentItem.y + accountNameInput.y + accountNameInput.height + Style.current.halfPadding
}
validators: [
StatusMinLengthValidator {

4
ui/app/AppLayouts/Wallet/popups/GenerateAccountModal.qml
View File

@ -96,8 +96,8 @@ StatusModal {
input.icon.color: colorSelectionGrid.selectedColor ? colorSelectionGrid.selectedColor : Theme.palette.directColor1
onIconClicked: {
popup.emojiPopup.open()
popup.emojiPopup.x = Global.applicationWindow.width/2 - popup.emojiPopup.width/2 + popup.width/2
popup.emojiPopup.y = Global.applicationWindow.height/2 - popup.emojiPopup.height/2
popup.emojiPopup.x = popup.x + accountNameInput.x + Style.current.padding
popup.emojiPopup.y = popup.y + contentItem.y + accountNameInput.y + accountNameInput.height + Style.current.halfPadding
}
validators: [
StatusMinLengthValidator {

1
ui/app/mainui/AppMain.qml
View File

@ -536,6 +536,7 @@ Item {
store: appMain.rootStore.profileSectionStore
globalStore: appMain.rootStore
systemPalette: appMain.sysPalette
emojiPopup: statusEmojiPopup
}
NodeLayout {