From cd7b6e7ed08a6ac6d8c02a582ecb69c25b5c2e18 Mon Sep 17 00:00:00 2001
From: Wayne Chen <chen.wayne@outlook.com>
Date: Tue, 26 Feb 2019 18:19:23 -0800
Subject: [PATCH] moving file as MicBarApplication

---
 interface/resources/qml/hifi/audio/MicBar.qml | 51 +++++++++----------
 1 file changed, 24 insertions(+), 27 deletions(-)

diff --git a/interface/resources/qml/hifi/audio/MicBar.qml b/interface/resources/qml/hifi/audio/MicBar.qml
index 4734da8771..cad64b9b74 100644
--- a/interface/resources/qml/hifi/audio/MicBar.qml
+++ b/interface/resources/qml/hifi/audio/MicBar.qml
@@ -13,7 +13,6 @@ import QtQuick 2.5
 import QtGraphicalEffects 1.0
 import stylesUit 1.0
 
-import stylesUit 1.0
 import TabletScriptingInterface 1.0
 
 Rectangle {
@@ -35,8 +34,8 @@ Rectangle {
     property bool standalone: false;
     property var dragTarget: null;
 
-    width: 44;
-    height: 44;
+    width: 240;
+    height: 50;
 
     radius: 5;
 
@@ -49,8 +48,8 @@ Rectangle {
     // borders are painted over fill, so reduce the fill to fit inside the border
     Rectangle {
         color: standalone ? colors.fill : "#00000000";
-        width: 40;
-        height: 40;
+        width: 236;
+        height: 46;
 
         radius: 5;
 
@@ -107,6 +106,7 @@ Rectangle {
 
         anchors {
             left: parent.left;
+            leftMargin: 5;
             verticalCenter: parent.verticalCenter;
         }
 
@@ -125,11 +125,11 @@ Rectangle {
                 source: (pushToTalk && !pushingToTalk) ? pushToTalkIcon : muted ? mutedIcon : 
                     clipping ? clippingIcon : gated ? gatedIcon : unmutedIcon;
 
-                width: 21;
-                height: 24;
+                width: 30;
+                height: 30;
                 anchors {
                     left: parent.left;
-                    leftMargin: 7;
+                    leftMargin: 5;
                     top: parent.top;
                     topMargin: 5;
                 }
@@ -146,20 +146,20 @@ Rectangle {
     Item {
         id: status;
 
-        readonly property string color: colors.muted;
+        readonly property string color: AudioScriptingInterface.muted ? colors.muted : colors.unmuted;
 
         visible: (pushToTalk && !pushingToTalk) || (muted && (level >= userSpeakingLevel));
 
         anchors {
             left: parent.left;
-            top: parent.bottom
-            topMargin: 5
+            leftMargin: 50;
+            verticalCenter: parent.verticalCenter;
         }
 
-        width: icon.width;
+        width: 170;
         height: 8
 
-        RalewaySemiBold {
+        Text {
             anchors {
                 horizontalCenter: parent.horizontalCenter;
                 verticalCenter: parent.verticalCenter;
@@ -197,14 +197,11 @@ Rectangle {
     Item {
         id: bar;
 
-        anchors {
-            right: parent.right;
-            rightMargin: 7;
-            verticalCenter: parent.verticalCenter;
-        }
+        visible: !status.visible;
 
-        width: 8;
-        height: 32;
+        anchors.fill: status;
+
+        width: status.width;
 
         Rectangle { // base
             radius: 4;
@@ -214,12 +211,13 @@ Rectangle {
 
         Rectangle { // mask
             id: mask;
-            height: parent.height * level;
-            width: parent.width;
+            width: gated ? 0 : parent.width * level;
             radius: 5;
             anchors {
                 bottom: parent.bottom;
                 bottomMargin: 0;
+                top: parent.top;
+                topMargin: 0;
                 left: parent.left;
                 leftMargin: 0;
             }
@@ -229,11 +227,10 @@ Rectangle {
             anchors { fill: mask }
             source: mask
             start: Qt.point(0, 0);
-            end: Qt.point(0, bar.height);
-            rotation: 180
+            end: Qt.point(170, 0);
             gradient: Gradient {
                 GradientStop {
-                    position: 0.0;
+                    position: 0;
                     color: colors.greenStart;
                 }
                 GradientStop {
@@ -241,8 +238,8 @@ Rectangle {
                     color: colors.greenEnd;
                 }
                 GradientStop {
-                    position: 1.0;
-                    color: colors.red;
+                    position: 1;
+                    color: colors.yellow;
                 }
             }
         }