From a3dfd09e26335f41c43664a58f47ef558d7a222f Mon Sep 17 00:00:00 2001 From: Wayne Chen Date: Wed, 13 Mar 2019 17:03:53 -0700 Subject: [PATCH 1/2] adding scrolling in audio settings window --- interface/resources/qml/hifi/audio/Audio.qml | 165 ++++++++++++++---- .../qml/hifi/audio/AudioTabButton.qml | 2 +- 2 files changed, 133 insertions(+), 34 deletions(-) diff --git a/interface/resources/qml/hifi/audio/Audio.qml b/interface/resources/qml/hifi/audio/Audio.qml index da306f911b..50329f9fa4 100644 --- a/interface/resources/qml/hifi/audio/Audio.qml +++ b/interface/resources/qml/hifi/audio/Audio.qml @@ -11,7 +11,7 @@ // 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.Layouts 1.3 @@ -31,6 +31,8 @@ Rectangle { property string title: "Audio Settings" property int switchHeight: 16 property int switchWidth: 40 + readonly property real verticalScrollWidth: 10 + readonly property real verticalScrollShaft: 8 signal sendToScript(var message); color: hifi.colors.baseGray; @@ -42,7 +44,7 @@ Rectangle { property bool isVR: AudioScriptingInterface.context === "VR" - property real rightMostInputLevelPos: 450 + property real rightMostInputLevelPos: 440 //placeholder for control sizes and paddings //recalculates dynamically in case of UI size is changed QtObject { @@ -60,8 +62,8 @@ Rectangle { id: bar spacing: 0 width: parent.width - height: 42 - currentIndex: isVR ? 1 : 0 + height: 28; + currentIndex: isVR ? 1 : 0; AudioControls.AudioTabButton { height: parent.height @@ -92,25 +94,74 @@ Rectangle { Component.onCompleted: enablePeakValues(); - Column { - id: column - spacing: 12; - anchors.top: bar.bottom - anchors.bottom: parent.bottom - anchors.bottomMargin: 5 + Flickable { + id: flickView; + anchors.top: bar.bottom; + anchors.left: parent.left; + anchors.bottom: parent.bottom; 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; 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 - ColumnLayout { - id: columnOne - spacing: 24; - x: margins.paddings + Item { + id: switchContainer; + x: margins.paddings; + width: parent.width / 2; + height: parent.height; + anchors.left: parent.left; HifiControlsUit.Switch { id: muteMic; height: root.switchHeight; @@ -129,8 +180,12 @@ Rectangle { } HifiControlsUit.Switch { + id: noiseReductionSwitch; height: root.switchHeight; switchWidth: root.switchWidth; + anchors.top: muteMic.bottom; + anchors.topMargin: 24 + anchors.left: parent.left labelTextOn: "Noise Reduction"; backgroundOnColor: "#E3E3E3"; checked: AudioScriptingInterface.noiseReduction; @@ -144,6 +199,9 @@ Rectangle { id: pttSwitch height: root.switchHeight; switchWidth: root.switchWidth; + anchors.top: noiseReductionSwitch.bottom + anchors.topMargin: 24 + anchors.left: parent.left labelTextOn: qsTr("Push To Talk (T)"); backgroundOnColor: "#E3E3E3"; checked: (bar.currentIndex === 0) ? AudioScriptingInterface.pushToTalkDesktop : AudioScriptingInterface.pushToTalkHMD; @@ -164,12 +222,18 @@ Rectangle { } } - ColumnLayout { - spacing: 24; + Item { + id: additionalSwitchContainer + width: switchContainer.width - margins.paddings; + height: parent.height; + anchors.top: parent.top + anchors.left: switchContainer.right; HifiControlsUit.Switch { id: warnMutedSwitch height: root.switchHeight; switchWidth: root.switchWidth; + anchors.top: parent.top + anchors.left: parent.left labelTextOn: qsTr("Warn when muted"); backgroundOnColor: "#E3E3E3"; checked: AudioScriptingInterface.warnWhenMuted; @@ -184,6 +248,9 @@ Rectangle { id: audioLevelSwitch height: root.switchHeight; switchWidth: root.switchWidth; + anchors.top: warnMutedSwitch.bottom + anchors.topMargin: 24 + anchors.left: parent.left labelTextOn: qsTr("Audio Level Meter"); backgroundOnColor: "#E3E3E3"; checked: AvatarInputs.showAudioTools; @@ -197,6 +264,9 @@ Rectangle { id: stereoInput; height: root.switchHeight; switchWidth: root.switchWidth; + anchors.top: audioLevelSwitch.bottom + anchors.topMargin: 24 + anchors.left: parent.left labelTextOn: qsTr("Stereo input"); backgroundOnColor: "#E3E3E3"; checked: AudioScriptingInterface.isStereoInput; @@ -210,17 +280,20 @@ Rectangle { } Item { - anchors.left: parent.left + id: pttTextContainer + anchors.top: switchesContainer.bottom; + anchors.topMargin: 10; + anchors.left: parent.left; width: rightMostInputLevelPos; height: pttText.height; RalewayRegular { - id: pttText + id: pttText; x: margins.paddings; color: hifi.colors.white; width: rightMostInputLevelPos; height: paintedHeight; wrapMode: Text.WordWrap; - font.italic: true + font.italic: true; size: 16; 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 { + id: inputDeviceHeader x: margins.paddings; - width: parent.width - margins.paddings*2 - height: 36 + width: parent.width - margins.paddings*2; + height: 36; + anchors.top: secondSeparator.bottom; + anchors.topMargin: 10; HiFiGlyphs { - width: margins.sizeCheckBox + width: margins.sizeCheckBox; text: hifi.glyphs.mic; color: hifi.colors.white; - anchors.left: parent.left - anchors.leftMargin: -size/4 //the glyph has empty space at left about 25% + anchors.left: parent.left; + anchors.leftMargin: -size/4; //the glyph has empty space at left about 25% anchors.verticalCenter: parent.verticalCenter; size: 30; } RalewayRegular { anchors.verticalCenter: parent.verticalCenter; - width: margins.sizeText + margins.sizeLevel - anchors.left: parent.left - anchors.leftMargin: margins.sizeCheckBox + width: margins.sizeText + margins.sizeLevel; + anchors.left: parent.left; + anchors.leftMargin: margins.sizeCheckBox; size: 16; color: hifi.colors.white; text: qsTr("Choose input device"); @@ -257,8 +337,10 @@ Rectangle { } ListView { - id: inputView - width: parent.width - margins.paddings*2 + id: inputView; + width: parent.width - margins.paddings*2; + anchors.top: inputDeviceHeader.bottom; + anchors.topMargin: 10; x: margins.paddings height: Math.min(150, contentHeight); spacing: 4; @@ -302,16 +384,26 @@ Rectangle { } } AudioControls.LoopbackAudio { + id: loopbackAudio x: margins.paddings + anchors.top: inputView.bottom; + anchors.topMargin: 10; visible: (bar.currentIndex === 1 && isVR) || (bar.currentIndex === 0 && !isVR); anchors { left: parent.left; leftMargin: margins.paddings } } - Separator {} + Separator { + id: thirdSeparator; + anchors.top: loopbackAudio.bottom; + anchors.topMargin: 10; + } Item { + id: outputDeviceHeader; + anchors.topMargin: 10; + anchors.top: thirdSeparator.bottom; x: margins.paddings; width: parent.width - margins.paddings*2 height: 36 @@ -342,6 +434,8 @@ Rectangle { width: parent.width - margins.paddings*2 x: margins.paddings height: Math.min(360 - inputView.height, contentHeight); + anchors.top: outputDeviceHeader.bottom; + anchors.topMargin: 10; spacing: 4; snapMode: ListView.SnapToItem; clip: true; @@ -372,6 +466,8 @@ Rectangle { Item { id: gainContainer x: margins.paddings; + anchors.top: outputView.bottom; + anchors.topMargin: 10; width: parent.width - margins.paddings*2 height: gainSliderTextMetrics.height @@ -430,7 +526,10 @@ Rectangle { } AudioControls.PlaySampleSound { + id: playSampleSound x: margins.paddings + anchors.top: gainContainer.bottom; + anchors.topMargin: 10; visible: (bar.currentIndex === 1 && isVR) || (bar.currentIndex === 0 && !isVR); diff --git a/interface/resources/qml/hifi/audio/AudioTabButton.qml b/interface/resources/qml/hifi/audio/AudioTabButton.qml index 32331ccb6e..c81377e524 100644 --- a/interface/resources/qml/hifi/audio/AudioTabButton.qml +++ b/interface/resources/qml/hifi/audio/AudioTabButton.qml @@ -16,7 +16,7 @@ import stylesUit 1.0 TabButton { id: control - font.pixelSize: height / 2 + font.pixelSize: 14 HifiConstants { id: hifi; } From 10eae54d8c44358e81b673a7cf50cb0a317782cb Mon Sep 17 00:00:00 2001 From: Wayne Chen Date: Thu, 14 Mar 2019 12:06:43 -0700 Subject: [PATCH 2/2] changing content height and snap mode to allow scroll --- interface/resources/qml/hifi/audio/Audio.qml | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/interface/resources/qml/hifi/audio/Audio.qml b/interface/resources/qml/hifi/audio/Audio.qml index 50329f9fa4..cd0f290da4 100644 --- a/interface/resources/qml/hifi/audio/Audio.qml +++ b/interface/resources/qml/hifi/audio/Audio.qml @@ -342,9 +342,8 @@ Rectangle { anchors.top: inputDeviceHeader.bottom; anchors.topMargin: 10; x: margins.paddings - height: Math.min(150, contentHeight); + height: contentHeight; spacing: 4; - snapMode: ListView.SnapToItem; clip: true; model: AudioScriptingInterface.devices.input; delegate: Item { @@ -433,11 +432,10 @@ Rectangle { id: outputView width: parent.width - margins.paddings*2 x: margins.paddings - height: Math.min(360 - inputView.height, contentHeight); + height: contentHeight; anchors.top: outputDeviceHeader.bottom; anchors.topMargin: 10; spacing: 4; - snapMode: ListView.SnapToItem; clip: true; model: AudioScriptingInterface.devices.output; delegate: Item {