diff --git a/ui/app/AppLayouts/Chat/ChatColumn.qml b/ui/app/AppLayouts/Chat/ChatColumn.qml index f26bf7d81e..9bf29e97ff 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn.qml @@ -352,4 +352,3 @@ Designer { D{i:0;formeditorColor:"#ffffff";height:770;width:800} } ##^##*/ - diff --git a/ui/app/AppLayouts/Profile/LeftTab.qml b/ui/app/AppLayouts/Profile/LeftTab.qml index 90cac50396..e6c8adf747 100644 --- a/ui/app/AppLayouts/Profile/LeftTab.qml +++ b/ui/app/AppLayouts/Profile/LeftTab.qml @@ -6,10 +6,12 @@ import QtQuick.Layouts 1.3 import Qt.labs.platform 1.1 import "../../../imports" import "../../../shared" +import "./LeftTab" ColumnLayout { readonly property int w: 340 - property alias currentTab: profileScreenButtons.currentIndex + // property alias currentTab: profileScreenButtons.currentIndex + property alias currentTab: profileMenu.profileCurrentIndex id: profileInfoContainer width: w @@ -21,343 +23,12 @@ ColumnLayout { anchors.bottom: parent.bottom anchors.bottomMargin: 0 - RowLayout { - id: profileHeader - height: 240 - Layout.fillWidth: true - width: profileInfoContainer.w + Profile {} - Rectangle { - id: profileHeaderContent - height: parent.height - Layout.fillWidth: true - - Item { - id: profileImgNameContainer - width: profileHeaderContent.width - height: profileHeaderContent.height - anchors.horizontalCenter: parent.horizontalCenter - anchors.top: parent.top - - Image { - id: profileImg - source: profileModel.profile.identicon - width: 80 - height: 80 - fillMode: Image.PreserveAspectCrop - anchors.horizontalCenter: parent.horizontalCenter - - property bool rounded: true - property bool adapt: false - y: 78 - - layer.enabled: rounded - layer.effect: OpacityMask { - maskSource: Item { - width: profileImg.width - height: profileImg.height - Rectangle { - anchors.centerIn: parent - width: profileImg.adapt ? profileImg.width : Math.min(profileImg.width, profileImg.height) - height: profileImg.adapt ? profileImg.height : width - radius: Math.min(width, height) - } - } - } - } - - Text { - id: profileName - text: profileModel.profile.username - anchors.top: profileImg.bottom - anchors.topMargin: 10 - anchors.horizontalCenterOffset: 0 - anchors.horizontalCenter: parent.horizontalCenter - font.weight: Font.Medium - font.pixelSize: 20 - } - } - } + Menu { + id: profileMenu } - RowLayout { - readonly property int btnheight: 42 - - id: profileTabBar - width: profileInfoContainer.w - height: btnheight * 10 - Layout.fillHeight: true - Layout.fillWidth: true - - Rectangle { - id: profileTabBarBg - color: "#ffffff" - height: parent.height - Layout.fillHeight: true - Layout.fillWidth: true - - TabBar { - id: profileScreenButtons - width: profileInfoContainer.w - height: parent.height - anchors.bottom: parent.bottom - anchors.bottomMargin: 0 - currentIndex: 0 - spacing: 0 - background: Rectangle { - color: "#00000000" - } - - TabButton { - id: ensTabButton - width: profileInfoContainer.w - height: profileTabBar.btnheight - text: "" - anchors.top: parent.top - anchors.topMargin: 0 - background: Rectangle { - color: Theme.transparent - } - - Text { - id: element1 - color: "#000000" - text: qsTr("ENS usernames") - anchors.left: parent.left - anchors.leftMargin: 72 - anchors.verticalCenter: parent.verticalCenter - font.weight: Font.Medium - font.pixelSize: 14 - } - } - - TabButton { - id: contactsTabButton - width: profileInfoContainer.w - height: profileTabBar.btnheight - text: "" - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.top: ensTabButton.bottom - anchors.topMargin: 0 - background: Rectangle { - color: Theme.transparent - } - - Text { - id: element2 - color: "#000000" - text: qsTr("Contacts") - anchors.left: parent.left - anchors.leftMargin: 72 - anchors.verticalCenter: parent.verticalCenter - font.weight: Font.Medium - font.pixelSize: 14 - } - } - - TabButton { - id: privacyTabButton - width: profileInfoContainer.w - height: profileTabBar.btnheight - text: "" - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.top: contactsTabButton.bottom - anchors.topMargin: 0 - background: Rectangle { - color: Theme.transparent - } - - Text { - id: element3 - color: "#000000" - text: qsTr("Privacy and security") - anchors.left: parent.left - anchors.leftMargin: 72 - anchors.verticalCenter: parent.verticalCenter - font.weight: Font.Medium - font.pixelSize: 14 - } - } - - TabButton { - id: syncTabButton - width: profileInfoContainer.w - height: profileTabBar.btnheight - text: "" - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.top: privacyTabButton.bottom - anchors.topMargin: 0 - background: Rectangle { - color: Theme.transparent - } - - Text { - id: element4 - color: "#000000" - text: qsTr("Sync settings") - anchors.left: parent.left - anchors.leftMargin: 72 - anchors.verticalCenter: parent.verticalCenter - font.weight: Font.Medium - font.pixelSize: 14 - } - } - - TabButton { - id: languageTabButton - width: profileInfoContainer.w - height: profileTabBar.btnheight - text: "" - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.top: syncTabButton.bottom - anchors.topMargin: 0 - background: Rectangle { - color: Theme.transparent - } - - Text { - id: element5 - color: "#000000" - text: qsTr("Language settings") - anchors.left: parent.left - anchors.leftMargin: 72 - anchors.verticalCenter: parent.verticalCenter - font.weight: Font.Medium - font.pixelSize: 14 - } - } - - TabButton { - id: notificationsTabButton - width: profileInfoContainer.w - height: profileTabBar.btnheight - text: "" - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.top: languageTabButton.bottom - anchors.topMargin: 0 - background: Rectangle { - color: Theme.transparent - } - - Text { - id: element6 - color: "#000000" - text: qsTr("Notifications settings") - anchors.left: parent.left - anchors.leftMargin: 72 - anchors.verticalCenter: parent.verticalCenter - font.weight: Font.Medium - font.pixelSize: 14 - } - } - - TabButton { - id: advancedTabButton - width: profileInfoContainer.w - height: profileTabBar.btnheight - text: "" - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.top: notificationsTabButton.bottom - anchors.topMargin: 0 - background: Rectangle { - color: Theme.transparent - } - - Text { - id: element7 - color: "#000000" - text: qsTr("Advanced settings") - anchors.left: parent.left - anchors.leftMargin: 72 - anchors.verticalCenter: parent.verticalCenter - font.weight: Font.Medium - font.pixelSize: 14 - } - } - - TabButton { - id: helpTabButton - width: profileInfoContainer.w - height: profileTabBar.btnheight - text: "" - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.top: advancedTabButton.bottom - anchors.topMargin: 0 - background: Rectangle { - color: Theme.transparent - } - - Text { - id: element8 - color: "#000000" - text: qsTr("Need help?") - anchors.left: parent.left - anchors.leftMargin: 72 - anchors.verticalCenter: parent.verticalCenter - font.weight: Font.Medium - font.pixelSize: 14 - } - } - - TabButton { - id: aboutTabButton - width: profileInfoContainer.w - height: profileTabBar.btnheight - text: "" - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.top: helpTabButton.bottom - anchors.topMargin: 0 - background: Rectangle { - color: Theme.transparent - } - - Text { - id: element9 - color: "#000000" - text: qsTr("About") - anchors.left: parent.left - anchors.leftMargin: 72 - anchors.verticalCenter: parent.verticalCenter - font.weight: Font.Medium - font.pixelSize: 14 - } - } - - TabButton { - id: signoutTabButton - width: profileInfoContainer.w - height: profileTabBar.btnheight - text: "" - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.top: aboutTabButton.bottom - anchors.topMargin: 0 - background: Rectangle { - color: Theme.transparent - } - - Text { - id: element10 - color: "#000000" - text: qsTr("Sign out") - anchors.left: parent.left - anchors.leftMargin: 72 - anchors.verticalCenter: parent.verticalCenter - font.weight: Font.Medium - font.pixelSize: 14 - } - } - } - } - } } /*##^## diff --git a/ui/app/AppLayouts/Profile/LeftTab/Menu.qml b/ui/app/AppLayouts/Profile/LeftTab/Menu.qml new file mode 100644 index 0000000000..54945ca40d --- /dev/null +++ b/ui/app/AppLayouts/Profile/LeftTab/Menu.qml @@ -0,0 +1,285 @@ +import QtGraphicalEffects 1.12 +import QtQuick 2.0 +import QtQuick.Layouts 1.3 +import QtQuick.Controls 2.3 +import "../../../../imports" + +RowLayout { + property alias profileCurrentIndex: profileScreenButtons.currentIndex + readonly property int btnheight: 42 + + id: profileTabBar + width: profileInfoContainer.w + height: btnheight * 10 + Layout.fillHeight: true + Layout.fillWidth: true + + Rectangle { + id: profileTabBarBg + color: "#ffffff" + height: parent.height + Layout.fillHeight: true + Layout.fillWidth: true + + TabBar { + id: profileScreenButtons + width: profileInfoContainer.w + height: parent.height + anchors.bottom: parent.bottom + anchors.bottomMargin: 0 + currentIndex: 0 + spacing: 0 + background: Rectangle { + color: "#00000000" + } + + TabButton { + id: ensTabButton + width: profileInfoContainer.w + height: profileTabBar.btnheight + text: "" + anchors.top: parent.top + anchors.topMargin: 0 + background: Rectangle { + color: Theme.transparent + } + + Text { + id: element1 + color: "#000000" + text: qsTr("ENS usernames") + anchors.left: parent.left + anchors.leftMargin: 72 + anchors.verticalCenter: parent.verticalCenter + font.weight: Font.Medium + font.pixelSize: 14 + } + } + + TabButton { + id: contactsTabButton + width: profileInfoContainer.w + height: profileTabBar.btnheight + text: "" + anchors.left: parent.left + anchors.leftMargin: 0 + anchors.top: ensTabButton.bottom + anchors.topMargin: 0 + background: Rectangle { + color: Theme.transparent + } + + Text { + id: element2 + color: "#000000" + text: qsTr("Contacts") + anchors.left: parent.left + anchors.leftMargin: 72 + anchors.verticalCenter: parent.verticalCenter + font.weight: Font.Medium + font.pixelSize: 14 + } + } + + TabButton { + id: privacyTabButton + width: profileInfoContainer.w + height: profileTabBar.btnheight + text: "" + anchors.left: parent.left + anchors.leftMargin: 0 + anchors.top: contactsTabButton.bottom + anchors.topMargin: 0 + background: Rectangle { + color: Theme.transparent + } + + Text { + id: element3 + color: "#000000" + text: qsTr("Privacy and security") + anchors.left: parent.left + anchors.leftMargin: 72 + anchors.verticalCenter: parent.verticalCenter + font.weight: Font.Medium + font.pixelSize: 14 + } + } + + TabButton { + id: syncTabButton + width: profileInfoContainer.w + height: profileTabBar.btnheight + text: "" + anchors.left: parent.left + anchors.leftMargin: 0 + anchors.top: privacyTabButton.bottom + anchors.topMargin: 0 + background: Rectangle { + color: Theme.transparent + } + + Text { + id: element4 + color: "#000000" + text: qsTr("Sync settings") + anchors.left: parent.left + anchors.leftMargin: 72 + anchors.verticalCenter: parent.verticalCenter + font.weight: Font.Medium + font.pixelSize: 14 + } + } + + TabButton { + id: languageTabButton + width: profileInfoContainer.w + height: profileTabBar.btnheight + text: "" + anchors.left: parent.left + anchors.leftMargin: 0 + anchors.top: syncTabButton.bottom + anchors.topMargin: 0 + background: Rectangle { + color: Theme.transparent + } + + Text { + id: element5 + color: "#000000" + text: qsTr("Language settings") + anchors.left: parent.left + anchors.leftMargin: 72 + anchors.verticalCenter: parent.verticalCenter + font.weight: Font.Medium + font.pixelSize: 14 + } + } + + TabButton { + id: notificationsTabButton + width: profileInfoContainer.w + height: profileTabBar.btnheight + text: "" + anchors.left: parent.left + anchors.leftMargin: 0 + anchors.top: languageTabButton.bottom + anchors.topMargin: 0 + background: Rectangle { + color: Theme.transparent + } + + Text { + id: element6 + color: "#000000" + text: qsTr("Notifications settings") + anchors.left: parent.left + anchors.leftMargin: 72 + anchors.verticalCenter: parent.verticalCenter + font.weight: Font.Medium + font.pixelSize: 14 + } + } + + TabButton { + id: advancedTabButton + width: profileInfoContainer.w + height: profileTabBar.btnheight + text: "" + anchors.left: parent.left + anchors.leftMargin: 0 + anchors.top: notificationsTabButton.bottom + anchors.topMargin: 0 + background: Rectangle { + color: Theme.transparent + } + + Text { + id: element7 + color: "#000000" + text: qsTr("Advanced settings") + anchors.left: parent.left + anchors.leftMargin: 72 + anchors.verticalCenter: parent.verticalCenter + font.weight: Font.Medium + font.pixelSize: 14 + } + } + + TabButton { + id: helpTabButton + width: profileInfoContainer.w + height: profileTabBar.btnheight + text: "" + anchors.left: parent.left + anchors.leftMargin: 0 + anchors.top: advancedTabButton.bottom + anchors.topMargin: 0 + background: Rectangle { + color: Theme.transparent + } + + Text { + id: element8 + color: "#000000" + text: qsTr("Need help?") + anchors.left: parent.left + anchors.leftMargin: 72 + anchors.verticalCenter: parent.verticalCenter + font.weight: Font.Medium + font.pixelSize: 14 + } + } + + TabButton { + id: aboutTabButton + width: profileInfoContainer.w + height: profileTabBar.btnheight + text: "" + anchors.left: parent.left + anchors.leftMargin: 0 + anchors.top: helpTabButton.bottom + anchors.topMargin: 0 + background: Rectangle { + color: Theme.transparent + } + + Text { + id: element9 + color: "#000000" + text: qsTr("About") + anchors.left: parent.left + anchors.leftMargin: 72 + anchors.verticalCenter: parent.verticalCenter + font.weight: Font.Medium + font.pixelSize: 14 + } + } + + TabButton { + id: signoutTabButton + width: profileInfoContainer.w + height: profileTabBar.btnheight + text: "" + anchors.left: parent.left + anchors.leftMargin: 0 + anchors.top: aboutTabButton.bottom + anchors.topMargin: 0 + background: Rectangle { + color: Theme.transparent + } + + Text { + id: element10 + color: "#000000" + text: qsTr("Sign out") + anchors.left: parent.left + anchors.leftMargin: 72 + anchors.verticalCenter: parent.verticalCenter + font.weight: Font.Medium + font.pixelSize: 14 + } + } + } + } +} \ No newline at end of file diff --git a/ui/app/AppLayouts/Profile/LeftTab/Profile.qml b/ui/app/AppLayouts/Profile/LeftTab/Profile.qml new file mode 100644 index 0000000000..d1061948db --- /dev/null +++ b/ui/app/AppLayouts/Profile/LeftTab/Profile.qml @@ -0,0 +1,64 @@ +import QtGraphicalEffects 1.12 +import QtQuick 2.0 +import QtQuick.Layouts 1.3 +import QtQuick.Controls 2.3 +import "../../../../imports" + +RowLayout { + id: profileHeader + height: 240 + Layout.fillWidth: true + width: profileInfoContainer.w + + Rectangle { + id: profileHeaderContent + height: parent.height + Layout.fillWidth: true + + Item { + id: profileImgNameContainer + width: profileHeaderContent.width + height: profileHeaderContent.height + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + + Image { + id: profileImg + source: profileModel.profile.identicon + width: 80 + height: 80 + fillMode: Image.PreserveAspectCrop + anchors.horizontalCenter: parent.horizontalCenter + + property bool rounded: true + property bool adapt: false + y: 78 + + layer.enabled: rounded + layer.effect: OpacityMask { + maskSource: Item { + width: profileImg.width + height: profileImg.height + Rectangle { + anchors.centerIn: parent + width: profileImg.adapt ? profileImg.width : Math.min(profileImg.width, profileImg.height) + height: profileImg.adapt ? profileImg.height : width + radius: Math.min(width, height) + } + } + } + } + + Text { + id: profileName + text: profileModel.profile.username + anchors.top: profileImg.bottom + anchors.topMargin: 10 + anchors.horizontalCenterOffset: 0 + anchors.horizontalCenter: parent.horizontalCenter + font.weight: Font.Medium + font.pixelSize: 20 + } + } + } +} diff --git a/ui/app/AppLayouts/Profile/LeftTab/qmldir b/ui/app/AppLayouts/Profile/LeftTab/qmldir new file mode 100644 index 0000000000..d17fc38f88 --- /dev/null +++ b/ui/app/AppLayouts/Profile/LeftTab/qmldir @@ -0,0 +1,2 @@ +Profile 1.0 Profile.qml +Menu 1.0 Menu.qml diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index 6944728152..07c40a79d6 100644 --- a/ui/nim-status-client.pro +++ b/ui/nim-status-client.pro @@ -58,6 +58,7 @@ DISTFILES += \ app/AppLayouts/Chat/components/qmldir \ app/AppLayouts/Chat/qmldir \ app/AppLayouts/Node/NodeLayout.qml \ + app/AppLayouts/Profile/LeftTab/qmldir \ app/AppLayouts/Profile/ProfileLayout.qml \ app/AppLayouts/Wallet/LeftTab.qml \ app/AppLayouts/Wallet/WalletLayout.qml \