a few updates to adjust wearables & settings pages

interface/resources/qml/hifi/AvatarApp.qml

@@ -54,10 +54,25 @@ Rectangle {
         id: header
         z: 100
 
-        pageTitle: !settings.visible ? "Avatar" : "Avatar Settings"
-        avatarIconVisible: !settings.visible
-        settingsButtonVisible: !settings.visible
+        property string currentPage: "Avatar"
+        property bool mainPageVisible: !settings.visible && !adjustWearables.visible
 
+        Binding on currentPage {
+            when: settings.visible
+            value: "Avatar Settings"
+        }
+        Binding on currentPage {
+            when: adjustWearables.visible
+            value: "Adjust Wearables"
+        }
+        Binding on currentPage {
+            when: header.mainPageVisible
+            value: "Avatar"
+        }
+
+        pageTitle: currentPage
+        avatarIconVisible: mainPageVisible
+        settingsButtonVisible: mainPageVisible
         onSettingsClicked: {
             settings.open();
         }
@@ -65,6 +80,12 @@ Rectangle {
 
     Settings {
         id: settings
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: header.bottom
+        anchors.bottom: parent.bottom
+
+        z: 3
 
         onSaveClicked: function() {
             close();
@@ -74,6 +95,16 @@ Rectangle {
         }
     }
 
+    AdjustWearables {
+        id: adjustWearables
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: header.bottom
+        anchors.bottom: parent.bottom
+
+        z: 3
+    }
+
     Rectangle {
         id: mainBlock
         anchors.left: parent.left
@@ -716,11 +747,6 @@ Rectangle {
         }
     }
 
-    AdjustWearables {
-        id: adjustWearables
-        z: 2
-    }
-
     MessageBox {
         id: popup
     }

interface/resources/qml/hifi/avatarapp/AdjustWearables.qml

@@ -9,7 +9,7 @@ Rectangle {
     visible: false;
     width: 480
     height: 706
-    color: 'lightgray'
+    color: 'white'
 
     property bool modified: false;
     Component.onCompleted: {
@@ -50,18 +50,6 @@ Rectangle {
         spacing: 20
         width: parent.width - 30 * 2
 
-        TextStyle5 {
-            anchors.horizontalCenter: parent.horizontalCenter
-            text: "Adjust Wearables"
-        }
-
-        Rectangle {
-            anchors.left: parent.left
-            anchors.right: parent.right
-            height: 2
-            color: 'gray'
-        }
-
         HifiControlsUit.ComboBox {
             anchors.left: parent.left
             anchors.right: parent.right
@@ -91,6 +79,8 @@ Rectangle {
 
             Vector3 {
                 id: position
+                backgroundColor: "lightgray"
+
                 onXvalueChanged: modified = true;
                 onYvalueChanged: modified = true;
                 onZvalueChanged: modified = true;
@@ -115,6 +105,8 @@ Rectangle {
 
             Vector3 {
                 id: rotation
+                backgroundColor: "lightgray"
+
                 onXvalueChanged: modified = true;
                 onYvalueChanged: modified = true;
                 onZvalueChanged: modified = true;
@@ -136,7 +128,7 @@ Rectangle {
                 HifiControlsUit.SpinBox {
                     id: scalespinner
                     value: 0
-                    backgroundColor: "darkgray"
+                    backgroundColor: "lightgray"
                     width: position.spinboxWidth
                     colorScheme: hifi.colorSchemes.light
                     onValueChanged: modified = true;

interface/resources/qml/hifi/avatarapp/Settings.qml

@@ -10,12 +10,7 @@ Rectangle {
     id: settings
 
     color: 'white'
-    anchors.left: parent.left
-    anchors.right: parent.right
-    anchors.top: header.bottom
-    anchors.bottom: parent.bottom
     visible: false;
-    z: 3
 
     property alias onSaveClicked: dialogButtons.onYesClicked
     property alias onCancelClicked: dialogButtons.onNoClicked
@@ -28,6 +23,15 @@ Rectangle {
         visible = false
     }
 
+    // This object is always used in a popup.
+    // This MouseArea is used to prevent a user from being
+    //     able to click on a button/mouseArea underneath the popup.
+    MouseArea {
+        anchors.fill: parent;
+        propagateComposedEvents: false;
+        hoverEnabled: true;
+    }
+
     Item {
         anchors.left: parent.left
         anchors.leftMargin: 27