Mirrors/overte-Armored-Dragon
3
0
Fork 0
mirror of https://github.com/Armored-Dragon/overte.git synced 2025-03-11 16:13:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

adding scrolling in audio settings window

Browse source
This commit is contained in:
Wayne Chen 2019-03-13 17:03:53 -07:00
parent 28b8f1a62c
commit a3dfd09e26
2 changed files with 133 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

165
interface/resources/qml/hifi/audio/Audio.qml
View file

@ -11,7 +11,7 @@
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
// //
import QtQuick 2.7 import QtQuick 2.10
import QtQuick.Controls 2.2 import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3 import QtQuick.Layouts 1.3
@ -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
readonly property real verticalScrollWidth: 10
readonly property real verticalScrollShaft: 8
signal sendToScript(var message); signal sendToScript(var message);
color: hifi.colors.baseGray; color: hifi.colors.baseGray;
@ -42,7 +44,7 @@ Rectangle {
property bool isVR: AudioScriptingInterface.context === "VR" property bool isVR: AudioScriptingInterface.context === "VR"
property real rightMostInputLevelPos: 450 property real rightMostInputLevelPos: 440
//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 {
@ -60,8 +62,8 @@ Rectangle {
id: bar id: bar
spacing: 0 spacing: 0
width: parent.width width: parent.width
height: 42 height: 28;
currentIndex: isVR ? 1 : 0 currentIndex: isVR ? 1 : 0;
AudioControls.AudioTabButton { AudioControls.AudioTabButton {
height: parent.height height: parent.height
@ -92,25 +94,74 @@ Rectangle {
Component.onCompleted: enablePeakValues(); Component.onCompleted: enablePeakValues();
Column { Flickable {
id: column id: flickView;
spacing: 12; anchors.top: bar.bottom;
anchors.top: bar.bottom anchors.left: parent.left;
anchors.bottom: parent.bottom anchors.bottom: parent.bottom;
anchors.bottomMargin: 5
width: parent.width; width: parent.width;
contentWidth: parent.width;
contentHeight: contentItem.childrenRect.height;
boundsBehavior: Flickable.DragOverBounds;
flickableDirection: Flickable.VerticalFlick;
property bool isScrolling: (contentHeight - height) > 10 ? true : false;
clip: true;
Separator { } ScrollBar.vertical: ScrollBar {
policy: flickView.isScrolling ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff;
parent: flickView.parent;
anchors.top: flickView.top;
anchors.right: flickView.right;
anchors.bottom: flickView.bottom;
anchors.rightMargin: -verticalScrollWidth; //compensate flickView's right margin
background: Item {
implicitWidth: verticalScrollWidth;
Rectangle {
color: hifi.colors.darkGray30;
radius: 4;
anchors {
fill: parent;
topMargin: -1; // Finesse size
bottomMargin: -2;
}
}
}
contentItem: Item {
implicitWidth: verticalScrollShaft;
Rectangle {
radius: verticalScrollShaft/2;
color: hifi.colors.white30;
anchors {
fill: parent;
leftMargin: 2; // Finesse size and position.
topMargin: 1;
bottomMargin: 1;
}
}
}
}
RowLayout { Separator {
id: firstSeparator;
anchors.top: parent.top;
}
Item {
id: switchesContainer;
x: 2 * margins.paddings; x: 2 * margins.paddings;
width: parent.width; width: parent.width;
// switch heights + 2 * top margins
height: (root.switchHeight) * 3 + 48;
anchors.top: firstSeparator.bottom;
anchors.topMargin: 10;
// mute is in its own row // mute is in its own row
ColumnLayout { Item {
id: columnOne id: switchContainer;
spacing: 24; x: margins.paddings;
x: margins.paddings width: parent.width / 2;
height: parent.height;
anchors.left: parent.left;
HifiControlsUit.Switch { HifiControlsUit.Switch {
id: muteMic; id: muteMic;
height: root.switchHeight; height: root.switchHeight;
@ -129,8 +180,12 @@ Rectangle {
} }
HifiControlsUit.Switch { HifiControlsUit.Switch {
id: noiseReductionSwitch;
height: root.switchHeight; height: root.switchHeight;
switchWidth: root.switchWidth; switchWidth: root.switchWidth;
anchors.top: muteMic.bottom;
anchors.topMargin: 24
anchors.left: parent.left
labelTextOn: "Noise Reduction"; labelTextOn: "Noise Reduction";
backgroundOnColor: "#E3E3E3"; backgroundOnColor: "#E3E3E3";
checked: AudioScriptingInterface.noiseReduction; checked: AudioScriptingInterface.noiseReduction;
@ -144,6 +199,9 @@ Rectangle {
id: pttSwitch id: pttSwitch
height: root.switchHeight; height: root.switchHeight;
switchWidth: root.switchWidth; switchWidth: root.switchWidth;
anchors.top: noiseReductionSwitch.bottom
anchors.topMargin: 24
anchors.left: parent.left
labelTextOn: qsTr("Push To Talk (T)"); labelTextOn: qsTr("Push To Talk (T)");
backgroundOnColor: "#E3E3E3"; backgroundOnColor: "#E3E3E3";
checked: (bar.currentIndex === 0) ? AudioScriptingInterface.pushToTalkDesktop : AudioScriptingInterface.pushToTalkHMD; checked: (bar.currentIndex === 0) ? AudioScriptingInterface.pushToTalkDesktop : AudioScriptingInterface.pushToTalkHMD;
@ -164,12 +222,18 @@ Rectangle {
} }
} }
ColumnLayout { Item {
spacing: 24; id: additionalSwitchContainer
width: switchContainer.width - margins.paddings;
height: parent.height;
anchors.top: parent.top
anchors.left: switchContainer.right;
HifiControlsUit.Switch { HifiControlsUit.Switch {
id: warnMutedSwitch id: warnMutedSwitch
height: root.switchHeight; height: root.switchHeight;
switchWidth: root.switchWidth; switchWidth: root.switchWidth;
anchors.top: parent.top
anchors.left: parent.left
labelTextOn: qsTr("Warn when muted"); labelTextOn: qsTr("Warn when muted");
backgroundOnColor: "#E3E3E3"; backgroundOnColor: "#E3E3E3";
checked: AudioScriptingInterface.warnWhenMuted; checked: AudioScriptingInterface.warnWhenMuted;
@ -184,6 +248,9 @@ Rectangle {
id: audioLevelSwitch id: audioLevelSwitch
height: root.switchHeight; height: root.switchHeight;
switchWidth: root.switchWidth; switchWidth: root.switchWidth;
anchors.top: warnMutedSwitch.bottom
anchors.topMargin: 24
anchors.left: parent.left
labelTextOn: qsTr("Audio Level Meter"); labelTextOn: qsTr("Audio Level Meter");
backgroundOnColor: "#E3E3E3"; backgroundOnColor: "#E3E3E3";
checked: AvatarInputs.showAudioTools; checked: AvatarInputs.showAudioTools;
@ -197,6 +264,9 @@ Rectangle {
id: stereoInput; id: stereoInput;
height: root.switchHeight; height: root.switchHeight;
switchWidth: root.switchWidth; switchWidth: root.switchWidth;
anchors.top: audioLevelSwitch.bottom
anchors.topMargin: 24
anchors.left: parent.left
labelTextOn: qsTr("Stereo input"); labelTextOn: qsTr("Stereo input");
backgroundOnColor: "#E3E3E3"; backgroundOnColor: "#E3E3E3";
checked: AudioScriptingInterface.isStereoInput; checked: AudioScriptingInterface.isStereoInput;
@ -210,17 +280,20 @@ Rectangle {
} }
Item { Item {
anchors.left: parent.left id: pttTextContainer
anchors.top: switchesContainer.bottom;
anchors.topMargin: 10;
anchors.left: parent.left;
width: rightMostInputLevelPos; width: rightMostInputLevelPos;
height: pttText.height; height: pttText.height;
RalewayRegular { RalewayRegular {
id: pttText id: pttText;
x: margins.paddings; x: margins.paddings;
color: hifi.colors.white; color: hifi.colors.white;
width: rightMostInputLevelPos; width: rightMostInputLevelPos;
height: paintedHeight; height: paintedHeight;
wrapMode: Text.WordWrap; wrapMode: Text.WordWrap;
font.italic: true font.italic: true;
size: 16; size: 16;
text: (bar.currentIndex === 0) ? qsTr("Press and hold the button \"T\" to talk.") : text: (bar.currentIndex === 0) ? qsTr("Press and hold the button \"T\" to talk.") :
@ -228,28 +301,35 @@ Rectangle {
} }
} }
Separator { } Separator {
id: secondSeparator;
anchors.top: pttTextContainer.bottom;
anchors.topMargin: 10;
}
Item { Item {
id: inputDeviceHeader
x: margins.paddings; x: margins.paddings;
width: parent.width - margins.paddings*2 width: parent.width - margins.paddings*2;
height: 36 height: 36;
anchors.top: secondSeparator.bottom;
anchors.topMargin: 10;
HiFiGlyphs { HiFiGlyphs {
width: margins.sizeCheckBox width: margins.sizeCheckBox;
text: hifi.glyphs.mic; text: hifi.glyphs.mic;
color: hifi.colors.white; color: hifi.colors.white;
anchors.left: parent.left anchors.left: parent.left;
anchors.leftMargin: -size/4 //the glyph has empty space at left about 25% anchors.leftMargin: -size/4; //the glyph has empty space at left about 25%
anchors.verticalCenter: parent.verticalCenter; anchors.verticalCenter: parent.verticalCenter;
size: 30; size: 30;
} }
RalewayRegular { RalewayRegular {
anchors.verticalCenter: parent.verticalCenter; anchors.verticalCenter: parent.verticalCenter;
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: 16;
color: hifi.colors.white; color: hifi.colors.white;
text: qsTr("Choose input device"); text: qsTr("Choose input device");
@ -257,8 +337,10 @@ Rectangle {
} }
ListView { ListView {
id: inputView id: inputView;
width: parent.width - margins.paddings*2 width: parent.width - margins.paddings*2;
anchors.top: inputDeviceHeader.bottom;
anchors.topMargin: 10;
x: margins.paddings x: margins.paddings
height: Math.min(150, contentHeight); height: Math.min(150, contentHeight);
spacing: 4; spacing: 4;
@ -302,16 +384,26 @@ Rectangle {
} }
} }
AudioControls.LoopbackAudio { AudioControls.LoopbackAudio {
id: loopbackAudio
x: margins.paddings x: margins.paddings
anchors.top: inputView.bottom;
anchors.topMargin: 10;
visible: (bar.currentIndex === 1 && isVR) || visible: (bar.currentIndex === 1 && isVR) ||
(bar.currentIndex === 0 && !isVR); (bar.currentIndex === 0 && !isVR);
anchors { left: parent.left; leftMargin: margins.paddings } anchors { left: parent.left; leftMargin: margins.paddings }
} }
Separator {} Separator {
id: thirdSeparator;
anchors.top: loopbackAudio.bottom;
anchors.topMargin: 10;
}
Item { Item {
id: outputDeviceHeader;
anchors.topMargin: 10;
anchors.top: thirdSeparator.bottom;
x: margins.paddings; x: margins.paddings;
width: parent.width - margins.paddings*2 width: parent.width - margins.paddings*2
height: 36 height: 36
@ -342,6 +434,8 @@ Rectangle {
width: parent.width - margins.paddings*2 width: parent.width - margins.paddings*2
x: margins.paddings x: margins.paddings
height: Math.min(360 - inputView.height, contentHeight); height: Math.min(360 - inputView.height, contentHeight);
anchors.top: outputDeviceHeader.bottom;
anchors.topMargin: 10;
spacing: 4; spacing: 4;
snapMode: ListView.SnapToItem; snapMode: ListView.SnapToItem;
clip: true; clip: true;
@ -372,6 +466,8 @@ Rectangle {
Item { Item {
id: gainContainer id: gainContainer
x: margins.paddings; x: margins.paddings;
anchors.top: outputView.bottom;
anchors.topMargin: 10;
width: parent.width - margins.paddings*2 width: parent.width - margins.paddings*2
height: gainSliderTextMetrics.height height: gainSliderTextMetrics.height
@ -430,7 +526,10 @@ Rectangle {
} }
AudioControls.PlaySampleSound { AudioControls.PlaySampleSound {
id: playSampleSound
x: margins.paddings x: margins.paddings
anchors.top: gainContainer.bottom;
anchors.topMargin: 10;
visible: (bar.currentIndex === 1 && isVR) || visible: (bar.currentIndex === 1 && isVR) ||
(bar.currentIndex === 0 && !isVR); (bar.currentIndex === 0 && !isVR);

2
interface/resources/qml/hifi/audio/AudioTabButton.qml
View file

@ -16,7 +16,7 @@ import stylesUit 1.0
TabButton { TabButton {
id: control id: control
font.pixelSize: height / 2 font.pixelSize: 14
HifiConstants { id: hifi; } HifiConstants { id: hifi; }