diff --git a/interface/resources/qml/controlsUit/Switch.qml b/interface/resources/qml/controlsUit/Switch.qml index 0961ef2500..0de95a7e70 100644 --- a/interface/resources/qml/controlsUit/Switch.qml +++ b/interface/resources/qml/controlsUit/Switch.qml @@ -27,6 +27,7 @@ Item { property string labelGlyphOnText: ""; property int labelGlyphOnSize: 32; property alias checked: originalSwitch.checked; + property string backgroundOnColor: "#252525"; signal onCheckedChanged; signal clicked; @@ -54,7 +55,7 @@ Item { } background: Rectangle { - color: "#252525"; + color: checked ? backgroundOnColor : "#252525"; implicitWidth: rootSwitch.switchWidth; implicitHeight: rootSwitch.height; radius: rootSwitch.switchRadius; diff --git a/interface/resources/qml/hifi/audio/Audio.qml b/interface/resources/qml/hifi/audio/Audio.qml index bcbd253e24..fc0c4d2d43 100644 --- a/interface/resources/qml/hifi/audio/Audio.qml +++ b/interface/resources/qml/hifi/audio/Audio.qml @@ -16,7 +16,7 @@ import QtQuick.Controls 2.2 import QtQuick.Layouts 1.3 import stylesUit 1.0 -import controlsUit 1.0 as HifiControls +import controlsUit 1.0 as HifiControlsUit import "../../windows" import "./" as AudioControls @@ -27,6 +27,8 @@ Rectangle { property var eventBridge; property string title: "Audio Settings" + property int switchHeight: 16 + property int switchWidth: 40 signal sendToScript(var message); color: hifi.colors.baseGray; @@ -38,7 +40,7 @@ Rectangle { property bool isVR: AudioScriptingInterface.context === "VR" - property real rightMostInputLevelPos: 0 + property real rightMostInputLevelPos: 450 //placeholder for control sizes and paddings //recalculates dynamically in case of UI size is changed QtObject { @@ -98,58 +100,68 @@ Rectangle { Separator { } - ColumnLayout { - x: margins.paddings; - spacing: 16; + RowLayout { + x: 2 * margins.paddings; + spacing: columnOne.width; width: parent.width; // mute is in its own row - RowLayout { - spacing: (margins.sizeCheckBox - 10.5) * 3; - AudioControls.CheckBox { - id: muteMic - text: qsTr("Mute microphone"); - spacing: margins.sizeCheckBox - boxSize - isRedCheck: true; + ColumnLayout { + id: columnOne + spacing: 12; + x: margins.paddings + HifiControlsUit.Switch { + id: muteMic; + height: root.switchHeight; + switchWidth: root.switchWidth; + labelTextOn: "Mute microphone"; + backgroundOnColor: "#E3E3E3"; checked: AudioScriptingInterface.muted; - onClicked: { + onCheckedChanged: { AudioScriptingInterface.muted = checked; checked = Qt.binding(function() { return AudioScriptingInterface.muted; }); // restore binding } } - AudioControls.CheckBox { - id: stereoMic - spacing: muteMic.spacing; - text: qsTr("Enable stereo input"); + HifiControlsUit.Switch { + id: stereoInput; + height: root.switchHeight; + switchWidth: root.switchWidth; + labelTextOn: qsTr("Stereo input"); + backgroundOnColor: "#E3E3E3"; checked: AudioScriptingInterface.isStereoInput; - onClicked: { + onCheckedChanged: { AudioScriptingInterface.isStereoInput = checked; checked = Qt.binding(function() { return AudioScriptingInterface.isStereoInput; }); // restore binding } } } - RowLayout { - spacing: muteMic.spacing*2; //make it visually distinguish - AudioControls.CheckBox { - spacing: muteMic.spacing - text: qsTr("Enable noise reduction"); + ColumnLayout { + spacing: 12; + HifiControlsUit.Switch { + height: root.switchHeight; + switchWidth: root.switchWidth; + labelTextOn: "Noise Reduction"; + backgroundOnColor: "#E3E3E3"; checked: AudioScriptingInterface.noiseReduction; - onClicked: { + onCheckedChanged: { AudioScriptingInterface.noiseReduction = checked; checked = Qt.binding(function() { return AudioScriptingInterface.noiseReduction; }); // restore binding } } - AudioControls.CheckBox { - spacing: muteMic.spacing - text: qsTr("Show audio level meter"); + + HifiControlsUit.Switch { + id: audioLevelSwitch + height: root.switchHeight; + switchWidth: root.switchWidth; + labelTextOn: qsTr("Audio Level Meter"); + backgroundOnColor: "#E3E3E3"; checked: AvatarInputs.showAudioTools; - onClicked: { + onCheckedChanged: { AvatarInputs.showAudioTools = checked; checked = Qt.binding(function() { return AvatarInputs.showAudioTools; }); // restore binding } - onXChanged: rightMostInputLevelPos = x + width } } } @@ -203,7 +215,7 @@ Rectangle { width: parent.width - inputLevel.width clip: true checkable: !checked - checked: bar.currentIndex === 0 ? selectedDesktop : selectedHMD; + checked: bar.currentIndex === 0 ? selectedDesktop : selectedHMD; boxSize: margins.sizeCheckBox / 2 isRound: true text: devicename @@ -215,7 +227,7 @@ Rectangle { } } } - InputPeak { + AudioControls.InputPeak { id: inputLevel anchors.right: parent.right peak: model.peak; @@ -225,8 +237,11 @@ Rectangle { AudioScriptingInterface.devices.input.peakValuesAvailable; } } + Component.onCompleted: { + console.log("width " + rightMostInputLevelPos); + } } - LoopbackAudio { + AudioControls.LoopbackAudio { x: margins.paddings visible: (bar.currentIndex === 1 && isVR) || @@ -293,7 +308,7 @@ Rectangle { } } } - PlaySampleSound { + AudioControls.PlaySampleSound { x: margins.paddings visible: (bar.currentIndex === 1 && isVR) || diff --git a/interface/resources/qml/hifi/audio/LoopbackAudio.qml b/interface/resources/qml/hifi/audio/LoopbackAudio.qml index ed416656b0..8ec0ffc496 100644 --- a/interface/resources/qml/hifi/audio/LoopbackAudio.qml +++ b/interface/resources/qml/hifi/audio/LoopbackAudio.qml @@ -14,7 +14,7 @@ import QtQuick.Controls 2.2 import QtQuick.Layouts 1.3 import stylesUit 1.0 -import controlsUit 1.0 as HifiControls +import controlsUit 1.0 as HifiControlsUit RowLayout { property bool audioLoopedBack: AudioScriptingInterface.getServerEcho(); @@ -43,29 +43,9 @@ RowLayout { } } - Button { - id: control - background: Rectangle { - implicitWidth: 20; - implicitHeight: 20; - radius: hifi.buttons.radius; - gradient: Gradient { - GradientStop { - position: 0.2; - color: audioLoopedBack ? hifi.buttons.colorStart[hifi.buttons.blue] : "#FFFFFF"; - } - GradientStop { - position: 1.0; - color: audioLoopedBack ? hifi.buttons.colorFinish[hifi.buttons.blue] : "#AFAFAF"; - } - } - } - contentItem: HiFiGlyphs { - size: 14; - color: (control.pressed || control.hovered) ? (audioLoopedBack ? "black" : hifi.colors.primaryHighlight) : "#404040"; - text: audioLoopedBack ? hifi.glyphs.stop_square : hifi.glyphs.mic; - } - + HifiControlsUit.Button { + text: audioLoopedBack ? qsTr("STOP TESTING YOUR VOICE") : qsTr("TEST YOUR VOICE"); + color: audioLoopedBack ? hifi.buttons.red : hifi.buttons.blue; onClicked: { if (audioLoopedBack) { loopbackTimer.stop(); @@ -81,6 +61,7 @@ RowLayout { Layout.leftMargin: 2; size: 14; color: "white"; - text: audioLoopedBack ? qsTr("Stop testing your voice") : qsTr("Test your voice"); + font.italic: true + text: audioLoopedBack ? qsTr("Speak in your input") : ""; } } diff --git a/interface/resources/qml/hifi/audio/PlaySampleSound.qml b/interface/resources/qml/hifi/audio/PlaySampleSound.qml index 9889d2c6ca..b9d9727dab 100644 --- a/interface/resources/qml/hifi/audio/PlaySampleSound.qml +++ b/interface/resources/qml/hifi/audio/PlaySampleSound.qml @@ -14,7 +14,7 @@ import QtQuick.Controls 2.2 import QtQuick.Layouts 1.3 import stylesUit 1.0 -import controlsUit 1.0 as HifiControls +import controlsUit 1.0 as HifiControlsUit RowLayout { property var sound: null; @@ -55,32 +55,9 @@ RowLayout { HifiConstants { id: hifi; } - Button { - id: control - background: Rectangle { - implicitWidth: 20; - implicitHeight: 20; - radius: hifi.buttons.radius; - gradient: Gradient { - GradientStop { - position: 0.2; - color: isPlaying ? hifi.buttons.colorStart[hifi.buttons.blue] : "#FFFFFF"; - } - GradientStop { - position: 1.0; - color: isPlaying ? hifi.buttons.colorFinish[hifi.buttons.blue] : "#AFAFAF"; - } - } - } - contentItem: HiFiGlyphs { - // absolutely position due to asymmetry in glyph -// x: isPlaying ? 0 : 1; -// y: 1; - size: 14; - color: (control.pressed || control.hovered) ? (isPlaying ? "black" : hifi.colors.primaryHighlight) : "#404040"; - text: isPlaying ? hifi.glyphs.stop_square : hifi.glyphs.playback_play; - } - + HifiControlsUit.Button { + text: isPlaying ? qsTr("STOP TESTING YOUR SOUND") : qsTr("TEST YOUR SOUND"); + color: isPlaying ? hifi.buttons.red : hifi.buttons.blue; onClicked: isPlaying ? stopSound() : playSound(); } @@ -88,7 +65,7 @@ RowLayout { Layout.leftMargin: 2; size: 14; color: "white"; - text: isPlaying ? qsTr("Stop sample sound") : qsTr("Play sample sound"); + font.italic: true + text: isPlaying ? qsTr("Listen to your output") : ""; } - }