Controls almost done

interface/resources/qml/hifi/simplifiedUI/helpApp/about/HelpAbout.qml

@@ -74,7 +74,7 @@ Flickable {
 
             HifiStylesUit.GraphikSemiBold {
                 text: "About Your Configuration"
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 Layout.topMargin: 16
                 Layout.bottomMargin: 8
                 height: paintedHeight
@@ -85,7 +85,7 @@ Flickable {
 
             HifiStylesUit.GraphikRegular {
                 text: "Use the button below to get a copy to share with us."
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 Layout.bottomMargin: 8
                 height: paintedHeight
                 size: 18
@@ -95,7 +95,7 @@ Flickable {
 
             HifiStylesUit.GraphikRegular {
                 text: "Version " + Window.checkVersion()
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 Layout.topMargin: 8
                 Layout.bottomMargin: 8
                 height: paintedHeight
@@ -106,7 +106,7 @@ Flickable {
 
             HifiStylesUit.GraphikSemiBold {
                 text: "Platform Info"
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 Layout.topMargin: 8
                 Layout.bottomMargin: 8
                 height: paintedHeight
@@ -117,7 +117,7 @@ Flickable {
 
             HifiStylesUit.GraphikRegular {
                 text: "<b>Computer Vendor/Model:</b>"
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 16
                 color: simplifiedUI.colors.text.white
@@ -140,7 +140,7 @@ Flickable {
 
             HifiStylesUit.GraphikRegular {
                 text: "<b>Profiled Platform Tier:</b> " + PlatformInfo.getTierProfiled()
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 16
                 color: simplifiedUI.colors.text.white
@@ -149,7 +149,7 @@ Flickable {
 
             HifiStylesUit.GraphikRegular {
                 text: "<b>OS Type:</b> " + PlatformInfo.getOperatingSystemType()
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 16
                 color: simplifiedUI.colors.text.white
@@ -158,7 +158,7 @@ Flickable {
 
             HifiStylesUit.GraphikRegular {
                 text: "<b>CPU:</b>"
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 16
                 color: simplifiedUI.colors.text.white
@@ -177,7 +177,7 @@ Flickable {
 
             HifiStylesUit.GraphikRegular {
                 text: "<b># CPUs:</b> " + PlatformInfo.getNumCPUs()
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 16
                 color: simplifiedUI.colors.text.white
@@ -186,7 +186,7 @@ Flickable {
 
             HifiStylesUit.GraphikRegular {
                 text: "<b># CPU Cores:</b> " + PlatformInfo.getNumLogicalCores()
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 16
                 color: simplifiedUI.colors.text.white
@@ -195,7 +195,7 @@ Flickable {
 
             HifiStylesUit.GraphikRegular {
                 text: "<b>RAM:</b> " + PlatformInfo.getTotalSystemMemoryMB() + " MB"
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 16
                 color: simplifiedUI.colors.text.white
@@ -204,7 +204,7 @@ Flickable {
 
             HifiStylesUit.GraphikRegular {
                 text: "<b>GPU:</b> "
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 16
                 color: simplifiedUI.colors.text.white
@@ -223,7 +223,7 @@ Flickable {
 
             HifiStylesUit.GraphikRegular {
                 text: "<b>VR Hand Controllers:</b> " + (PlatformInfo.hasRiftControllers() ? "Rift" : (PlatformInfo.hasViveControllers() ? "Vive" : "None"))
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 16
                 color: simplifiedUI.colors.text.white
@@ -255,7 +255,7 @@ Flickable {
 
             HifiStylesUit.GraphikRegular {
                 text: "<b>Audio Input:</b> " + audioInputDevices.selectedInputDeviceName
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 16
                 color: simplifiedUI.colors.text.white
@@ -288,7 +288,7 @@ Flickable {
 
             HifiStylesUit.GraphikRegular {
                 text: "<b>Audio Output:</b> " + audioOutputDevices.selectedOutputDeviceName
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 16
                 color: simplifiedUI.colors.text.white

interface/resources/qml/hifi/simplifiedUI/helpApp/controls/ControlsTable.qml

@@ -0,0 +1,695 @@
+//
+//  ControlsTable.qml
+//
+//  Created by Zach Fox on 2019-08-16
+//  Copyright 2019 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+import QtQuick 2.10
+import QtQuick.Layouts 1.3
+import stylesUit 1.0 as HifiStylesUit
+
+Item {
+    id: controlsTableRoot
+    property int column1Width: 80
+    property int column2Width: width - column1Width
+    property int rowHeight: 31
+    property int rowPadding: 4
+    property int mainTextSize: 18
+    property int subTextSize: 14
+    property color separatorColor: "#CCCCCC"
+    height: controlsTableColumnLayout.height
+        
+    // Top separator
+    Rectangle {
+        anchors.top: controlsTableColumnLayout.top
+        anchors.left: controlsTableColumnLayout.left
+        width: parent.width
+        height: 1
+        color: controlsTableRoot.separatorColor
+    }
+
+    // Right separator
+    Rectangle {
+        anchors.top: controlsTableColumnLayout.top
+        anchors.right: controlsTableColumnLayout.right
+        width: 1
+        height: controlsTableColumnLayout.height
+        color: controlsTableRoot.separatorColor
+    }
+
+    // Bottom separator
+    Rectangle {
+        anchors.bottom: controlsTableColumnLayout.bottom
+        anchors.left: controlsTableColumnLayout.left
+        width: parent.width
+        height: 1
+        color: controlsTableRoot.separatorColor
+    }
+
+    // Left separator
+    Rectangle {
+        anchors.top: controlsTableColumnLayout.top
+        anchors.left: controlsTableColumnLayout.left
+        width: 1
+        height: controlsTableColumnLayout.height
+        color: controlsTableRoot.separatorColor
+    }
+    
+    ColumnLayout {
+        id: controlsTableColumnLayout
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        spacing: 0
+
+        Row {
+            Layout.preferredWidth: parent.width
+            height: controlsTableRoot.rowHeight
+
+            Item {
+                width: controlsTableRoot.column1Width
+                height: controlsTableRoot.rowHeight
+
+                Image {
+                    source: "images/rightClick.svg"
+                    anchors.centerIn: parent
+                    width: 24
+                    height: 24
+                    mipmap: true
+                    fillMode: Image.PreserveAspectFit
+                }
+
+                Rectangle {
+                    width: 1
+                    height: parent.height
+                    color: controlsTableRoot.separatorColor
+                    anchors.right: parent.right
+                    anchors.top: parent.top
+                }
+            }
+
+            Row {
+                width: controlsTableRoot.column2Width
+                height: controlsTableRoot.rowHeight
+                spacing: controlsTableRoot.rowPadding
+
+                HifiStylesUit.GraphikRegular {
+                    id: cameraText
+                    text: "Camera"
+                    width: paintedWidth
+                    height: parent.height
+                    horizontalAlignment: Text.AlignLeft
+                    verticalAlignment: Text.AlignVCenter
+                    size: controlsTableRoot.mainTextSize
+                    color: simplifiedUI.colors.text.white
+                }
+
+                HifiStylesUit.GraphikRegular {
+                    text: "Right-click and drag to look around"
+                    width: parent.width - cameraText.width - parent.spacing
+                    height: parent.height
+                    horizontalAlignment: Text.AlignLeft
+                    verticalAlignment: Text.AlignVCenter
+                    elide: Text.ElideRight
+                    size: controlsTableRoot.subTextSize
+                    color: Qt.rgba(255, 255, 255, 0.5)
+                }
+            }
+        }
+        
+
+
+
+        
+        Row {
+            Layout.preferredWidth: parent.width
+            height: controlsTableRoot.rowHeight
+
+            Item {
+                width: controlsTableRoot.column1Width
+                height: controlsTableRoot.rowHeight
+
+                HifiStylesUit.GraphikRegular {
+                    text: "W / ↑"
+                    anchors.fill: parent
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    size: controlsTableRoot.mainTextSize
+                    color: simplifiedUI.colors.text.white
+                }
+
+                Rectangle {
+                    width: 1
+                    height: parent.height
+                    color: controlsTableRoot.separatorColor
+                    anchors.right: parent.right
+                    anchors.top: parent.top
+                }
+            }
+
+            // Spacer
+            Item {
+                width: controlsTableRoot.rowPadding
+                height: controlsTableRoot.rowHeight
+            }
+
+            HifiStylesUit.GraphikRegular {
+                text: "Walk Forward"
+                width: controlsTableRoot.column2Width - controlsTableRoot.rowPadding * 2
+                height: controlsTableRoot.rowHeight
+                horizontalAlignment: Text.AlignLeft
+                verticalAlignment: Text.AlignVCenter
+                size: controlsTableRoot.mainTextSize
+                color: simplifiedUI.colors.text.white
+            }
+        }
+        
+
+        
+
+        
+        Row {
+            Layout.preferredWidth: parent.width
+            height: controlsTableRoot.rowHeight
+
+            Item {
+                width: controlsTableRoot.column1Width
+                height: controlsTableRoot.rowHeight
+
+                HifiStylesUit.GraphikRegular {
+                    text: "S / ↓"
+                    anchors.fill: parent
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    size: controlsTableRoot.mainTextSize
+                    color: simplifiedUI.colors.text.white
+                }
+
+                Rectangle {
+                    width: 1
+                    height: parent.height
+                    color: controlsTableRoot.separatorColor
+                    anchors.right: parent.right
+                    anchors.top: parent.top
+                }
+            }
+
+            // Spacer
+            Item {
+                width: controlsTableRoot.rowPadding
+                height: controlsTableRoot.rowHeight
+            }
+
+            HifiStylesUit.GraphikRegular {
+                text: "Walk Backward"
+                width: controlsTableRoot.column2Width - controlsTableRoot.rowPadding * 2
+                height: controlsTableRoot.rowHeight
+                horizontalAlignment: Text.AlignLeft
+                verticalAlignment: Text.AlignVCenter
+                size: controlsTableRoot.mainTextSize
+                color: simplifiedUI.colors.text.white
+            }
+        }
+        
+
+        
+
+        
+        Row {
+            Layout.preferredWidth: parent.width
+            height: controlsTableRoot.rowHeight
+
+            Item {
+                width: controlsTableRoot.column1Width
+                height: controlsTableRoot.rowHeight
+
+                HifiStylesUit.GraphikRegular {
+                    text: "A / ←"
+                    anchors.fill: parent
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    size: controlsTableRoot.mainTextSize
+                    color: simplifiedUI.colors.text.white
+                }
+
+                Rectangle {
+                    width: 1
+                    height: parent.height
+                    color: controlsTableRoot.separatorColor
+                    anchors.right: parent.right
+                    anchors.top: parent.top
+                }
+            }
+
+            // Spacer
+            Item {
+                width: controlsTableRoot.rowPadding
+                height: controlsTableRoot.rowHeight
+            }
+
+            HifiStylesUit.GraphikRegular {
+                text: "Turn Left"
+                width: controlsTableRoot.column2Width - controlsTableRoot.rowPadding * 2
+                height: controlsTableRoot.rowHeight
+                horizontalAlignment: Text.AlignLeft
+                verticalAlignment: Text.AlignVCenter
+                size: controlsTableRoot.mainTextSize
+                color: simplifiedUI.colors.text.white
+            }
+        }
+        
+
+        
+
+        
+        Row {
+            Layout.preferredWidth: parent.width
+            height: controlsTableRoot.rowHeight
+
+            Item {
+                width: controlsTableRoot.column1Width
+                height: controlsTableRoot.rowHeight
+
+                HifiStylesUit.GraphikRegular {
+                    text: "A / →"
+                    anchors.fill: parent
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    size: controlsTableRoot.mainTextSize
+                    color: simplifiedUI.colors.text.white
+                }
+
+                Rectangle {
+                    width: 1
+                    height: parent.height
+                    color: controlsTableRoot.separatorColor
+                    anchors.right: parent.right
+                    anchors.top: parent.top
+                }
+            }
+
+            // Spacer
+            Item {
+                width: controlsTableRoot.rowPadding
+                height: controlsTableRoot.rowHeight
+            }
+
+            HifiStylesUit.GraphikRegular {
+                text: "Turn Right"
+                width: controlsTableRoot.column2Width - controlsTableRoot.rowPadding * 2
+                height: controlsTableRoot.rowHeight
+                horizontalAlignment: Text.AlignLeft
+                verticalAlignment: Text.AlignVCenter
+                size: controlsTableRoot.mainTextSize
+                color: simplifiedUI.colors.text.white
+            }
+        }
+        
+
+        
+
+        
+        Row {
+            Layout.preferredWidth: parent.width
+            height: controlsTableRoot.rowHeight
+
+            Item {
+                width: controlsTableRoot.column1Width
+                height: controlsTableRoot.rowHeight
+
+                HifiStylesUit.GraphikRegular {
+                    text: "Q"
+                    anchors.fill: parent
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    size: controlsTableRoot.mainTextSize
+                    color: simplifiedUI.colors.text.white
+                }
+
+                Rectangle {
+                    width: 1
+                    height: parent.height
+                    color: controlsTableRoot.separatorColor
+                    anchors.right: parent.right
+                    anchors.top: parent.top
+                }
+            }
+
+            // Spacer
+            Item {
+                width: controlsTableRoot.rowPadding
+                height: controlsTableRoot.rowHeight
+            }
+
+            HifiStylesUit.GraphikRegular {
+                text: "Sidestep Left"
+                width: controlsTableRoot.column2Width - controlsTableRoot.rowPadding * 2
+                height: controlsTableRoot.rowHeight
+                horizontalAlignment: Text.AlignLeft
+                verticalAlignment: Text.AlignVCenter
+                size: controlsTableRoot.mainTextSize
+                color: simplifiedUI.colors.text.white
+            }
+        }
+        
+
+        
+
+        
+        Row {
+            Layout.preferredWidth: parent.width
+            height: controlsTableRoot.rowHeight
+
+            Item {
+                width: controlsTableRoot.column1Width
+                height: controlsTableRoot.rowHeight
+
+                HifiStylesUit.GraphikRegular {
+                    text: "E"
+                    anchors.fill: parent
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    size: controlsTableRoot.mainTextSize
+                    color: simplifiedUI.colors.text.white
+                }
+
+                Rectangle {
+                    width: 1
+                    height: parent.height
+                    color: controlsTableRoot.separatorColor
+                    anchors.right: parent.right
+                    anchors.top: parent.top
+                }
+            }
+
+            // Spacer
+            Item {
+                width: controlsTableRoot.rowPadding
+                height: controlsTableRoot.rowHeight
+            }
+
+            HifiStylesUit.GraphikRegular {
+                text: "Sidestep Right"
+                width: controlsTableRoot.column2Width - controlsTableRoot.rowPadding * 2
+                height: controlsTableRoot.rowHeight
+                horizontalAlignment: Text.AlignLeft
+                verticalAlignment: Text.AlignVCenter
+                size: controlsTableRoot.mainTextSize
+                color: simplifiedUI.colors.text.white
+            }
+        }
+        
+
+        
+
+        
+        Row {
+            Layout.preferredWidth: parent.width
+            height: controlsTableRoot.rowHeight
+
+            Item {
+                width: controlsTableRoot.column1Width
+                height: controlsTableRoot.rowHeight
+
+                HifiStylesUit.GraphikRegular {
+                    text: "Shift"
+                    anchors.fill: parent
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    size: controlsTableRoot.mainTextSize
+                    color: simplifiedUI.colors.text.white
+                }
+
+                Rectangle {
+                    width: 1
+                    height: parent.height
+                    color: controlsTableRoot.separatorColor
+                    anchors.right: parent.right
+                    anchors.top: parent.top
+                }
+            }
+
+            // Spacer
+            Item {
+                width: controlsTableRoot.rowPadding
+                height: controlsTableRoot.rowHeight
+            }
+
+            Row {
+                width: controlsTableRoot.column2Width
+                height: controlsTableRoot.rowHeight
+                spacing: controlsTableRoot.rowPadding
+
+                HifiStylesUit.GraphikRegular {
+                    id: runText
+                    text: "Hold + Direction to Run"
+                    width: paintedWidth
+                    height: parent.height
+                    horizontalAlignment: Text.AlignLeft
+                    verticalAlignment: Text.AlignVCenter
+                    size: controlsTableRoot.mainTextSize
+                    color: simplifiedUI.colors.text.white
+                }
+
+                HifiStylesUit.GraphikRegular {
+                    text: "Example: Shift + W"
+                    width: parent.width - runText.width - parent.spacing
+                    height: parent.height
+                    horizontalAlignment: Text.AlignLeft
+                    verticalAlignment: Text.AlignVCenter
+                    elide: Text.ElideRight
+                    size: controlsTableRoot.subTextSize
+                    color: Qt.rgba(255, 255, 255, 0.5)
+                }
+            }
+        }
+        
+
+        
+
+        
+        Row {
+            Layout.preferredWidth: parent.width
+            height: controlsTableRoot.rowHeight
+
+            Item {
+                width: controlsTableRoot.column1Width
+                height: controlsTableRoot.rowHeight
+
+                HifiStylesUit.GraphikRegular {
+                    text: "Space"
+                    anchors.fill: parent
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    size: controlsTableRoot.mainTextSize
+                    color: simplifiedUI.colors.text.white
+                }
+
+                Rectangle {
+                    width: 1
+                    height: parent.height
+                    color: controlsTableRoot.separatorColor
+                    anchors.right: parent.right
+                    anchors.top: parent.top
+                }
+            }
+
+            // Spacer
+            Item {
+                width: controlsTableRoot.rowPadding
+                height: controlsTableRoot.rowHeight
+            }
+
+            Row {
+                width: controlsTableRoot.column2Width
+                height: controlsTableRoot.rowHeight
+                spacing: controlsTableRoot.rowPadding
+
+                HifiStylesUit.GraphikRegular {
+                    id: jumpText
+                    text: "Jump / Stand Up"
+                    width: paintedWidth
+                    height: parent.height
+                    horizontalAlignment: Text.AlignLeft
+                    verticalAlignment: Text.AlignVCenter
+                    size: controlsTableRoot.mainTextSize
+                    color: simplifiedUI.colors.text.white
+                }
+
+                HifiStylesUit.GraphikRegular {
+                    text: "Stand Up only while seated"
+                    width: parent.width - jumpText.width - parent.spacing
+                    height: parent.height
+                    horizontalAlignment: Text.AlignLeft
+                    verticalAlignment: Text.AlignVCenter
+                    elide: Text.ElideRight
+                    size: controlsTableRoot.subTextSize
+                    color: Qt.rgba(255, 255, 255, 0.5)
+                }
+            }
+        }
+        
+
+        
+
+        
+        Row {
+            Layout.preferredWidth: parent.width
+            height: controlsTableRoot.rowHeight
+
+            Item {
+                width: controlsTableRoot.column1Width
+                height: controlsTableRoot.rowHeight
+
+                HifiStylesUit.GraphikRegular {
+                    text: "1"
+                    anchors.fill: parent
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    size: controlsTableRoot.mainTextSize
+                    color: simplifiedUI.colors.text.white
+                }
+
+                Rectangle {
+                    width: 1
+                    height: parent.height
+                    color: controlsTableRoot.separatorColor
+                    anchors.right: parent.right
+                    anchors.top: parent.top
+                }
+            }
+
+            // Spacer
+            Item {
+                width: controlsTableRoot.rowPadding
+                height: controlsTableRoot.rowHeight
+            }
+
+            HifiStylesUit.GraphikRegular {
+                text: "1st Person View"
+                width: controlsTableRoot.column2Width - controlsTableRoot.rowPadding * 2
+                height: controlsTableRoot.rowHeight
+                horizontalAlignment: Text.AlignLeft
+                verticalAlignment: Text.AlignVCenter
+                size: controlsTableRoot.mainTextSize
+                color: simplifiedUI.colors.text.white
+            }
+        }
+        
+
+        
+
+        
+        Row {
+            Layout.preferredWidth: parent.width
+            height: controlsTableRoot.rowHeight
+
+            Item {
+                width: controlsTableRoot.column1Width
+                height: controlsTableRoot.rowHeight
+
+                HifiStylesUit.GraphikRegular {
+                    text: "2"
+                    anchors.fill: parent
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    size: controlsTableRoot.mainTextSize
+                    color: simplifiedUI.colors.text.white
+                }
+
+                Rectangle {
+                    width: 1
+                    height: parent.height
+                    color: controlsTableRoot.separatorColor
+                    anchors.right: parent.right
+                    anchors.top: parent.top
+                }
+            }
+
+            // Spacer
+            Item {
+                width: controlsTableRoot.rowPadding
+                height: controlsTableRoot.rowHeight
+            }
+
+            Row {
+                width: controlsTableRoot.column2Width
+                height: controlsTableRoot.rowHeight
+                spacing: controlsTableRoot.rowPadding
+
+                HifiStylesUit.GraphikRegular {
+                    id: mirrorText
+                    text: "Mirror Mode"
+                    width: paintedWidth
+                    height: parent.height
+                    horizontalAlignment: Text.AlignLeft
+                    verticalAlignment: Text.AlignVCenter
+                    size: controlsTableRoot.mainTextSize
+                    color: simplifiedUI.colors.text.white
+                }
+
+                HifiStylesUit.GraphikRegular {
+                    text: "See your own avatar"
+                    width: parent.width - mirrorText.width - parent.spacing
+                    height: parent.height
+                    horizontalAlignment: Text.AlignLeft
+                    verticalAlignment: Text.AlignVCenter
+                    elide: Text.ElideRight
+                    size: controlsTableRoot.subTextSize
+                    color: Qt.rgba(255, 255, 255, 0.5)
+                }
+            }
+        }
+        
+
+        
+
+        
+        Row {
+            Layout.preferredWidth: parent.width
+            height: controlsTableRoot.rowHeight
+
+            Item {
+                width: controlsTableRoot.column1Width
+                height: controlsTableRoot.rowHeight
+
+                HifiStylesUit.GraphikRegular {
+                    text: "3"
+                    anchors.fill: parent
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    size: controlsTableRoot.mainTextSize
+                    color: simplifiedUI.colors.text.white
+                }
+
+                Rectangle {
+                    width: 1
+                    height: parent.height
+                    color: controlsTableRoot.separatorColor
+                    anchors.right: parent.right
+                    anchors.top: parent.top
+                }
+            }
+
+            // Spacer
+            Item {
+                width: controlsTableRoot.rowPadding
+                height: controlsTableRoot.rowHeight
+            }
+
+            HifiStylesUit.GraphikRegular {
+                text: "3rd Person View"
+                width: controlsTableRoot.column2Width - controlsTableRoot.rowPadding * 2
+                height: controlsTableRoot.rowHeight
+                horizontalAlignment: Text.AlignLeft
+                verticalAlignment: Text.AlignVCenter
+                size: controlsTableRoot.mainTextSize
+                color: simplifiedUI.colors.text.white
+            }
+        }
+    }
+}

interface/resources/qml/hifi/simplifiedUI/helpApp/controls/HelpControls.qml

@@ -14,7 +14,6 @@ import "../../simplifiedConstants" as SimplifiedConstants
 import "../../simplifiedControls" as SimplifiedControls
 import stylesUit 1.0 as HifiStylesUit
 import QtQuick.Layouts 1.3
-import PerformanceEnums 1.0
 
 Flickable {
     id: root
@@ -60,7 +59,7 @@ Flickable {
 
         HifiStylesUit.GraphikSemiBold {
             text: "HQ Controls"
-            Layout.maximumWidth: parent.width
+            Layout.preferredWidth: parent.width
             Layout.topMargin: 16
             height: paintedHeight
             size: 22
@@ -69,22 +68,27 @@ Flickable {
 
         HifiStylesUit.GraphikRegular {
             text: "You can use the following controls to move your avatar around your HQ:"
-            Layout.maximumWidth: parent.width
+            Layout.preferredWidth: parent.width
             wrapMode: Text.Wrap
             height: paintedHeight
             size: 18
             color: simplifiedUI.colors.text.white
         }
 
+        ControlsTable {
+            Layout.topMargin: 8
+            Layout.preferredWidth: parent.width
+        }
+
         SimplifiedControls.Button {
             Layout.topMargin: 8
-            width: 200
+            Layout.preferredWidth: 200
             height: 32
             text: "VIEW ALL CONTROLS"
             temporaryText: "Viewing!"
 
             onClicked: {
-                Qt.openUrlExternally("http://docs.highfidelity.com/en/rc83/explore/get-started/desktop.html");
+                Qt.openUrlExternally("http://docs.highfidelity.com/explore/get-started/desktop.html");
             }
         }
     }

interface/resources/qml/hifi/simplifiedUI/helpApp/controls/images/rightClick.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 24" style="enable-background:new 0 0 16 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{opacity:0.2;enable-background:new    ;}
+	.st2{fill:#009EE0;}
+</style>
+<path class="st0" d="M16,1.7v20.6c0,0.9-0.8,1.7-1.8,1.7H1.8c-1,0-1.8-0.8-1.8-1.7V1.7C0,0.8,0.8,0,1.8,0h12.4C15.2,0,16,0.8,16,1.7
+	z"/>
+<path d="M14.2,1.2H9v8.6h5.7V1.7C14.7,1.4,14.5,1.2,14.2,1.2z"/>
+<path class="st1" d="M7,1.2H1.8c-0.3,0-0.5,0.2-0.5,0.5v8.1H7V1.2z"/>
+<circle class="st2" cx="11.9" cy="5.3" r="2.5"/>
+</svg>

interface/resources/qml/hifi/simplifiedUI/settingsApp/about/About.qml

@@ -70,7 +70,7 @@ Flickable {
             HifiStylesUit.GraphikSemiBold {
                 text: "Version " + Window.checkVersion()
                 Layout.alignment: Qt.AlignHCenter
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 16
                 color: simplifiedUI.colors.text.white
@@ -79,7 +79,7 @@ Flickable {
 
             HifiStylesUit.GraphikSemiBold {
                 text: "Platform Info"
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 Layout.topMargin: 8
                 Layout.bottomMargin: 8
                 height: paintedHeight
@@ -90,7 +90,7 @@ Flickable {
 
             HifiStylesUit.GraphikRegular {
                 text: "<b>Computer Vendor/Model:</b>"
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 16
                 color: simplifiedUI.colors.text.white
@@ -113,7 +113,7 @@ Flickable {
 
             HifiStylesUit.GraphikRegular {
                 text: "<b>Profiled Platform Tier:</b> " + PlatformInfo.getTierProfiled()
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 16
                 color: simplifiedUI.colors.text.white
@@ -122,7 +122,7 @@ Flickable {
 
             HifiStylesUit.GraphikRegular {
                 text: "<b>OS Type:</b> " + PlatformInfo.getOperatingSystemType()
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 16
                 color: simplifiedUI.colors.text.white
@@ -131,7 +131,7 @@ Flickable {
 
             HifiStylesUit.GraphikRegular {
                 text: "<b>CPU:</b>"
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 16
                 color: simplifiedUI.colors.text.white
@@ -150,7 +150,7 @@ Flickable {
 
             HifiStylesUit.GraphikRegular {
                 text: "<b># CPUs:</b> " + PlatformInfo.getNumCPUs()
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 16
                 color: simplifiedUI.colors.text.white
@@ -159,7 +159,7 @@ Flickable {
 
             HifiStylesUit.GraphikRegular {
                 text: "<b># CPU Cores:</b> " + PlatformInfo.getNumLogicalCores()
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 16
                 color: simplifiedUI.colors.text.white
@@ -168,7 +168,7 @@ Flickable {
 
             HifiStylesUit.GraphikRegular {
                 text: "<b>RAM:</b> " + PlatformInfo.getTotalSystemMemoryMB() + " MB"
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 16
                 color: simplifiedUI.colors.text.white
@@ -177,7 +177,7 @@ Flickable {
 
             HifiStylesUit.GraphikRegular {
                 text: "<b>GPU:</b> "
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 16
                 color: simplifiedUI.colors.text.white
@@ -196,7 +196,7 @@ Flickable {
 
             HifiStylesUit.GraphikRegular {
                 text: "<b>VR Hand Controllers:</b> " + (PlatformInfo.hasRiftControllers() ? "Rift" : (PlatformInfo.hasViveControllers() ? "Vive" : "None"))
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 16
                 color: simplifiedUI.colors.text.white
@@ -228,7 +228,7 @@ Flickable {
 
             HifiStylesUit.GraphikRegular {
                 text: "<b>Audio Input:</b> " + audioInputDevices.selectedInputDeviceName
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 16
                 color: simplifiedUI.colors.text.white
@@ -261,7 +261,7 @@ Flickable {
 
             HifiStylesUit.GraphikRegular {
                 text: "<b>Audio Output:</b> " + audioOutputDevices.selectedOutputDeviceName
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 16
                 color: simplifiedUI.colors.text.white

interface/resources/qml/hifi/simplifiedUI/settingsApp/audio/Audio.qml

@@ -174,7 +174,7 @@ Flickable {
             HifiStylesUit.GraphikSemiBold {
                 id: micControlsTitle
                 text: "Default Mute Controls"
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 22
                 color: simplifiedUI.colors.text.white
@@ -244,7 +244,7 @@ Flickable {
             HifiStylesUit.GraphikSemiBold {
                 id: inputDeviceTitle
                 text: "Which input device?"
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 22
                 color: simplifiedUI.colors.text.white
@@ -340,7 +340,7 @@ Flickable {
             HifiStylesUit.GraphikSemiBold {
                 id: outputDeviceTitle
                 text: "Which output device?"
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 22
                 color: simplifiedUI.colors.text.white

interface/resources/qml/hifi/simplifiedUI/settingsApp/dev/Dev.qml

@@ -68,7 +68,7 @@ Flickable {
             HifiStylesUit.GraphikSemiBold {
                 id: uiControlsTitle
                 text: "User Interface"
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 22
                 color: simplifiedUI.colors.text.white
@@ -77,7 +77,7 @@ Flickable {
             HifiStylesUit.GraphikRegular {
                 id: uiControlsSubtitle
                 text: "You'll have to restart Interface after changing either of these settings. If you don't get any Toolbar apps back after restarting, run defaultScripts.js manually."
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 16
                 color: simplifiedUI.colors.text.white

interface/resources/qml/hifi/simplifiedUI/settingsApp/general/General.qml

@@ -72,7 +72,7 @@ Flickable {
             HifiStylesUit.GraphikSemiBold {
                 id: avatarNameTagsTitle
                 text: "Avatar Name Tags"
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 22
                 color: simplifiedUI.colors.text.white
@@ -120,7 +120,7 @@ Flickable {
             HifiStylesUit.GraphikSemiBold {
                 id: performanceTitle
                 text: "Graphics Settings"
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 22
                 color: simplifiedUI.colors.text.white
@@ -168,7 +168,7 @@ Flickable {
             HifiStylesUit.GraphikSemiBold {
                 id: cameraTitle
                 text: "Camera View"
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 22
                 color: simplifiedUI.colors.text.white

interface/resources/qml/hifi/simplifiedUI/settingsApp/vr/VR.qml

@@ -77,7 +77,7 @@ Flickable {
             HifiStylesUit.GraphikSemiBold {
                 id: controlsTitle
                 text: "VR Movement Controls"
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 22
                 color: simplifiedUI.colors.text.white
@@ -163,7 +163,7 @@ Flickable {
             HifiStylesUit.GraphikSemiBold {
                 id: micControlsTitle
                 text: "Default Mute Controls"
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 22
                 color: simplifiedUI.colors.text.white
@@ -206,7 +206,7 @@ Flickable {
             HifiStylesUit.GraphikSemiBold {
                 id: inputDeviceTitle
                 text: "Which input device?"
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 22
                 color: simplifiedUI.colors.text.white
@@ -302,7 +302,7 @@ Flickable {
             HifiStylesUit.GraphikSemiBold {
                 id: outputDeviceTitle
                 text: "Which output device?"
-                Layout.maximumWidth: parent.width
+                Layout.preferredWidth: parent.width
                 height: paintedHeight
                 size: 22
                 color: simplifiedUI.colors.text.white

interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml

@@ -153,6 +153,10 @@ QtObject {
                 readonly property color background: "#474747"
                 readonly property color contentItem: "#0198CB"
             }
+            readonly property QtObject table: QtObject {
+                readonly property color cellBackground: "#000000"
+                readonly property color textColor: "#ffffff"
+            }
         }
 
         readonly property color darkSeparator: "#595959"

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

@@ -427,9 +427,9 @@ Rectangle {
 
         Image {
             id: helpButtonImage
-            source: "./images/settings.svg"
+            source: "./images/questionMark.svg"
             anchors.centerIn: parent
-            width: 22
+            width: 13
             height: 22
             visible: false
         }

interface/resources/qml/hifi/simplifiedUI/topBar/images/questionMark.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 57 99" style="enable-background:new 0 0 57 99;" xml:space="preserve">
+<g>
+	<path d="M18.4,63.8c0-10.7,7.1-17.3,13.6-23.7c5-5,9.4-7.5,9.4-15.3c0-6.9-4.8-10.9-12-10.6c-7.3,0.3-12.6,4.1-14.5,11.3
+		c-0.5,1.9-2.1,3.3-4.1,3.3H4.3c-2.7,0-4.7-2.5-4.2-5.2C2.9,9,14,0,30.2,0C49.4,0,57,12,57,25.1c0,9.6-4.3,14.4-10.4,20.3
+		c-6.3,6.1-12.8,11.6-13.2,19.2l0,0c0,2.4-1.9,4.3-4.3,4.3h-6.5c-2.4,0-4.3-1.9-4.3-4.3V63.8z M14.7,88.6c0-6.3,5.6-11.1,12.2-10.5
+		c4.8,0.5,8.9,4.3,9.5,9.1C37.3,93.7,32.1,99,25.8,99C19.7,99,14.7,94.4,14.7,88.6z"/>
+</g>
+</svg>