All windows 'done' except for final tweaks; debug mode still ON

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();
         }

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 

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.verticalCenter: parent.verticalCenter
-                anchors.topMargin: 96
+                height: Math.min(Math.max(parent.height - 24, 350), 898)
-                anchors.bottom: parent.bottom
-                anchors.bottomMargin: 96
                 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 <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>" +
-                        "<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 " +
-                        "App that's as easy as taking a selfie and picking your " +
+                        "<a href=\"https://www.highfidelity.com/knowledge/virtual-you\">Virtual You</a>, 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
+                visible: parent.contentHeight > parent.height
-                anchors.bottomMargin: anchors.topMargin
+                size: parent.height / parent.contentHeight
             }
-        }
+        }        
-        
 
-        HifiStylesUit.RalewayBold {
+        Item {
-            id: continueLink
+            id: firstPageBottomBarContainer
-            anchors.bottom: parent.bottom
             anchors.left: parent.left
-            anchors.leftMargin: 16
+            anchors.leftMargin: 32
             anchors.right: parent.right
-            anchors.rightMargin: 16
+            anchors.rightMargin: 32
-            height: 96
+            anchors.bottom: parent.bottom
-            horizontalAlignment: Text.AlignHCenter
+            height: continueLink.height + learnMoreAvatarLink.height + 48
-            verticalAlignment: Text.AlignVCenter
+        
-            text: "Continue >"
+            HifiStylesUit.RalewayBold {
-            color: simplifiedUI.colors.text.lightBlue
+                id: continueLink
-            opacity: continueMouseArea.containsMouse ? 1.0 : 0.7
+                anchors.centerIn: parent
-            size: 36
+                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 {
+                MouseArea {
-                id: continueMouseArea
+                    id: continueMouseArea
-                hoverEnabled: true
+                    hoverEnabled: true
-                anchors.fill: parent
+                    anchors.fill: parent
 
-                onClicked: {
+                    onClicked: {
-                    Tablet.playSound(TabletEnums.ButtonClick);
+                        Tablet.playSound(TabletEnums.ButtonClick);
-                    tempAvatarPageContainer.visible = false;
+                        tempAvatarPageContainer.visible = false;
-                    Settings.setValue("simplifiedUI/closedAvatarPageOfInitialLaunchWindow", true);
+                        Settings.setValue("simplifiedUI/closedAvatarPageOfInitialLaunchWindow", true);
-                    controlsContainer.visible = 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 <b>interact with and move around in your new HQ.</b>"
+            text: "Use these avatar controls to<br><b>interact with and move around in your new HQ.</b>"
             anchors.top: parent.top
             anchors.topMargin: 48
             anchors.left: parent.left

scripts/simplifiedUI/ui/simplifiedFTUE/SecondLaunchWindow.qml

@@ -25,58 +25,42 @@ Rectangle {
         id: simplifiedUI
     }
 
-    Image {
+    Item {
-        id: topLeftAccentImage
+        id: contentContainer
-        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
         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 {
+        Image {
-            id: tempAvatarPageGrid
+            id: avatarImage
-            width: parent.width
+            anchors.verticalCenter: parent.verticalCenter
-            columns: 2
+            height: Math.min(Math.max(parent.height - 24, 350), 898)
-            rows: 1
+            anchors.left: parent.left
+            anchors.leftMargin: 12
+            source: resourceDirectoryUrl + "qml/hifi/simplifiedUI/avatarApp/images/hero.png"
+            mipmap: true
+            fillMode: Image.PreserveAspectFit
+        }
 
-            Image {
+        Item {
-                Layout.preferredWidth: 428
+            anchors.top: parent.top
-                Layout.minimumHeight: 240
+            anchors.topMargin: 196
-                Layout.maximumHeight: 800
+            anchors.bottom: parent.bottom
-                Layout.fillHeight: true
+            anchors.bottomMargin: 32
-                source: resourceDirectoryUrl + "qml/hifi/simplifiedUI/avatarApp/images/hero.png"
+            anchors.left: avatarImage.right
-                mipmap: true
+            anchors.right: parent.right
-                fillMode: Image.PreserveAspectFit
-            }
 
-            Item {
+            Flickable {
-                id: textAndQRContainer
+                id: textContainer
-                Layout.minimumWidth: 300
+                clip: true
-                Layout.maximumWidth: 1680
+                anchors.top: parent.top
-                Layout.fillWidth: true
+                anchors.bottom: parent.bottom
-                Layout.preferredHeight: childrenRect.height
+                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.<br>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
+        anchors.rightMargin: 16
-        horizontalAlignment: Text.AlignLeft
+        height: 96
-        text: "Continue >"
+        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
+        size: 24
-        z: 1
 
         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);
 }