Mirrors/overte-JulianGro
3
0
Fork 0
mirror of https://github.com/JulianGro/overte.git synced 2025-04-29 22:22:54 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Finished UI, ready for CR

Browse source
This commit is contained in:
RebeccaStankus 2019-10-01 09:58:44 -07:00
parent 6658e6377c
commit 0dfb234089
4 changed files with 78 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml
View file

@ -71,7 +71,7 @@ Rectangle {
if (isLoggedIn) { if (isLoggedIn) {
Commerce.getWalletStatus(); Commerce.getWalletStatus();
} else { } else {
// Show some error to the user console.log('WARNING: SimplifiedTopBar.qml Error getting wallet status.');
} }
} }
@ -127,9 +127,6 @@ Rectangle {
var defaultAvatarColors = ["Blue", "Cyan", "Green", "Pink", "Red", "Yellow"]; var defaultAvatarColors = ["Blue", "Cyan", "Green", "Pink", "Red", "Yellow"];
var avatarColor; var avatarColor;
// FOR TESTING__________REMOVE
userHasValidAvatarInInventory = false;
// If we have never auto-selected and the user is still using a default avatar or if the current avatar is not valid (fst), or if // If we have never auto-selected and the user is still using a default avatar or if the current avatar is not valid (fst), or if
// the current avatar is the old default (Woody), use top avatar from inventory or one of the new defaults. // the current avatar is the old default (Woody), use top avatar from inventory or one of the new defaults.
if (!currentAvatarIsValid || userHasOldDefaultAvatar || (!avatarHasBeenAutoSelectedBefore && userIsWearingDefaultAvatar)) { if (!currentAvatarIsValid || userHasOldDefaultAvatar || (!avatarHasBeenAutoSelectedBefore && userIsWearingDefaultAvatar)) {
@ -160,7 +157,7 @@ Rectangle {
var numberCharsAfterDefaultColorName = 11; var numberCharsAfterDefaultColorName = 11;
avatarColor = currentAvatarURL.substring(indexOfDefaultAvatarColor , MyAvatar.skeletonModelURL.length - numberCharsAfterDefaultColorName) avatarColor = currentAvatarURL.substring(indexOfDefaultAvatarColor , MyAvatar.skeletonModelURL.length - numberCharsAfterDefaultColorName)
} }
// There could be a race condition here. We are changing the setting and then calling simplifiedUI.js to check that setting shortly after.
// We can send the page we want to display instead of reading the setting to avoid this. // We can send the page we want to display instead of reading the setting to avoid this.
sendToScript({ sendToScript({
"source": "SimplifiedTopBar.qml", "source": "SimplifiedTopBar.qml",

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

@ -18,11 +18,13 @@ import hifi.simplifiedUI.simplifiedControls 1.0 as SimplifiedControls
Rectangle { Rectangle {
id: root id: root
// cannot get anything from SimplifiedConstants to work: simplifiedUI.colors.white
// TODO figure out why and fix
color: simplifiedUI.colors.white color: simplifiedUI.colors.white
anchors.fill: parent anchors.fill: parent
SimplifiedConstants.SimplifiedConstants {
id: simplifiedUI
}
Component.onCompleted: { Component.onCompleted: {
if (Settings.getValue("simplifiedUI/alreadyAutoSelectedAvatar", false)) { if (Settings.getValue("simplifiedUI/alreadyAutoSelectedAvatar", false)) {
tempAvatarPageContainer.visible = false; tempAvatarPageContainer.visible = false;
@ -59,45 +61,44 @@ Rectangle {
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: 180 anchors.leftMargin: 180
anchors.topMargin: 50 anchors.topMargin: 50
anchors.bottomMargin: 50
anchors.rightMargin: 100 anchors.rightMargin: 100
columns: 2 columns: 2
// flow: root.width > root.height ? GridLayout.LeftToRight : GridLayout.TopToBottom
Item { Item {
id: textAndQRContainer id: textAndQRContainer
Layout.preferredWidth: 600 Layout.preferredWidth: 550
Layout.preferredHeight: 670 Layout.preferredHeight: 670
Layout.minimumWidth: 200 Layout.minimumWidth: 200
Layout.maximumWidth: 800 Layout.maximumWidth: 800
Layout.topMargin: 80 Layout.topMargin: 130
HifiStylesUit.RalewayBold { HifiStylesUit.RalewayBold {
id: headerText id: headerText
text: "We know this isn't you..." text: "We know this isn't you..."
color: "#000000" color: simplifiedUI.colors.darkGray
size: 48 size: 48
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right height: 60
height: 100 width: 550
} }
HifiStylesUit.RalewaySemiBold { HifiStylesUit.RalewayRegular {
id: descriptionText id: descriptionText
anchors.top: headerText.bottom anchors.top: headerText.bottom
anchors.topMargin: 20 anchors.topMargin: 30
text: "but, we've given you this <b>temporary avatar</b> to use text: "but, we've given you this <b>temporary avatar</b> to use
for today. If you see this avatar in-world, walk up and for today. If you see this avatar in-world, walk up and
say hello to other new users!<br></br><br></br> say hello to other new users!<br></br><br></br>
<b>We want you to be you</b> so we've built an Avatar Creator <b>We want you to be you</b> so we've built an Avatar Creator
App that's as easy as taking a selfie and picking your App that's as easy as taking a selfie and picking your
outfits! Available now on iOS and Android Platforms." outfits! Available now on iOS and Android Platforms."
color: "#000000" color: simplifiedUI.colors.darkGray
size: 24 size: 22
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
height: 300 height: 180
width: 550
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
} }
@ -111,8 +112,8 @@ Rectangle {
Image { Image {
id: avatarAppQRCodeImage id: avatarAppQRCodeImage
source: "images/qrCode.jpg" source: "images/qrCode.jpg"
height: 200 height: 190
width: 200 width: 190
} }
HifiStylesUit.RalewayBold { HifiStylesUit.RalewayBold {
@ -122,10 +123,10 @@ Rectangle {
anchors.bottom: avatarAppQRCodeImage.bottom anchors.bottom: avatarAppQRCodeImage.bottom
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: avatarAppQRCodeImage.verticalCenter anchors.verticalCenter: avatarAppQRCodeImage.verticalCenter
anchors.leftMargin: 50 anchors.leftMargin: 30
text: "Use your mobile phone to scan this QR code." text: "Use your mobile phone to scan this QR code."
color: "#000000" color: simplifiedUI.colors.darkGray
size: 24 size: 22
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
} }
} }
@ -133,9 +134,11 @@ Rectangle {
HifiStylesUit.RalewayBold { HifiStylesUit.RalewayBold {
anchors.top: qrAndInstructionsContainer.bottom anchors.top: qrAndInstructionsContainer.bottom
anchors.topMargin: 50 anchors.topMargin: 50
anchors.horizontalCenter: qrAndInstructionsContainer.horizontalCenter anchors.left: parent.left
text: "Continue" anchors.right: parent.right
color: "#000000" horizontalAlignment: Text.AlignRight
text: "Continue >"
color: simplifiedUI.colors.text.lightBlue
opacity: continueMouseArea.containsMouse ? 1.0 : 0.7 opacity: continueMouseArea.containsMouse ? 1.0 : 0.7
size: 36 size: 36
z: 1 z: 1
@ -157,18 +160,14 @@ Rectangle {
Item { Item {
id: tempAvatarImageContainer id: tempAvatarImageContainer
Layout.leftMargin: 50 Layout.leftMargin: 30
// TODO these don't change when the window resizes...still true?
Layout.preferredWidth: tempAvatarImage.width Layout.preferredWidth: tempAvatarImage.width
Layout.preferredHeight: tempAvatarImage.height Layout.preferredHeight: tempAvatarImage.height
Image { Image {
id: tempAvatarImage id: tempAvatarImage
// if I use preferred width and height, the image does not update when window changes size width: 428
// width: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 400 : 100 height: 800
// height: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 748 : 187
width: 400
height: 748
source: "images/DefaultAvatar_" + MyAvatar.skeletonModelURL.substring(123, MyAvatar.skeletonModelURL.length - 11) + ".png" source: "images/DefaultAvatar_" + MyAvatar.skeletonModelURL.substring(123, MyAvatar.skeletonModelURL.length - 11) + ".png"
} }
} }
@ -180,7 +179,7 @@ Rectangle {
visible: false visible: false
anchors.fill: parent anchors.fill: parent
HifiStylesUit.RalewaySemiBold { HifiStylesUit.RalewayRegular {
id: controlsDescriptionText id: controlsDescriptionText
text: "These are your avatar controls to <br></br> text: "These are your avatar controls to <br></br>
<b>interact with and move around in your new HQ.</b>" <b>interact with and move around in your new HQ.</b>"
@ -190,7 +189,7 @@ Rectangle {
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
height: 100 height: 100
width: 850 width: 850
color: "#000000" color: simplifiedUI.colors.darkGray
size: 36 size: 36
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
} }
@ -204,35 +203,33 @@ Rectangle {
columns: 2 columns: 2
columnSpacing: 50 columnSpacing: 50
rowSpacing: 40 rowSpacing: 40
// flow: root.width > root.height ? GridLayout.LeftToRight : GridLayout.TopToBottom
Image { Image {
Layout.preferredWidth: 450 Layout.preferredWidth: 360
Layout.preferredHeight: 280 Layout.preferredHeight: 225
id: walkingControls id: walkingControls
source: "images/walkingControls.png" source: "images/walkingControls.png"
} }
Image { Image {
Layout.preferredWidth: 450 Layout.preferredWidth: 360
Layout.preferredHeight: 240 Layout.preferredHeight: 200
id: mouseControls id: mouseControls
source: "images/mouseControls.png" source: "images/mouseControls.png"
} }
Image { Image {
Layout.preferredWidth: 300 Layout.preferredWidth: 240
Layout.preferredHeight: 200 Layout.preferredHeight: 160
// TODO Why is this not aligning correctly? (Same at line 235) Layout.alignment: Qt.AlignHCenter
Layout.alignment: AlignHCenter
id: runJumpControls id: runJumpControls
source: "images/runJumpControls.png" source: "images/runJumpControls.png"
} }
Image { Image {
Layout.preferredWidth: 200 Layout.preferredWidth: 160
Layout.preferredHeight: 120 Layout.preferredHeight: 100
Layout.alignment: AlignHCenter Layout.alignment: Qt.AlignHCenter
id: cameraControls id: cameraControls
source: "images/cameraControls.png" source: "images/cameraControls.png"
} }
@ -246,7 +243,7 @@ Rectangle {
text: "Learn more about our controls." text: "Learn more about our controls."
width: 200 width: 200
height: 25 height: 25
color: "#000000" color: simplifiedUI.colors.text.lightBlue
opacity: learnMoreAboutControlsMouseArea.containsMouse ? 1.0 : 0.7 opacity: learnMoreAboutControlsMouseArea.containsMouse ? 1.0 : 0.7
size: 14 size: 14
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
@ -258,20 +255,19 @@ Rectangle {
onClicked: { onClicked: {
Tablet.playSound(TabletEnums.ButtonClick); Tablet.playSound(TabletEnums.ButtonClick);
// TODO open docs in browser Qt.openUrlExternally("https://www.highfidelity.com/knowledge/get-around");
Print("LEARN MORE ABOUT CONTROLS CLICKED");
} }
} }
} }
HifiStylesUit.RalewayBold { HifiStylesUit.RalewayBold {
anchors.bottom: parent.bottom anchors.top: controlsPageGrid.bottom
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.bottomMargin: 50 anchors.topMargin: 50
text: "I've got a good grip on the controls." text: "I've got a good grip on the controls."
width: 650 width: 650
height: 60 height: 60
color: "#000000" color: simplifiedUI.colors.text.lightBlue
opacity: goodGripMouseArea.containsMouse ? 1.0 : 0.7 opacity: goodGripMouseArea.containsMouse ? 1.0 : 0.7
size: 36 size: 36
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
@ -283,7 +279,6 @@ Rectangle {
onClicked: { onClicked: {
Tablet.playSound(TabletEnums.ButtonClick); Tablet.playSound(TabletEnums.ButtonClick);
print("GOOD GRIP CLICKED");
sendToScript({ sendToScript({
"source": "InitialLaunchWindow.qml", "source": "InitialLaunchWindow.qml",
"method": "closeInitialLaunchWindow" "method": "closeInitialLaunchWindow"

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

@ -18,13 +18,17 @@ import hifi.simplifiedUI.simplifiedControls 1.0 as SimplifiedControls
Rectangle { Rectangle {
id: root id: root
color: "#ffffff" color: simplifiedUI.colors.white
anchors.fill: parent anchors.fill: parent
SimplifiedConstants.SimplifiedConstants {
id: simplifiedUI
}
Image { Image {
id: topLeftAccentImage id: topLeftAccentImage
width: 180 width: 180
height: 400 height: 450
anchors.left: parent.left anchors.left: parent.left
anchors.top: parent.top anchors.top: parent.top
source: "images/standOutTopLeft.png" source: "images/standOutTopLeft.png"
@ -48,11 +52,9 @@ Rectangle {
id: tempAvatarPageGrid id: tempAvatarPageGrid
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: 180 anchors.leftMargin: 180
anchors.topMargin: 50
anchors.bottomMargin: 50 anchors.bottomMargin: 50
anchors.rightMargin: 100 anchors.rightMargin: 100
columns: 2 columns: 2
// flow: root.width < root.height ? GridLayout.LeftToRight : GridLayout.TopToBottom
Item { Item {
id: textAndQRContainer id: textAndQRContainer
@ -60,56 +62,58 @@ Rectangle {
Layout.preferredHeight: 670 Layout.preferredHeight: 670
Layout.minimumWidth: 200 Layout.minimumWidth: 200
Layout.maximumWidth: 800 Layout.maximumWidth: 800
Layout.topMargin: 80 Layout.topMargin: 180
HifiStylesUit.RalewayBold { HifiStylesUit.RalewayBold {
id: headerText id: headerText
text: "Stand out from the crowd!" text: "Stand out from the crowd!"
color: "#000000" color: simplifiedUI.colors.darkGray
size: 48 size: 48
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
height: 80 height: 60
} }
HifiStylesUit.RalewaySemiBold { HifiStylesUit.RalewayRegular {
id: descriptionText id: descriptionText
width: 600
anchors.top: headerText.bottom anchors.top: headerText.bottom
anchors.topMargin: 10
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" color: simplifiedUI.colors.darkGray
size: 24 size: 24
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right height: 80
height: 100
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
} }
Item { Item {
id: qrAndInstructionsContainer id: qrAndInstructionsContainer
anchors.top: descriptionText.bottom anchors.top: descriptionText.bottom
anchors.left: parent.left
height: avatarAppQRCodeImage.height + instructionText.height + 50 height: avatarAppQRCodeImage.height + instructionText.height + 50
width: parent.width width: descriptionText.width
anchors.topMargin: 50 anchors.topMargin: 60
Image { Image {
id: avatarAppQRCodeImage id: avatarAppQRCodeImage
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: instructionText.horizontalCenter
source: "images/qrCode.jpg" source: "images/qrCode.jpg"
height: 200 height: 220
width: 200 width: 220
} }
HifiStylesUit.RalewayBold { HifiStylesUit.RalewayBold {
id: instructionText id: instructionText
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.topMargin: 10
width: 515
anchors.top: avatarAppQRCodeImage.bottom anchors.top: avatarAppQRCodeImage.bottom
anchors.horizontalCenter: avatarAppQRCodeImage.horizontalCenter
text: "Use your mobile phone to scan this QR code." text: "Use your mobile phone to scan this QR code."
color: "#000000" color: simplifiedUI.colors.darkGray
size: 24 size: 24
height: 60 height: 30
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
} }
} }
@ -119,9 +123,9 @@ Rectangle {
anchors.topMargin: 50 anchors.topMargin: 50
anchors.horizontalCenter: qrAndInstructionsContainer.horizontalCenter anchors.horizontalCenter: qrAndInstructionsContainer.horizontalCenter
text: "No thanks, I'll keep using my default avatar." text: "No thanks, I'll keep using my default avatar."
color: "#000000" color: simplifiedUI.colors.text.lightBlue
opacity: continueMouseArea.containsMouse ? 1.0 : 0.7 opacity: continueMouseArea.containsMouse ? 1.0 : 0.7
size: 20 size: 14
z: 1 z: 1
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
@ -132,7 +136,6 @@ Rectangle {
onClicked: { onClicked: {
Tablet.playSound(TabletEnums.ButtonClick); Tablet.playSound(TabletEnums.ButtonClick);
print("NO THANKS CLICKED");
sendToScript({ sendToScript({
"source": "SecondLaunchWindow.qml", "source": "SecondLaunchWindow.qml",
"method": "closeSecondLaunchWindow" "method": "closeSecondLaunchWindow"
@ -144,18 +147,14 @@ Rectangle {
Item { Item {
id: heroImageContainer id: heroImageContainer
Layout.leftMargin: 50 Layout.leftMargin: 30
// these don't change when the window resizes
Layout.preferredWidth: heroImage.width Layout.preferredWidth: heroImage.width
Layout.preferredHeight: heroImage.height Layout.preferredHeight: heroImage.height
Image { Image {
id: heroImage id: heroImage
// if I use preferred width and height, the image does not update when window changes size width: 428
// width: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 400 : 100 height: 800
// height: tempAvatarPageGrid.flow === GridLayout.LeftToRight ? 748 : 187
width: 400
height: 748
source: "images/hero.png" source: "images/hero.png"
} }
} }

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

@ -362,17 +362,13 @@ var INITIAL_LAUNCH_QML_PATH = Script.resolvePath("./simplifiedFTUE/InitialLaunch
var INITIAL_LAUNCH_WINDOW_TITLE = "Initial Launch"; var INITIAL_LAUNCH_WINDOW_TITLE = "Initial Launch";
var INITIAL_LAUNCH_PRESENTATION_MODE = Desktop.PresentationMode.NATIVE; var INITIAL_LAUNCH_PRESENTATION_MODE = Desktop.PresentationMode.NATIVE;
var INITIAL_LAUNCH_WIDTH_PX = Window.innerWidth; var INITIAL_LAUNCH_WIDTH_PX = Window.innerWidth;
// TODO use TOP_BAR_HEIGHT_PX instead of 48. Why is this not working? var INITIAL_LAUNCH_HEIGHT_PX = Window.innerHeight + TOP_BAR_HEIGHT_PX;
var INITIAL_LAUNCH_HEIGHT_PX = Window.innerHeight + 48;
var INITIAL_WINDOW_FLAGS = 0x00000001 | // Qt::Window var INITIAL_WINDOW_FLAGS = 0x00000001 | // Qt::Window
0x00000008 | // Qt::Popup 0x00000008 | // Qt::Popup
0x00000800 | // Qt::FramelessWindowHint 0x00000800 | // Qt::FramelessWindowHint
0x40000000; // Qt::NoDropShadowWindowHint 0x40000000; // Qt::NoDropShadowWindowHint
var initialLaunchWindow = false; var initialLaunchWindow = false;
function displayInitialLaunchWindow() { function displayInitialLaunchWindow() {
//TODO REMOVE ME
print("MILAD TESTING 3");
print("DISPLAY INITIAL LAUNCH WINDOW.");
if (initialLaunchWindow) { if (initialLaunchWindow) {
initialLaunchWindow.close(); initialLaunchWindow.close();
// This really shouldn't be necessary. // This really shouldn't be necessary.
@ -404,15 +400,13 @@ var SECOND_LAUNCH_QML_PATH = Script.resolvePath("simplifiedFTUE/SecondLaunchWind
var SECOND_LAUNCH_WINDOW_TITLE = "Second Launch"; var SECOND_LAUNCH_WINDOW_TITLE = "Second Launch";
var SECOND_LAUNCH_PRESENTATION_MODE = Desktop.PresentationMode.NATIVE; var SECOND_LAUNCH_PRESENTATION_MODE = Desktop.PresentationMode.NATIVE;
var SECOND_LAUNCH_WIDTH_PX = Window.innerWidth; var SECOND_LAUNCH_WIDTH_PX = Window.innerWidth;
// TODO use TOP_BAR_HEIGHT_PX instead of 48. Why is this not working? var SECOND_LAUNCH_HEIGHT_PX = Window.innerHeight + TOP_BAR_HEIGHT_PX;
var SECOND_LAUNCH_HEIGHT_PX = Window.innerHeight + 48;
var SECOND_WINDOW_FLAGS = 0x00000001 | // Qt::Window var SECOND_WINDOW_FLAGS = 0x00000001 | // Qt::Window
0x00000008 | // Qt::Popup 0x00000008 | // Qt::Popup
0x00000800 | // Qt::FramelessWindowHint 0x00000800 | // Qt::FramelessWindowHint
0x40000000; // Qt::NoDropShadowWindowHint 0x40000000; // Qt::NoDropShadowWindowHint
var secondLaunchWindow = false; var secondLaunchWindow = false;
function displaySecondLaunchWindow() { function displaySecondLaunchWindow() {
print("DISPLAY SECOND LAUNCH WINDOW.");
if (secondLaunchWindow) { if (secondLaunchWindow) {
secondLaunchWindow.close(); secondLaunchWindow.close();
// This really shouldn't be necessary. // This really shouldn't be necessary.
@ -573,7 +567,6 @@ var TOP_BAR_QML_PATH = Script.resourcesPath() + "qml/hifi/simplifiedUI/topBar/Si
var TOP_BAR_WINDOW_TITLE = "Simplified Top Bar"; var TOP_BAR_WINDOW_TITLE = "Simplified Top Bar";
var TOP_BAR_PRESENTATION_MODE = Desktop.PresentationMode.NATIVE; var TOP_BAR_PRESENTATION_MODE = Desktop.PresentationMode.NATIVE;
var TOP_BAR_WIDTH_PX = Window.innerWidth; var TOP_BAR_WIDTH_PX = Window.innerWidth;
var TOP_BAR_HEIGHT_PX = 48;
var topBarWindow = false; var topBarWindow = false;
function loadSimplifiedTopBar() { function loadSimplifiedTopBar() {
var windowProps = { var windowProps = {