From baafe1ad0935082aaecafffd8f694805b3436518 Mon Sep 17 00:00:00 2001 From: Zach Pomerantz Date: Tue, 20 Jun 2017 16:13:41 -0700 Subject: [PATCH 1/3] give Audio menu mute its own row --- interface/resources/qml/hifi/audio/Audio.qml | 50 +++++++++++--------- 1 file changed, 28 insertions(+), 22 deletions(-) diff --git a/interface/resources/qml/hifi/audio/Audio.qml b/interface/resources/qml/hifi/audio/Audio.qml index 8e7d040fab..8739f0559c 100644 --- a/interface/resources/qml/hifi/audio/Audio.qml +++ b/interface/resources/qml/hifi/audio/Audio.qml @@ -52,34 +52,40 @@ Rectangle { Separator { visible: root.showTitle() } - Grid { - columns: 2; + ColumnLayout { x: 16; // padding does not work spacing: 16; - AudioControls.CheckBox { - text: qsTr("Mute microphone"); - isRedCheck: true; - checked: Audio.muted; - onClicked: { - Audio.muted = checked; - checked = Qt.binding(function() { return Audio.muted; }); // restore binding + // mute is in its own row + RowLayout { + AudioControls.CheckBox { + text: qsTr("Mute microphone"); + isRedCheck: true; + checked: Audio.muted; + onClicked: { + Audio.muted = checked; + checked = Qt.binding(function() { return Audio.muted; }); // restore binding + } } } - AudioControls.CheckBox { - text: qsTr("Enable noise reduction"); - checked: Audio.noiseReduction; - onClicked: { - Audio.noiseReduction = checked; - checked = Qt.binding(function() { return Audio.noiseReduction; }); // restore binding + + RowLayout { + spacing: 16; + AudioControls.CheckBox { + text: qsTr("Enable noise reduction"); + checked: Audio.noiseReduction; + onClicked: { + Audio.noiseReduction = checked; + checked = Qt.binding(function() { return Audio.noiseReduction; }); // restore binding + } } - } - AudioControls.CheckBox { - text: qsTr("Show audio level meter"); - checked: AvatarInputs.showAudioTools; - onClicked: { - AvatarInputs.showAudioTools = checked; - checked = Qt.binding(function() { return AvatarInputs.showAudioTools; }); // restore binding + AudioControls.CheckBox { + text: qsTr("Show audio level meter"); + checked: AvatarInputs.showAudioTools; + onClicked: { + AvatarInputs.showAudioTools = checked; + checked = Qt.binding(function() { return AvatarInputs.showAudioTools; }); // restore binding + } } } } From 1f7e1e8287ad50d40b11aa8c7851992c45511271 Mon Sep 17 00:00:00 2001 From: Zach Pomerantz Date: Tue, 20 Jun 2017 15:00:29 -0700 Subject: [PATCH 2/3] add level to active input selection --- .../resources/qml/controls-uit/CheckBox.qml | 4 +- interface/resources/qml/hifi/audio/Audio.qml | 25 +++-- .../resources/qml/hifi/audio/InputLevel.qml | 102 ++++++++++++++++++ 3 files changed, 124 insertions(+), 7 deletions(-) create mode 100644 interface/resources/qml/hifi/audio/InputLevel.qml diff --git a/interface/resources/qml/controls-uit/CheckBox.qml b/interface/resources/qml/controls-uit/CheckBox.qml index d6dc5d2736..a637207781 100644 --- a/interface/resources/qml/controls-uit/CheckBox.qml +++ b/interface/resources/qml/controls-uit/CheckBox.qml @@ -22,6 +22,7 @@ Original.CheckBox { readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light property bool isRedCheck: false property int boxSize: 14 + property bool wrap: true; readonly property int boxRadius: 3 readonly property int checkSize: Math.max(boxSize - 8, 10) readonly property int checkRadius: 2 @@ -92,7 +93,8 @@ Original.CheckBox { text: control.text color: control.color x: 2 - wrapMode: Text.Wrap + wrapMode: checkBox.wrap ? Text.Wrap : Text.NoWrap + elide: checkBox.wrap ? Text.ElideNone : Text.ElideRight enabled: checkBox.enabled } } diff --git a/interface/resources/qml/hifi/audio/Audio.qml b/interface/resources/qml/hifi/audio/Audio.qml index 8e7d040fab..4e22c360c2 100644 --- a/interface/resources/qml/hifi/audio/Audio.qml +++ b/interface/resources/qml/hifi/audio/Audio.qml @@ -111,12 +111,25 @@ Rectangle { delegate: Item { width: parent.width; height: 36; - AudioControls.CheckBox { - text: display; - checked: selected; - onClicked: { - selected = checked; - checked = Qt.binding(function() { return selected; }); // restore binding + + RowLayout { + width: parent.width; + + AudioControls.CheckBox { + Layout.maximumWidth: parent.width - level.width - 40; + text: display; + wrap: false; + checked: selected; + onClicked: { + selected = checked; + checked = Qt.binding(function() { return selected; }); // restore binding + } + } + InputLevel { + id: level; + Layout.alignment: Qt.AlignRight; + Layout.rightMargin: 30; + visible: selected; } } } diff --git a/interface/resources/qml/hifi/audio/InputLevel.qml b/interface/resources/qml/hifi/audio/InputLevel.qml new file mode 100644 index 0000000000..258d9f082e --- /dev/null +++ b/interface/resources/qml/hifi/audio/InputLevel.qml @@ -0,0 +1,102 @@ +// +// InputLevel.qml +// qml/hifi/audio +// +// Created by Zach Pomerantz on 6/20/2017 +// Copyright 2017 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.5 +import QtQuick.Controls 1.4 +import QtQuick.Layouts 1.3 +import QtGraphicalEffects 1.0 + +Rectangle { + readonly property var level: Audio.inputLevel; + + width: 70; + height: 8; + + color: "transparent"; + + Item { + id: colors; + + readonly property string muted: "#E2334D"; + readonly property string gutter: "#575757"; + readonly property string greenStart: "#39A38F"; + readonly property string greenEnd: "#1FC6A6"; + readonly property string red: colors.muted; + } + + Text { + id: status; + + anchors { verticalCenter: parent.verticalCenter } + + visible: Audio.muted; + color: colors.muted; + + text: "MUTED"; + font.pointSize: 12; + } + + Item { + id: bar; + + width: parent.width; + height: parent.height; + + anchors { fill: parent } + + visible: !status.visible; + + Rectangle { // base + radius: 4; + anchors { fill: parent } + color: colors.gutter; + } + + Rectangle { // mask + id: mask; + width: parent.width * level; + radius: 5; + anchors { + bottom: parent.bottom; + bottomMargin: 0; + top: parent.top; + topMargin: 0; + left: parent.left; + leftMargin: 0; + } + } + + LinearGradient { + anchors { fill: mask } + source: mask + start: Qt.point(0, 0); + end: Qt.point(70, 0); + gradient: Gradient { + GradientStop { + position: 0; + color: colors.greenStart; + } + GradientStop { + position: 0.8; + color: colors.greenEnd; + } + GradientStop { + position: 0.801; + color: colors.red; + } + GradientStop { + position: 1; + color: colors.red; + } + } + } + } +} From 0075d8619a7e443bee365ebb1ca1957b401a2564 Mon Sep 17 00:00:00 2001 From: Zach Pomerantz Date: Tue, 20 Jun 2017 16:10:11 -0700 Subject: [PATCH 3/3] center MUTED text in InputLevel --- interface/resources/qml/hifi/audio/InputLevel.qml | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/interface/resources/qml/hifi/audio/InputLevel.qml b/interface/resources/qml/hifi/audio/InputLevel.qml index 258d9f082e..58ce3a1ec7 100644 --- a/interface/resources/qml/hifi/audio/InputLevel.qml +++ b/interface/resources/qml/hifi/audio/InputLevel.qml @@ -35,13 +35,16 @@ Rectangle { Text { id: status; - anchors { verticalCenter: parent.verticalCenter } + anchors { + horizontalCenter: parent.horizontalCenter; + verticalCenter: parent.verticalCenter; + } visible: Audio.muted; color: colors.muted; text: "MUTED"; - font.pointSize: 12; + font.pointSize: 10; } Item {