From 1ba579e94bde5d8b55996deb8ed35b581f68c1c3 Mon Sep 17 00:00:00 2001 From: Iuri Matias Date: Wed, 3 Jun 2020 15:49:47 -0400 Subject: [PATCH] extract the slide into a component --- ui/nim-status-client.pro | 1 + ui/onboarding/Intro.qml | 263 ++------------------------------------- ui/onboarding/Slide.qml | 90 ++++++++++++++ ui/onboarding/qmldir | 3 +- 4 files changed, 106 insertions(+), 251 deletions(-) create mode 100644 ui/onboarding/Slide.qml diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index 8482c7b252..07aaccb742 100644 --- a/ui/nim-status-client.pro +++ b/ui/nim-status-client.pro @@ -129,6 +129,7 @@ DISTFILES += \ onboarding/KeysMain.qml \ onboarding/Login.qml \ onboarding/OnboardingMain.qml \ + onboarding/Slide.qml \ onboarding/img/browser-dark@2x.jpg \ onboarding/img/browser-dark@3x.jpg \ onboarding/img/browser@2x.jpg \ diff --git a/ui/onboarding/Intro.qml b/ui/onboarding/Intro.qml index 6b9bb7276c..6bc41014b9 100644 --- a/ui/onboarding/Intro.qml +++ b/ui/onboarding/Intro.qml @@ -1,5 +1,4 @@ import QtQuick 2.3 -import QtQuick.Controls 1.3 import QtQuick.Controls 2.3 import QtQuick.Layouts 1.3 import "../shared" @@ -26,255 +25,21 @@ RowLayout { interactive: false anchors.fill: parent - Item { - id: itmSlide1 - - Image { - id: img1 - anchors.horizontalCenter: parent.horizontalCenter - sourceSize.width: 414 - sourceSize.height: 414 - anchors.topMargin: 17 - fillMode: Image.PreserveAspectFit - source: "img/chat@2x.jpg" - } - - Text { - id: txtTitle1 - text: qsTr("Truly private communication") - anchors.right: parent.right - anchors.rightMargin: 177 - anchors.left: parent.left - anchors.leftMargin: 177 - anchors.top: img1.bottom - anchors.topMargin: 44 - font.letterSpacing: -0.2 - font.weight: Font.Bold - lineHeight: 1 - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - transformOrigin: Item.Center - font.bold: true - font.pixelSize: 22 - font.kerning: true - - } - - Text { - id: txtDesc1 - x: 772 - color: "#939BA1" - text: qsTr("Chat over a peer-to-peer, encrypted network\n where messages can't be censored or hacked") - font.weight: Font.Normal - style: Text.Normal - anchors.horizontalCenterOffset: 0 - anchors.top: txtTitle1.bottom - anchors.topMargin: 14 - font.bold: true - anchors.horizontalCenter: parent.horizontalCenter - font.pixelSize: 15 - } - - Button { - id: btnNext1 - width: 40 - height: 40 - anchors.top: txtDesc1.top - anchors.bottomMargin: -2 - anchors.bottom: txtDesc1.bottom - anchors.topMargin: -2 - anchors.left: txtDesc1.right - anchors.leftMargin: 32 - onClicked: vwOnboarding.currentIndex++ - background: Rectangle { - id: rctNext1 - color: "#ECEFFC" - border.width: 0 - radius: 50 - - Image { - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - source: "img/next.svg" - } - } - } + Slide { + image: "img/chat@2x.jpg" + title: qsTr("Truly private communication") + description: qsTr("Chat over a peer-to-peer, encrypted network\n where messages can't be censored or hacked") } - Item { - id: itmSlide2 - - Image { - id: img2 - anchors.horizontalCenter: parent.horizontalCenter - sourceSize.width: 414 - sourceSize.height: 414 - anchors.top: parent.top - anchors.topMargin: 17 - fillMode: Image.PreserveAspectFit - source: "img/wallet@2x.jpg" - } - - Text { - id: txtTitle2 - text: qsTr("Secure crypto wallet") - anchors.right: parent.right - anchors.rightMargin: 177 - anchors.left: parent.left - anchors.leftMargin: 177 - anchors.top: img2.bottom - anchors.topMargin: 44 - font.letterSpacing: -0.2 - font.weight: Font.Bold - lineHeight: 1 - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - transformOrigin: Item.Center - font.bold: true - font.pixelSize: 22 - font.kerning: true - - } - - Button { - id: btnPrev2 - width: 40 - height: 40 - anchors.top: txtDesc2.top - anchors.bottomMargin: -2 - anchors.bottom: txtDesc2.bottom - anchors.topMargin: -2 - anchors.right: txtDesc2.left - anchors.rightMargin: 32 - onClicked: vwOnboarding.currentIndex-- - background: Rectangle { - id: rctPrev2 - color: "#ECEFFC" - border.width: 0 - radius: 50 - - Image { - rotation: 180 - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - source: "img/next.svg" - } - } - } - - Text { - id: txtDesc2 - x: 772 - color: "#939BA1" - text: qsTr("Send and receive digital assets anywhere in the\nworld--no bank account required") - font.weight: Font.Normal - style: Text.Normal - anchors.horizontalCenterOffset: 0 - anchors.top: txtTitle2.bottom - anchors.topMargin: 14 - font.bold: true - anchors.horizontalCenter: parent.horizontalCenter - font.pixelSize: 15 - } - - Button { - id: btnNext2 - width: 40 - height: 40 - anchors.top: txtDesc2.top - anchors.bottomMargin: -2 - anchors.bottom: txtDesc2.bottom - anchors.topMargin: -2 - anchors.left: txtDesc2.right - anchors.leftMargin: 32 - onClicked: vwOnboarding.currentIndex++ - background: Rectangle { - id: rctNext2 - color: "#ECEFFC" - border.width: 0 - radius: 50 - - Image { - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - source: "img/next.svg" - } - } - } + Slide { + image: "img/wallet@2x.jpg" + title: qsTr("Secure crypto wallet") + description: qsTr("Send and receive digital assets anywhere in the\nworld--no bank account required") } - Item { - id: itmSlide3 - - Image { - id: img3 - anchors.horizontalCenter: parent.horizontalCenter - sourceSize.width: 414 - sourceSize.height: 414 - anchors.topMargin: 17 - fillMode: Image.PreserveAspectFit - source: "img/browser@2x.jpg" - } - - Text { - id: txtTitle3 - text: qsTr("Decentralized apps") - anchors.right: parent.right - anchors.rightMargin: 177 - anchors.left: parent.left - anchors.leftMargin: 177 - anchors.top: img3.bottom - anchors.topMargin: 44 - font.letterSpacing: -0.2 - font.weight: Font.Bold - lineHeight: 1 - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - transformOrigin: Item.Center - font.bold: true - font.pixelSize: 22 - font.kerning: true - - } - - Button { - id: btnPrev3 - width: 40 - height: 40 - anchors.top: txtDesc3.top - anchors.bottomMargin: -2 - anchors.bottom: txtDesc3.bottom - anchors.topMargin: -2 - anchors.right: txtDesc3.left - anchors.rightMargin: 32 - onClicked: vwOnboarding.currentIndex-- - background: Rectangle { - id: rctPrev3 - color: "#ECEFFC" - border.width: 0 - radius: 50 - - Image { - rotation: 180 - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - source: "img/next.svg" - } - } - } - - Text { - id: txtDesc3 - x: 772 - color: "#939BA1" - text: qsTr("Explore games, exchanges and social networks\nwhere you alone own your data") - font.weight: Font.Normal - style: Text.Normal - anchors.horizontalCenterOffset: 0 - anchors.top: txtTitle3.bottom - anchors.topMargin: 14 - font.bold: true - anchors.horizontalCenter: parent.horizontalCenter - font.pixelSize: 15 - } + Slide { + image: "img/browser@2x.jpg" + title: qsTr("Decentralized apps") + description: qsTr("Explore games, exchanges and social networks\nwhere you alone own your data") + isLast: true } } @@ -288,7 +53,6 @@ RowLayout { anchors.horizontalCenter: parent.horizontalCenter width: parent.width - PageIndicator { id: pgOnboarding anchors.horizontalCenter: parent.horizontalCenter @@ -310,7 +74,6 @@ RowLayout { anchors.top: rctPageIndicator.bottom anchors.topMargin: 87 anchors.horizontalCenter: parent.horizontalCenter -// onClicked: app.visible = true width: 146 height: 44 } diff --git a/ui/onboarding/Slide.qml b/ui/onboarding/Slide.qml new file mode 100644 index 0000000000..0a3cd6ddbb --- /dev/null +++ b/ui/onboarding/Slide.qml @@ -0,0 +1,90 @@ +import QtQuick 2.0 +import QtQuick.Controls 2.4 +//import "../../../../imports" + +Item { + id: slide + property string image: "img/chat@2x.jpg" + property string title: "Truly private communication" + property string description: "Chat over a peer-to-peer, encrypted network\n where messages can't be censored or hacked" + property bool isLast: false + + Image { + id: img1 + anchors.horizontalCenter: parent.horizontalCenter + sourceSize.width: 414 + sourceSize.height: 414 + anchors.topMargin: 17 + fillMode: Image.PreserveAspectFit + source: image + + } + + Text { + id: txtTitle1 + text: title + anchors.right: parent.right + anchors.rightMargin: 177 + anchors.left: parent.left + anchors.leftMargin: 177 + anchors.top: img1.bottom + anchors.topMargin: 44 + font.letterSpacing: -0.2 + font.weight: Font.Bold + lineHeight: 1 + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + transformOrigin: Item.Center + font.bold: true + font.pixelSize: 22 + font.kerning: true + + } + + Text { + id: txtDesc1 + x: 772 + color: "#939BA1" + text: description + font.weight: Font.Normal + style: Text.Normal + anchors.horizontalCenterOffset: 0 + anchors.top: txtTitle1.bottom + anchors.topMargin: 14 + font.bold: true + anchors.horizontalCenter: parent.horizontalCenter + font.pixelSize: 15 + } + + Button { + id: btnNext1 + width: 40 + height: 40 + anchors.top: txtDesc1.top + anchors.bottomMargin: -2 + anchors.bottom: txtDesc1.bottom + anchors.topMargin: -2 + anchors.left: txtDesc1.right + anchors.leftMargin: 32 + onClicked: vwOnboarding.currentIndex++ + visible: !isLast + background: Rectangle { + id: rctNext1 + color: "#ECEFFC" + border.width: 0 + radius: 50 + + Image { + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + source: "img/next.svg" + } + } + } +} + +/*##^## +Designer { + D{i:0;autoSize:true;height:600;width:800} +} +##^##*/ diff --git a/ui/onboarding/qmldir b/ui/onboarding/qmldir index d3cdc39b0e..f492c4b1b3 100644 --- a/ui/onboarding/qmldir +++ b/ui/onboarding/qmldir @@ -2,4 +2,5 @@ ExistingKey 1.0 ExistingKey.qml GenKey 1.0 GenKey.qml Intro 1.0 Intro.qml KeysMain 1.0 KeysMain.qml -OnboardingMain 1.0 OnboardingMain.qml \ No newline at end of file +OnboardingMain 1.0 OnboardingMain.qml +Slide 1.0 Slide.qml