adding changes to design + truly separating muted/ptt

This commit is contained in:
Wayne Chen 2019-03-25 15:35:05 -07:00
parent 9a8c5e5a54
commit 49ce30d536
6 changed files with 59 additions and 38 deletions

View file

@ -24,6 +24,7 @@ CheckBox {
leftPadding: 0 leftPadding: 0
property int colorScheme: hifi.colorSchemes.light property int colorScheme: hifi.colorSchemes.light
property string color: hifi.colors.lightGrayText property string color: hifi.colors.lightGrayText
property int fontSize: hifi.fontSizes.inputLabel
readonly property bool isLightColorScheme: colorScheme === hifi.colorSchemes.light readonly property bool isLightColorScheme: colorScheme === hifi.colorSchemes.light
property bool isRedCheck: false property bool isRedCheck: false
property bool isRound: false property bool isRound: false
@ -109,7 +110,7 @@ CheckBox {
contentItem: Text { contentItem: Text {
id: root id: root
font.pixelSize: hifi.fontSizes.inputLabel font.pixelSize: fontSize;
font.family: "Raleway" font.family: "Raleway"
font.weight: Font.DemiBold font.weight: Font.DemiBold
text: checkBox.text text: checkBox.text

View file

@ -21,6 +21,7 @@ Item {
property int switchWidth: 70; property int switchWidth: 70;
readonly property int switchRadius: height/2; readonly property int switchRadius: height/2;
property string labelTextOff: ""; property string labelTextOff: "";
property int labelTextSize: hifi.fontSizes.inputLabel;
property string labelGlyphOffText: ""; property string labelGlyphOffText: "";
property int labelGlyphOffSize: 32; property int labelGlyphOffSize: 32;
property string labelTextOn: ""; property string labelTextOn: "";
@ -89,7 +90,7 @@ Item {
RalewaySemiBold { RalewaySemiBold {
id: labelOff; id: labelOff;
text: labelTextOff; text: labelTextOff;
size: hifi.fontSizes.inputLabel; size: labelTextSize;
color: originalSwitch.checked ? hifi.colors.lightGrayText : "#FFFFFF"; color: originalSwitch.checked ? hifi.colors.lightGrayText : "#FFFFFF";
anchors.top: parent.top; anchors.top: parent.top;
anchors.right: parent.right; anchors.right: parent.right;
@ -130,7 +131,7 @@ Item {
RalewaySemiBold { RalewaySemiBold {
id: labelOn; id: labelOn;
text: labelTextOn; text: labelTextOn;
size: hifi.fontSizes.inputLabel; size: labelTextSize;
color: originalSwitch.checked ? "#FFFFFF" : hifi.colors.lightGrayText; color: originalSwitch.checked ? "#FFFFFF" : hifi.colors.lightGrayText;
anchors.top: parent.top; anchors.top: parent.top;
anchors.left: parent.left; anchors.left: parent.left;

View file

@ -31,6 +31,8 @@ Rectangle {
property string title: "Audio Settings" property string title: "Audio Settings"
property int switchHeight: 16 property int switchHeight: 16
property int switchWidth: 40 property int switchWidth: 40
property bool pushToTalk: (bar.currentIndex === 0) ? AudioScriptingInterface.pushToTalkDesktop : AudioScriptingInterface.pushToTalkHMD;
property bool muted: (bar.currentIndex === 0) ? AudioScriptingInterface.desktopMuted : AudioScriptingInterface.hmdMuted;
readonly property real verticalScrollWidth: 10 readonly property real verticalScrollWidth: 10
readonly property real verticalScrollShaft: 8 readonly property real verticalScrollShaft: 8
signal sendToScript(var message); signal sendToScript(var message);
@ -44,7 +46,7 @@ Rectangle {
property bool isVR: AudioScriptingInterface.context === "VR" property bool isVR: AudioScriptingInterface.context === "VR"
property real rightMostInputLevelPos: 440 property real rightMostInputLevelPos: root.width
//placeholder for control sizes and paddings //placeholder for control sizes and paddings
//recalculates dynamically in case of UI size is changed //recalculates dynamically in case of UI size is changed
QtObject { QtObject {
@ -92,7 +94,9 @@ Rectangle {
} }
} }
Component.onCompleted: enablePeakValues(); Component.onCompleted: {
enablePeakValues();
}
Flickable { Flickable {
id: flickView; id: flickView;
@ -167,15 +171,25 @@ Rectangle {
height: root.switchHeight; height: root.switchHeight;
switchWidth: root.switchWidth; switchWidth: root.switchWidth;
labelTextOn: "Mute microphone"; labelTextOn: "Mute microphone";
labelTextSize: 16;
backgroundOnColor: "#E3E3E3"; backgroundOnColor: "#E3E3E3";
checked: AudioScriptingInterface.muted; checked: muted;
onClicked: { onClicked: {
if (AudioScriptingInterface.pushToTalk && !checked) { if (pushToTalk && !checked) {
// disable push to talk if unmuting // disable push to talk if unmuting
AudioScriptingInterface.pushToTalk = false; if ((bar.currentIndex === 0)) {
AudioScriptingInterface.pushToTalkDesktop = false;
}
else {
AudioScriptingInterface.pushToTalkHMD = false;
}
}
if ((bar.currentIndex === 0)) {
AudioScriptingInterface.desktopMuted = checked;
}
else {
AudioScriptingInterface.hmdMuted = checked;
} }
AudioScriptingInterface.muted = checked;
checked = Qt.binding(function() { return AudioScriptingInterface.muted; }); // restore binding
} }
} }
@ -187,6 +201,7 @@ Rectangle {
anchors.topMargin: 24 anchors.topMargin: 24
anchors.left: parent.left anchors.left: parent.left
labelTextOn: "Noise Reduction"; labelTextOn: "Noise Reduction";
labelTextSize: 16;
backgroundOnColor: "#E3E3E3"; backgroundOnColor: "#E3E3E3";
checked: AudioScriptingInterface.noiseReduction; checked: AudioScriptingInterface.noiseReduction;
onCheckedChanged: { onCheckedChanged: {
@ -203,6 +218,7 @@ Rectangle {
anchors.topMargin: 24 anchors.topMargin: 24
anchors.left: parent.left anchors.left: parent.left
labelTextOn: qsTr("Push To Talk (T)"); labelTextOn: qsTr("Push To Talk (T)");
labelTextSize: 16;
backgroundOnColor: "#E3E3E3"; backgroundOnColor: "#E3E3E3";
checked: (bar.currentIndex === 0) ? AudioScriptingInterface.pushToTalkDesktop : AudioScriptingInterface.pushToTalkHMD; checked: (bar.currentIndex === 0) ? AudioScriptingInterface.pushToTalkDesktop : AudioScriptingInterface.pushToTalkHMD;
onCheckedChanged: { onCheckedChanged: {
@ -211,13 +227,6 @@ Rectangle {
} else { } else {
AudioScriptingInterface.pushToTalkHMD = checked; AudioScriptingInterface.pushToTalkHMD = checked;
} }
checked = Qt.binding(function() {
if (bar.currentIndex === 0) {
return AudioScriptingInterface.pushToTalkDesktop;
} else {
return AudioScriptingInterface.pushToTalkHMD;
}
}); // restore binding
} }
} }
} }
@ -235,6 +244,7 @@ Rectangle {
anchors.top: parent.top anchors.top: parent.top
anchors.left: parent.left anchors.left: parent.left
labelTextOn: qsTr("Warn when muted"); labelTextOn: qsTr("Warn when muted");
labelTextSize: 16;
backgroundOnColor: "#E3E3E3"; backgroundOnColor: "#E3E3E3";
checked: AudioScriptingInterface.warnWhenMuted; checked: AudioScriptingInterface.warnWhenMuted;
onClicked: { onClicked: {
@ -252,6 +262,7 @@ Rectangle {
anchors.topMargin: 24 anchors.topMargin: 24
anchors.left: parent.left anchors.left: parent.left
labelTextOn: qsTr("Audio Level Meter"); labelTextOn: qsTr("Audio Level Meter");
labelTextSize: 16;
backgroundOnColor: "#E3E3E3"; backgroundOnColor: "#E3E3E3";
checked: AvatarInputs.showAudioTools; checked: AvatarInputs.showAudioTools;
onCheckedChanged: { onCheckedChanged: {
@ -268,6 +279,7 @@ Rectangle {
anchors.topMargin: 24 anchors.topMargin: 24
anchors.left: parent.left anchors.left: parent.left
labelTextOn: qsTr("Stereo input"); labelTextOn: qsTr("Stereo input");
labelTextSize: 16;
backgroundOnColor: "#E3E3E3"; backgroundOnColor: "#E3E3E3";
checked: AudioScriptingInterface.isStereoInput; checked: AudioScriptingInterface.isStereoInput;
onCheckedChanged: { onCheckedChanged: {
@ -281,6 +293,7 @@ Rectangle {
Item { Item {
id: pttTextContainer id: pttTextContainer
visible: pushToTalk;
anchors.top: switchesContainer.bottom; anchors.top: switchesContainer.bottom;
anchors.topMargin: 10; anchors.topMargin: 10;
anchors.left: parent.left; anchors.left: parent.left;
@ -303,7 +316,7 @@ Rectangle {
Separator { Separator {
id: secondSeparator; id: secondSeparator;
anchors.top: pttTextContainer.bottom; anchors.top: pttTextContainer.visible ? pttTextContainer.bottom : switchesContainer.bottom;
anchors.topMargin: 10; anchors.topMargin: 10;
} }
@ -330,7 +343,7 @@ Rectangle {
width: margins.sizeText + margins.sizeLevel; width: margins.sizeText + margins.sizeLevel;
anchors.left: parent.left; anchors.left: parent.left;
anchors.leftMargin: margins.sizeCheckBox; anchors.leftMargin: margins.sizeCheckBox;
size: 16; size: 22;
color: hifi.colors.white; color: hifi.colors.white;
text: qsTr("Choose input device"); text: qsTr("Choose input device");
} }
@ -338,7 +351,7 @@ Rectangle {
ListView { ListView {
id: inputView; id: inputView;
width: parent.width - margins.paddings*2; width: rightMostInputLevelPos;
anchors.top: inputDeviceHeader.bottom; anchors.top: inputDeviceHeader.bottom;
anchors.topMargin: 10; anchors.topMargin: 10;
x: margins.paddings x: margins.paddings
@ -347,7 +360,7 @@ Rectangle {
clip: true; clip: true;
model: AudioScriptingInterface.devices.input; model: AudioScriptingInterface.devices.input;
delegate: Item { delegate: Item {
width: rightMostInputLevelPos width: rightMostInputLevelPos - margins.paddings*2
height: margins.sizeCheckBox > checkBoxInput.implicitHeight ? height: margins.sizeCheckBox > checkBoxInput.implicitHeight ?
margins.sizeCheckBox : checkBoxInput.implicitHeight margins.sizeCheckBox : checkBoxInput.implicitHeight
@ -363,6 +376,7 @@ Rectangle {
boxSize: margins.sizeCheckBox / 2 boxSize: margins.sizeCheckBox / 2
isRound: true isRound: true
text: devicename text: devicename
fontSize: 16;
onPressed: { onPressed: {
if (!checked) { if (!checked) {
stereoInput.checked = false; stereoInput.checked = false;
@ -395,7 +409,7 @@ Rectangle {
Separator { Separator {
id: thirdSeparator; id: thirdSeparator;
anchors.top: loopbackAudio.bottom; anchors.top: loopbackAudio.visible ? loopbackAudio.bottom : inputView.bottom;
anchors.topMargin: 10; anchors.topMargin: 10;
} }
@ -422,7 +436,7 @@ Rectangle {
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: margins.sizeCheckBox anchors.leftMargin: margins.sizeCheckBox
anchors.verticalCenter: parent.verticalCenter; anchors.verticalCenter: parent.verticalCenter;
size: 16; size: 22;
color: hifi.colors.white; color: hifi.colors.white;
text: qsTr("Choose output device"); text: qsTr("Choose output device");
} }
@ -452,6 +466,7 @@ Rectangle {
checked: bar.currentIndex === 0 ? selectedDesktop : selectedHMD; checked: bar.currentIndex === 0 ? selectedDesktop : selectedHMD;
checkable: !checked checkable: !checked
text: devicename text: devicename
fontSize: 16
onPressed: { onPressed: {
if (!checked) { if (!checked) {
AudioScriptingInterface.setOutputDevice(info, bar.currentIndex === 1); AudioScriptingInterface.setOutputDevice(info, bar.currentIndex === 1);
@ -514,7 +529,7 @@ Rectangle {
RalewayRegular { RalewayRegular {
// The slider for my card is special, it controls the master gain // The slider for my card is special, it controls the master gain
id: gainSliderText; id: gainSliderText;
text: "Avatar volume"; text: "People volume";
size: 16; size: 16;
anchors.left: parent.left; anchors.left: parent.left;
color: hifi.colors.white; color: hifi.colors.white;

View file

@ -12,24 +12,26 @@
import QtQuick 2.5 import QtQuick 2.5
import QtGraphicalEffects 1.0 import QtGraphicalEffects 1.0
Rectangle { Item {
property var peak; property var peak;
width: 70; width: 70;
height: 8; height: 8;
color: "transparent"; QtObject {
Item {
id: colors; id: colors;
readonly property string unmuted: "#FFF";
readonly property string muted: "#E2334D"; readonly property string muted: "#E2334D";
readonly property string gutter: "#575757"; readonly property string gutter: "#575757";
readonly property string greenStart: "#39A38F"; readonly property string greenStart: "#39A38F";
readonly property string greenEnd: "#1FC6A6"; readonly property string greenEnd: "#1FC6A6";
readonly property string yellow: "#C0C000";
readonly property string red: colors.muted; readonly property string red: colors.muted;
readonly property string fill: "#55000000";
} }
Text { Text {
id: status; id: status;
@ -79,23 +81,19 @@ Rectangle {
anchors { fill: mask } anchors { fill: mask }
source: mask source: mask
start: Qt.point(0, 0); start: Qt.point(0, 0);
end: Qt.point(70, 0); end: Qt.point(bar.width, 0);
gradient: Gradient { gradient: Gradient {
GradientStop { GradientStop {
position: 0; position: 0;
color: colors.greenStart; color: colors.greenStart;
} }
GradientStop { GradientStop {
position: 0.8; position: 0.5;
color: colors.greenEnd; color: colors.greenEnd;
} }
GradientStop {
position: 0.801;
color: colors.red;
}
GradientStop { GradientStop {
position: 1; position: 1;
color: colors.red; color: colors.yellow;
} }
} }
} }

View file

@ -44,8 +44,11 @@ RowLayout {
} }
HifiControlsUit.Button { HifiControlsUit.Button {
text: audioLoopedBack ? qsTr("STOP TESTING YOUR VOICE") : qsTr("TEST YOUR VOICE"); text: audioLoopedBack ? qsTr("STOP TESTING VOICE") : qsTr("TEST YOUR VOICE");
color: audioLoopedBack ? hifi.buttons.red : hifi.buttons.blue; color: audioLoopedBack ? hifi.buttons.red : hifi.buttons.blue;
fontSize: 15;
width: 200;
height: 32;
onClicked: { onClicked: {
if (audioLoopedBack) { if (audioLoopedBack) {
loopbackTimer.stop(); loopbackTimer.stop();
@ -59,7 +62,7 @@ RowLayout {
RalewayRegular { RalewayRegular {
Layout.leftMargin: 2; Layout.leftMargin: 2;
size: 14; size: 18;
color: "white"; color: "white";
font.italic: true font.italic: true
text: audioLoopedBack ? qsTr("Speak in your input") : ""; text: audioLoopedBack ? qsTr("Speak in your input") : "";

View file

@ -59,11 +59,14 @@ RowLayout {
text: isPlaying ? qsTr("STOP TESTING YOUR SOUND") : qsTr("TEST YOUR SOUND"); text: isPlaying ? qsTr("STOP TESTING YOUR SOUND") : qsTr("TEST YOUR SOUND");
color: isPlaying ? hifi.buttons.red : hifi.buttons.blue; color: isPlaying ? hifi.buttons.red : hifi.buttons.blue;
onClicked: isPlaying ? stopSound() : playSound(); onClicked: isPlaying ? stopSound() : playSound();
fontSize: 15;
width: 200;
height: 32;
} }
RalewayRegular { RalewayRegular {
Layout.leftMargin: 2; Layout.leftMargin: 2;
size: 14; size: 18;
color: "white"; color: "white";
font.italic: true font.italic: true
text: isPlaying ? qsTr("Listen to your output") : ""; text: isPlaying ? qsTr("Listen to your output") : "";