diff --git a/scripts/simplifiedUI/ui/simplifiedFTUE/InitialLaunchWindow.qml b/scripts/simplifiedUI/ui/simplifiedFTUE/InitialLaunchWindow.qml
index 41e7b466f6..a46e6593df 100644
--- a/scripts/simplifiedUI/ui/simplifiedFTUE/InitialLaunchWindow.qml
+++ b/scripts/simplifiedUI/ui/simplifiedFTUE/InitialLaunchWindow.qml
@@ -57,22 +57,20 @@ Rectangle {
GridLayout {
id: tempAvatarPageGrid
anchors.fill: parent
- columns: root.width > root.height ? 2 : 1
- rows: root.width > root.height ? 1 : 2
anchors.leftMargin: 180
anchors.topMargin: 50
anchors.bottomMargin: 50
anchors.rightMargin: 100
- flow: root.width > root.height ? GridLayout.LeftToRight : GridLayout.TopToBottom
+ columns: 2
+ // flow: root.width > root.height ? GridLayout.LeftToRight : GridLayout.TopToBottom
Item {
id: textAndQRContainer
Layout.preferredWidth: 600
- Layout.preferredHeight: 650
+ Layout.preferredHeight: 670
Layout.minimumWidth: 200
Layout.maximumWidth: 800
Layout.topMargin: 80
- Layout.fillWidth: true
HifiStylesUit.RalewayBold {
id: headerText
@@ -80,7 +78,9 @@ Rectangle {
color: "#000000"
size: 48
wrapMode: Text.WordWrap
- width: parent.width
+ anchors.left: parent.left
+ anchors.right: parent.right
+ height: 100
}
HifiStylesUit.RalewaySemiBold {
@@ -95,7 +95,9 @@ Rectangle {
outfits! Available now on iOS and Android Platforms."
color: "#000000"
size: 24
- width: parent.width
+ anchors.left: parent.left
+ anchors.right: parent.right
+ height: 300
wrapMode: Text.WordWrap
}
@@ -116,6 +118,9 @@ Rectangle {
HifiStylesUit.RalewayBold {
id: instructionText
anchors.left: avatarAppQRCodeImage.right
+ anchors.top: avatarAppQRCodeImage.top
+ anchors.bottom: avatarAppQRCodeImage.bottom
+ anchors.right: parent.right
anchors.verticalCenter: avatarAppQRCodeImage.verticalCenter
anchors.leftMargin: 50
text: "Use your mobile phone to scan this QR code."
@@ -126,7 +131,7 @@ Rectangle {
}
HifiStylesUit.RalewayBold {
- anchors.top: qrAndInstructionsContainer.bottom
+ anchors.top: qrAndInstructionsContainer.bottom
anchors.topMargin: 50
anchors.horizontalCenter: qrAndInstructionsContainer.horizontalCenter
text: "Continue"
@@ -160,8 +165,10 @@ Rectangle {
Image {
id: tempAvatarImage
// if I use preferred width and height, the image does not update when window changes size
- width: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 400 : 100
- height: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 748 : 187
+ // width: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 400 : 100
+ // height: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 748 : 187
+ width: 400
+ height: 748
source: "images/DefaultAvatar_" + MyAvatar.skeletonModelURL.substring(123, MyAvatar.skeletonModelURL.length - 11) + ".png"
}
}
@@ -175,13 +182,14 @@ Rectangle {
HifiStylesUit.RalewaySemiBold {
id: controlsDescriptionText
- text: "These are your avatar controls to
- interact with and move around in your new HQ."
+ text: "These are your avatar controls to
+ interact with and move around in your new HQ."
anchors.top: parent.top
anchors.topMargin: 100
anchors.horizontalCenter: parent.horizontalCenter
horizontalAlignment: Text.AlignHCenter
height: 100
+ width: 850
color: "#000000"
size: 36
wrapMode: Text.WordWrap
@@ -190,37 +198,41 @@ Rectangle {
GridLayout {
id: controlsPageGrid
anchors.top: controlsDescriptionText.bottom
- anchors.topMargin: 100
- anchors.bottomMargin: 100
+ anchors.topMargin: 60
+ anchors.bottomMargin: 80
anchors.horizontalCenter: parent.horizontalCenter
columns: 2
- rows: 2
- flow: root.width > root.height ? GridLayout.LeftToRight : GridLayout.TopToBottom
+ columnSpacing: 50
+ rowSpacing: 40
+ // flow: root.width > root.height ? GridLayout.LeftToRight : GridLayout.TopToBottom
Image {
- Layout.preferredWidth: 650
- Layout.preferredHeight: 400
+ Layout.preferredWidth: 450
+ Layout.preferredHeight: 280
id: walkingControls
source: "images/walkingControls.png"
}
Image {
- Layout.preferredWidth: 400
- Layout.preferredHeight: 300
+ Layout.preferredWidth: 450
+ Layout.preferredHeight: 240
id: mouseControls
source: "images/mouseControls.png"
}
Image {
- Layout.preferredWidth: 400
- Layout.preferredHeight: 300
+ Layout.preferredWidth: 300
+ Layout.preferredHeight: 200
+ // TODO Why is this not aligning correctly? (Same at line 235)
+ Layout.alignment: AlignHCenter
id: runJumpControls
source: "images/runJumpControls.png"
}
Image {
- Layout.preferredWidth: 400
- Layout.preferredHeight: 300
+ Layout.preferredWidth: 200
+ Layout.preferredHeight: 120
+ Layout.alignment: AlignHCenter
id: cameraControls
source: "images/cameraControls.png"
}
@@ -232,7 +244,7 @@ Rectangle {
anchors.leftMargin: 50
anchors.bottomMargin: 50
text: "Learn more about our controls."
- width: 100
+ width: 200
height: 25
color: "#000000"
opacity: learnMoreAboutControlsMouseArea.containsMouse ? 1.0 : 0.7
@@ -257,7 +269,7 @@ Rectangle {
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottomMargin: 50
text: "I've got a good grip on the controls."
- width: 350
+ width: 650
height: 60
color: "#000000"
opacity: goodGripMouseArea.containsMouse ? 1.0 : 0.7
diff --git a/scripts/simplifiedUI/ui/simplifiedFTUE/SecondLaunchWindow.qml b/scripts/simplifiedUI/ui/simplifiedFTUE/SecondLaunchWindow.qml
index 60bc53911a..09e198e6fd 100644
--- a/scripts/simplifiedUI/ui/simplifiedFTUE/SecondLaunchWindow.qml
+++ b/scripts/simplifiedUI/ui/simplifiedFTUE/SecondLaunchWindow.qml
@@ -23,20 +23,22 @@ Rectangle {
Image {
id: topLeftAccentImage
- width: 400
- height: 180
+ width: 180
+ height: 400
anchors.left: parent.left
anchors.top: parent.top
source: "images/standOutTopLeft.png"
+ z: 1
}
Image {
id: bottomRightAccentImage
- width: 80
- height: 250
+ width: 250
+ height: 80
anchors.right: parent.right
anchors.bottom: parent.bottom
source: "images/standOutBottomRight.png"
+ z: 1
}
Item {
@@ -45,71 +47,83 @@ Rectangle {
GridLayout {
id: tempAvatarPageGrid
anchors.fill: parent
- flow: root.width < root.height ? GridLayout.LeftToRight : GridLayout.TopToBottom
- columns: root.width > root.height ? 2 : 1
- rows: root.width > root.height ? 1 : 2
anchors.leftMargin: 180
anchors.topMargin: 50
anchors.bottomMargin: 50
anchors.rightMargin: 100
+ columns: 2
+ // flow: root.width < root.height ? GridLayout.LeftToRight : GridLayout.TopToBottom
Item {
id: textAndQRContainer
- width: 650
+ Layout.preferredWidth: 650
+ Layout.preferredHeight: 670
+ Layout.minimumWidth: 200
+ Layout.maximumWidth: 800
Layout.topMargin: 80
- HifiStylesUit.GraphikSemiBold {
+ HifiStylesUit.RalewayBold {
id: headerText
text: "Stand out from the crowd!"
color: "#000000"
size: 48
+ wrapMode: Text.WordWrap
+ anchors.left: parent.left
+ anchors.right: parent.right
+ height: 80
}
- HifiStylesUit.GraphikSemiBold {
+ HifiStylesUit.RalewaySemiBold {
id: descriptionText
anchors.top: headerText.bottom
- anchors.topMargin: 20
- text: "You can create and upload custom avatars from our
- Avatar Creator App. It's as easy as taking a selfie.
- Available now on iOS and Android Platforms."
+ text: "You can create and upload custom avatars from our Avatar Creator App. It's as easy as taking a selfie. Available now on iOS and Android Platforms."
color: "#000000"
size: 24
+ anchors.left: parent.left
+ anchors.right: parent.right
+ height: 100
+ wrapMode: Text.WordWrap
}
Item {
id: qrAndInstructionsContainer
anchors.top: descriptionText.bottom
- height: avatarAppQRCodeImage.height
+ height: avatarAppQRCodeImage.height + instructionText.height + 50
width: parent.width
anchors.topMargin: 50
Image {
id: avatarAppQRCodeImage
+ anchors.horizontalCenter: parent.horizontalCenter
source: "images/qrCode.jpg"
height: 200
width: 200
}
- HifiStylesUit.GraphikSemiBold {
+ HifiStylesUit.RalewayBold {
id: instructionText
+ anchors.left: parent.left
+ anchors.right: parent.right
anchors.top: avatarAppQRCodeImage.bottom
anchors.horizontalCenter: avatarAppQRCodeImage.horizontalCenter
- anchors.topMargin: 50
text: "Use your mobile phone to scan this QR code."
color: "#000000"
size: 24
+ height: 60
+ wrapMode: Text.WordWrap
}
}
HifiStylesUit.RalewayBold {
- text: "No thanks, I'll keep using my default avatar."
anchors.top: qrAndInstructionsContainer.bottom
anchors.topMargin: 50
anchors.horizontalCenter: qrAndInstructionsContainer.horizontalCenter
+ text: "No thanks, I'll keep using my default avatar."
color: "#000000"
- opacity: continueMouseArea.containsMouse ? 1.0 : 0.8
+ opacity: continueMouseArea.containsMouse ? 1.0 : 0.7
size: 20
z: 1
+ wrapMode: Text.WordWrap
MouseArea {
id: continueMouseArea
@@ -127,21 +141,23 @@ Rectangle {
}
}
}
- }
- Item {
- id: heroImageContainer
- Layout.leftMargin: 50
- // these don't change when the window resizes
- width: tempAvatarImage.width
- height: tempAvatarImage.height
+ Item {
+ id: heroImageContainer
+ Layout.leftMargin: 50
+ // these don't change when the window resizes
+ Layout.preferredWidth: heroImage.width
+ Layout.preferredHeight: heroImage.height
- Image {
- id: heroImage
- // if I use preferred width and height, the image does not update when window changes size
- width: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 400 : 100
- height: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 748 : 187
- source: "images/hero.png"
+ Image {
+ id: heroImage
+ // if I use preferred width and height, the image does not update when window changes size
+ // width: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 400 : 100
+ // height: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 748 : 187
+ width: 400
+ height: 748
+ source: "images/hero.png"
+ }
}
}
}
diff --git a/scripts/simplifiedUI/ui/simplifiedUI.js b/scripts/simplifiedUI/ui/simplifiedUI.js
index 5ab4079f99..fec62f3db0 100644
--- a/scripts/simplifiedUI/ui/simplifiedUI.js
+++ b/scripts/simplifiedUI/ui/simplifiedUI.js
@@ -469,10 +469,6 @@ function onMessageFromInitialLaunchWindow(message) {
closeInitialLaunchWindow();
break;
- case "closeSecondLaunchWindow":
- closeSecondLaunchWindow();
- break;
-
default:
console.log("Unrecognized message from " + INITIAL_LAUNCH_WINDOW_MESSAGE_SOURCE + ": " + JSON.stringify(message));
break;