From 2f2b7b0306590650a6883b1250b43f5025f27ea8 Mon Sep 17 00:00:00 2001 From: RebeccaStankus Date: Thu, 3 Oct 2019 17:28:34 -0700 Subject: [PATCH] Ready for CR Thank you Zach --- .../simplifiedUI/topBar/SimplifiedTopBar.qml | 3 - .../ui/simplifiedFTUE/InitialLaunchWindow.qml | 424 +++++++++--------- .../ui/simplifiedFTUE/SecondLaunchWindow.qml | 80 ++-- scripts/simplifiedUI/ui/simplifiedUI.js | 20 +- 4 files changed, 255 insertions(+), 272 deletions(-) diff --git a/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml b/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml index 2f6456de28..a16fb9b82d 100644 --- a/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml +++ b/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml @@ -128,9 +128,6 @@ Rectangle { // 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. - // FOR TESTING__________REMOVE - userHasValidAvatarInInventory = false; - // If the current avatar URL is invalid, OR the user is using the "default avatar" (Woody)... if (!currentAvatarURLContainsFST || currentAvatarURLContainsDefaultAvatar) { // If the user has a valid avatar in their inventory... diff --git a/scripts/simplifiedUI/ui/simplifiedFTUE/InitialLaunchWindow.qml b/scripts/simplifiedUI/ui/simplifiedFTUE/InitialLaunchWindow.qml index 29df2b51d1..ec7effe4a5 100644 --- a/scripts/simplifiedUI/ui/simplifiedFTUE/InitialLaunchWindow.qml +++ b/scripts/simplifiedUI/ui/simplifiedFTUE/InitialLaunchWindow.qml @@ -41,7 +41,6 @@ Rectangle { anchors.left: parent.left anchors.top: parent.top source: "images/defaultTopLeft.png" - z: 1 } Image { @@ -51,266 +50,253 @@ Rectangle { anchors.right: parent.right anchors.bottom: parent.bottom source: "images/defaultBottomRight.png" - z: 1 } - Item { + Flickable { id: tempAvatarPageContainer visible: true + anchors.fill: parent + clip: true + contentWidth: parent.width + contentHeight: tempAvatarPageGrid.height - Flickable { - anchors.fill: parent - anchors.leftMargin: 50 - anchors.topMargin: 50 - anchors.rightMargin: 100 - clip: true - contentWidth: parent.width - contentHeight: childrenRect.height + GridLayout { + id: tempAvatarPageGrid + width: parent.width + columns: 2 + rows: 1 - GridLayout { - id: tempAvatarPageGrid - anchors.fill: parent - columns: landscapeOrientation ? 2 : 1 - rows: landscapeOrientation ? 1 : 2 + Image { + Layout.preferredWidth: 428 + Layout.minimumHeight: 240 + Layout.maximumHeight: 800 + Layout.fillHeight: true + source: resourceDirectoryUrl + "qml/hifi/simplifiedUI/avatarApp/images/" + + MyAvatar.skeletonModelURL.substring(MyAvatar.skeletonModelURL.indexOf("simplifiedAvatar"), MyAvatar.skeletonModelURL.lastIndexOf("/")) + ".png" + mipmap: true + fillMode: Image.PreserveAspectFit + } - Item { - id: tempAvatarImageContainer - Layout.preferredWidth: tempAvatarImage.width - Layout.preferredHeight: tempAvatarImage.height + Item { + id: textAndQRContainer + Layout.minimumWidth: 300 + Layout.maximumWidth: 1680 + Layout.fillWidth: true + Layout.preferredHeight: childrenRect.height - Image { - id: tempAvatarImage - width: landscapeOrientation ? 428 : 320 - height: landscapeOrientation ? 800 : 598 - source: resourceDirectoryUrl + "qml/hifi/simplifiedUI/avatarApp/images/" + - MyAvatar.skeletonModelURL.substring(MyAvatar.skeletonModelURL.indexOf("simplifiedAvatar"), MyAvatar.skeletonModelURL.lastIndexOf("/")) + ".png" - } + HifiStylesUit.RalewayBold { + id: headerText + text: "We know this isn't you..." + color: simplifiedUI.colors.text.black + size: 48 + height: paintedHeight + wrapMode: Text.Wrap + anchors.top: parent.top + anchors.topMargin: 120 + anchors.left: parent.left + anchors.right: parent.right + } + + HifiStylesUit.RalewayRegular { + id: descriptionText + anchors.top: headerText.bottom + anchors.topMargin: 10 + anchors.left: parent.left + anchors.right: parent.right + height: paintedHeight + text: "but we've given you this temporary avatar to use " + + "for today. If you see this avatar in-world, walk up and " + + "say hello to other new users!

" + + "We want you to be you 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." + color: simplifiedUI.colors.text.black + size: 22 + wrapMode: Text.Wrap } Item { - id: textAndQRContainer - Layout.preferredWidth: 680 - Layout.preferredHeight: childrenRect.height - Layout.topMargin: landscapeOrientation ? 130 : 0 + id: qrAndInstructionsContainer + anchors.top: descriptionText.bottom + anchors.topMargin: 50 + anchors.left: parent.left + anchors.right: parent.right + height: avatarAppQRCodeImage.height - HifiStylesUit.RalewayBold { - id: headerText - text: "We know this isn't you..." - color: simplifiedUI.colors.text.black - size: 48 - wrapMode: Text.WordWrap - anchors.left: parent.left - anchors.right: parent.right + Image { + id: avatarAppQRCodeImage + source: resourceDirectoryUrl + "qml/hifi/simplifiedUI/avatarApp/images/qrCode.jpg" + height: 190 + width: 190 + mipmap: true + fillMode: Image.PreserveAspectFit } - HifiStylesUit.RalewayRegular { - id: descriptionText - anchors.top: headerText.bottom - anchors.topMargin: 10 - text: "but, we've given you this temporary avatar to use - for today. If you see this avatar in-world, walk up and - say hello to other new users!



- We want you to be you 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." + HifiStylesUit.RalewayBold { + id: instructionText + anchors.top: avatarAppQRCodeImage.top + anchors.bottom: avatarAppQRCodeImage.bottom + anchors.left: avatarAppQRCodeImage.right + anchors.leftMargin: 30 + anchors.right: parent.right + text: "Use your mobile phone to scan this QR code." color: simplifiedUI.colors.text.black size: 22 - anchors.left: parent.left - anchors.right: parent.right - wrapMode: Text.WordWrap + wrapMode: Text.Wrap } + } - Item { - id: qrAndInstructionsContainer - anchors.top: descriptionText.bottom - height: avatarAppQRCodeImage.height - anchors.left: parent.left - anchors.right: parent.right - anchors.topMargin: 50 + HifiStylesUit.RalewayBold { + anchors.top: qrAndInstructionsContainer.bottom + anchors.topMargin: 50 + anchors.left: parent.left + anchors.right: parent.right + horizontalAlignment: Text.AlignLeft + text: "Continue >" + color: simplifiedUI.colors.text.lightBlue + opacity: continueMouseArea.containsMouse ? 1.0 : 0.7 + size: 36 + height: paintedHeight + z: 1 - Image { - id: avatarAppQRCodeImage - source: resourceDirectoryUrl + "qml/hifi/simplifiedUI/avatarApp/images/qrCode.jpg" - height: 190 - width: 190 - mipmap: true - fillMode: Image.PreserveAspectFit - } + MouseArea { + id: continueMouseArea + hoverEnabled: true + anchors.fill: parent - HifiStylesUit.RalewayBold { - id: instructionText - anchors.left: avatarAppQRCodeImage.right - anchors.top: avatarAppQRCodeImage.top - anchors.bottom: avatarAppQRCodeImage.bottom - anchors.right: parent.right - anchors.leftMargin: 30 - text: "Use your mobile phone to scan this QR code." - color: simplifiedUI.colors.text.black - size: 22 - wrapMode: Text.WordWrap - } - } - - HifiStylesUit.RalewayBold { - anchors.top: qrAndInstructionsContainer.bottom - anchors.topMargin: 50 - anchors.left: parent.left - anchors.right: parent.right - horizontalAlignment: Text.AlignLeft - text: "Continue >" - color: simplifiedUI.colors.text.lightBlue - opacity: continueMouseArea.containsMouse ? 1.0 : 0.7 - size: 36 - z: 1 - wrapMode: Text.WordWrap - - MouseArea { - id: continueMouseArea - hoverEnabled: true - anchors.fill: parent - - onClicked: { - Tablet.playSound(TabletEnums.ButtonClick); - tempAvatarPageContainer.visible = false; - Settings.setValue("simplifiedUI/closedAvatarPageOfInitialLaunchWindow", true); - controlsContainer.visible = true; - } + onClicked: { + Tablet.playSound(TabletEnums.ButtonClick); + tempAvatarPageContainer.visible = false; + Settings.setValue("simplifiedUI/closedAvatarPageOfInitialLaunchWindow", true); + controlsContainer.visible = true; } } } } } - - SimplifiedControls.VerticalScrollBar { - parent: tempAvatarPageContainer - } } - Item { + Flickable { id: controlsContainer visible: false anchors.fill: parent + clip: true + contentWidth: parent.width + contentHeight: contentItem.childrenRect.height - Flickable { - anchors.fill: parent - clip: true - contentWidth: parent.width - contentHeight: childrenRect.height + HifiStylesUit.RalewayRegular { + id: controlsDescriptionText + 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: paintedHeight + width: 850 + color: simplifiedUI.colors.text.black + size: 36 + wrapMode: Text.Wrap + } - HifiStylesUit.RalewayRegular { - id: controlsDescriptionText - 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: simplifiedUI.colors.text.black - size: 36 - wrapMode: Text.WordWrap - } - - GridLayout { - id: controlsPageGrid - anchors.top: controlsDescriptionText.bottom - anchors.topMargin: 60 - anchors.bottomMargin: 80 - anchors.horizontalCenter: parent.horizontalCenter - columnSpacing: 50 - rowSpacing: 40 - columns: 2 - rows: 2 + GridLayout { + id: controlsPageGrid + anchors.top: controlsDescriptionText.bottom + anchors.topMargin: 60 + anchors.horizontalCenter: parent.horizontalCenter + width: controlsDescriptionText.width + columnSpacing: 50 + rowSpacing: 40 + columns: 2 + rows: 2 - Image { - Layout.preferredWidth: 360 - Layout.preferredHeight: 225 - id: walkingControls - source: "images/walkingControls.png" - } + Image { + Layout.preferredWidth: 360 + Layout.preferredHeight: 225 + id: walkingControls + source: "images/walkingControls.png" + } - Image { - Layout.preferredWidth: 360 - Layout.preferredHeight: 200 - id: mouseControls - source: "images/mouseControls.png" - } - - Image { - Layout.preferredWidth: 240 - Layout.preferredHeight: 160 - Layout.alignment: Qt.AlignHCenter - id: runJumpControls - source: "images/runJumpControls.png" - } - - Image { - Layout.preferredWidth: 160 - Layout.preferredHeight: 100 - Layout.alignment: Qt.AlignHCenter - id: cameraControls - source: "images/cameraControls.png" - } + Image { + Layout.preferredWidth: 360 + Layout.preferredHeight: 200 + id: mouseControls + source: "images/mouseControls.png" } - HifiStylesUit.RalewayBold { - anchors.bottom: parent.bottom - anchors.left: parent.left - anchors.leftMargin: 50 - anchors.bottomMargin: 50 - text: "Learn more about our controls." - width: 200 - height: 25 - color: simplifiedUI.colors.text.lightBlue - opacity: learnMoreAboutControlsMouseArea.containsMouse ? 1.0 : 0.7 - size: 14 - wrapMode: Text.WordWrap - - MouseArea { - id: learnMoreAboutControlsMouseArea - hoverEnabled: true - anchors.fill: parent - - onClicked: { - Tablet.playSound(TabletEnums.ButtonClick); - Qt.openUrlExternally("https://www.highfidelity.com/knowledge/get-around"); - } - } + Image { + Layout.preferredWidth: 240 + Layout.preferredHeight: 160 + Layout.alignment: Qt.AlignHCenter + id: runJumpControls + source: "images/runJumpControls.png" } - HifiStylesUit.RalewayBold { - anchors.top: controlsPageGrid.bottom - anchors.horizontalCenter: parent.horizontalCenter - anchors.topMargin: 50 - text: "I've got a good grip on the controls." - width: 650 - height: 60 - color: simplifiedUI.colors.text.lightBlue - opacity: goodGripMouseArea.containsMouse ? 1.0 : 0.7 - size: 36 - wrapMode: Text.WordWrap - - MouseArea { - id: goodGripMouseArea - hoverEnabled: true - anchors.fill: parent - - onClicked: { - Tablet.playSound(TabletEnums.ButtonClick); - sendToScript({ - "source": "InitialLaunchWindow.qml", - "method": "closeInitialLaunchWindow" - }); - } - } + Image { + Layout.preferredWidth: 160 + Layout.preferredHeight: 100 + Layout.alignment: Qt.AlignHCenter + id: cameraControls + source: "images/cameraControls.png" } - } - SimplifiedControls.VerticalScrollBar { - parent: controlsContainer + HifiStylesUit.RalewayBold { + id: iHaveAGoodGrip + anchors.top: controlsPageGrid.bottom + anchors.horizontalCenter: parent.horizontalCenter + anchors.topMargin: 50 + text: "I've got a good grip on the controls." + width: 650 + height: paintedHeight + color: simplifiedUI.colors.text.lightBlue + opacity: goodGripMouseArea.containsMouse ? 1.0 : 0.7 + size: 36 + wrapMode: Text.Wrap + + MouseArea { + id: goodGripMouseArea + hoverEnabled: true + anchors.fill: parent + + onClicked: { + Tablet.playSound(TabletEnums.ButtonClick); + sendToScript({ + "source": "InitialLaunchWindow.qml", + "method": "closeInitialLaunchWindow" + }); + } + } } + + HifiStylesUit.RalewayBold { + anchors.top: iHaveAGoodGrip.bottom + anchors.topMargin: 50 + anchors.left: parent.left + anchors.leftMargin: 50 + text: "Learn more about our controls." + width: 200 + height: paintedHeight + color: simplifiedUI.colors.text.lightBlue + opacity: learnMoreAboutControlsMouseArea.containsMouse ? 1.0 : 0.7 + size: 14 + wrapMode: Text.Wrap + + MouseArea { + id: learnMoreAboutControlsMouseArea + hoverEnabled: true + anchors.fill: parent + + onClicked: { + Tablet.playSound(TabletEnums.ButtonClick); + Qt.openUrlExternally("https://www.highfidelity.com/knowledge/get-around"); + } + } + } + } + + SimplifiedControls.VerticalScrollBar { + parent: controlsContainer.visible ? controlsContainer : tempAvatarPageContainer + z: 2 } signal sendToScript(var message); diff --git a/scripts/simplifiedUI/ui/simplifiedFTUE/SecondLaunchWindow.qml b/scripts/simplifiedUI/ui/simplifiedFTUE/SecondLaunchWindow.qml index 0e87363ba9..258249f567 100644 --- a/scripts/simplifiedUI/ui/simplifiedFTUE/SecondLaunchWindow.qml +++ b/scripts/simplifiedUI/ui/simplifiedFTUE/SecondLaunchWindow.qml @@ -20,7 +20,6 @@ Rectangle { id: root color: simplifiedUI.colors.white anchors.fill: parent - property bool landscapeOrientation: root.width > root.height SimplifiedConstants.SimplifiedConstants { id: simplifiedUI @@ -46,86 +45,92 @@ Rectangle { z: 1 } - Item { + Flickable { id: tempAvatarPageContainer + visible: true + anchors.fill: parent + clip: true + contentWidth: parent.width + contentHeight: tempAvatarPageGrid.height GridLayout { id: tempAvatarPageGrid - anchors.fill: parent - anchors.leftMargin: 50 - anchors.bottomMargin: 50 - anchors.rightMargin: 50 - columns: landscapeOrientation ? 2 : 1 - rows: landscapeOrientation ? 1 : 2 + width: parent.width + columns: 2 + rows: 1 - Item { - id: heroImageContainer - Layout.preferredWidth: heroImage.width - Layout.preferredHeight: heroImage.height - - Image { - id: heroImage - width: 428 - height: 800 - source: resourceDirectoryUrl + "qml/hifi/simplifiedUI/avatarApp/images/hero.png" - } + Image { + Layout.preferredWidth: 428 + Layout.minimumHeight: 240 + Layout.maximumHeight: 800 + Layout.fillHeight: true + source: resourceDirectoryUrl + "qml/hifi/simplifiedUI/avatarApp/images/hero.png" + mipmap: true + fillMode: Image.PreserveAspectFit } Item { id: textAndQRContainer - Layout.preferredWidth: 720 + Layout.minimumWidth: 300 + Layout.maximumWidth: 1680 + Layout.fillWidth: true Layout.preferredHeight: childrenRect.height - Layout.topMargin: 150 HifiStylesUit.RalewayBold { id: headerText text: "Stand out from the crowd!" color: simplifiedUI.colors.text.black size: 48 - wrapMode: Text.WordWrap + height: paintedHeight + wrapMode: Text.Wrap + anchors.top: parent.top + anchors.topMargin: 120 anchors.left: parent.left anchors.right: parent.right } 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." + anchors.left: parent.left + anchors.right: parent.right + height: paintedHeight + 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: simplifiedUI.colors.text.black size: 24 - anchors.left: parent.left - wrapMode: Text.WordWrap + wrapMode: Text.Wrap } Item { id: qrAndInstructionsContainer anchors.top: descriptionText.bottom + anchors.topMargin: 50 anchors.left: parent.left + anchors.right: parent.right height: avatarAppQRCodeImage.height - width: parent.width - anchors.topMargin: 150 Image { id: avatarAppQRCodeImage - anchors.left: parent.left source: resourceDirectoryUrl + "qml/hifi/simplifiedUI/avatarApp/images/qrCode.jpg" - height: 180 - width: 180 + height: 190 + width: 190 + mipmap: true + fillMode: Image.PreserveAspectFit } HifiStylesUit.RalewayBold { id: instructionText + anchors.top: avatarAppQRCodeImage.top + anchors.bottom: avatarAppQRCodeImage.bottom anchors.left: avatarAppQRCodeImage.right - anchors.leftMargin: 20 - anchors.verticalCenter: avatarAppQRCodeImage.verticalCenter + anchors.leftMargin: 30 anchors.right: parent.right - anchors.top: avatarAppQRCodeImage.bottom text: "Use your mobile phone to scan this QR code." color: simplifiedUI.colors.text.black size: 24 - wrapMode: Text.WordWrap + wrapMode: Text.Wrap } } @@ -139,8 +144,8 @@ Rectangle { color: simplifiedUI.colors.text.lightBlue opacity: continueMouseArea.containsMouse ? 1.0 : 0.7 size: 36 + height: paintedHeight z: 1 - wrapMode: Text.WordWrap MouseArea { id: continueMouseArea @@ -160,7 +165,8 @@ Rectangle { } SimplifiedControls.VerticalScrollBar { - parent: root + parent: tempAvatarPageContainer + z: 2 } } diff --git a/scripts/simplifiedUI/ui/simplifiedUI.js b/scripts/simplifiedUI/ui/simplifiedUI.js index 13afb530f8..c1a2c37d9c 100644 --- a/scripts/simplifiedUI/ui/simplifiedUI.js +++ b/scripts/simplifiedUI/ui/simplifiedUI.js @@ -363,9 +363,8 @@ 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; -var INITIAL_LAUNCH_HEIGHT_PX = Window.innerHeight + TOP_BAR_HEIGHT_PX; +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; @@ -387,7 +386,7 @@ function displayInitialLaunchWindow() { }, position: { x: Window.x, - y: Window.y + y: Window.y + TOP_BAR_HEIGHT_PX }, overrideFlags: INITIAL_WINDOW_FLAGS }); @@ -401,9 +400,8 @@ 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; -var SECOND_LAUNCH_HEIGHT_PX = Window.innerHeight + TOP_BAR_HEIGHT_PX; +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; @@ -425,7 +423,7 @@ function displaySecondLaunchWindow() { }, position: { x: Window.x, - y: Window.y + y: Window.y + TOP_BAR_HEIGHT_PX }, overrideFlags: SECOND_WINDOW_FLAGS }); @@ -664,32 +662,28 @@ function onGeometryChanged(rect) { }; topBarWindow.position = { "x": rect.x, - "y": rect.y + "y": rect.y }; } if (initialLaunchWindow) { - print("GEOMETRY CHANGED, INITIAL WINDOW. rect.width: ", rect.width, " AND rect.height: ", rect.height, " AND rect.x: ", rect.x, " AND rect.y: ", rect.y); initialLaunchWindow.size = { "x": rect.width, "y": rect.height }; initialLaunchWindow.position = { "x": rect.x, - "y": rect.y + "y": rect.y + TOP_BAR_HEIGHT_PX }; - print("NOW THE INITIAL WINDOW size IS: ", JSON.stringify(initialLaunchWindow.size), " AND position IS: ", JSON.stringify(initialLaunchWindow.position)); } if (secondLaunchWindow) { - print("GEOMETRY CHANGED, SECOND WINDOW. rect.width: ", rect.width, " AND rect.height: ", rect.height, " AND rect.x: ", rect.x, " AND rect.y: ", rect.y); secondLaunchWindow.size = { "x": rect.width, "y": rect.height }; secondLaunchWindow.position = { "x": rect.x, - "y": rect.y + "y": rect.y + TOP_BAR_HEIGHT_PX }; - print("NOW THE SECOND WINDOW size IS: ", JSON.stringify(secondLaunchWindow.size), " AND position IS: ", JSON.stringify(secondLaunchWindow.position)); } }