diff --git a/interface/resources/qml/hifi/simplifiedUI/helpApp/HelpApp.qml b/interface/resources/qml/hifi/simplifiedUI/helpApp/HelpApp.qml new file mode 100644 index 0000000000..d8238d35cf --- /dev/null +++ b/interface/resources/qml/hifi/simplifiedUI/helpApp/HelpApp.qml @@ -0,0 +1,180 @@ +// +// HelpApp.qml +// +// Created by Zach Fox on 2019-08-07 +// 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.Controls 2.3 +import "../simplifiedConstants" as SimplifiedConstants +import "../simplifiedControls" as SimplifiedControls +import stylesUit 1.0 as HifiStylesUit +import "./controls" as HelpControls +import "./faq" as HelpFAQ +import "./about" as HelpAbout + +Rectangle { + property string activeTabView: "controlsTabView" + id: root + color: simplifiedUI.colors.darkBackground + anchors.fill: parent + + SimplifiedConstants.SimplifiedConstants { + id: simplifiedUI + } + + focus: true + + Component.onCompleted: { + root.forceActiveFocus(); + } + + + onActiveTabViewChanged: { + for (var i = 0; i < tabListModel.count; i++) { + if (tabListModel.get(i).tabViewName === activeTabView) { + tabListView.currentIndex = i; + return; + } + } + } + + + Rectangle { + id: tabContainer + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right + height: 64 + color: simplifiedUI.colors.highlightOnDark + + ListModel { + id: tabListModel + + ListElement { + tabTitle: "Controls" + tabViewName: "controlsTabView" + } + ListElement { + tabTitle: "FAQ" + tabViewName: "faqTabView" + } + ListElement { + tabTitle: "About" + tabViewName: "aboutTabView" + } + } + + + Component { + id: highlightBar + Rectangle { + width: tabListView.currentItem.width + height: tabListView.currentItem.height + color: simplifiedUI.colors.darkBackground + x: tabListView.currentItem.x + Behavior on x { + SmoothedAnimation { + duration: 250 + } + } + Behavior on width { + SmoothedAnimation { + duration: 250 + } + } + } + } + + + ListView { + id: tabListView + anchors.fill: parent + contentHeight: parent.height + contentWidth: childrenRect.width + orientation: ListView.Horizontal + model: tabListModel + highlight: highlightBar + highlightFollowsCurrentItem: false + interactive: contentItem.width > width + delegate: Item { + width: tabTitleText.paintedWidth + 32 + height: parent.height + + HifiStylesUit.GraphikRegular { + id: tabTitleText + color: simplifiedUI.colors.text.white + anchors.fill: parent + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + text: model.tabTitle + size: 24 + } + + MouseArea { + anchors.fill: parent + onClicked: { + root.activeTabView = model.tabViewName; + } + } + } + } + } + + Item { + id: tabViewContainers + anchors.top: tabContainer.bottom + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom + + + HelpControls.HelpControls { + id: controlsTabViewContainer + visible: activeTabView === "controlsTabView" + anchors.fill: parent + } + + HelpFAQ.HelpFAQ { + id: faqTabViewContainer + visible: activeTabView === "faqTabView" + anchors.fill: parent + + onSendToScript: { + root.sendToScript(message); + } + } + + HelpAbout.HelpAbout { + id: aboutTabViewContainer + visible: activeTabView === "aboutTabView" + anchors.fill: parent + } + + SimplifiedControls.VerticalScrollBar { + parent: { + if (activeTabView === "controlsTabView") { + controlsTabViewContainer + } else if (activeTabView === "faqTabView") { + faqTabViewContainer + } else if (activeTabView === "aboutTabView") { + aboutTabViewContainer + } + } + } + } + + + function fromScript(message) { + switch (message.method) { + default: + console.log('HelpApp.qml: Unrecognized message from JS'); + break; + } + } + signal sendToScript(var message); +} diff --git a/interface/resources/qml/hifi/simplifiedUI/helpApp/about/HelpAbout.qml b/interface/resources/qml/hifi/simplifiedUI/helpApp/about/HelpAbout.qml new file mode 100644 index 0000000000..4a36232029 --- /dev/null +++ b/interface/resources/qml/hifi/simplifiedUI/helpApp/about/HelpAbout.qml @@ -0,0 +1,355 @@ +// +// HelpAbout.qml +// +// Created by Zach Fox on 2019-08-07 +// 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.Controls 2.3 +import "../../simplifiedConstants" as SimplifiedConstants +import "../../simplifiedControls" as SimplifiedControls +import stylesUit 1.0 as HifiStylesUit +import QtQuick.Layouts 1.3 + +Flickable { + id: root + contentWidth: parent.width + contentHeight: aboutColumnLayout.height + clip: true + + onVisibleChanged: { + if (visible) { + root.contentX = 0; + root.contentY = 0; + + // When the user clicks the About tab, refresh the audio I/O model so that + // the delegate Component.onCompleted handlers fire, which will update + // the text that appears in the About screen. + audioOutputDevices.model = undefined; + audioOutputDevices.model = AudioScriptingInterface.devices.output; + audioInputDevices.model = undefined; + audioInputDevices.model = AudioScriptingInterface.devices.input; + } + } + + + SimplifiedConstants.SimplifiedConstants { + id: simplifiedUI + } + + + Image { + id: accent + source: "../images/accent3.svg" + anchors.left: parent.left + anchors.top: parent.top + width: 83 + height: 156 + transform: Scale { + xScale: -1 + origin.x: accent.width / 2 + origin.y: accent.height / 2 + } + } + + + ColumnLayout { + id: aboutColumnLayout + anchors.left: parent.left + anchors.leftMargin: 26 + anchors.right: parent.right + anchors.rightMargin: 26 + anchors.top: parent.top + spacing: 0 + + ColumnLayout { + id: platformInfoContainer + Layout.preferredWidth: parent.width + Layout.bottomMargin: 24 + spacing: 0 + + HifiStylesUit.GraphikSemiBold { + text: "About Your Configuration" + Layout.preferredWidth: parent.width + Layout.topMargin: 16 + Layout.bottomMargin: 8 + height: paintedHeight + size: 22 + color: simplifiedUI.colors.text.white + wrapMode: Text.Wrap + } + + HifiStylesUit.GraphikRegular { + text: "Use the button below to get a copy to share with us." + Layout.preferredWidth: parent.width + Layout.bottomMargin: 8 + height: paintedHeight + size: 18 + color: simplifiedUI.colors.text.white + wrapMode: Text.Wrap + } + + HifiStylesUit.GraphikRegular { + text: "Version " + Window.checkVersion() + Layout.preferredWidth: parent.width + Layout.topMargin: 8 + Layout.bottomMargin: 8 + height: paintedHeight + size: 16 + color: simplifiedUI.colors.text.white + wrapMode: Text.Wrap + } + + HifiStylesUit.GraphikSemiBold { + text: "Platform Info" + Layout.preferredWidth: parent.width + Layout.topMargin: 8 + Layout.bottomMargin: 8 + height: paintedHeight + size: 22 + color: simplifiedUI.colors.text.white + wrapMode: Text.Wrap + } + + HifiStylesUit.GraphikRegular { + text: "Computer Vendor/Model:" + Layout.preferredWidth: parent.width + height: paintedHeight + size: 16 + color: simplifiedUI.colors.text.white + wrapMode: Text.Wrap + + Component.onCompleted: { + var computer = JSON.parse(PlatformInfo.getComputer()); + var computerVendor = computer.vendor; + if (computerVendor.length === 0) { + computerVendor = "Unknown"; + } + var computerModel = computer.model; + if (computerModel.length === 0) { + computerModel = "Unknown"; + } + + text = "Computer Vendor/Model: " + computerVendor + "/" + computerModel; + } + } + + HifiStylesUit.GraphikRegular { + text: "Profiled Platform Tier: " + PlatformInfo.getTierProfiled() + Layout.preferredWidth: parent.width + height: paintedHeight + size: 16 + color: simplifiedUI.colors.text.white + wrapMode: Text.Wrap + } + + HifiStylesUit.GraphikRegular { + text: "OS Type: " + PlatformInfo.getOperatingSystemType() + Layout.preferredWidth: parent.width + height: paintedHeight + size: 16 + color: simplifiedUI.colors.text.white + wrapMode: Text.Wrap + } + + HifiStylesUit.GraphikRegular { + text: "CPU:" + Layout.preferredWidth: parent.width + height: paintedHeight + size: 16 + color: simplifiedUI.colors.text.white + wrapMode: Text.Wrap + + Component.onCompleted: { + var cpu = JSON.parse(PlatformInfo.getCPU(0)); + var cpuModel = cpu.model; + if (cpuModel.length === 0) { + cpuModel = "Unknown"; + } + + text = "CPU: " + cpuModel; + } + } + + HifiStylesUit.GraphikRegular { + text: "# CPUs: " + PlatformInfo.getNumCPUs() + Layout.preferredWidth: parent.width + height: paintedHeight + size: 16 + color: simplifiedUI.colors.text.white + wrapMode: Text.Wrap + } + + HifiStylesUit.GraphikRegular { + text: "# CPU Cores: " + PlatformInfo.getNumLogicalCores() + Layout.preferredWidth: parent.width + height: paintedHeight + size: 16 + color: simplifiedUI.colors.text.white + wrapMode: Text.Wrap + } + + HifiStylesUit.GraphikRegular { + text: "RAM: " + PlatformInfo.getTotalSystemMemoryMB() + " MB" + Layout.preferredWidth: parent.width + height: paintedHeight + size: 16 + color: simplifiedUI.colors.text.white + wrapMode: Text.Wrap + } + + HifiStylesUit.GraphikRegular { + text: "GPU: " + Layout.preferredWidth: parent.width + height: paintedHeight + size: 16 + color: simplifiedUI.colors.text.white + wrapMode: Text.Wrap + + Component.onCompleted: { + var gpu = JSON.parse(PlatformInfo.getGPU(PlatformInfo.getMasterGPU())); + var gpuModel = gpu.model; + if (gpuModel.length === 0) { + gpuModel = "Unknown"; + } + + text = "GPU: " + gpuModel; + } + } + + HifiStylesUit.GraphikRegular { + text: "VR Hand Controllers: " + (PlatformInfo.hasRiftControllers() ? "Rift" : (PlatformInfo.hasViveControllers() ? "Vive" : "None")) + Layout.preferredWidth: parent.width + height: paintedHeight + size: 16 + color: simplifiedUI.colors.text.white + wrapMode: Text.Wrap + } + + // This is a bit of a hack to get the name of the currently-selected audio input device + // in the current mode (Desktop or VR). The reason this is necessary is because it seems to me like + // the only way one can get a human-readable list of the audio I/O devices is by using a ListView + // and grabbing the names from the AudioScriptingInterface; you can't do it using a ListModel. + // See `AudioDevices.h`, specifically the comment above the declaration of `QVariant data()`. + ListView { + id: audioInputDevices + visible: false + property string selectedInputDeviceName + Layout.preferredWidth: parent.width + Layout.preferredHeight: contentItem.height + interactive: false + delegate: Item { + Component.onCompleted: { + if ((HMD.active && selectedHMD) || (!HMD.active && selectedDesktop)) { + audioInputDevices.selectedInputDeviceName = model.devicename + } + } + } + } + + HifiStylesUit.GraphikRegular { + text: "Audio Input: " + audioInputDevices.selectedInputDeviceName + Layout.preferredWidth: parent.width + height: paintedHeight + size: 16 + color: simplifiedUI.colors.text.white + wrapMode: Text.Wrap + } + + + // This is a bit of a hack to get the name of the currently-selected audio output device + // in the current mode (Desktop or VR). The reason this is necessary is because it seems to me like + // the only way one can get a human-readable list of the audio I/O devices is by using a ListView + // and grabbing the names from the AudioScriptingInterface; you can't do it using a ListModel. + // See `AudioDevices.h`, specifically the comment above the declaration of `QVariant data()`. + ListView { + id: audioOutputDevices + visible: false + property string selectedOutputDeviceName + Layout.preferredWidth: parent.width + Layout.preferredHeight: contentItem.height + interactive: false + delegate: Item { + Component.onCompleted: { + if ((HMD.active && selectedHMD) || (!HMD.active && selectedDesktop)) { + audioOutputDevices.selectedOutputDeviceName = model.devicename + } + } + } + } + + HifiStylesUit.GraphikRegular { + text: "Audio Output: " + audioOutputDevices.selectedOutputDeviceName + Layout.preferredWidth: parent.width + height: paintedHeight + size: 16 + color: simplifiedUI.colors.text.white + wrapMode: Text.Wrap + } + + SimplifiedControls.Button { + Layout.topMargin: 8 + width: 200 + height: 32 + text: "Copy to Clipboard" + temporaryText: "Copied!" + + onClicked: { + Window.copyToClipboard(root.buildPlatformInfoTextToCopy()); + showTemporaryText(); + } + } + } + } + + function buildPlatformInfoTextToCopy() { + var textToCopy = "**About Interface**\n"; + textToCopy += "Interface Version: " + Window.checkVersion() + "\n"; + textToCopy += "\n**Platform Info**\n"; + + var computer = JSON.parse(PlatformInfo.getComputer()); + var computerVendor = computer.vendor; + if (computerVendor.length === 0) { + computerVendor = "Unknown"; + } + var computerModel = computer.model; + if (computerModel.length === 0) { + computerModel = "Unknown"; + } + + textToCopy += "Computer Vendor/Model: " + computerVendor + "/" + computerModel + "\n"; + textToCopy += "Profiled Platform Tier: " + PlatformInfo.getTierProfiled() + "\n"; + textToCopy += "OS Type: " + PlatformInfo.getOperatingSystemType() + "\n"; + + var cpu = JSON.parse(PlatformInfo.getCPU(0)); + var cpuModel = cpu.model; + if (cpuModel.length === 0) { + cpuModel = "Unknown"; + } + + textToCopy += "CPU: " + cpuModel + "\n"; + textToCopy += "# CPUs: " + PlatformInfo.getNumCPUs() + "\n"; + textToCopy += "# CPU Cores: " + PlatformInfo.getNumLogicalCores() + "\n"; + textToCopy += "RAM: " + PlatformInfo.getTotalSystemMemoryMB() + " MB\n"; + + var gpu = JSON.parse(PlatformInfo.getGPU(PlatformInfo.getMasterGPU())); + var gpuModel = gpu.model; + if (gpuModel.length === 0) { + gpuModel = "Unknown"; + } + + textToCopy += "GPU: " + gpuModel + "\n"; + textToCopy += "VR Hand Controllers: " + (PlatformInfo.hasRiftControllers() ? "Rift" : (PlatformInfo.hasViveControllers() ? "Vive" : "None")) + "\n"; + textToCopy += "Audio Input: " + audioInputDevices.selectedInputDeviceName + "\n"; + textToCopy += "Audio Output: " + audioOutputDevices.selectedOutputDeviceName + "\n"; + + textToCopy += "\n**All Platform Info**\n"; + textToCopy += JSON.stringify(JSON.parse(PlatformInfo.getPlatform()), null, 4); + + return textToCopy; + } +} diff --git a/interface/resources/qml/hifi/simplifiedUI/helpApp/controls/ControlsTable.qml b/interface/resources/qml/hifi/simplifiedUI/helpApp/controls/ControlsTable.qml new file mode 100644 index 0000000000..f131dc88d7 --- /dev/null +++ b/interface/resources/qml/hifi/simplifiedUI/helpApp/controls/ControlsTable.qml @@ -0,0 +1,779 @@ +// +// 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: 8 + property int mainTextSize: 18 + property int subTextSize: 14 + property color separatorColor: "#CCCCCC" + Layout.preferredHeight: 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.top: controlsTableColumnLayout.top + anchors.topMargin: controlsTableRoot.height + 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 + Layout.preferredHeight: controlsTableRoot.rowHeight + + Item { + width: controlsTableRoot.column1Width + height: parent.height + + 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 + } + } + + // Spacer + Item { + width: controlsTableRoot.rowPadding + height: parent.height + } + + Row { + width: controlsTableRoot.column2Width + height: parent.height + 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 - controlsTableRoot.rowPadding + height: parent.height + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + size: controlsTableRoot.subTextSize + color: Qt.rgba(255, 255, 255, 0.5) + } + } + } + + // Bottom separator + Rectangle { + Layout.preferredWidth: parent.width + Layout.preferredHeight: 1 + color: controlsTableRoot.separatorColor + } + + + + + + Row { + Layout.preferredWidth: parent.width + Layout.preferredHeight: controlsTableRoot.rowHeight + + Item { + width: controlsTableRoot.column1Width + height: parent.height + + 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: parent.height + } + + HifiStylesUit.GraphikRegular { + text: "Walk Forward" + width: controlsTableRoot.column2Width - controlsTableRoot.rowPadding * 2 + height: parent.height + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + size: controlsTableRoot.mainTextSize + color: simplifiedUI.colors.text.white + } + } + + // Bottom separator + Rectangle { + Layout.preferredWidth: parent.width + Layout.preferredHeight: 1 + color: controlsTableRoot.separatorColor + } + + + + + + Row { + Layout.preferredWidth: parent.width + Layout.preferredHeight: controlsTableRoot.rowHeight + + Item { + width: controlsTableRoot.column1Width + height: parent.height + + 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: parent.height + } + + HifiStylesUit.GraphikRegular { + text: "Walk Backward" + width: controlsTableRoot.column2Width - controlsTableRoot.rowPadding * 2 + height: parent.height + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + size: controlsTableRoot.mainTextSize + color: simplifiedUI.colors.text.white + } + } + + // Bottom separator + Rectangle { + Layout.preferredWidth: parent.width + Layout.preferredHeight: 1 + color: controlsTableRoot.separatorColor + } + + + + + + Row { + Layout.preferredWidth: parent.width + Layout.preferredHeight: controlsTableRoot.rowHeight + + Item { + width: controlsTableRoot.column1Width + height: parent.height + + 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: parent.height + } + + HifiStylesUit.GraphikRegular { + text: "Turn Left" + width: controlsTableRoot.column2Width - controlsTableRoot.rowPadding * 2 + height: parent.height + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + size: controlsTableRoot.mainTextSize + color: simplifiedUI.colors.text.white + } + } + + // Bottom separator + Rectangle { + Layout.preferredWidth: parent.width + Layout.preferredHeight: 1 + color: controlsTableRoot.separatorColor + } + + + + + + Row { + Layout.preferredWidth: parent.width + Layout.preferredHeight: controlsTableRoot.rowHeight + + Item { + width: controlsTableRoot.column1Width + height: parent.height + + 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: parent.height + } + + HifiStylesUit.GraphikRegular { + text: "Turn Right" + width: controlsTableRoot.column2Width - controlsTableRoot.rowPadding * 2 + height: parent.height + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + size: controlsTableRoot.mainTextSize + color: simplifiedUI.colors.text.white + } + } + + // Bottom separator + Rectangle { + Layout.preferredWidth: parent.width + Layout.preferredHeight: 1 + color: controlsTableRoot.separatorColor + } + + + + + + Row { + Layout.preferredWidth: parent.width + Layout.preferredHeight: controlsTableRoot.rowHeight + + Item { + width: controlsTableRoot.column1Width + height: parent.height + + 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: parent.height + } + + HifiStylesUit.GraphikRegular { + text: "Sidestep Left" + width: controlsTableRoot.column2Width - controlsTableRoot.rowPadding * 2 + height: parent.height + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + size: controlsTableRoot.mainTextSize + color: simplifiedUI.colors.text.white + } + } + + // Bottom separator + Rectangle { + Layout.preferredWidth: parent.width + Layout.preferredHeight: 1 + color: controlsTableRoot.separatorColor + } + + + + + + Row { + Layout.preferredWidth: parent.width + Layout.preferredHeight: controlsTableRoot.rowHeight + + Item { + width: controlsTableRoot.column1Width + height: parent.height + + 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: parent.height + } + + HifiStylesUit.GraphikRegular { + text: "Sidestep Right" + width: controlsTableRoot.column2Width - controlsTableRoot.rowPadding * 2 + height: parent.height + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + size: controlsTableRoot.mainTextSize + color: simplifiedUI.colors.text.white + } + } + + // Bottom separator + Rectangle { + Layout.preferredWidth: parent.width + Layout.preferredHeight: 1 + color: controlsTableRoot.separatorColor + } + + + + + + Row { + Layout.preferredWidth: parent.width + Layout.preferredHeight: controlsTableRoot.rowHeight + + Item { + width: controlsTableRoot.column1Width + height: parent.height + + 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: parent.height + } + + Row { + width: controlsTableRoot.column2Width + height: parent.height + 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 - controlsTableRoot.rowPadding + height: parent.height + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + size: controlsTableRoot.subTextSize + color: Qt.rgba(255, 255, 255, 0.5) + } + } + } + + // Bottom separator + Rectangle { + Layout.preferredWidth: parent.width + Layout.preferredHeight: 1 + color: controlsTableRoot.separatorColor + } + + + + + + Row { + Layout.preferredWidth: parent.width + Layout.preferredHeight: controlsTableRoot.rowHeight + + Item { + width: controlsTableRoot.column1Width + height: parent.height + + 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: parent.height + } + + Row { + width: controlsTableRoot.column2Width + height: parent.height + 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 - controlsTableRoot.rowPadding + height: parent.height + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + size: controlsTableRoot.subTextSize + color: Qt.rgba(255, 255, 255, 0.5) + } + } + } + + // Bottom separator + Rectangle { + Layout.preferredWidth: parent.width + Layout.preferredHeight: 1 + color: controlsTableRoot.separatorColor + } + + + + + + Row { + Layout.preferredWidth: parent.width + Layout.preferredHeight: controlsTableRoot.rowHeight + + Item { + width: controlsTableRoot.column1Width + height: parent.height + + 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: parent.height + } + + HifiStylesUit.GraphikRegular { + text: "1st Person View" + width: controlsTableRoot.column2Width - controlsTableRoot.rowPadding * 2 + height: parent.height + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + size: controlsTableRoot.mainTextSize + color: simplifiedUI.colors.text.white + } + } + + // Bottom separator + Rectangle { + Layout.preferredWidth: parent.width + Layout.preferredHeight: 1 + color: controlsTableRoot.separatorColor + } + + + + + + Row { + Layout.preferredWidth: parent.width + Layout.preferredHeight: controlsTableRoot.rowHeight + + Item { + width: controlsTableRoot.column1Width + height: parent.height + + 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: parent.height + } + + Row { + width: controlsTableRoot.column2Width + height: parent.height + 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 - controlsTableRoot.rowPadding + height: parent.height + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + size: controlsTableRoot.subTextSize + color: Qt.rgba(255, 255, 255, 0.5) + } + } + } + + // Bottom separator + Rectangle { + Layout.preferredWidth: parent.width + Layout.preferredHeight: 1 + color: controlsTableRoot.separatorColor + } + + + + + + Row { + Layout.preferredWidth: parent.width + Layout.preferredHeight: controlsTableRoot.rowHeight + + Item { + width: controlsTableRoot.column1Width + height: parent.height + + 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: parent.height + } + + HifiStylesUit.GraphikRegular { + text: "3rd Person View" + width: controlsTableRoot.column2Width - controlsTableRoot.rowPadding * 2 + height: parent.height + horizontalAlignment: Text.AlignLeft + verticalAlignment: Text.AlignVCenter + size: controlsTableRoot.mainTextSize + color: simplifiedUI.colors.text.white + } + } + } +} \ No newline at end of file diff --git a/interface/resources/qml/hifi/simplifiedUI/helpApp/controls/HelpControls.qml b/interface/resources/qml/hifi/simplifiedUI/helpApp/controls/HelpControls.qml new file mode 100644 index 0000000000..01c5187aa5 --- /dev/null +++ b/interface/resources/qml/hifi/simplifiedUI/helpApp/controls/HelpControls.qml @@ -0,0 +1,95 @@ +// +// HelpControls.qml +// +// Created by Zach Fox on 2019-08-07 +// 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.Controls 2.3 +import "../../simplifiedConstants" as SimplifiedConstants +import "../../simplifiedControls" as SimplifiedControls +import stylesUit 1.0 as HifiStylesUit +import QtQuick.Layouts 1.3 + +Flickable { + id: root + contentWidth: parent.width + contentHeight: controlsColumnLayout.height + clip: true + + onVisibleChanged: { + if (visible) { + root.contentX = 0; + root.contentY = 0; + } + } + + SimplifiedConstants.SimplifiedConstants { + id: simplifiedUI + } + + + Image { + id: accent + source: "../images/accent1.svg" + anchors.left: parent.left + anchors.top: parent.top + width: 83 + height: 156 + transform: Scale { + xScale: -1 + origin.x: accent.width / 2 + origin.y: accent.height / 2 + } + } + + + ColumnLayout { + id: controlsColumnLayout + anchors.left: parent.left + anchors.leftMargin: 26 + anchors.right: parent.right + anchors.rightMargin: 26 + anchors.top: parent.top + spacing: 0 + + HifiStylesUit.GraphikSemiBold { + text: "HQ Controls" + Layout.preferredWidth: parent.width + Layout.topMargin: 16 + height: paintedHeight + size: 22 + color: simplifiedUI.colors.text.white + } + + HifiStylesUit.GraphikRegular { + text: "You can use the following controls to move your avatar around your HQ:" + 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: 14 + Layout.preferredWidth: 200 + height: 32 + text: "VIEW ALL CONTROLS" + temporaryText: "Viewing!" + + onClicked: { + Qt.openUrlExternally("http://docs.highfidelity.com/explore/get-started/desktop.html"); + } + } + } +} diff --git a/interface/resources/qml/hifi/simplifiedUI/helpApp/controls/images/rightClick.svg b/interface/resources/qml/hifi/simplifiedUI/helpApp/controls/images/rightClick.svg new file mode 100644 index 0000000000..6df8929a3d --- /dev/null +++ b/interface/resources/qml/hifi/simplifiedUI/helpApp/controls/images/rightClick.svg @@ -0,0 +1,15 @@ + + + + + + + + + diff --git a/interface/resources/qml/hifi/simplifiedUI/helpApp/faq/HelpFAQ.qml b/interface/resources/qml/hifi/simplifiedUI/helpApp/faq/HelpFAQ.qml new file mode 100644 index 0000000000..81edc9ff37 --- /dev/null +++ b/interface/resources/qml/hifi/simplifiedUI/helpApp/faq/HelpFAQ.qml @@ -0,0 +1,120 @@ +// +// HelpFAQ.qml +// +// Created by Zach Fox on 2019-08-08 +// 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.Controls 2.3 +import "../../simplifiedConstants" as SimplifiedConstants +import "../../simplifiedControls" as SimplifiedControls +import stylesUit 1.0 as HifiStylesUit +import QtQuick.Layouts 1.3 +import PerformanceEnums 1.0 + +Item { + id: root + width: parent.width + height: parent.height + + + SimplifiedConstants.SimplifiedConstants { + id: simplifiedUI + } + + + Image { + id: accent + source: "../images/accent3.svg" + anchors.left: parent.left + anchors.top: parent.top + width: 83 + height: 156 + transform: Scale { + xScale: -1 + origin.x: accent.width / 2 + origin.y: accent.height / 2 + } + } + + + ColumnLayout { + id: faqColumnLayout + anchors.left: parent.left + anchors.leftMargin: 26 + anchors.right: parent.right + anchors.rightMargin: 26 + anchors.top: parent.top + spacing: 0 + + HifiStylesUit.GraphikSemiBold { + text: "FAQ" + Layout.preferredWidth: parent.width + Layout.preferredHeight: paintedHeight + Layout.topMargin: 16 + size: 22 + color: simplifiedUI.colors.text.white + } + + HifiStylesUit.GraphikRegular { + text: "You can find answers to all of our frequently asked questions by clicking the button below." + Layout.preferredWidth: parent.width + Layout.preferredHeight: paintedHeight + Layout.topMargin: 8 + size: 18 + wrapMode: Text.Wrap + color: simplifiedUI.colors.text.white + } + + SimplifiedControls.Button { + Layout.topMargin: 8 + width: 200 + height: 32 + text: "VIEW FAQ" + temporaryText: "Viewing!" + + onClicked: { + Qt.openUrlExternally("https://www.highfidelity.com/knowledge"); + } + } + + HifiStylesUit.GraphikSemiBold { + text: "Having problems with your audio?" + Layout.preferredWidth: parent.width + Layout.preferredHeight: paintedHeight + Layout.topMargin: 32 + size: 16 + color: simplifiedUI.colors.text.white + } + + HifiStylesUit.GraphikRegular { + text: "Quickly check your audio configuration and make changes to resolve any audio input/output issues." + Layout.preferredWidth: parent.width + Layout.preferredHeight: paintedHeight + Layout.topMargin: 4 + size: 18 + wrapMode: Text.Wrap + color: simplifiedUI.colors.text.white + } + + SimplifiedControls.Button { + Layout.topMargin: 8 + width: 200 + height: 32 + text: "TEST YOUR AUDIO" + + onClicked: { + root.sendToScript({ + "source": "HelpApp.qml", + "method": "goToAudioSettings" + }); + } + } + } + + signal sendToScript(var message); +} diff --git a/interface/resources/qml/hifi/simplifiedUI/helpApp/images/accent1.svg b/interface/resources/qml/hifi/simplifiedUI/helpApp/images/accent1.svg new file mode 100644 index 0000000000..885edef5ac --- /dev/null +++ b/interface/resources/qml/hifi/simplifiedUI/helpApp/images/accent1.svg @@ -0,0 +1,4 @@ + + + + diff --git a/interface/resources/qml/hifi/simplifiedUI/helpApp/images/accent2.svg b/interface/resources/qml/hifi/simplifiedUI/helpApp/images/accent2.svg new file mode 100644 index 0000000000..027d9bb623 --- /dev/null +++ b/interface/resources/qml/hifi/simplifiedUI/helpApp/images/accent2.svg @@ -0,0 +1,4 @@ + + + + diff --git a/interface/resources/qml/hifi/simplifiedUI/helpApp/images/accent3.svg b/interface/resources/qml/hifi/simplifiedUI/helpApp/images/accent3.svg new file mode 100644 index 0000000000..07cc23ef1e --- /dev/null +++ b/interface/resources/qml/hifi/simplifiedUI/helpApp/images/accent3.svg @@ -0,0 +1,4 @@ + + + + diff --git a/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/InputDeviceButton.qml b/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/InputDeviceButton.qml index 15f4c42d39..c7f938b986 100644 --- a/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/InputDeviceButton.qml +++ b/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/InputDeviceButton.qml @@ -176,6 +176,7 @@ Rectangle { anchors.left: parent.left width: parent.width height: parent.parent.height + mipmap: true } ColorOverlay { diff --git a/interface/resources/qml/hifi/simplifiedUI/settingsApp/SettingsApp.qml b/interface/resources/qml/hifi/simplifiedUI/settingsApp/SettingsApp.qml index a9199ff5f1..ecc8bac2a7 100644 --- a/interface/resources/qml/hifi/simplifiedUI/settingsApp/SettingsApp.qml +++ b/interface/resources/qml/hifi/simplifiedUI/settingsApp/SettingsApp.qml @@ -49,6 +49,15 @@ Rectangle { } } + onActiveTabViewChanged: { + for (var i = 0; i < tabListModel.count; i++) { + if (tabListModel.get(i).tabViewName === activeTabView) { + tabListView.currentIndex = i; + return; + } + } + } + Component.onCompleted: { root.forceActiveFocus(); } @@ -138,7 +147,6 @@ Rectangle { MouseArea { anchors.fill: parent onClicked: { - tabListView.currentIndex = index; root.activeTabView = model.tabViewName; } } @@ -207,7 +215,24 @@ Rectangle { function fromScript(message) { + if (message.source !== "simplifiedUI.js") { + return; + } + switch (message.method) { + case "goToSettingsTab": + var tabToGoTo = message.data.settingsTab; + switch (tabToGoTo) { + case "audio": + activeTabView = "audioTabView"; + break; + + default: + console.log("A message was sent to the Settings window to change tabs, but an invalid tab was specified."); + break; + } + break; + default: console.log('SettingsApp.qml: Unrecognized message from JS'); break; diff --git a/interface/resources/qml/hifi/simplifiedUI/settingsApp/about/About.qml b/interface/resources/qml/hifi/simplifiedUI/settingsApp/about/About.qml index 632f137339..89cccb8ecd 100644 --- a/interface/resources/qml/hifi/simplifiedUI/settingsApp/about/About.qml +++ b/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: "Computer Vendor/Model:" - 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: "Profiled Platform Tier: " + 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: "OS Type: " + 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: "CPU:" - 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: "# CPUs: " + 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: "# CPU Cores: " + 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: "RAM: " + 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: "GPU: " - 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: "VR Hand Controllers: " + (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: "Audio Input: " + 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: "Audio Output: " + audioOutputDevices.selectedOutputDeviceName - Layout.maximumWidth: parent.width + Layout.preferredWidth: parent.width height: paintedHeight size: 16 color: simplifiedUI.colors.text.white diff --git a/interface/resources/qml/hifi/simplifiedUI/settingsApp/audio/Audio.qml b/interface/resources/qml/hifi/simplifiedUI/settingsApp/audio/Audio.qml index bfc0bc5200..108016ef8c 100644 --- a/interface/resources/qml/hifi/simplifiedUI/settingsApp/audio/Audio.qml +++ b/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 diff --git a/interface/resources/qml/hifi/simplifiedUI/settingsApp/dev/Dev.qml b/interface/resources/qml/hifi/simplifiedUI/settingsApp/dev/Dev.qml index fe623e5d78..4d0589c1e1 100644 --- a/interface/resources/qml/hifi/simplifiedUI/settingsApp/dev/Dev.qml +++ b/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 diff --git a/interface/resources/qml/hifi/simplifiedUI/settingsApp/general/General.qml b/interface/resources/qml/hifi/simplifiedUI/settingsApp/general/General.qml index af7e9ba4ae..a2bf26161e 100644 --- a/interface/resources/qml/hifi/simplifiedUI/settingsApp/general/General.qml +++ b/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 diff --git a/interface/resources/qml/hifi/simplifiedUI/settingsApp/vr/VR.qml b/interface/resources/qml/hifi/simplifiedUI/settingsApp/vr/VR.qml index d7e85c7f68..5f0fbe49d5 100644 --- a/interface/resources/qml/hifi/simplifiedUI/settingsApp/vr/VR.qml +++ b/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 diff --git a/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml b/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml index bc27dbad5f..88a2f46de8 100644 --- a/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml +++ b/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" diff --git a/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml b/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml index acabbe9485..d87431ea9c 100644 --- a/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml +++ b/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml @@ -245,6 +245,7 @@ Rectangle { width: outputDeviceButton.outputMuted ? 25 : 26 height: 22 visible: false + mipmap: true } ColorOverlay { @@ -319,6 +320,7 @@ Rectangle { anchors.centerIn: parent width: statusButton.currentStatus === "busy" ? 13 : 14 height: statusButton.currentStatus === "busy" ? 2 : 10 + mipmap: true } ColorOverlay { @@ -352,19 +354,20 @@ Rectangle { Item { id: hmdButtonContainer anchors.verticalCenter: parent.verticalCenter - anchors.right: settingsButtonContainer.left - anchors.rightMargin: 8 + anchors.right: helpButtonContainer.left + anchors.rightMargin: 3 width: 48 height: width visible: false Image { id: displayModeImage - source: HMD.active ? "./images/desktopMode.svg" : "./images/vrMode.svg" + source: HMD.active ? "images/desktopMode.svg" : "images/vrMode.svg" anchors.centerIn: parent width: HMD.active ? 25 : 26 height: HMD.active ? 22 : 14 visible: false + mipmap: true } ColorOverlay { @@ -417,6 +420,49 @@ Rectangle { } + Item { + id: helpButtonContainer + anchors.verticalCenter: parent.verticalCenter + anchors.right: settingsButtonContainer.left + anchors.rightMargin: 4 + width: 36 + height: width + + Image { + id: helpButtonImage + source: "images/questionMark.svg" + anchors.centerIn: parent + width: 13 + height: 22 + visible: false + mipmap: true + } + + ColorOverlay { + opacity: helpButtonMouseArea.containsMouse ? 1.0 : 0.7 + anchors.fill: helpButtonImage + source: helpButtonImage + color: simplifiedUI.colors.text.white + } + + MouseArea { + id: helpButtonMouseArea + anchors.fill: parent + hoverEnabled: true + onEntered: { + Tablet.playSound(TabletEnums.ButtonHover); + } + onClicked: { + Tablet.playSound(TabletEnums.ButtonClick); + sendToScript({ + "source": "SimplifiedTopBar.qml", + "method": "toggleHelpApp" + }); + } + } + } + + Item { id: settingsButtonContainer @@ -428,11 +474,12 @@ Rectangle { Image { id: settingsButtonImage - source: "./images/settings.svg" + source: "images/settings.svg" anchors.centerIn: parent width: 22 height: 22 visible: false + mipmap: true } ColorOverlay { diff --git a/interface/resources/qml/hifi/simplifiedUI/topBar/images/questionMark.svg b/interface/resources/qml/hifi/simplifiedUI/topBar/images/questionMark.svg new file mode 100644 index 0000000000..eec3edb1c6 --- /dev/null +++ b/interface/resources/qml/hifi/simplifiedUI/topBar/images/questionMark.svg @@ -0,0 +1,11 @@ + + + + + + + diff --git a/scripts/simplifiedUI/ui/simplifiedUI.js b/scripts/simplifiedUI/ui/simplifiedUI.js index fb7f2824d6..586632f2b3 100644 --- a/scripts/simplifiedUI/ui/simplifiedUI.js +++ b/scripts/simplifiedUI/ui/simplifiedUI.js @@ -187,6 +187,89 @@ function toggleSettingsApp() { settingsAppWindow.closed.connect(onSettingsAppClosed); } + +function handleGoToAudioSettings() { + if (!settingsAppWindow) { + toggleSettingsApp(); + } + + settingsAppWindow.sendToQml({ + "source": "simplifiedUI.js", + "method": "goToSettingsTab", + "data": { + "settingsTab": "audio" + } + }); +} + + +var HELP_APP_MESSAGE_SOURCE = "HelpApp.qml"; +function onMessageFromHelpApp(message) { + if (message.source !== HELP_APP_MESSAGE_SOURCE) { + return; + } + + switch (message.method) { + case "goToAudioSettings": + handleGoToAudioSettings(); + break; + + default: + console.log("Unrecognized message from " + HELP_APP_MESSAGE_SOURCE + ": " + JSON.stringify(message)); + break; + } +} + + +function onHelpAppClosed() { + if (helpAppWindow) { + helpAppWindow.fromQml.disconnect(onMessageFromHelpApp); + helpAppWindow.closed.disconnect(onHelpAppClosed); + } + helpAppWindow = false; +} + + +var HELP_APP_QML_PATH = Script.resourcesPath() + "qml/hifi/simplifiedUI/helpApp/HelpApp.qml"; +var HELP_APP_WINDOW_TITLE = "Help"; +var HELP_APP_PRESENTATION_MODE = Desktop.PresentationMode.NATIVE; +var HELP_APP_WIDTH_PX = 480; +var HELP_APP_HEIGHT_PX = 615; +var HELP_APP_WINDOW_FLAGS = 0x00000001 | // Qt::Window + 0x00001000 | // Qt::WindowTitleHint + 0x00002000 | // Qt::WindowSystemMenuHint + 0x08000000 | // Qt::WindowCloseButtonHint + 0x00008000 | // Qt::WindowMaximizeButtonHint + 0x00004000; // Qt::WindowMinimizeButtonHint +var helpAppWindow = false; +function toggleHelpApp() { + if (helpAppWindow) { + helpAppWindow.close(); + // This really shouldn't be necessary. + // This signal really should automatically be called by the signal handler set up below. + // But fixing that requires an engine change, so this workaround will do. + onHelpAppClosed(); + return; + } + + helpAppWindow = Desktop.createWindow(HELP_APP_QML_PATH, { + title: HELP_APP_WINDOW_TITLE, + presentationMode: HELP_APP_PRESENTATION_MODE, + size: { + x: HELP_APP_WIDTH_PX, + y: HELP_APP_HEIGHT_PX + }, + position: { + x: Math.max(Window.x + POPOUT_SAFE_MARGIN_X, Window.x + Window.innerWidth / 2 - HELP_APP_WIDTH_PX / 2), + y: Math.max(Window.y + POPOUT_SAFE_MARGIN_Y, Window.y + Window.innerHeight / 2 - HELP_APP_HEIGHT_PX / 2) + }, + overrideFlags: HELP_APP_WINDOW_FLAGS + }); + + helpAppWindow.fromQml.connect(onMessageFromHelpApp); + helpAppWindow.closed.connect(onHelpAppClosed); +} + function updateEmoteAppBarPosition() { if (!emoteAppBarWindow) { return; @@ -374,6 +457,10 @@ function onMessageFromTopBar(message) { toggleSettingsApp(); break; + case "toggleHelpApp": + toggleHelpApp(); + break; + case "setOutputMuted": setOutputMuted(message.data.outputMuted); break;