From 14f2e424b70795b0307ed59d89db40bb4fbe3b1f Mon Sep 17 00:00:00 2001 From: Boris Melnik Date: Wed, 25 May 2022 11:32:00 +0300 Subject: [PATCH] feat(settings): Update ui for `About` Closes: #5844 --- ui/app/AppLayouts/Profile/views/AboutView.qml | 196 +++++++++++++----- 1 file changed, 146 insertions(+), 50 deletions(-) diff --git a/ui/app/AppLayouts/Profile/views/AboutView.qml b/ui/app/AppLayouts/Profile/views/AboutView.qml index 0523ecc427..d81fe8909b 100644 --- a/ui/app/AppLayouts/Profile/views/AboutView.qml +++ b/ui/app/AppLayouts/Profile/views/AboutView.qml @@ -5,6 +5,8 @@ import QtQuick.Layouts 1.13 import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 +import StatusQ.Components 0.1 + import utils 1.0 import shared 1.0 @@ -16,68 +18,162 @@ SettingsContentBase { property var store property var globalStore + titleRowComponentLoader.sourceComponent: StatusButton { + size: StatusBaseButton.Size.Small + text: qsTrId("check-for-updates") + onClicked: { + root.store.checkForUpdates() + } + } + ColumnLayout { spacing: Constants.settingsSection.itemSpacing width: root.contentWidth - // TODO: replace with StatusListItem - StatusSectionDescItem { + Column { Layout.fillWidth: true - Layout.leftMargin: Style.current.padding - Layout.rightMargin: Style.current.padding - //% "App version" - name: qsTrId("version") - //% "Version: %1" - description: qsTrId("version---1").arg(root.store.getCurrentVersion()) - tooltipUnder: true - store: root.globalStore - } + Image { + id: statusIcon + width: 80 + height: 80 + fillMode: Image.PreserveAspectFit + source: Style.svg("status-logo-circle") + anchors.horizontalCenter: parent.horizontalCenter + } - // TODO: replace with StatusListItem - StatusSectionDescItem { + Item { width: 1; height: 8} + + StatusBaseText { + anchors.horizontalCenter: parent.horizontalCenter + color: Theme.palette.textColor + font.pixelSize: 22 + font.bold: true + text: root.store.getCurrentVersion() + } + + StatusBaseText { + anchors.horizontalCenter: parent.horizontalCenter + color: Theme.palette.textColor + font.pixelSize: 15 + text: qsTr("Current Version") + } + + Item { width: 1; height: 17} + + StatusButton { + anchors.horizontalCenter: parent.horizontalCenter + size: StatusBaseButton.Size.Small + icon.name: "info" + text: qsTr("Release Notes") + } + } // Column + + StatusListItem { + title: qsTr("Our Principles") Layout.fillWidth: true - Layout.leftMargin: Style.current.padding - Layout.rightMargin: Style.current.padding - //% "Node version " - name: qsTrId("node-version-") - description: root.store.nodeVersion() - store: root.globalStore - } - - StatusFlatButton { - Layout.fillWidth: true - leftPadding: Style.current.padding - rightPadding: Style.current.padding - //% "Check for updates" - text: qsTrId("check-for-updates") - loading: root.store.fetchingUpdate - onClicked: root.store.checkForUpdates() - icon.width: 0 - } - - StatusBaseText { - Layout.fillWidth: true - Layout.leftMargin: Style.current.padding - Layout.rightMargin: Style.current.padding - //% "Privacy Policy" - text: qsTrId("privacy-policy") - font.pixelSize: 15 - color: Theme.palette.primaryColor1 - - MouseArea { - anchors.fill: parent - cursorShape: Qt.PointingHandCursor - hoverEnabled: true - onEntered: { - parent.font.underline = true + implicitHeight: 64 + components: [ + StatusIcon { + icon: "chevron-down" + rotation: 270 + color: Theme.palette.baseColor1 } - onExited: { - parent.font.underline = false + ] + } + + Column { + Layout.fillWidth: true + spacing: 4 + StatusBaseText { + text: qsTr("Status desktop’s GitHub Repositories") + anchors.left: parent.left + anchors.leftMargin: Style.current.padding + font.pixelSize: 15 + color: Style.current.secondaryText + } + + StatusFlatButton { + Layout.fillWidth: true + leftPadding: Style.current.padding + rightPadding: Style.current.padding + text: qsTr("Status Desktop") + icon.width: 0 + onClicked: { + Global.openLink("https://github.com/status-im/status-desktop") } + } + + StatusFlatButton { + Layout.fillWidth: true + leftPadding: Style.current.padding + rightPadding: Style.current.padding + text: qsTr("Status Go") + icon.width: 0 + onClicked: { + Global.openLink("https://github.com/status-im/status-go") + } + } + + StatusFlatButton { + Layout.fillWidth: true + leftPadding: Style.current.padding + rightPadding: Style.current.padding + text: qsTr("StatusQ") + icon.width: 0 + onClicked: { + Global.openLink("https://github.com/status-im/statusq") + } + } + + StatusFlatButton { + Layout.fillWidth: true + leftPadding: Style.current.padding + rightPadding: Style.current.padding + text: qsTr("go-waku") + icon.width: 0 + onClicked: { + Global.openLink("https://github.com/status-im/go-waku") + } + } + } + + Column { + Layout.fillWidth: true + spacing: 4 + StatusBaseText { + anchors.left: parent.left + anchors.leftMargin: Style.current.padding + text: qsTr("Legal & Privacy Documents") + font.pixelSize: 15 + color: Style.current.secondaryText + } + + StatusFlatButton { + Layout.fillWidth: true + leftPadding: Style.current.padding + rightPadding: Style.current.padding + text: qsTr("Terms of Use") + icon.width: 0 + } + + StatusFlatButton { + Layout.fillWidth: true + leftPadding: Style.current.padding + rightPadding: Style.current.padding + text: qsTr("Privacy Policy") + icon.width: 0 onClicked: { Global.openLink("https://status.im/privacy-policy/") } } - } + + StatusFlatButton { + Layout.fillWidth: true + leftPadding: Style.current.padding + rightPadding: Style.current.padding + text: qsTrId("Software License") + icon.width: 0 + } + } // Column } }