moving file as MicBarApplication

interface/resources/qml/hifi/audio/MicBar.qml

@@ -13,25 +13,24 @@ import QtQuick 2.5
 import QtGraphicalEffects 1.0
 import stylesUit 1.0
 
-import stylesUit 1.0
 import TabletScriptingInterface 1.0
 
 Rectangle {
     HifiConstants { id: hifi; }
 
     readonly property var level: AudioScriptingInterface.inputLevel;
-    readonly property var userSpeakingLevel: 0.4;
+    
     property bool gated: false;
     Component.onCompleted: {
         AudioScriptingInterface.noiseGateOpened.connect(function() { gated = false; });
         AudioScriptingInterface.noiseGateClosed.connect(function() { gated = true; });
     }
-
+        
     property bool standalone: false;
     property var dragTarget: null;
 
-    width: 44;
+    width: 240;
-    height: 44;
+    height: 50;
 
     radius: 5;
 
@@ -44,8 +43,8 @@ Rectangle {
     // borders are painted over fill, so reduce the fill to fit inside the border
     Rectangle {
         color: standalone ? colors.fill : "#00000000";
-        width: 40;
+        width: 236;
-        height: 40;
+        height: 46;
 
         radius: 5;
 
@@ -102,6 +101,7 @@ Rectangle {
 
         anchors {
             left: parent.left;
+            leftMargin: 5;
             verticalCenter: parent.verticalCenter;
         }
 
@@ -117,11 +117,11 @@ Rectangle {
                 id: image;
                 source: (AudioScriptingInterface.pushToTalk && !AudioScriptingInterface.pushingToTalk) ? pushToTalkIcon : AudioScriptingInterface.muted ? mutedIcon : unmutedIcon;
 
-                width: 21;
+                width: 30;
-                height: 24;
+                height: 30;
                 anchors {
                     left: parent.left;
-                    leftMargin: 7;
+                    leftMargin: 5;
                     top: parent.top;
                     topMargin: 5;
                 }
@@ -138,20 +138,20 @@ Rectangle {
     Item {
         id: status;
 
-        readonly property string color: colors.muted;
+        readonly property string color: AudioScriptingInterface.muted ? colors.muted : colors.unmuted;
 
         visible: (AudioScriptingInterface.pushToTalk && !AudioScriptingInterface.pushingToTalk) || (AudioScriptingInterface.muted && (level >= userSpeakingLevel));
 
         anchors {
             left: parent.left;
-            top: parent.bottom
+            leftMargin: 50;
-            topMargin: 5
+            verticalCenter: parent.verticalCenter;
         }
 
-        width: icon.width;
+        width: 170;
         height: 8
 
-        RalewaySemiBold {
+        Text {
             anchors {
                 horizontalCenter: parent.horizontalCenter;
                 verticalCenter: parent.verticalCenter;
@@ -189,14 +189,11 @@ Rectangle {
     Item {
         id: bar;
 
-        anchors {
+        visible: !status.visible;
-            right: parent.right;
-            rightMargin: 7;
-            verticalCenter: parent.verticalCenter;
-        }
 
-        width: 8;
+        anchors.fill: status;
-        height: 32;
+
+        width: status.width;
 
         Rectangle { // base
             radius: 4;
@@ -206,12 +203,13 @@ Rectangle {
 
         Rectangle { // mask
             id: mask;
-            height: parent.height * level;
+            width: gated ? 0 : parent.width * level;
-            width: parent.width;
             radius: 5;
             anchors {
                 bottom: parent.bottom;
                 bottomMargin: 0;
+                top: parent.top;
+                topMargin: 0;
                 left: parent.left;
                 leftMargin: 0;
             }
@@ -221,11 +219,10 @@ Rectangle {
             anchors { fill: mask }
             source: mask
             start: Qt.point(0, 0);
-            end: Qt.point(0, bar.height);
+            end: Qt.point(170, 0);
-            rotation: 180
             gradient: Gradient {
                 GradientStop {
-                    position: 0.0;
+                    position: 0;
                     color: colors.greenStart;
                 }
                 GradientStop {
@@ -233,17 +230,17 @@ Rectangle {
                     color: colors.greenEnd;
                 }
                 GradientStop {
-                    position: 1.0;
+                    position: 1;
-                    color: colors.red;
+                    color: colors.yellow;
                 }
             }
         }
-
+        
         Rectangle {
             id: gatedIndicator;
             visible: gated && !AudioScriptingInterface.clipping
-
+            
-            radius: 4;
+            radius: 4;     
             width: 2 * radius;
             height: 2 * radius;
             color: "#0080FF";
@@ -252,12 +249,12 @@ Rectangle {
                 verticalCenter: parent.verticalCenter;
             }
         }
-
+        
         Rectangle {
             id: clippingIndicator;
             visible: AudioScriptingInterface.clipping
-
+            
-            radius: 4;
+            radius: 4;     
             width: 2 * radius;
             height: 2 * radius;
             color: colors.red;

interface/resources/qml/hifi/audio/MicBarApplication.qml

@@ -0,0 +1,241 @@
+//
+//  MicBar.qml
+//  qml/hifi/audio
+//
+//  Created by Zach Pomerantz on 6/14/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 QtGraphicalEffects 1.0
+
+import stylesUit 1.0
+import TabletScriptingInterface 1.0
+
+Rectangle {
+    readonly property var level: AudioScriptingInterface.inputLevel;
+    readonly property var userSpeakingLevel: 0.4;
+    property bool gated: false;
+    Component.onCompleted: {
+        AudioScriptingInterface.noiseGateOpened.connect(function() { gated = false; });
+        AudioScriptingInterface.noiseGateClosed.connect(function() { gated = true; });
+    }
+
+    property bool standalone: false;
+    property var dragTarget: null;
+
+    width: 44;
+    height: 44;
+
+    radius: 5;
+
+    color: "#00000000";
+    border {
+        width: mouseArea.containsMouse || mouseArea.containsPress ? 2 : 0;
+        color: colors.border;
+    }
+
+    // borders are painted over fill, so reduce the fill to fit inside the border
+    Rectangle {
+        color: standalone ? colors.fill : "#00000000";
+        width: 40;
+        height: 40;
+
+        radius: 5;
+
+        anchors {
+            verticalCenter: parent.verticalCenter;
+            horizontalCenter: parent.horizontalCenter;
+        }
+    }
+
+    MouseArea {
+        id: mouseArea;
+
+        anchors {
+            left: icon.left;
+            right: bar.right;
+            top: icon.top;
+            bottom: icon.bottom;
+        }
+
+        hoverEnabled: true;
+        scrollGestureEnabled: false;
+        onClicked: {
+            AudioScriptingInterface.muted = !AudioScriptingInterface.muted;
+            Tablet.playSound(TabletEnums.ButtonClick);
+        }
+        drag.target: dragTarget;
+        onContainsMouseChanged: {
+            if (containsMouse) {
+                Tablet.playSound(TabletEnums.ButtonHover);
+            }
+        }
+    }
+
+    QtObject {
+        id: colors;
+
+        readonly property string unmuted: "#FFF";
+        readonly property string muted: "#E2334D";
+        readonly property string gutter: "#575757";
+        readonly property string greenStart: "#39A38F";
+        readonly property string greenEnd: "#1FC6A6";
+        readonly property string yellow: "#C0C000";
+        readonly property string red: colors.muted;
+        readonly property string fill: "#55000000";
+        readonly property string border: standalone ? "#80FFFFFF" : "#55FFFFFF";
+        readonly property string icon: AudioScriptingInterface.muted ? muted : unmuted;
+    }
+
+    Item {
+        id: icon;
+
+        anchors {
+            left: parent.left;
+            verticalCenter: parent.verticalCenter;
+        }
+
+        width: 40;
+        height: 40;
+
+        Item {
+            Image {
+                readonly property string unmutedIcon: "../../../icons/tablet-icons/mic-unmute-i.svg";
+                readonly property string mutedIcon: "../../../icons/tablet-icons/mic-mute-i.svg";
+
+                id: image;
+                source: AudioScriptingInterface.muted ? mutedIcon : unmutedIcon;
+
+                width: 21;
+                height: 24;
+                anchors {
+                    left: parent.left;
+                    leftMargin: 7;
+                    top: parent.top;
+                    topMargin: 5;
+                }
+            }
+
+            ColorOverlay {
+                anchors { fill: image }
+                source: image;
+                color: colors.icon;
+            }
+        }
+    }
+
+    Item {
+        id: status;
+
+        readonly property string color: colors.muted;
+
+        visible: AudioScriptingInterface.muted && (level >= userSpeakingLevel);
+
+        anchors {
+            left: parent.left;
+            top: parent.bottom
+            topMargin: 5
+        }
+
+        width: icon.width;
+        height: 8
+
+        RalewaySemiBold {
+            anchors {
+                horizontalCenter: parent.horizontalCenter;
+                verticalCenter: parent.verticalCenter;
+            }
+
+            color: parent.color;
+
+            text: "MUTED";
+            size: 12;
+        }
+    }
+
+    Item {
+        id: bar;
+
+        anchors {
+            right: parent.right;
+            rightMargin: 7;
+            verticalCenter: parent.verticalCenter;
+        }
+
+        width: 8;
+        height: 32;
+
+        Rectangle { // base
+            radius: 4;
+            anchors { fill: parent }
+            color: colors.gutter;
+        }
+
+        Rectangle { // mask
+            id: mask;
+            height: parent.height * level;
+            width: parent.width;
+            radius: 5;
+            anchors {
+                bottom: parent.bottom;
+                bottomMargin: 0;
+                left: parent.left;
+                leftMargin: 0;
+            }
+        }
+
+        LinearGradient {
+            anchors { fill: mask }
+            source: mask
+            start: Qt.point(0, 0);
+            end: Qt.point(0, bar.height);
+            rotation: 180
+            gradient: Gradient {
+                GradientStop {
+                    position: 0.0;
+                    color: colors.greenStart;
+                }
+                GradientStop {
+                    position: 0.5;
+                    color: colors.greenEnd;
+                }
+                GradientStop {
+                    position: 1.0;
+                    color: colors.red;
+                }
+            }
+        }
+
+        Rectangle {
+            id: gatedIndicator;
+            visible: gated && !AudioScriptingInterface.clipping
+
+            radius: 4;
+            width: 2 * radius;
+            height: 2 * radius;
+            color: "#0080FF";
+            anchors {
+                right: parent.left;
+                verticalCenter: parent.verticalCenter;
+            }
+        }
+
+        Rectangle {
+            id: clippingIndicator;
+            visible: AudioScriptingInterface.clipping
+
+            radius: 4;
+            width: 2 * radius;
+            height: 2 * radius;
+            color: colors.red;
+            anchors {
+                left: parent.right;
+                verticalCenter: parent.verticalCenter;
+            }
+        }
+    }
+}