status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

extract the slide into a component

This commit is contained in:
Iuri Matias 2020-06-03 15:49:47 -04:00
parent ffd356d182
commit 1ba579e94b
4 changed files with 106 additions and 251 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/nim-status-client.pro
View File

@ -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 \

263
ui/onboarding/Intro.qml
View File

@ -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
}

90
ui/onboarding/Slide.qml Normal file
View File

@ -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}
}
##^##*/

3
ui/onboarding/qmldir
View File

@ -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
OnboardingMain 1.0 OnboardingMain.qml
Slide 1.0 Slide.qml