From 42bf2bf30e12a99e11a326fa0ecdc47333f008ab Mon Sep 17 00:00:00 2001 From: Zach Fox Date: Tue, 8 Oct 2019 13:17:04 -0400 Subject: [PATCH] All windows 'done' except for final tweaks; debug mode still ON --- .../hifi/simplifiedUI/avatarApp/AvatarApp.qml | 3 + .../simplifiedUI/topBar/SimplifiedTopBar.qml | 2 +- .../ui/simplifiedFTUE/InitialLaunchWindow.qml | 103 +++++++++----- .../ui/simplifiedFTUE/SecondLaunchWindow.qml | 126 ++++++++++-------- 4 files changed, 141 insertions(+), 93 deletions(-) diff --git a/interface/resources/qml/hifi/simplifiedUI/avatarApp/AvatarApp.qml b/interface/resources/qml/hifi/simplifiedUI/avatarApp/AvatarApp.qml index ae786bfc47..ed1888412c 100644 --- a/interface/resources/qml/hifi/simplifiedUI/avatarApp/AvatarApp.qml +++ b/interface/resources/qml/hifi/simplifiedUI/avatarApp/AvatarApp.qml @@ -83,6 +83,9 @@ Rectangle { emptyInventoryContainer.visible = true; } + // ZRF REMOVE ME + emptyInventoryContainer.visible = true; + avatarAppInventoryModel.handlePage(result.status !== "success" && result.message, result); root.updatePreviewUrl(); } diff --git a/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml b/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml index f7e34035bb..9fa1a97114 100644 --- a/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml +++ b/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml @@ -122,7 +122,7 @@ Rectangle { var userHasValidAvatarInInventory = topBarInventoryModel.count > 0 && topBarInventoryModel.get(0).download_url.indexOf(".fst") > -1; var simplifiedAvatarPrefix = resourceDirectoryUrl + "qml/hifi/simplifiedUI/topBar/avatars/simplifiedAvatar_"; - var simplifiedAvatarColors = ["Blue", "Cyan", "Green", "Pink", "Red", "Yellow"]; + var simplifiedAvatarColors = ["Blue", "Cyan", "Green", "Magenta", "Red", "Yellow"]; var simplifiedAvatarSuffix = "/avatar.fst"; // 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 diff --git a/scripts/simplifiedUI/ui/simplifiedFTUE/InitialLaunchWindow.qml b/scripts/simplifiedUI/ui/simplifiedFTUE/InitialLaunchWindow.qml index 891c1c86ff..f601ff1e96 100644 --- a/scripts/simplifiedUI/ui/simplifiedFTUE/InitialLaunchWindow.qml +++ b/scripts/simplifiedUI/ui/simplifiedFTUE/InitialLaunchWindow.qml @@ -45,14 +45,12 @@ Rectangle { anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right - anchors.bottom: continueLink.top + anchors.bottom: firstPageBottomBarContainer.top Image { id: avatarImage - anchors.top: parent.top - anchors.topMargin: 96 - anchors.bottom: parent.bottom - anchors.bottomMargin: 96 + anchors.verticalCenter: parent.verticalCenter + height: Math.min(Math.max(parent.height - 24, 350), 898) anchors.left: parent.left anchors.leftMargin: 12 source: resourceDirectoryUrl + "qml/hifi/simplifiedUI/avatarApp/images/" + @@ -92,17 +90,22 @@ Rectangle { anchors.top: headerText.bottom anchors.topMargin: 10 anchors.left: parent.left - width: Math.min(720, parent.width) - headerText.anchors.rightMargin + width: Math.min(700, parent.width) - headerText.anchors.rightMargin 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 " + + "We want you to be you so we've built " + + "Virtual You, an Avatar Creator " + + "App. Creating an avatar is 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 + + onLinkActivated: { + Qt.openUrlExternally(link); + } } } @@ -141,37 +144,69 @@ Rectangle { SimplifiedControls.VerticalScrollBar { parent: textContainer - anchors.topMargin: 96 - anchors.bottomMargin: anchors.topMargin + visible: parent.contentHeight > parent.height + size: parent.height / parent.contentHeight } - } - + } - HifiStylesUit.RalewayBold { - id: continueLink - anchors.bottom: parent.bottom + Item { + id: firstPageBottomBarContainer anchors.left: parent.left - anchors.leftMargin: 16 + anchors.leftMargin: 32 anchors.right: parent.right - anchors.rightMargin: 16 - height: 96 - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - text: "Continue >" - color: simplifiedUI.colors.text.lightBlue - opacity: continueMouseArea.containsMouse ? 1.0 : 0.7 - size: 36 + anchors.rightMargin: 32 + anchors.bottom: parent.bottom + height: continueLink.height + learnMoreAvatarLink.height + 48 + + HifiStylesUit.RalewayBold { + id: continueLink + anchors.centerIn: parent + text: "Continue >" + width: parent.width + height: paintedHeight + color: simplifiedUI.colors.text.lightBlue + opacity: continueMouseArea.containsMouse ? 1.0 : 0.7 + size: 36 + wrapMode: Text.Wrap + horizontalAlignment: Text.AlignHCenter - MouseArea { - id: continueMouseArea - hoverEnabled: true - anchors.fill: parent + 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; + } + } + } + + HifiStylesUit.RalewayBold { + id: learnMoreAvatarLink + anchors.left: parent.left + anchors.leftMargin: 16 + anchors.top: continueLink.bottom + anchors.topMargin: 8 + text: "Learn more about custom avatars." + width: paintedWidth + height: paintedHeight + color: simplifiedUI.colors.text.lightBlue + opacity: learnMoreAboutAvatarsMouseArea.containsMouse ? 1.0 : 0.7 + size: 14 + wrapMode: Text.Wrap + + MouseArea { + id: learnMoreAboutAvatarsMouseArea + hoverEnabled: true + anchors.fill: parent + + onClicked: { + Tablet.playSound(TabletEnums.ButtonClick); + Qt.openUrlExternally("https://www.highfidelity.com/knowledge/avatars"); + } } } } @@ -184,7 +219,7 @@ Rectangle { HifiStylesUit.RalewayRegular { id: controlsDescriptionText - text: "Use these avatar controls to interact with and move around in your new HQ." + text: "Use these avatar controls to
interact with and move around in your new HQ." anchors.top: parent.top anchors.topMargin: 48 anchors.left: parent.left diff --git a/scripts/simplifiedUI/ui/simplifiedFTUE/SecondLaunchWindow.qml b/scripts/simplifiedUI/ui/simplifiedFTUE/SecondLaunchWindow.qml index 24ddab0884..2e68da20d5 100644 --- a/scripts/simplifiedUI/ui/simplifiedFTUE/SecondLaunchWindow.qml +++ b/scripts/simplifiedUI/ui/simplifiedFTUE/SecondLaunchWindow.qml @@ -25,58 +25,42 @@ Rectangle { id: simplifiedUI } - Image { - id: topLeftAccentImage - width: 180 - height: 450 - anchors.left: parent.left - anchors.top: parent.top - source: "images/standOutTopLeft.png" - z: 1 - } - - Image { - id: bottomRightAccentImage - width: 250 - height: 80 - anchors.right: parent.right - anchors.bottom: parent.bottom - source: "images/standOutBottomRight.png" - z: 1 - } - - Flickable { - id: tempAvatarPageContainer + Item { + id: contentContainer anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right anchors.bottom: continueLink.top - clip: true - contentWidth: parent.width - contentHeight: tempAvatarPageGrid.height - GridLayout { - id: tempAvatarPageGrid - width: parent.width - columns: 2 - rows: 1 + Image { + id: avatarImage + anchors.verticalCenter: parent.verticalCenter + height: Math.min(Math.max(parent.height - 24, 350), 898) + anchors.left: parent.left + anchors.leftMargin: 12 + source: resourceDirectoryUrl + "qml/hifi/simplifiedUI/avatarApp/images/hero.png" + mipmap: true + fillMode: Image.PreserveAspectFit + } - 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 { + anchors.top: parent.top + anchors.topMargin: 196 + anchors.bottom: parent.bottom + anchors.bottomMargin: 32 + anchors.left: avatarImage.right + anchors.right: parent.right - Item { - id: textAndQRContainer - Layout.minimumWidth: 300 - Layout.maximumWidth: 1680 - Layout.fillWidth: true - Layout.preferredHeight: childrenRect.height + Flickable { + id: textContainer + clip: true + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.left: parent.left + width: Math.min(700, parent.width) + contentWidth: width + contentHeight: contentItem.childrenRect.height + interactive: contentHeight > height HifiStylesUit.RalewayBold { id: headerText @@ -86,9 +70,9 @@ Rectangle { height: paintedHeight wrapMode: Text.Wrap anchors.top: parent.top - anchors.topMargin: 120 anchors.left: parent.left anchors.right: parent.right + anchors.rightMargin: 16 } HifiStylesUit.RalewayRegular { @@ -96,28 +80,31 @@ Rectangle { anchors.top: headerText.bottom anchors.topMargin: 10 anchors.left: parent.left - anchors.right: parent.right + width: parent.width - headerText.anchors.rightMargin 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." + "It's as easy as taking a selfie.
Available now on iOS and Android Platforms." color: simplifiedUI.colors.text.black - size: 24 + size: 22 wrapMode: Text.Wrap } Item { id: qrAndInstructionsContainer anchors.top: descriptionText.bottom - anchors.topMargin: 50 + anchors.topMargin: 24 anchors.left: parent.left anchors.right: parent.right + anchors.rightMargin: 16 height: avatarAppQRCodeImage.height Image { id: avatarAppQRCodeImage source: resourceDirectoryUrl + "qml/hifi/simplifiedUI/avatarApp/images/qrCode.jpg" - height: 190 + anchors.top: parent.top + anchors.left: parent.left width: 190 + height: width mipmap: true fillMode: Image.PreserveAspectFit } @@ -131,7 +118,7 @@ Rectangle { anchors.right: parent.right text: "Use your mobile phone to scan this QR code." color: simplifiedUI.colors.text.black - size: 24 + size: 22 wrapMode: Text.Wrap } } @@ -139,22 +126,27 @@ Rectangle { } SimplifiedControls.VerticalScrollBar { - parent: tempAvatarPageContainer + parent: textContainer + visible: parent.contentHeight > parent.height + size: parent.height / parent.contentHeight } } + HifiStylesUit.RalewayBold { id: continueLink anchors.bottom: parent.bottom anchors.left: parent.left + anchors.leftMargin: 16 anchors.right: parent.right - height: paintedHeight + 24 - horizontalAlignment: Text.AlignLeft - text: "Continue >" + anchors.rightMargin: 16 + height: 96 + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + text: "No thanks, I'll keep using my default avatar." color: simplifiedUI.colors.text.lightBlue opacity: continueMouseArea.containsMouse ? 1.0 : 0.7 - size: 36 - z: 1 + size: 24 MouseArea { id: continueMouseArea @@ -171,5 +163,23 @@ Rectangle { } } + Image { + id: topLeftAccentImage + width: 180 + height: 450 + anchors.left: parent.left + anchors.top: parent.top + source: "images/standOutTopLeft.png" + } + + Image { + id: bottomRightAccentImage + width: 250 + height: 80 + anchors.right: parent.right + anchors.bottom: parent.bottom + source: "images/standOutBottomRight.png" + } + signal sendToScript(var message); }