Mirrors/overte-thingvellir
3
0
Fork 0
mirror of https://thingvellir.net/git/overte synced 2025-03-27 23:52:03 +01: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) {
Commerce.getWalletStatus();
} 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 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
// the current avatar is the old default (Woody), use top avatar from inventory or one of the new defaults.
if (!currentAvatarIsValid || userHasOldDefaultAvatar || (!avatarHasBeenAutoSelectedBefore && userIsWearingDefaultAvatar)) {
@ -160,7 +157,7 @@ Rectangle {
var numberCharsAfterDefaultColorName = 11;
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.
sendToScript({
"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 {
id: root
// cannot get anything from SimplifiedConstants to work: simplifiedUI.colors.white
// TODO figure out why and fix
color: simplifiedUI.colors.white
anchors.fill: parent
SimplifiedConstants.SimplifiedConstants {
id: simplifiedUI
}
Component.onCompleted: {
if (Settings.getValue("simplifiedUI/alreadyAutoSelectedAvatar", false)) {
tempAvatarPageContainer.visible = false;
@ -59,45 +61,44 @@ Rectangle {
anchors.fill: parent
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
Layout.preferredWidth: 600
Layout.preferredWidth: 550
Layout.preferredHeight: 670
Layout.minimumWidth: 200
Layout.maximumWidth: 800
Layout.topMargin: 80
Layout.topMargin: 130
HifiStylesUit.RalewayBold {
id: headerText
text: "We know this isn't you..."
color: "#000000"
color: simplifiedUI.colors.darkGray
size: 48
wrapMode: Text.WordWrap
anchors.left: parent.left
anchors.right: parent.right
height: 100
height: 60
width: 550
}
HifiStylesUit.RalewaySemiBold {
HifiStylesUit.RalewayRegular {
id: descriptionText
anchors.top: headerText.bottom
anchors.topMargin: 20
anchors.topMargin: 30
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
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
App that's as easy as taking a selfie and picking your
outfits! Available now on iOS and Android Platforms."
color: "#000000"
size: 24
color: simplifiedUI.colors.darkGray
size: 22
anchors.left: parent.left
anchors.right: parent.right
height: 300
height: 180
width: 550
wrapMode: Text.WordWrap
}
@ -111,8 +112,8 @@ Rectangle {
Image {
id: avatarAppQRCodeImage
source: "images/qrCode.jpg"
height: 200
width: 200
height: 190
width: 190
}
HifiStylesUit.RalewayBold {
@ -122,10 +123,10 @@ Rectangle {
anchors.bottom: avatarAppQRCodeImage.bottom
anchors.right: parent.right
anchors.verticalCenter: avatarAppQRCodeImage.verticalCenter
anchors.leftMargin: 50
anchors.leftMargin: 30
text: "Use your mobile phone to scan this QR code."
color: "#000000"
size: 24
color: simplifiedUI.colors.darkGray
size: 22
wrapMode: Text.WordWrap
}
}
@ -133,9 +134,11 @@ Rectangle {
HifiStylesUit.RalewayBold {
anchors.top: qrAndInstructionsContainer.bottom
anchors.topMargin: 50
anchors.horizontalCenter: qrAndInstructionsContainer.horizontalCenter
text: "Continue"
color: "#000000"
anchors.left: parent.left
anchors.right: parent.right
horizontalAlignment: Text.AlignRight
text: "Continue >"
color: simplifiedUI.colors.text.lightBlue
opacity: continueMouseArea.containsMouse ? 1.0 : 0.7
size: 36
z: 1
@ -157,18 +160,14 @@ Rectangle {
Item {
id: tempAvatarImageContainer
Layout.leftMargin: 50
// TODO these don't change when the window resizes...still true?
Layout.leftMargin: 30
Layout.preferredWidth: tempAvatarImage.width
Layout.preferredHeight: tempAvatarImage.height
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: 400
height: 748
width: 428
height: 800
source: "images/DefaultAvatar_" + MyAvatar.skeletonModelURL.substring(123, MyAvatar.skeletonModelURL.length - 11) + ".png"
}
}
@ -180,7 +179,7 @@ Rectangle {
visible: false
anchors.fill: parent
HifiStylesUit.RalewaySemiBold {
HifiStylesUit.RalewayRegular {
id: controlsDescriptionText
text: "These are your avatar controls to <br></br>
<b>interact with and move around in your new HQ.</b>"
@ -190,7 +189,7 @@ Rectangle {
horizontalAlignment: Text.AlignHCenter
height: 100
width: 850
color: "#000000"
color: simplifiedUI.colors.darkGray
size: 36
wrapMode: Text.WordWrap
}
@ -204,35 +203,33 @@ Rectangle {
columns: 2
columnSpacing: 50
rowSpacing: 40
// flow: root.width > root.height ? GridLayout.LeftToRight : GridLayout.TopToBottom
Image {
Layout.preferredWidth: 450
Layout.preferredHeight: 280
Layout.preferredWidth: 360
Layout.preferredHeight: 225
id: walkingControls
source: "images/walkingControls.png"
}
Image {
Layout.preferredWidth: 450
Layout.preferredHeight: 240
Layout.preferredWidth: 360
Layout.preferredHeight: 200
id: mouseControls
source: "images/mouseControls.png"
}
Image {
Layout.preferredWidth: 300
Layout.preferredHeight: 200
// TODO Why is this not aligning correctly? (Same at line 235)
Layout.alignment: AlignHCenter
Layout.preferredWidth: 240
Layout.preferredHeight: 160
Layout.alignment: Qt.AlignHCenter
id: runJumpControls
source: "images/runJumpControls.png"
}
Image {
Layout.preferredWidth: 200
Layout.preferredHeight: 120
Layout.alignment: AlignHCenter
Layout.preferredWidth: 160
Layout.preferredHeight: 100
Layout.alignment: Qt.AlignHCenter
id: cameraControls
source: "images/cameraControls.png"
}
@ -246,7 +243,7 @@ Rectangle {
text: "Learn more about our controls."
width: 200
height: 25
color: "#000000"
color: simplifiedUI.colors.text.lightBlue
opacity: learnMoreAboutControlsMouseArea.containsMouse ? 1.0 : 0.7
size: 14
wrapMode: Text.WordWrap
@ -258,20 +255,19 @@ Rectangle {
onClicked: {
Tablet.playSound(TabletEnums.ButtonClick);
// TODO open docs in browser
Print("LEARN MORE ABOUT CONTROLS CLICKED");
Qt.openUrlExternally("https://www.highfidelity.com/knowledge/get-around");
}
}
}
HifiStylesUit.RalewayBold {
anchors.bottom: parent.bottom
anchors.top: controlsPageGrid.bottom
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottomMargin: 50
anchors.topMargin: 50
text: "I've got a good grip on the controls."
width: 650
height: 60
color: "#000000"
color: simplifiedUI.colors.text.lightBlue
opacity: goodGripMouseArea.containsMouse ? 1.0 : 0.7
size: 36
wrapMode: Text.WordWrap
@ -283,7 +279,6 @@ Rectangle {
onClicked: {
Tablet.playSound(TabletEnums.ButtonClick);
print("GOOD GRIP CLICKED");
sendToScript({
"source": "InitialLaunchWindow.qml",
"method": "closeInitialLaunchWindow"

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

@ -18,13 +18,17 @@ import hifi.simplifiedUI.simplifiedControls 1.0 as SimplifiedControls
Rectangle {
id: root
color: "#ffffff"
color: simplifiedUI.colors.white
anchors.fill: parent
SimplifiedConstants.SimplifiedConstants {
id: simplifiedUI
}
Image {
id: topLeftAccentImage
width: 180
height: 400
height: 450
anchors.left: parent.left
anchors.top: parent.top
source: "images/standOutTopLeft.png"
@ -48,11 +52,9 @@ Rectangle {
id: tempAvatarPageGrid
anchors.fill: parent
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
@ -60,56 +62,58 @@ Rectangle {
Layout.preferredHeight: 670
Layout.minimumWidth: 200
Layout.maximumWidth: 800
Layout.topMargin: 80
Layout.topMargin: 180
HifiStylesUit.RalewayBold {
id: headerText
text: "Stand out from the crowd!"
color: "#000000"
color: simplifiedUI.colors.darkGray
size: 48
wrapMode: Text.WordWrap
anchors.left: parent.left
anchors.right: parent.right
height: 80
height: 60
}
HifiStylesUit.RalewaySemiBold {
HifiStylesUit.RalewayRegular {
id: descriptionText
width: 600
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."
color: "#000000"
color: simplifiedUI.colors.darkGray
size: 24
anchors.left: parent.left
anchors.right: parent.right
height: 100
height: 80
wrapMode: Text.WordWrap
}
Item {
id: qrAndInstructionsContainer
anchors.top: descriptionText.bottom
anchors.left: parent.left
height: avatarAppQRCodeImage.height + instructionText.height + 50
width: parent.width
anchors.topMargin: 50
width: descriptionText.width
anchors.topMargin: 60
Image {
id: avatarAppQRCodeImage
anchors.horizontalCenter: parent.horizontalCenter
anchors.horizontalCenter: instructionText.horizontalCenter
source: "images/qrCode.jpg"
height: 200
width: 200
height: 220
width: 220
}
HifiStylesUit.RalewayBold {
id: instructionText
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: 10
width: 515
anchors.top: avatarAppQRCodeImage.bottom
anchors.horizontalCenter: avatarAppQRCodeImage.horizontalCenter
text: "Use your mobile phone to scan this QR code."
color: "#000000"
color: simplifiedUI.colors.darkGray
size: 24
height: 60
height: 30
wrapMode: Text.WordWrap
}
}
@ -119,9 +123,9 @@ Rectangle {
anchors.topMargin: 50
anchors.horizontalCenter: qrAndInstructionsContainer.horizontalCenter
text: "No thanks, I'll keep using my default avatar."
color: "#000000"
color: simplifiedUI.colors.text.lightBlue
opacity: continueMouseArea.containsMouse ? 1.0 : 0.7
size: 20
size: 14
z: 1
wrapMode: Text.WordWrap
@ -132,7 +136,6 @@ Rectangle {
onClicked: {
Tablet.playSound(TabletEnums.ButtonClick);
print("NO THANKS CLICKED");
sendToScript({
"source": "SecondLaunchWindow.qml",
"method": "closeSecondLaunchWindow"
@ -144,18 +147,14 @@ Rectangle {
Item {
id: heroImageContainer
Layout.leftMargin: 50
// these don't change when the window resizes
Layout.leftMargin: 30
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
width: 400
height: 748
width: 428
height: 800
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_PRESENTATION_MODE = Desktop.PresentationMode.NATIVE;
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 + 48;
var INITIAL_LAUNCH_HEIGHT_PX = Window.innerHeight + TOP_BAR_HEIGHT_PX;
var INITIAL_WINDOW_FLAGS = 0x00000001 | // Qt::Window
0x00000008 | // Qt::Popup
0x00000800 | // Qt::FramelessWindowHint
0x40000000; // Qt::NoDropShadowWindowHint
var initialLaunchWindow = false;
function displayInitialLaunchWindow() {
//TODO REMOVE ME
print("MILAD TESTING 3");
print("DISPLAY INITIAL LAUNCH WINDOW.");
if (initialLaunchWindow) {
initialLaunchWindow.close();
// 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_PRESENTATION_MODE = Desktop.PresentationMode.NATIVE;
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 + 48;
var SECOND_LAUNCH_HEIGHT_PX = Window.innerHeight + TOP_BAR_HEIGHT_PX;
var SECOND_WINDOW_FLAGS = 0x00000001 | // Qt::Window
0x00000008 | // Qt::Popup
0x00000800 | // Qt::FramelessWindowHint
0x40000000; // Qt::NoDropShadowWindowHint
var secondLaunchWindow = false;
function displaySecondLaunchWindow() {
print("DISPLAY SECOND LAUNCH WINDOW.");
if (secondLaunchWindow) {
secondLaunchWindow.close();
// 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_PRESENTATION_MODE = Desktop.PresentationMode.NATIVE;
var TOP_BAR_WIDTH_PX = Window.innerWidth;
var TOP_BAR_HEIGHT_PX = 48;
var topBarWindow = false;
function loadSimplifiedTopBar() {
var windowProps = {