add level to active input selection

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
         }
     }

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;
                     }
                 }
             }

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;
+                }
+            }
+        }
+    }
+}