Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-07-24 00:43:49 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

More work on second launch UI

Browse source
This commit is contained in:
RebeccaStankus 2019-09-30 10:38:11 -07:00
parent 68f52584cf
commit b25c874e5f
3 changed files with 59 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
scripts/simplifiedUI/ui/simplifiedFTUE/InitialLaunchWindow.qml
View file

@ -22,7 +22,6 @@ Rectangle {
// TODO figure out why and fix // TODO figure out why and fix
color: "#ffffff" color: "#ffffff"
anchors.fill: parent anchors.fill: parent
z: 1
Component.onCompleted: { Component.onCompleted: {
if (Settings.getValue("simplifiedUI/alreadyAutoSelectedAvatar", false)) { if (Settings.getValue("simplifiedUI/alreadyAutoSelectedAvatar", false)) {
@ -38,7 +37,6 @@ Rectangle {
anchors.left: parent.left anchors.left: parent.left
anchors.top: parent.top anchors.top: parent.top
source: "images/defaultTopLeft.png" source: "images/defaultTopLeft.png"
z: 3
} }
Image { Image {
@ -48,7 +46,6 @@ Rectangle {
anchors.right: parent.right anchors.right: parent.right
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
source: "images/defaultBottomRight.png" source: "images/defaultBottomRight.png"
z: 3
} }
Item { Item {
@ -76,7 +73,6 @@ Rectangle {
text: "We know this isn't you..." text: "We know this isn't you..."
color: "#000000" color: "#000000"
size: 48 size: 48
z: 2
} }
HifiStylesUit.RalewaySemiBold { HifiStylesUit.RalewaySemiBold {
@ -91,7 +87,6 @@ Rectangle {
outfits! Available now on iOS and Android Platforms." outfits! Available now on iOS and Android Platforms."
color: "#000000" color: "#000000"
size: 24 size: 24
z: 2
} }
Item { Item {
@ -100,7 +95,6 @@ Rectangle {
height: avatarAppQRCodeImage.height height: avatarAppQRCodeImage.height
width: parent.width width: parent.width
anchors.topMargin: 50 anchors.topMargin: 50
z: 2
Image { Image {
id: avatarAppQRCodeImage id: avatarAppQRCodeImage
@ -128,7 +122,7 @@ Rectangle {
color: "#000000" color: "#000000"
opacity: continueMouseArea.containsMouse ? 1.0 : 0.7 opacity: continueMouseArea.containsMouse ? 1.0 : 0.7
size: 36 size: 36
z: 2 z: 1
MouseArea { MouseArea {
id: continueMouseArea id: continueMouseArea
@ -151,8 +145,6 @@ Rectangle {
// these don't change when the window resizes // these don't change when the window resizes
width: tempAvatarImage.width width: tempAvatarImage.width
height: tempAvatarImage.height height: tempAvatarImage.height
z: 1
Image { Image {
id: tempAvatarImage id: tempAvatarImage
@ -257,7 +249,7 @@ Rectangle {
onClicked: { onClicked: {
Tablet.playSound(TabletEnums.ButtonClick); Tablet.playSound(TabletEnums.ButtonClick);
Print("GOOD GRIP CLICKED"); print("GOOD GRIP CLICKED");
sendToScript({ sendToScript({
"source": "InitialLaunchWindow.qml", "source": "InitialLaunchWindow.qml",
"method": "closeInitialLaunchWindow" "method": "closeInitialLaunchWindow"

80
scripts/simplifiedUI/ui/simplifiedFTUE/SecondLaunchWindow.qml
View file

@ -23,8 +23,8 @@ Rectangle {
Image { Image {
id: topLeftAccentImage id: topLeftAccentImage
width: 60 width: 400
height: 150 height: 180
anchors.left: parent.left anchors.left: parent.left
anchors.top: parent.top anchors.top: parent.top
source: "images/standOutTopLeft.png" source: "images/standOutTopLeft.png"
@ -32,87 +32,93 @@ Rectangle {
Image { Image {
id: bottomRightAccentImage id: bottomRightAccentImage
width: 30 width: 80
height: 100 height: 250
anchors.right: parent.right anchors.right: parent.right
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
source: "images/standOutBottomRight.png" source: "images/standOutBottomRight.png"
} }
Item { Item {
id: tempAvatarPageContainer
GridLayout { GridLayout {
id: controlsPageGrid id: tempAvatarPageGrid
anchors.fill: parent anchors.fill: parent
flow: root.width < root.height ? GridLayout.LeftToRight : GridLayout.TopToBottom 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
Item { Item {
id: textAndQRContainer id: textAndQRContainer
width: 650
Layout.topMargin: 80
HifiStylesUit.GraphikSemiBold { HifiStylesUit.GraphikSemiBold {
id: headerText id: headerText
width: 700
height: 120
text: "Stand out from the crowd!" text: "Stand out from the crowd!"
anchors.fill: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: "#000000" color: "#000000"
size: 36 size: 48
} }
HifiStylesUit.GraphikSemiBold { HifiStylesUit.GraphikSemiBold {
width: 700 id: descriptionText
height: 250 anchors.top: headerText.bottom
anchors.topMargin: 20
text: "You can create and upload custom avatars from our<br></br> text: "You can create and upload custom avatars from our<br></br>
Avatar Creator App. It's as easy as taking a selfie.<br></br> Avatar Creator App. It's as easy as taking a selfie.<br></br>
Available now on iOS and Android Platforms." Available now on iOS and Android Platforms."
anchors.top: headerText.bottom
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: "#000000" color: "#000000"
size: 24 size: 24
} }
Item { Item {
id: qrAndInstructionsContainer id: qrAndInstructionsContainer
anchors.top: descriptionText.bottom
height: avatarAppQRCodeImage.height
width: parent.width
anchors.topMargin: 50
Image { Image {
id: avatarAppQRCodeImage id: avatarAppQRCodeImage
width: 200
height: 200
source: "images/qrCode.jpg" source: "images/qrCode.jpg"
height: 200
width: 200
} }
HifiStylesUit.GraphikSemiBold { HifiStylesUit.GraphikSemiBold {
width: 600 id: instructionText
height: 80
text: "Use your mobile phone to scan this QR code."
anchors.top: avatarAppQRCodeImage.bottom anchors.top: avatarAppQRCodeImage.bottom
horizontalAlignment: Text.AlignHCenter anchors.horizontalCenter: avatarAppQRCodeImage.horizontalCenter
verticalAlignment: Text.AlignVCenter anchors.topMargin: 50
text: "Use your mobile phone to scan this QR code."
color: "#000000" color: "#000000"
size: 24 size: 24
} }
} }
HifiStylesUit.GraphikSemiBold { HifiStylesUit.RalewayBold {
text: "No thanks, I'll keep using my default avatar." text: "No thanks, I'll keep using my default avatar."
anchors.fill: parent anchors.top: qrAndInstructionsContainer.bottom
horizontalAlignment: Text.AlignHCenter anchors.topMargin: 50
verticalAlignment: Text.AlignVCenter anchors.horizontalCenter: qrAndInstructionsContainer.horizontalCenter
color: "#000000" color: "#000000"
opacity: noThanksMouseArea.containsMouse ? 1.0 : 0.8 opacity: continueMouseArea.containsMouse ? 1.0 : 0.8
size: 12 size: 20
z: 1
MouseArea { MouseArea {
id: noThanksMouseArea id: continueMouseArea
hoverEnabled: false hoverEnabled: true
anchors.fill: parent anchors.fill: parent
onClicked: { onClicked: {
Tablet.playSound(TabletEnums.ButtonClick); Tablet.playSound(TabletEnums.ButtonClick);
Print("NO THANKS CLICKED"); print("NO THANKS CLICKED");
sendToScript({ sendToScript({
"source": "SecondLaunchWindow.qml", "source": "SecondLaunchWindow.qml",
"method": "closeInitialLaunchWindow" "method": "closeInitialLaunchWindow"
@ -125,10 +131,16 @@ Rectangle {
Item { Item {
id: heroImageContainer id: heroImageContainer
Layout.leftMargin: 50
// these don't change when the window resizes
width: tempAvatarImage.width
height: tempAvatarImage.height
Image { Image {
id: heroImage id: heroImage
width: 600 // if I use preferred width and height, the image does not update when window changes size
height: 350 width: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 400 : 100
height: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 748 : 187
source: "images/hero.png" source: "images/hero.png"
} }
} }

20
scripts/simplifiedUI/ui/simplifiedUI.js
View file

@ -421,7 +421,7 @@ function displaySecondLaunchWindow() {
return; return;
} }
secondLaunchWindow = Desktop.createWindow(INITIAL_LAUNCH_QML_PATH, { secondLaunchWindow = Desktop.createWindow(SECOND_LAUNCH_QML_PATH, {
title: SECOND_LAUNCH_WINDOW_TITLE, title: SECOND_LAUNCH_WINDOW_TITLE,
presentationMode: SECOND_LAUNCH_PRESENTATION_MODE, presentationMode: SECOND_LAUNCH_PRESENTATION_MODE,
size: { size: {
@ -442,19 +442,21 @@ function displaySecondLaunchWindow() {
function closeInitialLaunchWindow() { function closeInitialLaunchWindow() {
initialLaunchWindow.fromQml.disconnect(onMessageFromInitialLaunchWindow); initialLaunchWindow.fromQml.disconnect(onMessageFromInitialLaunchWindow);
var homeLocation = LocationBookmarks.getAddress("hqhome"); // TODO Add this bookmark? Then uncomment this code
if (homeLocation) { //var homeLocation = LocationBookmarks.getAddress("hqhome");
Window.location = "hqhome"; //if (homeLocation) {
} // Window.location = "hqhome";
//}
initialLaunchWindow.close(); initialLaunchWindow.close();
} }
function closeSecondLaunchWindow() { function closeSecondLaunchWindow() {
secondLaunchWindow.fromQml.disconnect(onMessageFromSecondLaunchWindow); secondLaunchWindow.fromQml.disconnect(onMessageFromSecondLaunchWindow);
var homeLocation = LocationBookmarks.getAddress("hqhome"); // TODO Add this bookmark? Then uncomment this code
if (homeLocation) { //var homeLocation = LocationBookmarks.getAddress("hqhome");
Window.location = "hqhome"; //if (homeLocation) {
} // Window.location = "hqhome";
//}
secondLaunchWindow.close(); secondLaunchWindow.close();
} }