diff --git a/.gitignore b/.gitignore index 79b6af9302..445c452636 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,3 @@ -libstatus.a -libstatus.dylib -nim_status_client -nim_libstatus data/ noBackup/ .idea diff --git a/nim_status_client.nimble b/nim_status_client.nimble index e3b5928719..b39851f4ce 100644 --- a/nim_status_client.nimble +++ b/nim_status_client.nimble @@ -1,10 +1,13 @@ -[Package] +# Package + version = "0.1.0" author = "Richard Ramos" description = "A new awesome nimble package" license = "MIT" srcDir = "src" -bin = "nim_status_client" +bin = @["nim_status_client"] +skipExt = @["nim"] -[Deps] -Requires: "nim >= 1.0.0, nimqml >= 0.7.0, stint" +# Deps + +requires "nim >= 1.0.0", " nimqml >= 0.7.0", "stint" diff --git a/ui/app/AppLayouts/Browser/BrowserLayout.qml b/ui/app/AppLayouts/Browser/BrowserLayout.qml new file mode 100644 index 0000000000..56c2939610 --- /dev/null +++ b/ui/app/AppLayouts/Browser/BrowserLayout.qml @@ -0,0 +1,43 @@ +import QtQuick 2.3 +import QtQuick.Controls 1.3 +import QtQuick.Controls 2.3 +import QtQuick.Layouts 1.3 +import Qt.labs.platform 1.1 +import "../../../imports" +import "../../../shared" + +Item { + id: browserView + x: 0 + y: 0 + Layout.fillHeight: true + Layout.fillWidth: true + // Those anchors show a warning too, but whithout them, there is a gap on the right + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + + StackLayout { + id: browserContainer + anchors.top: parent.top + anchors.topMargin: 0 + anchors.bottom: parent.bottom + anchors.bottomMargin: 0 + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + + Text { + id: element1 + text: qsTr("Ðapp Browser") + anchors.left: parent.left + anchors.leftMargin: 24 + anchors.top: parent.top + anchors.topMargin: 24 + font.weight: Font.Medium + font.pixelSize: 20 + } + } +} diff --git a/ui/app/AppLayouts/ChatLayout.qml b/ui/app/AppLayouts/Chat/ChatLayout.qml similarity index 99% rename from ui/app/AppLayouts/ChatLayout.qml rename to ui/app/AppLayouts/Chat/ChatLayout.qml index cc08126704..480aad9599 100644 --- a/ui/app/AppLayouts/ChatLayout.qml +++ b/ui/app/AppLayouts/Chat/ChatLayout.qml @@ -3,7 +3,7 @@ import QtQuick.Controls 1.3 import QtQuick.Controls 2.3 import QtQuick.Layouts 1.3 import Qt.labs.platform 1.1 -import "../../imports" +import "../../../imports" SplitView { property alias searchStr: searchText.text @@ -75,7 +75,7 @@ SplitView { anchors.leftMargin: 10 anchors.verticalCenter: parent.verticalCenter fillMode: Image.PreserveAspectFit - source: "../img/search.svg" + source: "../../img/search.svg" } MouseArea { diff --git a/ui/app/AppLayouts/NodeLayout.qml b/ui/app/AppLayouts/Node/NodeLayout.qml similarity index 99% rename from ui/app/AppLayouts/NodeLayout.qml rename to ui/app/AppLayouts/Node/NodeLayout.qml index 2a99ee3ef7..34f0f6ec2d 100644 --- a/ui/app/AppLayouts/NodeLayout.qml +++ b/ui/app/AppLayouts/Node/NodeLayout.qml @@ -3,7 +3,7 @@ import QtQuick.Controls 1.3 import QtQuick.Controls 2.3 import QtQuick.Layouts 1.3 import Qt.labs.platform 1.1 -import "../../imports" +import "../../../imports" SplitView { id: nodeView diff --git a/ui/app/AppLayouts/Profile/LeftTab.qml b/ui/app/AppLayouts/Profile/LeftTab.qml new file mode 100644 index 0000000000..87f307134b --- /dev/null +++ b/ui/app/AppLayouts/Profile/LeftTab.qml @@ -0,0 +1,367 @@ +import QtGraphicalEffects 1.12 +import QtQuick 2.3 +import QtQuick.Controls 1.3 +import QtQuick.Controls 2.3 +import QtQuick.Layouts 1.3 +import Qt.labs.platform 1.1 +import "../../../imports" +import "../../../shared" + +ColumnLayout { + readonly property int w: 340 + property alias currentTab: profileScreenButtons.currentIndex + + id: profileInfoContainer + width: w + spacing: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + anchors.top: parent.top + anchors.topMargin: 0 + anchors.bottom: parent.bottom + anchors.bottomMargin: 0 + + 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: "../../img/placeholder-profile-large.jpg" + 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: qsTr("Happy Extraneous Dancer") + anchors.top: profileImg.bottom + anchors.topMargin: 10 + anchors.horizontalCenterOffset: 0 + anchors.horizontalCenter: parent.horizontalCenter + font.weight: Font.Medium + font.pixelSize: 20 + } + } + } + } + + 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 + } + } + } + } + } +} + +/*##^## +Designer { + D{i:15;anchors_height:56} +} +##^##*/ diff --git a/ui/app/AppLayouts/Profile/ProfileLayout.qml b/ui/app/AppLayouts/Profile/ProfileLayout.qml new file mode 100644 index 0000000000..8c18d31eae --- /dev/null +++ b/ui/app/AppLayouts/Profile/ProfileLayout.qml @@ -0,0 +1,235 @@ +import QtGraphicalEffects 1.12 +import QtQuick 2.3 +import QtQuick.Controls 1.3 +import QtQuick.Controls 2.3 +import QtQuick.Layouts 1.3 +import Qt.labs.platform 1.1 +import "../../../imports" +import "../../../shared" +import "." + +Item { + id: profileView + x: 0 + y: 0 + Layout.fillHeight: true + Layout.fillWidth: true + // Those anchors show a warning too, but whithout them, there is a gap on the right + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + + LeftTab { + id: leftTab + } + + StackLayout { + id: profileContainer + anchors.top: parent.top + anchors.topMargin: 0 + anchors.bottom: parent.bottom + anchors.bottomMargin: 0 + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.left: leftTab.right + anchors.leftMargin: 0 + currentIndex: leftTab.currentTab + + Item { + id: ensContainer + width: 200 + height: 200 + Layout.fillHeight: true + Layout.fillWidth: true + + Text { + id: element1 + text: qsTr("ENS usernames") + anchors.left: parent.left + anchors.leftMargin: 24 + anchors.top: parent.top + anchors.topMargin: 24 + font.weight: Font.Bold + font.pixelSize: 20 + } + } + + Item { + id: contactsContainer + width: 200 + height: 200 + Layout.fillHeight: true + Layout.fillWidth: true + + Text { + id: element2 + text: qsTr("Contacts") + anchors.left: parent.left + anchors.leftMargin: 24 + anchors.top: parent.top + anchors.topMargin: 24 + font.weight: Font.Bold + font.pixelSize: 20 + } + } + + Item { + id: privacyContainer + width: 200 + height: 200 + Layout.fillHeight: true + Layout.fillWidth: true + + Text { + id: element3 + text: qsTr("Privacy and security settings") + anchors.left: parent.left + anchors.leftMargin: 24 + anchors.top: parent.top + anchors.topMargin: 24 + font.weight: Font.Bold + font.pixelSize: 20 + } + } + + Item { + id: syncContainer + width: 200 + height: 200 + Layout.fillHeight: true + Layout.fillWidth: true + + Text { + id: element4 + text: qsTr("Sync settings") + anchors.left: parent.left + anchors.leftMargin: 24 + anchors.top: parent.top + anchors.topMargin: 24 + font.weight: Font.Bold + font.pixelSize: 20 + } + } + + Item { + id: languageContainer + width: 200 + height: 200 + Layout.fillHeight: true + Layout.fillWidth: true + + Text { + id: element5 + text: qsTr("Language settings") + anchors.left: parent.left + anchors.leftMargin: 24 + anchors.top: parent.top + anchors.topMargin: 24 + font.weight: Font.Bold + font.pixelSize: 20 + } + } + + Item { + id: notificationsContainer + width: 200 + height: 200 + Layout.fillHeight: true + Layout.fillWidth: true + + Text { + id: element6 + text: qsTr("Notifications settings") + anchors.left: parent.left + anchors.leftMargin: 24 + anchors.top: parent.top + anchors.topMargin: 24 + font.weight: Font.Bold + font.pixelSize: 20 + } + } + + Item { + id: advancedContainer + width: 200 + height: 200 + Layout.fillHeight: true + Layout.fillWidth: true + + Text { + id: element7 + text: qsTr("Advanced settings") + anchors.left: parent.left + anchors.leftMargin: 24 + anchors.top: parent.top + anchors.topMargin: 24 + font.weight: Font.Bold + font.pixelSize: 20 + } + } + + Item { + id: helpContainer + width: 200 + height: 200 + Layout.fillHeight: true + Layout.fillWidth: true + + Text { + id: element8 + text: qsTr("Help menus: FAQ, Glossary, etc.") + anchors.left: parent.left + anchors.leftMargin: 24 + anchors.top: parent.top + anchors.topMargin: 24 + font.weight: Font.Bold + font.pixelSize: 20 + } + } + + Item { + id: aboutContainer + width: 200 + height: 200 + Layout.fillHeight: true + Layout.fillWidth: true + + Text { + id: element9 + text: qsTr("About the app") + anchors.left: parent.left + anchors.leftMargin: 24 + anchors.top: parent.top + anchors.topMargin: 24 + font.weight: Font.Bold + font.pixelSize: 20 + } + } + + Item { + id: signoutContainer + width: 200 + height: 200 + Layout.fillHeight: true + Layout.fillWidth: true + + Text { + id: element10 + text: qsTr("Sign out controls") + anchors.left: parent.left + anchors.leftMargin: 24 + anchors.top: parent.top + anchors.topMargin: 24 + font.weight: Font.Bold + font.pixelSize: 20 + } + } + } +} + +/*##^## +Designer { + D{i:0;autoSize:true;height:480;width:640} +} +##^##*/ diff --git a/ui/app/AppLayouts/Profile/qmldir b/ui/app/AppLayouts/Profile/qmldir new file mode 100644 index 0000000000..ce3b215312 --- /dev/null +++ b/ui/app/AppLayouts/Profile/qmldir @@ -0,0 +1 @@ +LeftTab 1.0 LeftTab.qml diff --git a/ui/app/AppLayouts/qmldir b/ui/app/AppLayouts/qmldir index 545f231e5f..a13c2313a4 100644 --- a/ui/app/AppLayouts/qmldir +++ b/ui/app/AppLayouts/qmldir @@ -1,3 +1,5 @@ -ChatLayout 1.0 ChatLayout.qml -NodeLayout 1.0 NodeLayout.qml +BrowserLayout 1.0 Browser/BrowserLayout.qml +ChatLayout 1.0 Chat/ChatLayout.qml +NodeLayout 1.0 Node/NodeLayout.qml +ProfileLayout 1.0 Profile/ProfileLayout.qml WalletLayout 1.0 Wallet/WalletLayout.qml diff --git a/ui/app/AppMain.qml b/ui/app/AppMain.qml index 7d9b239f45..171aefc09b 100644 --- a/ui/app/AppMain.qml +++ b/ui/app/AppMain.qml @@ -172,12 +172,18 @@ RowLayout { Layout.fillHeight: true } - Item { - // browser + BrowserLayout { + id: browserLayoutContainer + Layout.fillWidth: true + Layout.alignment: Qt.AlignLeft | Qt.AlignTop + Layout.fillHeight: true } - Item { - // profile + ProfileLayout { + id: profileLayoutContainer + Layout.fillWidth: true + Layout.alignment: Qt.AlignLeft | Qt.AlignTop + Layout.fillHeight: true } NodeLayout { diff --git a/ui/app/img/placeholder-profile-large.jpg b/ui/app/img/placeholder-profile-large.jpg new file mode 100644 index 0000000000..cc8c4e1fbe Binary files /dev/null and b/ui/app/img/placeholder-profile-large.jpg differ diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index fe01b9580b..d1a7a0b756 100644 --- a/ui/nim-status-client.pro +++ b/ui/nim-status-client.pro @@ -49,8 +49,10 @@ DISTFILES += \ Inter-ThinItalic.otf \ Inter-V.otf \ Theme.qml \ - app/AppLayouts/ChatLayout.qml \ - app/AppLayouts/NodeLayout.qml \ + app/AppLayouts/Browser/BrowserLayout.qml \ + app/AppLayouts/Chat/ChatLayout.qml \ + app/AppLayouts/Node/NodeLayout.qml \ + app/AppLayouts/Profile/ProfileLayout.qml \ app/AppLayouts/Wallet/LeftTab.qml \ app/AppLayouts/Wallet/WalletLayout.qml \ app/AppLayouts/Wallet/qmldir \