Controls screen done

interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml

@@ -128,6 +128,10 @@ 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.
 
+                // ZRF REMOVE ME!   
+                currentAvatarURLContainsDefaultAvatar = true;
+                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...

scripts/simplifiedUI/ui/simplifiedFTUE/InitialLaunchWindow.qml

@@ -34,37 +34,26 @@ Rectangle {
         }
     }
 
-    Image {
-        id: topLeftAccentImage
-        width: 400
-        height: 180
-        anchors.left: parent.left
-        anchors.top: parent.top
-        source: "images/defaultTopLeft.png"
-    }
-
-    Image {
-        id: bottomRightAccentImage
-        width: 80
-        height: 250
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
-        source: "images/defaultBottomRight.png"
-    }
+    Item {
+        id: tempAvatarPageContainer
+        anchors.fill: parent
 
         Flickable {
-        id: tempAvatarPageContainer
-        visible: true
-        anchors.fill: parent
+            id: tempAvatarPageFlickable
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.leftMargin: 16
+            anchors.right: parent.right
+            anchors.rightMargin: 16
+            anchors.bottom: continueLink.top
             clip: true
             contentWidth: parent.width
-        contentHeight: tempAvatarPageGrid.height
+            contentHeight: tempAvatarPageGrid.heights
+            interactive: contentHeight > height
 
-        GridLayout {
+            RowLayout {
                 id: tempAvatarPageGrid
                 width: parent.width
-            columns: 2
-            rows: 1
 
                 Image {
                     Layout.preferredWidth: 428
@@ -145,19 +134,25 @@ Rectangle {
                             wrapMode: Text.Wrap
                         }
                     }
+                }
+            }
+        }
+        
 
         HifiStylesUit.RalewayBold {
-                    anchors.top: qrAndInstructionsContainer.bottom
-                    anchors.topMargin: 50
+            id: continueLink
+            anchors.bottom: parent.bottom
             anchors.left: parent.left
+            anchors.leftMargin: 16
             anchors.right: parent.right
-                    horizontalAlignment: Text.AlignLeft
+            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
-                    height: paintedHeight
-                    z: 1
 
             MouseArea {
                 id: continueMouseArea
@@ -172,86 +167,106 @@ Rectangle {
                 }
             }
         }
-            }
+
+        SimplifiedControls.VerticalScrollBar {
+            parent: tempAvatarPageFlickable
         }
     }
 
-    Flickable {
+    Item {
         id: controlsContainer
         visible: false
         anchors.fill: parent
-        clip: true
-        contentWidth: parent.width
-        contentHeight: contentItem.childrenRect.height
 
         HifiStylesUit.RalewayRegular {
             id: controlsDescriptionText
-            text: "These are your avatar controls to <b>interact with and move around in your new HQ.</b>"
+            text: "Use these avatar controls to <b>interact with and move around in your new HQ.</b>"
             anchors.top: parent.top
-            anchors.topMargin: 100
-            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.topMargin: 48
+            anchors.left: parent.left
+            anchors.leftMargin: 32
+            anchors.right: parent.right
+            anchors.rightMargin: 32
             horizontalAlignment: Text.AlignHCenter
             height: paintedHeight
-            width: 850
             color: simplifiedUI.colors.text.black
             size: 36
             wrapMode: Text.Wrap
         }
 
-        GridLayout {
-            id: controlsPageGrid
+        Item {
             anchors.top: controlsDescriptionText.bottom
-            anchors.topMargin: 60
-            anchors.horizontalCenter: parent.horizontalCenter
-            width: controlsDescriptionText.width
-            columnSpacing: 50
-            rowSpacing: 40
-            columns: 2
-            rows: 2
+            anchors.topMargin: 16
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.bottom: bottomBarContainer.top
 
+            GridView {
+                id: controlsGrid
+                property int maxColumns: 2
+                property int idealCellWidth: 361
+                anchors.fill: parent
+                clip: true
+                cellWidth: width / Math.min(Math.floor(width / idealCellWidth), maxColumns)
+                cellHeight: 225
+                model: ListModel {
+                    ListElement {
+                        imageHeight: 198
+                        imageSource: "images/walkingControls.png"
+                    }
+                    ListElement {
+                        imageHeight: 193
+                        imageSource: "images/mouseControls.png"
+                    }
+                    ListElement {
+                        imageHeight: 146
+                        imageSource: "images/runJumpControls.png"
+                    }
+                    ListElement {
+                        imageHeight: 96
+                        imageSource: "images/cameraControls.png"
+                    }
+                }
+                delegate: Rectangle {
+                    height: GridView.view.cellHeight
+                    width: GridView.view.cellWidth
                     Image {
-                Layout.preferredWidth: 360
-                Layout.preferredHeight: 225
-                id: walkingControls
-                source: "images/walkingControls.png"
+                        anchors.centerIn: parent
+                        width: parent.GridView.view.idealCellWidth
+                        height: model.imageHeight
+                        source: model.imageSource
+                        fillMode: Image.PreserveAspectFit
+                    }
+                }
             }
 
-            Image {
-                Layout.preferredWidth: 360
-                Layout.preferredHeight: 200
-                id: mouseControls
-                source: "images/mouseControls.png"
+            SimplifiedControls.VerticalScrollBar {
+                parent: controlsGrid
+                anchors.topMargin: 96
+                anchors.bottomMargin: anchors.topMargin
+            }
         }
 
-            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"
-            }
-        }
+        Item {
+            id: bottomBarContainer
+            anchors.left: parent.left
+            anchors.leftMargin: 32
+            anchors.right: parent.right
+            anchors.rightMargin: 32
+            anchors.bottom: parent.bottom
+            height: iHaveAGoodGrip.height + learnMoreLink.height + 48
 
             HifiStylesUit.RalewayBold {
                 id: iHaveAGoodGrip
-            anchors.top: controlsPageGrid.bottom
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.topMargin: 50
+                anchors.centerIn: parent
                 text: "I've got a good grip on the controls."
-            width: 650
+                width: parent.width
                 height: paintedHeight
                 color: simplifiedUI.colors.text.lightBlue
                 opacity: goodGripMouseArea.containsMouse ? 1.0 : 0.7
                 size: 36
                 wrapMode: Text.Wrap
+                horizontalAlignment: Text.AlignHCenter
 
                 MouseArea {
                     id: goodGripMouseArea
@@ -269,12 +284,13 @@ Rectangle {
             }
         
             HifiStylesUit.RalewayBold {
-            anchors.top: iHaveAGoodGrip.bottom
-            anchors.topMargin: 50
+                id: learnMoreLink
                 anchors.left: parent.left
-            anchors.leftMargin: 50
+                anchors.leftMargin: 16
+                anchors.top: iHaveAGoodGrip.bottom
+                anchors.topMargin: 8
                 text: "Learn more about our controls."
-            width: 200
+                width: paintedWidth
                 height: paintedHeight
                 color: simplifiedUI.colors.text.lightBlue
                 opacity: learnMoreAboutControlsMouseArea.containsMouse ? 1.0 : 0.7
@@ -293,10 +309,24 @@ Rectangle {
                 }
             }
         }
+    }
 
-    SimplifiedControls.VerticalScrollBar {
-        parent: controlsContainer.visible ? controlsContainer : tempAvatarPageContainer
-        z: 2
+    Image {
+        id: topLeftAccentImage
+        width: 400
+        height: 180
+        anchors.left: parent.left
+        anchors.top: parent.top
+        source: "images/defaultTopLeft.png"
+    }
+
+    Image {
+        id: bottomRightAccentImage
+        width: 80
+        height: 250
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        source: "images/defaultBottomRight.png"
     }
 
     signal sendToScript(var message);

scripts/simplifiedUI/ui/simplifiedFTUE/SecondLaunchWindow.qml

@@ -47,8 +47,10 @@ Rectangle {
 
      Flickable {
         id: tempAvatarPageContainer
-        visible: true
-        anchors.fill: parent
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: continueLink.top
         clip: true
         contentWidth: parent.width
         contentHeight: tempAvatarPageGrid.height
@@ -133,18 +135,25 @@ Rectangle {
                         wrapMode: Text.Wrap
                     }
                 }
+            }
+        }
+
+        SimplifiedControls.VerticalScrollBar {
+            parent: tempAvatarPageContainer
+        }
+    }
 
     HifiStylesUit.RalewayBold {
-                    anchors.top: qrAndInstructionsContainer.bottom
-                    anchors.topMargin: 150
+        id: continueLink
+        anchors.bottom: parent.bottom
         anchors.left: parent.left
         anchors.right: parent.right
+        height: paintedHeight + 24
         horizontalAlignment: Text.AlignLeft
         text: "Continue >"
         color: simplifiedUI.colors.text.lightBlue
         opacity: continueMouseArea.containsMouse ? 1.0 : 0.7
         size: 36
-                    height: paintedHeight
         z: 1
 
         MouseArea {
@@ -161,14 +170,6 @@ Rectangle {
             }
         }
     }
-            }
-        }
-
-        SimplifiedControls.VerticalScrollBar {
-            parent: tempAvatarPageContainer
-            z: 2
-        }
-    }
 
     signal sendToScript(var message);
 }

scripts/simplifiedUI/ui/simplifiedUI.js

@@ -362,8 +362,6 @@ var TOP_BAR_HEIGHT_PX = 48;
 var INITIAL_LAUNCH_QML_PATH = Script.resolvePath("./simplifiedFTUE/InitialLaunchWindow.qml");
 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_WINDOW_FLAGS = 0x00000001 | // Qt::Window
 0x00000800 | // Qt::FramelessWindowHint
 0x40000000; // Qt::NoDropShadowWindowHint
@@ -377,12 +375,12 @@ function displayInitialLaunchWindow() {
         title: INITIAL_LAUNCH_WINDOW_TITLE,
         presentationMode: INITIAL_LAUNCH_PRESENTATION_MODE,
         size: {
-            x: INITIAL_LAUNCH_WIDTH_PX,
-            y: INITIAL_LAUNCH_HEIGHT_PX
+            x: Window.innerWidth,
+            y: Window.innerHeight + TOP_BAR_HEIGHT_PX
         },
         position: {
             x: Window.x,
-            y: Window.y + TOP_BAR_HEIGHT_PX
+            y: Window.y
         },
         overrideFlags: INITIAL_WINDOW_FLAGS
     });
@@ -395,8 +393,6 @@ function displayInitialLaunchWindow() {
 var SECOND_LAUNCH_QML_PATH = Script.resolvePath("simplifiedFTUE/SecondLaunchWindow.qml");
 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_WINDOW_FLAGS = 0x00000001 | // Qt::Window
 0x00000800 | // Qt::FramelessWindowHint
 0x40000000; // Qt::NoDropShadowWindowHint
@@ -410,12 +406,12 @@ function displaySecondLaunchWindow() {
         title: SECOND_LAUNCH_WINDOW_TITLE,
         presentationMode: SECOND_LAUNCH_PRESENTATION_MODE,
         size: {
-            x: SECOND_LAUNCH_WIDTH_PX,
-            y: SECOND_LAUNCH_HEIGHT_PX
+            x: Window.innerWidth,
+            y: Window.innerHeight + TOP_BAR_HEIGHT_PX
         },
         position: {
             x: Window.x,
-            y: Window.y + TOP_BAR_HEIGHT_PX
+            y: Window.y
         },
         overrideFlags: SECOND_WINDOW_FLAGS
     });
@@ -659,22 +655,22 @@ function onGeometryChanged(rect) {
     }
     if (initialLaunchWindow) {
         initialLaunchWindow.size = {
-            "x": rect.width,
-            "y": rect.height
+            "x": Window.innerWidth,
+            "y": Window.innerHeight + TOP_BAR_HEIGHT_PX
         };
         initialLaunchWindow.position = {
             "x": rect.x,
-            "y": rect.y + TOP_BAR_HEIGHT_PX
+            "y": rect.y
         };
     }
     if (secondLaunchWindow) {
         secondLaunchWindow.size = {
-            "x": rect.width,
-            "y": rect.height
+            "x": Window.innerWidth,
+            "y": Window.innerHeight + TOP_BAR_HEIGHT_PX
         };
         secondLaunchWindow.position = {
             "x": rect.x,
-            "y": rect.y + TOP_BAR_HEIGHT_PX
+            "y": rect.y
         };
     }
 }