From 98ee02f84f337398fd0ef2eb6833c6487db40e20 Mon Sep 17 00:00:00 2001
From: Zach Fox <fox@highfidelity.io>
Date: Thu, 23 Mar 2017 10:46:20 -0700
Subject: [PATCH] Use OpacityMask instead of hack; fix connectionsTab

---
 interface/resources/qml/hifi/NameCard.qml | 29 +++++++++++------------
 interface/resources/qml/hifi/Pal.qml      | 10 +++-----
 2 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/interface/resources/qml/hifi/NameCard.qml b/interface/resources/qml/hifi/NameCard.qml
index 0ef86dd342..4424c2a268 100644
--- a/interface/resources/qml/hifi/NameCard.qml
+++ b/interface/resources/qml/hifi/NameCard.qml
@@ -42,8 +42,7 @@ Item {
     property bool selected: false
     property bool isAdmin: false
     property bool isPresent: true
-    property string imageMaskColor: pal.color;
-    property string profilePicBorderColor: (connectionStatus == "connection" ? hifi.colors.indigoAccent : (connectionStatus == "friend" ? hifi.colors.greenHighlight : imageMaskColor))
+    property string profilePicBorderColor: (connectionStatus == "connection" ? hifi.colors.indigoAccent : (connectionStatus == "friend" ? hifi.colors.greenHighlight : "transparent"))
 
     Item {
         id: avatarImage
@@ -61,25 +60,25 @@ Item {
             mipmap: true;
             // Anchors
             anchors.fill: parent
+            layer.enabled: true
+            layer.effect: OpacityMask {
+                maskSource: Item {
+                    width: userImage.width;
+                    height: userImage.height;
+                    Rectangle {
+                        anchors.centerIn: parent;
+                        width: userImage.width; // This works because userImage is square
+                        height: width;
+                        radius: width;
+                    }
+                }
+            }
         }
         AnimatedImage {
             source: "../../icons/profilePicLoading.gif"
             anchors.fill: parent;
             visible: userImage.status != Image.Ready;
         }
-        // Circular mask
-        Rectangle {
-            id: avatarImageMask;
-            visible: avatarImage.visible;
-            anchors.verticalCenter: avatarImage.verticalCenter;
-            anchors.horizontalCenter: avatarImage.horizontalCenter;
-            width: avatarImage.width * 2;
-            height: avatarImage.height * 2;
-            color: "transparent"
-            radius: avatarImage.height;
-            border.color: imageMaskColor;
-            border.width: avatarImage.height/2;
-        }
         StateImage {
             id: infoHoverImage;
             visible: false;
diff --git a/interface/resources/qml/hifi/Pal.qml b/interface/resources/qml/hifi/Pal.qml
index 75aa670eba..eba1a92cc6 100644
--- a/interface/resources/qml/hifi/Pal.qml
+++ b/interface/resources/qml/hifi/Pal.qml
@@ -126,7 +126,6 @@ Rectangle {
                 id: myCard;
                 // Properties
                 profileUrl: myData.profileUrl;
-                imageMaskColor: pal.color;
                 displayName: myData.displayName;
                 userName: myData.userName;
                 audioLevel: myData.audioLevel;
@@ -300,15 +299,14 @@ Rectangle {
                 MouseArea {
                     anchors.fill: parent;
                     onClicked: { 
+                        connectionsLoading.visible = false;
+                        connectionsLoading.visible = true;
                         if (activeTab != "connectionsTab") {
                             connectionsLoading.visible = false;
                             connectionsLoading.visible = true;
                             pal.sendToScript({method: 'refreshConnections'});
                         }
                         activeTab = "connectionsTab";
-                        connectionsLoading.visible = false;
-                        connectionsLoading.visible = true;
-                        connectionsRefreshProblemText.visible = false;
                     }
                 }
 
@@ -589,7 +587,7 @@ Rectangle {
                 property bool isCheckBox: styleData.role === "personalMute" || styleData.role === "ignore";
                 property bool isButton: styleData.role === "mute" || styleData.role === "kick";
                 property bool isAvgAudio: styleData.role === "avgAudioLevel";
-                opacity: model && model.isPresent ? 1.0 : 0.4;
+                opacity: !isButton ? (model && model.isPresent ? 1.0 : 0.4) : 1.0; // Admin actions shouldn't turn gray
 
                 // This NameCard refers to the cell that contains an avatar's
                 // DisplayName and UserName
@@ -597,7 +595,6 @@ Rectangle {
                     id: nameCard;
                     // Properties
                     profileUrl: (model && model.profileUrl) || "";
-                    imageMaskColor: rowColor(styleData.selected, styleData.row % 2);
                     displayName: styleData.value;
                     userName: model ? model.userName : "";
                     connectionStatus: model ? model.connection : "";
@@ -918,7 +915,6 @@ Rectangle {
                     // Properties
                     visible: styleData.role === "userName";
                     profileUrl: (model && model.profileUrl) || "";
-                    imageMaskColor: rowColor(styleData.selected, styleData.row % 2);
                     displayName: "";
                     userName: model ? model.userName : "";
                     connectionStatus : model ? model.connection : "";