From de737e8039f09adbfd25be3897c1c38b31fee34b Mon Sep 17 00:00:00 2001
From: Chad Little <chad@chadsdomain.com>
Date: Wed, 1 Apr 2015 15:49:25 -0700
Subject: [PATCH] Update Participants UI in Conpherence Full

Summary: This shrinks the UI to fit more people in the participants list, useful for rooms. Also update the remove icon.

Test Plan:
Review a lot of people in a room, so so many.

{F354233}

Reviewers: epriestley, btrahan

Reviewed By: btrahan

Subscribers: Korvin, epriestley

Differential Revision: https://secure.phabricator.com/D12213
---
 resources/celerity/map.php                    |  4 +--
 .../view/ConpherencePeopleWidgetView.php      |  5 +++-
 .../application/conpherence/widget-pane.css   | 28 +++++++++++++------
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index 1a57d44e33..6433c87e86 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -49,7 +49,7 @@ return array(
     'rsrc/css/application/conpherence/message-pane.css' => 'e44b667b',
     'rsrc/css/application/conpherence/notification.css' => '04a6e10a',
     'rsrc/css/application/conpherence/update.css' => '1099a660',
-    'rsrc/css/application/conpherence/widget-pane.css' => '1979ee8c',
+    'rsrc/css/application/conpherence/widget-pane.css' => 'a9082fd0',
     'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4',
     'rsrc/css/application/countdown/timer.css' => '86b7b0a0',
     'rsrc/css/application/dashboard/dashboard.css' => '17937d22',
@@ -520,7 +520,7 @@ return array(
     'conpherence-notification-css' => '04a6e10a',
     'conpherence-thread-manager' => 'bb928342',
     'conpherence-update-css' => '1099a660',
-    'conpherence-widget-pane-css' => '1979ee8c',
+    'conpherence-widget-pane-css' => 'a9082fd0',
     'differential-changeset-view-css' => 'e19cfd6e',
     'differential-core-view-css' => '7ac3cabc',
     'differential-inline-comment-editor' => '2529c82d',
diff --git a/src/applications/conpherence/view/ConpherencePeopleWidgetView.php b/src/applications/conpherence/view/ConpherencePeopleWidgetView.php
index d0d8c454d2..bb455ee787 100644
--- a/src/applications/conpherence/view/ConpherencePeopleWidgetView.php
+++ b/src/applications/conpherence/view/ConpherencePeopleWidgetView.php
@@ -17,6 +17,8 @@ final class ConpherencePeopleWidgetView extends ConpherenceWidgetView {
       $handle = $handles[$user_phid];
       $remove_html = '';
       if ($user_phid == $user->getPHID()) {
+        $icon = id(new PHUIIconView())
+          ->setIconFont('fa-times lightbluetext');
         $remove_html = javelin_tag(
           'a',
           array(
@@ -27,7 +29,7 @@ final class ConpherencePeopleWidgetView extends ConpherenceWidgetView {
               'action' => 'remove_person',
             ),
           ),
-          hsprintf('<span class="close-icon">&times;</span>'));
+          $icon);
       }
       $body[] = phutil_tag(
         'div',
@@ -39,6 +41,7 @@ final class ConpherencePeopleWidgetView extends ConpherenceWidgetView {
             'a',
             array(
               'class' => 'pic',
+              'href' => $handle->getURI(),
             ),
             phutil_tag(
               'img',
diff --git a/webroot/rsrc/css/application/conpherence/widget-pane.css b/webroot/rsrc/css/application/conpherence/widget-pane.css
index 4b0eef8228..164ea1ebfa 100644
--- a/webroot/rsrc/css/application/conpherence/widget-pane.css
+++ b/webroot/rsrc/css/application/conpherence/widget-pane.css
@@ -334,33 +334,45 @@
   padding: 3px 16px 4px 16px;
 }
 
+#widgets-people {
+  margin-top: 4px;
+}
+
 .conpherence-widget-pane .person-entry {
-  padding: 8px 0 0 8px;
+  padding: 4px 8px;
+}
+
+.conpherence-widget-pane .person-entry:hover {
+  background-color: {$lightgreybackground};
 }
 
 .conpherence-widget-pane .person-entry a {
   float: left;
   font-weight: bold;
-  line-height: 20px;
+  line-height: 22px;
+  color: {$darkbluetext};
 }
 
 .conpherence-widget-pane .person-entry a img {
-  height: 35px;
-  width: 35px;
+  height: 24px;
+  width: 24px;
+  border-radius: 3px;
 }
 
 .conpherence-widget-pane .person-entry .pic {
   float: left;
-  margin: 0 8px 0 0;
-  width: 35px;
-  padding: 0;
+  width: 30px;
 }
 
 .conpherence-widget-pane .person-entry .remove {
   float: right;
   width: 20px;
+  height: 20px;
   font-size: 18px;
-  padding: 5px 0 8px 0;
+}
+
+.person-entry .remove:hover .phui-icon-view {
+  color: {$red};
 }
 
 .conpherence-widget-pane .person-entry .remove:hover {