From deb40f67df69098297832054ced6180a220cfbfe Mon Sep 17 00:00:00 2001
From: Zach Fox <fox@highfidelity.io>
Date: Mon, 19 Dec 2016 14:26:49 -0800
Subject: [PATCH] Steady progress

---
 interface/resources/qml/hifi/NameCard.qml | 65 ++++++++++++++++-------
 interface/resources/qml/hifi/Pal.qml      | 10 ++--
 2 files changed, 49 insertions(+), 26 deletions(-)

diff --git a/interface/resources/qml/hifi/NameCard.qml b/interface/resources/qml/hifi/NameCard.qml
index ef3afa22ff..e65ffa3561 100644
--- a/interface/resources/qml/hifi/NameCard.qml
+++ b/interface/resources/qml/hifi/NameCard.qml
@@ -13,34 +13,59 @@ import Hifi 1.0
 import QtQuick 2.5
 import "../styles-uit"
 
+Row {
+    id: thisNameCard;
+    // Spacing
+    spacing: 5;
+    // Margins
+    anchors.leftMargin: 5;
 
-Column {
     // Properties
     property string displayName: "";
     property string userName: "";
     property int displayTextHeight: 18;
-    property int usernameTextHeight: 12
+    property int usernameTextHeight: 12;
 
-    RalewaySemiBold {
-        // Properties
-        text: parent.displayName;
-        elide: Text.ElideRight;
+    Column {
+        id: avatarImage;
         // Size
-        width: parent.width;
-        // Text Size
-        size: parent.displayTextHeight;
-        // Text Positioning
-        verticalAlignment: Text.AlignVCenter;
+        width: parent.height - 2;
+        height: width;
+        Rectangle {
+            anchors.fill: parent;
+            radius: parent.width*0.5;
+            color: "#AAA5AD";
+        }
     }
-    RalewayLight {
-        // Properties
-        text: parent.userName;
-        elide: Text.ElideRight;
-        visible: parent.displayName;
+    Column {
+        id: textContainer;
         // Size
-        size: parent.usernameTextHeight;
-        width: parent.width;
-        // Text Positioning
-        verticalAlignment: Text.AlignVCenter;
+        width: parent.width - avatarImage.width;
+
+        RalewaySemiBold {
+            id: displayNameText;
+            // Properties
+            text: thisNameCard.displayName;
+            elide: Text.ElideRight;
+            // Size
+            width: parent.width;
+            // Text Size
+            size: thisNameCard.displayTextHeight;
+            // Text Positioning
+            verticalAlignment: Text.AlignVCenter;
+        }
+        RalewayLight {
+            id: userNameText;
+            // Properties
+            text: thisNameCard.userName;
+            elide: Text.ElideRight;
+            visible: thisNameCard.displayName;
+            // Size
+            width: parent.width;
+            // Text Size
+            size: thisNameCard.usernameTextHeight;
+            // Text Positioning
+            verticalAlignment: Text.AlignVCenter;
+        }
     }
 }
diff --git a/interface/resources/qml/hifi/Pal.qml b/interface/resources/qml/hifi/Pal.qml
index b0710a1dda..0f52c3686a 100644
--- a/interface/resources/qml/hifi/Pal.qml
+++ b/interface/resources/qml/hifi/Pal.qml
@@ -58,11 +58,10 @@ Rectangle {
             userName: myData.userName;
             // Size
             width: nameCardWidth - anchors.leftMargin;
+            height: myCardHeight;
             // Positioning
             anchors.left: parent.left;
             anchors.verticalCenter: parent.verticalCenter;
-            // Margins
-            anchors.leftMargin: 10;
         }
     }
     // This TableView refers to the table (below the current user's NameCard)
@@ -125,6 +124,7 @@ Rectangle {
         itemDelegate: Item {
             id: itemCell;
             property bool isCheckBox: typeof(styleData.value) === 'boolean';
+            property bool isSeparator: styleData.value === '';
             // This NameCard refers to the cell that contains an avatar's
             // DisplayName and UserName
             NameCard {
@@ -132,19 +132,17 @@ Rectangle {
                 // Properties
                 displayName: styleData.value;
                 userName: model.userName;
-                visible: !isCheckBox;
+                visible: !isCheckBox && !isSeparator;
                 // Size
                 width: nameCardWidth - anchors.leftMargin;
                 // Positioning
                 anchors.left: parent.left;
                 anchors.verticalCenter: parent.verticalCenter;
-                // Margins
-                anchors.leftMargin: 10;
             }
             // This Rectangle refers to the cells that contain the action buttons
             Rectangle {
                 radius: itemCell.height / 4;
-                visible: isCheckBox;
+                visible: isCheckBox && !isSeparator;
                 color: styleData.value ? "green" : "red";
                 anchors.fill: parent;
                 MouseArea {