status-desktop/ui/app/AppMain.qml

319 lines
9.9 KiB
QML
Raw Normal View History

2020-06-17 19:18:31 +00:00
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import "../imports"
2020-06-23 18:59:16 +00:00
import "../shared"
import "./AppLayouts"
import "./AppLayouts/Wallet"
RowLayout {
id: appMain
spacing: 0
2020-05-13 14:40:51 +00:00
Layout.fillHeight: true
Layout.fillWidth: true
ToastMessage {
id: toastMessage
}
// Add SenmdModal here as it is used by the Wallet as well as the Browser
SendModal{
id: sendModal
onOpened: {
walletModel.getGasPricePredictions()
}
}
function changeAppSection(section) {
let sectionId = -1
switch (section) {
case Constants.chat: sectionId = 0; break;
case Constants.wallet: sectionId = 1; break;
case Constants.browser: sectionId = 2; break;
case Constants.profile: sectionId = 3; break;
case Constants.node: sectionId = 4; break;
case Constants.ui: sectionId = 5; break;
}
if (sectionId === -1) {
throw new Exception ("Unknown section name. Check the Constants to know the available ones")
}
tabBar.setCurrentIndex(sectionId)
}
TabBar {
id: tabBar
2020-06-23 18:59:16 +00:00
width: 78
2020-05-13 14:40:51 +00:00
Layout.maximumWidth: 80
Layout.preferredWidth: 80
Layout.minimumWidth: 80
currentIndex: 0
topPadding: 57
rightPadding: 19
leftPadding: 19
transformOrigin: Item.Top
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
Layout.fillHeight: true
spacing: 5
background: Rectangle {
color: "#00000000"
border.color: Style.current.border
}
TabButton {
id: chatBtn
x: 0
width: 40
height: 40
text: ""
padding: 0
transformOrigin: Item.Center
anchors.horizontalCenter: parent.horizontalCenter
background: Rectangle {
color: Style.current.secondaryBackground
opacity: parent.checked ? 1 : 0
radius: 50
}
2020-06-23 18:59:16 +00:00
SVGImage {
id: image
2020-06-23 18:59:16 +00:00
height: 24
width: 24
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
fillMode: Image.PreserveAspectFit
source: parent.checked ? "img/messageActive.svg" : "img/message.svg"
}
2020-07-22 19:05:13 +00:00
Rectangle {
2020-07-23 19:54:40 +00:00
visible: chatsModel.unreadMessagesCount > 0
2020-07-22 19:05:13 +00:00
anchors.top: image.top
anchors.left: image.right
anchors.leftMargin: -10
anchors.topMargin: -5
radius: 9
color: Style.current.blue
2020-09-23 20:08:43 +00:00
width: chatsModel.unreadMessagesCount < 10 ? 18 : messageCount.width + 10
2020-07-22 19:21:44 +00:00
height: 18
2020-07-22 19:05:13 +00:00
Text {
2020-09-23 20:08:43 +00:00
id: messageCount
2020-07-22 19:21:44 +00:00
font.pixelSize: chatsModel.unreadMessagesCount > 99 ? 10 : 12
2020-07-22 19:05:13 +00:00
color: Style.current.white
anchors.centerIn: parent
text: chatsModel.unreadMessagesCount
}
}
2020-08-14 17:26:36 +00:00
}
TabButton {
id: walletBtn
enabled: isExperimental === "1" || appSettings.walletEnabled
visible: this.enabled
width: 40
height: this.enabled ? 40 : 0
text: ""
anchors.topMargin: this.enabled ? 50 : 0
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: chatBtn.top
background: Rectangle {
color: Style.current.secondaryBackground
opacity: parent.checked ? 1 : 0
radius: 50
}
2020-06-23 18:59:16 +00:00
SVGImage {
id: image1
2020-06-23 18:59:16 +00:00
height: 24
width: 24
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
fillMode: Image.PreserveAspectFit
source: parent.checked ? "img/walletActive.svg" : "img/wallet.svg"
}
}
2020-09-22 15:12:48 +00:00
TabButton {
id: browserBtn
enabled: isExperimental === "1" || appSettings.browserEnabled
visible: this.enabled
width: 40
height: this.enabled ? 40 : 0
text: ""
anchors.topMargin: this.enabled ? 50 : 0
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: walletBtn.top
background: Rectangle {
color: Style.current.secondaryBackground
opacity: parent.checked ? 1 : 0
radius: 50
}
SVGImage {
id: image2
height: 24
width: 24
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
fillMode: Image.PreserveAspectFit
source: parent.checked ? "img/compassActive.svg" : "img/compass.svg"
}
}
TabButton {
id: profileBtn
width: 40
height: 40
text: ""
anchors.topMargin: 50
anchors.horizontalCenter: parent.horizontalCenter
2020-09-22 15:12:48 +00:00
anchors.top: browserBtn.top
background: Rectangle {
color: Style.current.secondaryBackground
opacity: parent.checked ? 1 : 0
radius: 50
}
2020-06-23 18:59:16 +00:00
SVGImage {
id: image3
2020-06-23 18:59:16 +00:00
height: 24
width: 24
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
fillMode: Image.PreserveAspectFit
source: parent.checked ? "img/profileActive.svg" : "img/profile.svg"
}
}
TabButton {
id: nodeBtn
enabled: isExperimental === "1"
visible: this.enabled
width: 40
height: this.enabled ? 40 : 0
text: ""
anchors.topMargin: this.enabled ? 50 : 0
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: profileBtn.top
background: Rectangle {
color: Style.current.secondaryBackground
opacity: parent.checked ? 1 : 0
radius: 50
}
2020-06-23 18:59:16 +00:00
SVGImage {
id: image4
2020-06-23 18:59:16 +00:00
height: 24
width: 24
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
fillMode: Image.PreserveAspectFit
2020-06-23 18:59:16 +00:00
source: parent.checked ? "img/nodeActive.svg" : "img/node.svg"
}
}
2020-08-25 09:00:03 +00:00
TabButton {
id: uiComponentBtn
enabled: isExperimental === "1"
visible: this.enabled
width: 40
height: this.enabled ? 40 : 0
text: ""
anchors.topMargin: this.enabled ? 50 : 0
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: nodeBtn.top
background: Rectangle {
color: Style.current.secondaryBackground
opacity: parent.checked ? 1 : 0
radius: 50
}
SVGImage {
id: image5
height: 24
width: 24
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
fillMode: Image.PreserveAspectFit
source: parent.checked ? "img/nodeActive.svg" : "img/node.svg"
}
}
}
StackLayout {
2020-05-13 14:40:51 +00:00
Layout.fillWidth: true
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
Layout.fillHeight: true
currentIndex: tabBar.currentIndex
onCurrentIndexChanged: {
if (typeof this.children[currentIndex].onActivated === "function") {
this.children[currentIndex].onActivated()
}
if(this.children[currentIndex] === browserLayoutContainer && browserLayoutContainer.active == false){
browserLayoutContainer.active = true;
}
}
ChatLayout {
id: chatLayoutContainer
Layout.fillWidth: true
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
Layout.fillHeight: true
}
2020-05-13 18:17:18 +00:00
WalletLayout {
id: walletLayoutContainer
Layout.fillWidth: true
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
Layout.fillHeight: true
}
Component {
id: browserLayoutComponent
BrowserLayout { }
}
Loader {
2020-09-22 15:12:48 +00:00
id: browserLayoutContainer
sourceComponent: browserLayoutComponent
active: false
2020-09-22 15:12:48 +00:00
Layout.fillWidth: true
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
Layout.fillHeight: true
// Loaders do not have access to the context, so props need to be set
// Adding a "_" to avoid a binding loop
property var _chatsModel: chatsModel
property var _walletModel: walletModel
property var _utilsModel: utilsModel
property var _web3Provider: web3Provider
2020-09-22 15:12:48 +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
ProfileLayout {
id: profileLayoutContainer
Layout.fillWidth: true
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
Layout.fillHeight: true
}
NodeLayout {
id: nodeLayoutContainer
Layout.fillWidth: true
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
Layout.fillHeight: true
}
2020-08-25 09:00:03 +00:00
UIComponents {
Layout.fillWidth: true
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
Layout.fillHeight: true
}
}
}
/*##^##
Designer {
D{i:0;formeditorZoom:0.33000001311302185;height:770;width:1232}
}
##^##*/