status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
status-desktop/ui/app/AppLayouts/Profile/ProfileLayout.qml

235 lines
7.9 KiB
QML
Raw Normal View History

update qml imports
2020-06-17 19:18:31 +00:00
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
feat(desktop) Added image function in Style Introduced Style.svg() Style.png() Style.emoji() and Style.icon() in Style.qml. Those should be used to set the source in Images instead of using relative paths. Usage: Image { source: Style.svg("check) .... Also moved all Singletons inside a new "utils" folder and made it a QML module, to use import utils 1.0 instead of relative paths Closes #3678
2021-09-28 15:04:06 +00:00
import utils 1.0
refactor(desktop) Made shared a QML module Use it as import shared 1.0, import shared.controls 1.0 etc instead of import "../../../shared" Closes #3934
2021-10-27 21:27:49 +00:00
import shared 1.0
refactor(@desktop/profile): introduce new QML and store structure in profile section Closes #3712
2021-10-06 09:16:39 +00:00
import "stores"
import "popups"
import "views"
feat: layouts for the Profile screens Work on this PR started before the build system was updated and at one point I upgraded `nim_status_client.nimble` to use NimScript so the nimble command would stop warning that the old format was being used. In team chat it was discussed that since we're no longer using nimble for package management we could simply delete `nim_status_client.nimble` to avoid confusion, which can be done in another PR. Introduce a BrowserLayout stub so the index will be calcualted correctly re: the active tab. Reorganize ChatLayout and NodeLayout into subdirs `Chat` and `Node`, respectively. Introduce ProfileLayout which uses a "LeftTab" approach similar to that of WalletLayout. There remains quite a bit of styling work to be done in ProfileLayout and its LeftTab. Also, it may be better to start over using a SplitView like the ChatLayout, I'm not really sure. It wasn't clear what should be the default view for the right-pane when Profile is selected in the left-most TabBar. In this PR, it defaults to showing the view corresponding to the ENS usernames button. In the archived Figma for the desktop design, it seemed a picture could be set, e.g. there is a headshot of a woman used in the Profile screen. To that end I explored how to take a square image and clip/mask it so it appears round and I included a larger placeholder image for that purpose. In the new design, and with respect to mobile, it may not be possible to set a profile picture so the code that rounds the image can maybe be dropped.
2020-05-19 19:44:45 +00:00
refactor(ProfileLayout): make use of StatusQ layout components Closes #2716
2021-06-16 11:15:28 +00:00
import StatusQ.Layout 0.1
fix(@desktop/settings): content on the right side for all subsections need to have the same geometry Structure of the all subsection of the settings section has the same high level structure Fixes #5650
2022-05-07 11:45:15 +00:00
import StatusQ.Controls 0.1
refactor(ProfileLayout): make use of StatusQ layout components Closes #2716
2021-06-16 11:15:28 +00:00
StatusAppTwoPanelLayout {
id: profileView
refactor(@desktop/settings-pivacy-security): privacy and security section updated
2021-12-30 12:39:47 +00:00
property ProfileSectionStore store
refactor: remove dynamic scoping from profile module closes #4247
2021-12-09 13:28:02 +00:00
property var globalStore
property var systemPalette
feat(@desktop/wallet): Add emoji to Wallet accounts. Support added to: 1. Wallet list 2. Adding a new account 3. Editing an account fixes #4926
2022-03-10 17:01:17 +00:00
property var emojiPopup
refactor: remove dynamic scoping from profile module closes #4247
2021-12-09 13:28:02 +00:00
feat(privacy): reimplement show only contact pfp using status-go setting Fixes #4900
2022-03-04 21:33:48 +00:00
Component.onCompleted: {
Global.privacyModuleInst = store.privacyStore.privacyModule
}
refactor: remove dynamic scoping from profile module closes #4247
2021-12-09 13:28:02 +00:00
QtObject {
fix(@desktop/settings): content on the right side for all subsections need to have the same geometry Structure of the all subsection of the settings section has the same high level structure Fixes #5650
2022-05-07 11:45:15 +00:00
id: d
readonly property int topMargin: 0
readonly property int bottomMargin: 56
readonly property int leftMargin: 48
readonly property int rightMargin: 48
readonly property int contentWidth: 560
refactor: remove dynamic scoping from profile module closes #4247
2021-12-09 13:28:02 +00:00
}
refactor(@desktop/profile): introduce new QML and store structure in profile section Closes #3712
2021-10-06 09:16:39 +00:00
leftPanel: LeftTabView {
feat: layouts for the Profile screens Work on this PR started before the build system was updated and at one point I upgraded `nim_status_client.nimble` to use NimScript so the nimble command would stop warning that the old format was being used. In team chat it was discussed that since we're no longer using nimble for package management we could simply delete `nim_status_client.nimble` to avoid confusion, which can be done in another PR. Introduce a BrowserLayout stub so the index will be calcualted correctly re: the active tab. Reorganize ChatLayout and NodeLayout into subdirs `Chat` and `Node`, respectively. Introduce ProfileLayout which uses a "LeftTab" approach similar to that of WalletLayout. There remains quite a bit of styling work to be done in ProfileLayout and its LeftTab. Also, it may be better to start over using a SplitView like the ChatLayout, I'm not really sure. It wasn't clear what should be the default view for the right-pane when Profile is selected in the left-most TabBar. In this PR, it defaults to showing the view corresponding to the ENS usernames button. In the archived Figma for the desktop design, it seemed a picture could be set, e.g. there is a headshot of a woman used in the Profile screen. To that end I explored how to take a square image and clip/mask it so it appears round and I included a larger placeholder image for that purpose. In the new design, and with respect to mobile, it may not be possible to set a profile picture so the code that rounds the image can maybe be dropped.
2020-05-19 19:44:45 +00:00
id: leftTab
refactor(@desktop/profile): introduce new QML and store structure in profile section Closes #3712
2021-10-06 09:16:39 +00:00
store: profileView.store
anchors.fill: parent
feat: layouts for the Profile screens Work on this PR started before the build system was updated and at one point I upgraded `nim_status_client.nimble` to use NimScript so the nimble command would stop warning that the old format was being used. In team chat it was discussed that since we're no longer using nimble for package management we could simply delete `nim_status_client.nimble` to avoid confusion, which can be done in another PR. Introduce a BrowserLayout stub so the index will be calcualted correctly re: the active tab. Reorganize ChatLayout and NodeLayout into subdirs `Chat` and `Node`, respectively. Introduce ProfileLayout which uses a "LeftTab" approach similar to that of WalletLayout. There remains quite a bit of styling work to be done in ProfileLayout and its LeftTab. Also, it may be better to start over using a SplitView like the ChatLayout, I'm not really sure. It wasn't clear what should be the default view for the right-pane when Profile is selected in the left-most TabBar. In this PR, it defaults to showing the view corresponding to the ENS usernames button. In the archived Figma for the desktop design, it seemed a picture could be set, e.g. there is a headshot of a woman used in the Profile screen. To that end I explored how to take a square image and clip/mask it so it appears round and I included a larger placeholder image for that purpose. In the new design, and with respect to mobile, it may not be possible to set a profile picture so the code that rounds the image can maybe be dropped.
2020-05-19 19:44:45 +00:00
}
fix(@desktop/settings): content on the right side for all subsections need to have the same geometry Structure of the all subsection of the settings section has the same high level structure Fixes #5650
2022-05-07 11:45:15 +00:00
rightPanel: Item {
refactor(ProfileLayout): make use of StatusQ layout components Closes #2716
2021-06-16 11:15:28 +00:00
anchors.fill: parent
fix: improve profile sections min width and scaling
2021-04-08 15:44:58 +00:00
fix(@desktop/settings): content on the right side for all subsections need to have the same geometry Structure of the all subsection of the settings section has the same high level structure Fixes #5650
2022-05-07 11:45:15 +00:00
StatusBanner {
id: banner
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
visible: profileContainer.currentIndex === Constants.settingsSubsection.wallet &&
profileView.store.walletStore.areTestNetworksEnabled
type: StatusBanner.Type.Danger
statusText: {
if(profileContainer.currentIndex === Constants.settingsSubsection.wallet &&
profileView.store.walletStore.areTestNetworksEnabled)
return qsTr("Testnet mode is enabled. All balances, transactions and dApp interactions will be on testnets.")
return ""
feat: connect existing status ens username - Show welcome page only when there are no ens names registered - If you already have an ens username for the current account, connect and mark it as preferred name - State machine navigation
2020-08-04 22:22:51 +00:00
}
}
fix(@desktop/settings): content on the right side for all subsections need to have the same geometry Structure of the all subsection of the settings section has the same high level structure Fixes #5650
2022-05-07 11:45:15 +00:00
StackLayout {
id: profileContainer
fix(@desktop): add missing visual identity elements
2022-03-16 21:20:03 +00:00
fix(@desktop/settings): content on the right side for all subsections need to have the same geometry Structure of the all subsection of the settings section has the same high level structure Fixes #5650
2022-05-07 11:45:15 +00:00
anchors.top: banner.visible? banner.bottom : parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.topMargin: d.topMargin
anchors.bottomMargin: d.bottomMargin
anchors.leftMargin: d.leftMargin
anchors.rightMargin: d.rightMargin
refactor(ProfileLayout): make use of StatusQ layout components Closes #2716
2021-06-16 11:15:28 +00:00
fix(@desktop/settings): content on the right side for all subsections need to have the same geometry Structure of the all subsection of the settings section has the same high level structure Fixes #5650
2022-05-07 11:45:15 +00:00
currentIndex: Global.settingsSubsection
feat: layouts for the Profile screens Work on this PR started before the build system was updated and at one point I upgraded `nim_status_client.nimble` to use NimScript so the nimble command would stop warning that the old format was being used. In team chat it was discussed that since we're no longer using nimble for package management we could simply delete `nim_status_client.nimble` to avoid confusion, which can be done in another PR. Introduce a BrowserLayout stub so the index will be calcualted correctly re: the active tab. Reorganize ChatLayout and NodeLayout into subdirs `Chat` and `Node`, respectively. Introduce ProfileLayout which uses a "LeftTab" approach similar to that of WalletLayout. There remains quite a bit of styling work to be done in ProfileLayout and its LeftTab. Also, it may be better to start over using a SplitView like the ChatLayout, I'm not really sure. It wasn't clear what should be the default view for the right-pane when Profile is selected in the left-most TabBar. In this PR, it defaults to showing the view corresponding to the ENS usernames button. In the archived Figma for the desktop design, it seemed a picture could be set, e.g. there is a headshot of a woman used in the Profile screen. To that end I explored how to take a square image and clip/mask it so it appears round and I included a larger placeholder image for that purpose. In the new design, and with respect to mobile, it may not be possible to set a profile picture so the code that rounds the image can maybe be dropped.
2020-05-19 19:44:45 +00:00
fix(@desktop/settings): content on the right side for all subsections need to have the same geometry Structure of the all subsection of the settings section has the same high level structure Fixes #5650
2022-05-07 11:45:15 +00:00
onCurrentIndexChanged: {
if(visibleChildren[0] === ensContainer){
ensContainer.goToStart();
}
}
feat: make profile look like the design Improve left tab menu Move settings to right panel instead of advanced Create MyProfile container Improve Contacts and Security
2020-07-21 21:03:22 +00:00
fix(@desktop/settings): content on the right side for all subsections need to have the same geometry Structure of the all subsection of the settings section has the same high level structure Fixes #5650
2022-05-07 11:45:15 +00:00
MyProfileView {
Layout.fillWidth: true
Layout.fillHeight: true
feat(profile): add Messaging settings view in profile Fixes #4931
2022-03-07 20:34:59 +00:00
fix(@desktop/settings): content on the right side for all subsections need to have the same geometry Structure of the all subsection of the settings section has the same high level structure Fixes #5650
2022-05-07 11:45:15 +00:00
profileStore: profileView.store.profileStore
sectionTitle: profileView.store.getNameForSubsection(Constants.settingsSubsection.profile)
contentWidth: d.contentWidth
}
feat(@settings): Add wallet settings with network
2022-02-11 09:44:49 +00:00
fix(@desktop/settings): content on the right side for all subsections need to have the same geometry Structure of the all subsection of the settings section has the same high level structure Fixes #5650
2022-05-07 11:45:15 +00:00
ContactsView {
Layout.fillWidth: true
Layout.fillHeight: true
feat: layouts for the Profile screens Work on this PR started before the build system was updated and at one point I upgraded `nim_status_client.nimble` to use NimScript so the nimble command would stop warning that the old format was being used. In team chat it was discussed that since we're no longer using nimble for package management we could simply delete `nim_status_client.nimble` to avoid confusion, which can be done in another PR. Introduce a BrowserLayout stub so the index will be calcualted correctly re: the active tab. Reorganize ChatLayout and NodeLayout into subdirs `Chat` and `Node`, respectively. Introduce ProfileLayout which uses a "LeftTab" approach similar to that of WalletLayout. There remains quite a bit of styling work to be done in ProfileLayout and its LeftTab. Also, it may be better to start over using a SplitView like the ChatLayout, I'm not really sure. It wasn't clear what should be the default view for the right-pane when Profile is selected in the left-most TabBar. In this PR, it defaults to showing the view corresponding to the ENS usernames button. In the archived Figma for the desktop design, it seemed a picture could be set, e.g. there is a headshot of a woman used in the Profile screen. To that end I explored how to take a square image and clip/mask it so it appears round and I included a larger placeholder image for that purpose. In the new design, and with respect to mobile, it may not be possible to set a profile picture so the code that rounds the image can maybe be dropped.
2020-05-19 19:44:45 +00:00
fix(@desktop/settings): content on the right side for all subsections need to have the same geometry Structure of the all subsection of the settings section has the same high level structure Fixes #5650
2022-05-07 11:45:15 +00:00
contactsStore: profileView.store.contactsStore
sectionTitle: qsTr("Contacts")
contentWidth: d.contentWidth
feat: set device name
2020-07-03 16:54:27 +00:00
fix(@desktop/settings): content on the right side for all subsections need to have the same geometry Structure of the all subsection of the settings section has the same high level structure Fixes #5650
2022-05-07 11:45:15 +00:00
backButtonName: profileView.store.getNameForSubsection(Constants.settingsSubsection.messaging)
add contact list
2020-05-24 22:23:00 +00:00
fix(@desktop/settings): content on the right side for all subsections need to have the same geometry Structure of the all subsection of the settings section has the same high level structure Fixes #5650
2022-05-07 11:45:15 +00:00
onBackButtonClicked: {
Global.changeAppSectionBySectionType(Constants.appSection.profile, Constants.settingsSubsection.messaging)
}
}
add contact list
2020-05-24 22:23:00 +00:00
fix(@desktop/settings): content on the right side for all subsections need to have the same geometry Structure of the all subsection of the settings section has the same high level structure Fixes #5650
2022-05-07 11:45:15 +00:00
EnsView {
// TODO: we need to align structure for the entire this part using `SettingsContentBase` as root component
add contact list
2020-05-24 22:23:00 +00:00
fix(@desktop/settings): content on the right side for all subsections need to have the same geometry Structure of the all subsection of the settings section has the same high level structure Fixes #5650
2022-05-07 11:45:15 +00:00
// TODO: handle structure for this subsection to match style used in onther sections
// using `SettingsContentBase` component as base.
id: ensContainer
Layout.fillWidth: true
Layout.fillHeight: true
feat: make profile look like the design Improve left tab menu Move settings to right panel instead of advanced Create MyProfile container Improve Contacts and Security
2020-07-21 21:03:22 +00:00
fix(@desktop/settings): content on the right side for all subsections need to have the same geometry Structure of the all subsection of the settings section has the same high level structure Fixes #5650
2022-05-07 11:45:15 +00:00
ensUsernamesStore: profileView.store.ensUsernamesStore
contactsStore: profileView.store.contactsStore
stickersStore: profileView.store.stickersStore
feat: add basic browser settings and go to them on browser button click
2020-10-21 14:45:28 +00:00
fix(@desktop/settings): content on the right side for all subsections need to have the same geometry Structure of the all subsection of the settings section has the same high level structure Fixes #5650
2022-05-07 11:45:15 +00:00
profileContentWidth: d.contentWidth
}
add contact list
2020-05-24 22:23:00 +00:00
fix(@desktop/settings): content on the right side for all subsections need to have the same geometry Structure of the all subsection of the settings section has the same high level structure Fixes #5650
2022-05-07 11:45:15 +00:00
MessagingView {
Layout.fillWidth: true
Layout.fillHeight: true
messagingStore: profileView.store.messagingStore
sectionTitle: profileView.store.getNameForSubsection(Constants.settingsSubsection.messaging)
contentWidth: d.contentWidth
}
WalletView {
Layout.fillWidth: true
Layout.fillHeight: true
walletStore: profileView.store.walletStore
emojiPopup: profileView.emojiPopup
sectionTitle: profileView.store.getNameForSubsection(Constants.settingsSubsection.wallet)
contentWidth: d.contentWidth
}
PrivacyView {
Layout.fillWidth: true
Layout.fillHeight: true
feat: layouts for the Profile screens Work on this PR started before the build system was updated and at one point I upgraded `nim_status_client.nimble` to use NimScript so the nimble command would stop warning that the old format was being used. In team chat it was discussed that since we're no longer using nimble for package management we could simply delete `nim_status_client.nimble` to avoid confusion, which can be done in another PR. Introduce a BrowserLayout stub so the index will be calcualted correctly re: the active tab. Reorganize ChatLayout and NodeLayout into subdirs `Chat` and `Node`, respectively. Introduce ProfileLayout which uses a "LeftTab" approach similar to that of WalletLayout. There remains quite a bit of styling work to be done in ProfileLayout and its LeftTab. Also, it may be better to start over using a SplitView like the ChatLayout, I'm not really sure. It wasn't clear what should be the default view for the right-pane when Profile is selected in the left-most TabBar. In this PR, it defaults to showing the view corresponding to the ENS usernames button. In the archived Figma for the desktop design, it seemed a picture could be set, e.g. there is a headshot of a woman used in the Profile screen. To that end I explored how to take a square image and clip/mask it so it appears round and I included a larger placeholder image for that purpose. In the new design, and with respect to mobile, it may not be possible to set a profile picture so the code that rounds the image can maybe be dropped.
2020-05-19 19:44:45 +00:00
fix(@desktop/settings): content on the right side for all subsections need to have the same geometry Structure of the all subsection of the settings section has the same high level structure Fixes #5650
2022-05-07 11:45:15 +00:00
privacyStore: profileView.store.privacyStore
sectionTitle: profileView.store.getNameForSubsection(Constants.settingsSubsection.privacyAndSecurity)
contentWidth: d.contentWidth
}
AppearanceView {
Layout.fillWidth: true
Layout.fillHeight: true
appearanceStore: profileView.store.appearanceStore
sectionTitle: profileView.store.getNameForSubsection(Constants.settingsSubsection.appearance)
contentWidth: d.contentWidth
systemPalette: profileView.systemPalette
}
SoundsView {
Layout.fillWidth: true
Layout.fillHeight: true
sectionTitle: profileView.store.getNameForSubsection(Constants.settingsSubsection.sound)
contentWidth: d.contentWidth
}
LanguageView {
Layout.fillWidth: true
Layout.fillHeight: true
languageStore: profileView.store.languageStore
currencyStore: profileView.store.walletStore.currencyStore
sectionTitle: profileView.store.getNameForSubsection(Constants.settingsSubsection.language)
contentWidth: d.contentWidth
}
NotificationsView {
Layout.fillWidth: true
Layout.fillHeight: true
notificationsStore: profileView.store.notificationsStore
sectionTitle: profileView.store.getNameForSubsection(Constants.settingsSubsection.notifications)
contentWidth: d.contentWidth
}
DevicesView {
Layout.fillWidth: true
Layout.fillHeight: true
devicesStore: profileView.store.devicesStore
sectionTitle: profileView.store.getNameForSubsection(Constants.settingsSubsection.devicesSettings)
contentWidth: d.contentWidth
}
BrowserView {
Layout.fillWidth: true
Layout.fillHeight: true
store: profileView.store
sectionTitle: profileView.store.getNameForSubsection(Constants.settingsSubsection.browserSettings)
contentWidth: d.contentWidth
}
AdvancedView {
Layout.fillWidth: true
Layout.fillHeight: true
advancedStore: profileView.store.advancedStore
sectionTitle: profileView.store.getNameForSubsection(Constants.settingsSubsection.advanced)
contentWidth: d.contentWidth
}
HelpView {
Layout.fillWidth: true
Layout.fillHeight: true
sectionTitle: profileView.store.getNameForSubsection(Constants.settingsSubsection.needHelp)
contentWidth: d.contentWidth
}
AboutView {
Layout.fillWidth: true
Layout.fillHeight: true
store: profileView.store
globalStore: profileView.globalStore
sectionTitle: profileView.store.getNameForSubsection(Constants.settingsSubsection.about)
contentWidth: d.contentWidth
}
refactor(@desktop/profile): introduce new QML and store structure in profile section Closes #3712
2021-10-06 09:16:39 +00:00
}
feat: layouts for the Profile screens Work on this PR started before the build system was updated and at one point I upgraded `nim_status_client.nimble` to use NimScript so the nimble command would stop warning that the old format was being used. In team chat it was discussed that since we're no longer using nimble for package management we could simply delete `nim_status_client.nimble` to avoid confusion, which can be done in another PR. Introduce a BrowserLayout stub so the index will be calcualted correctly re: the active tab. Reorganize ChatLayout and NodeLayout into subdirs `Chat` and `Node`, respectively. Introduce ProfileLayout which uses a "LeftTab" approach similar to that of WalletLayout. There remains quite a bit of styling work to be done in ProfileLayout and its LeftTab. Also, it may be better to start over using a SplitView like the ChatLayout, I'm not really sure. It wasn't clear what should be the default view for the right-pane when Profile is selected in the left-most TabBar. In this PR, it defaults to showing the view corresponding to the ENS usernames button. In the archived Figma for the desktop design, it seemed a picture could be set, e.g. there is a headshot of a woman used in the Profile screen. To that end I explored how to take a square image and clip/mask it so it appears round and I included a larger placeholder image for that purpose. In the new design, and with respect to mobile, it may not be possible to set a profile picture so the code that rounds the image can maybe be dropped.
2020-05-19 19:44:45 +00:00
}
}