From 0dfb23408974fb58c26f2c35d89bf147560896ff Mon Sep 17 00:00:00 2001 From: RebeccaStankus Date: Tue, 1 Oct 2019 09:58:44 -0700 Subject: [PATCH] Finished UI, ready for CR --- .../simplifiedUI/topBar/SimplifiedTopBar.qml | 7 +- .../ui/simplifiedFTUE/InitialLaunchWindow.qml | 95 +++++++++---------- .../ui/simplifiedFTUE/SecondLaunchWindow.qml | 59 ++++++------ scripts/simplifiedUI/ui/simplifiedUI.js | 11 +-- 4 files changed, 78 insertions(+), 94 deletions(-) diff --git a/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml b/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml index 2989699ed6..d8d0a45d48 100644 --- a/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml +++ b/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml @@ -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", diff --git a/scripts/simplifiedUI/ui/simplifiedFTUE/InitialLaunchWindow.qml b/scripts/simplifiedUI/ui/simplifiedFTUE/InitialLaunchWindow.qml index de275ad10f..4c3583b947 100644 --- a/scripts/simplifiedUI/ui/simplifiedFTUE/InitialLaunchWindow.qml +++ b/scripts/simplifiedUI/ui/simplifiedFTUE/InitialLaunchWindow.qml @@ -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 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." - 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

interact with and move around in your new HQ." @@ -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" diff --git a/scripts/simplifiedUI/ui/simplifiedFTUE/SecondLaunchWindow.qml b/scripts/simplifiedUI/ui/simplifiedFTUE/SecondLaunchWindow.qml index 09e198e6fd..8aaff38eb9 100644 --- a/scripts/simplifiedUI/ui/simplifiedFTUE/SecondLaunchWindow.qml +++ b/scripts/simplifiedUI/ui/simplifiedFTUE/SecondLaunchWindow.qml @@ -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" } } diff --git a/scripts/simplifiedUI/ui/simplifiedUI.js b/scripts/simplifiedUI/ui/simplifiedUI.js index fec62f3db0..159f6778cd 100644 --- a/scripts/simplifiedUI/ui/simplifiedUI.js +++ b/scripts/simplifiedUI/ui/simplifiedUI.js @@ -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 = {