Rebuild Conpherence Participants Pane

Summary: Mostly quality of life in renames and moving everything to the view class. Minor CSS tweaks. Fix room handles getting added when adding a new user. Test Plan: Add to room, remove from room. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D16560
2024-11-18 12:52:42 +01:00 · 2016-09-15 13:21:21 -07:00 · 2016-09-15 13:21:21 -07:00 · f6023d17da
commit f6023d17da
parent 3d6c3c2c45
9 changed files with 119 additions and 131 deletions
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@ -7,9 +7,9 @@
 */
 return array(
  'names' => array(
-    'conpherence.pkg.css' => 'a9b238ee',
-    'conpherence.pkg.js' => '5fafd1ff',
-    'core.pkg.css' => 'ee276281',
+    'conpherence.pkg.css' => '1e8e5a40',
+    'conpherence.pkg.js' => '89b4837e',
+    'core.pkg.css' => '476e9330',
    'core.pkg.js' => '1d376fa9',
    'darkconsole.pkg.js' => 'e7393ebb',
    'differential.pkg.css' => '3fb7f532',
@ -51,9 +51,9 @@ return array(
    'rsrc/css/application/conpherence/menu.css' => '8344d122',
    'rsrc/css/application/conpherence/message-pane.css' => 'c075e8fe',
    'rsrc/css/application/conpherence/notification.css' => '6cdcc253',
+    'rsrc/css/application/conpherence/participant-pane.css' => '7bba0b56',
    'rsrc/css/application/conpherence/transaction.css' => '46253e19',
    'rsrc/css/application/conpherence/update.css' => '53bc527a',
-    'rsrc/css/application/conpherence/widget-pane.css' => '827a21f1',
    'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4',
    'rsrc/css/application/countdown/timer.css' => '16c52f5c',
    'rsrc/css/application/daemon/bulk-job.css' => 'df9c1d4a',
@ -110,7 +110,7 @@ return array(
    'rsrc/css/core/core.css' => 'd0801452',
    'rsrc/css/core/remarkup.css' => 'cd912f2c',
    'rsrc/css/core/syntax.css' => '769d3498',
-    'rsrc/css/core/z-index.css' => 'a847e919',
+    'rsrc/css/core/z-index.css' => '0d4e5558',
    'rsrc/css/diviner/diviner-shared.css' => 'aa3656aa',
    'rsrc/css/font/font-aleo.css' => '8bdb2835',
    'rsrc/css/font/font-awesome.css' => '2b7ebbcc',
@ -439,8 +439,8 @@ return array(
    'rsrc/js/application/conpherence/ConpherenceThreadManager.js' => '01774ab2',
    'rsrc/js/application/conpherence/behavior-drag-and-drop-photo.js' => 'cf86d16a',
    'rsrc/js/application/conpherence/behavior-durable-column.js' => 'd3506890',
-    'rsrc/js/application/conpherence/behavior-menu.js' => '7a2f5952',
-    'rsrc/js/application/conpherence/behavior-participants-pane.js' => '08872fb7',
+    'rsrc/js/application/conpherence/behavior-menu.js' => '9eb55204',
+    'rsrc/js/application/conpherence/behavior-participant-pane.js' => '8604caa8',
    'rsrc/js/application/conpherence/behavior-pontificate.js' => '21ba5861',
    'rsrc/js/application/conpherence/behavior-quicksand-blacklist.js' => '7927a7d3',
    'rsrc/js/application/conpherence/behavior-toggle-widget.js' => '9bdbbab0',
@ -623,10 +623,10 @@ return array(
    'conpherence-menu-css' => '8344d122',
    'conpherence-message-pane-css' => 'c075e8fe',
    'conpherence-notification-css' => '6cdcc253',
+    'conpherence-participant-pane-css' => '7bba0b56',
    'conpherence-thread-manager' => '01774ab2',
    'conpherence-transaction-css' => '46253e19',
    'conpherence-update-css' => '53bc527a',
-    'conpherence-widget-pane-css' => '827a21f1',
    'd3' => 'a11a5ff2',
    'differential-changeset-view-css' => '9ef7d354',
    'differential-core-view-css' => '5b7b8ff4',
@ -668,8 +668,8 @@ return array(
    'javelin-behavior-comment-actions' => '0300eae6',
    'javelin-behavior-config-reorder-fields' => 'b6993408',
    'javelin-behavior-conpherence-drag-and-drop-photo' => 'cf86d16a',
-    'javelin-behavior-conpherence-menu' => '7a2f5952',
-    'javelin-behavior-conpherence-participants-pane' => '08872fb7',
+    'javelin-behavior-conpherence-menu' => '9eb55204',
+    'javelin-behavior-conpherence-participant-pane' => '8604caa8',
    'javelin-behavior-conpherence-pontificate' => '21ba5861',
    'javelin-behavior-countdown-timer' => 'e4cc26b3',
    'javelin-behavior-dark-console' => 'f411b6ae',
@ -884,7 +884,7 @@ return array(
    'phabricator-uiexample-reactor-select' => 'a155550f',
    'phabricator-uiexample-reactor-sendclass' => '1def2711',
    'phabricator-uiexample-reactor-sendproperties' => 'b1f0ccee',
-    'phabricator-zindex-css' => 'a847e919',
+    'phabricator-zindex-css' => '0d4e5558',
    'phame-css' => '8efb0729',
    'pholio-css' => 'ca89d380',
    'pholio-edit-css' => '07676f51',
@ -1060,15 +1060,6 @@ return array(
      'javelin-stratcom',
      'javelin-vector',
    ),
-    '08872fb7' => array(
-      'javelin-behavior',
-      'javelin-dom',
-      'javelin-stratcom',
-      'javelin-workflow',
-      'javelin-util',
-      'phabricator-notification',
-      'conpherence-thread-manager',
-    ),
    '0a0b10e9' => array(
      'javelin-behavior',
      'javelin-stratcom',
@ -1572,20 +1563,6 @@ return array(
      'javelin-behavior',
      'javelin-quicksand',
    ),
-    '7a2f5952' => array(
-      'javelin-behavior',
-      'javelin-dom',
-      'javelin-util',
-      'javelin-stratcom',
-      'javelin-workflow',
-      'javelin-behavior-device',
-      'javelin-history',
-      'javelin-vector',
-      'javelin-scrollbar',
-      'phabricator-title',
-      'phabricator-shaped-request',
-      'conpherence-thread-manager',
-    ),
    '7a68dda3' => array(
      'owners-path-editor',
      'javelin-behavior',
@ -1639,6 +1616,15 @@ return array(
    '85ee8ce6' => array(
      'aphront-dialog-view-css',
    ),
+    '8604caa8' => array(
+      'javelin-behavior',
+      'javelin-dom',
+      'javelin-stratcom',
+      'javelin-workflow',
+      'javelin-util',
+      'phabricator-notification',
+      'conpherence-thread-manager',
+    ),
    '8694b1df' => array(
      'javelin-behavior',
      'javelin-dom',
@ -1761,6 +1747,20 @@ return array(
      'javelin-workflow',
      'javelin-stratcom',
    ),
+    '9eb55204' => array(
+      'javelin-behavior',
+      'javelin-dom',
+      'javelin-util',
+      'javelin-stratcom',
+      'javelin-workflow',
+      'javelin-behavior-device',
+      'javelin-history',
+      'javelin-vector',
+      'javelin-scrollbar',
+      'phabricator-title',
+      'phabricator-shaped-request',
+      'conpherence-thread-manager',
+    ),
    '9ef7d354' => array(
      'phui-inline-comment-view-css',
    ),
@ -2309,13 +2309,13 @@ return array(
      'conpherence-notification-css',
      'conpherence-transaction-css',
      'conpherence-update-css',
-      'conpherence-widget-pane-css',
+      'conpherence-participant-pane-css',
      'conpherence-header-pane-css',
    ),
    'conpherence.pkg.js' => array(
      'javelin-behavior-conpherence-drag-and-drop-photo',
      'javelin-behavior-conpherence-menu',
-      'javelin-behavior-conpherence-participants-pane',
+      'javelin-behavior-conpherence-participant-pane',
      'javelin-behavior-conpherence-pontificate',
      'javelin-behavior-toggle-widget',
    ),
--- a/resources/celerity/packages.php
+++ b/resources/celerity/packages.php
@ -158,13 +158,13 @@ return array(
    'conpherence-notification-css',
    'conpherence-transaction-css',
    'conpherence-update-css',
-    'conpherence-widget-pane-css',
+    'conpherence-participant-pane-css',
    'conpherence-header-pane-css',
  ),
  'conpherence.pkg.js' => array(
    'javelin-behavior-conpherence-drag-and-drop-photo',
    'javelin-behavior-conpherence-menu',
-    'javelin-behavior-conpherence-participants-pane',
+    'javelin-behavior-conpherence-participant-pane',
    'javelin-behavior-conpherence-pontificate',
    'javelin-behavior-toggle-widget',
  ),
--- a/src/applications/conpherence/controller/ConpherenceParticipantController.php
+++ b/src/applications/conpherence/controller/ConpherenceParticipantController.php
@ -13,61 +13,26 @@ final class ConpherenceParticipantController extends ConpherenceController {
    if (!$conpherence_id) {
      return new Aphront404Response();
    }
+
    $conpherence = id(new ConpherenceThreadQuery())
      ->setViewer($viewer)
      ->withIDs(array($conpherence_id))
      ->needWidgetData(true)
      ->executeOne();
+
    if (!$conpherence) {
      return new Aphront404Response();
    }
-    $this->setConpherence($conpherence);
-    $content = $this->renderParticipantPaneContent();
+
+    $uri = $this->getApplicationURI('update/'.$conpherence->getID().'/');
+    $content = id(new ConpherenceParticipantView())
+      ->setUser($this->getViewer())
+      ->setConpherence($conpherence)
+      ->setUpdateURI($uri);
+
+    $content = array('widgets' => $content);

    return id(new AphrontAjaxResponse())->setContent($content);
  }

-  private function renderParticipantPaneContent() {
-    $conpherence = $this->getConpherence();
-
-    $widgets = array();
-    $new_icon = id(new PHUIIconView())
-      ->setIcon('fa-plus-square')
-      ->setHref($this->getUpdateURI())
-      ->setMetadata(array('widget' => null))
-      ->addSigil('conpherence-widget-adder');
-
-    $content = id(new ConpherenceParticipantView())
-      ->setUser($this->getViewer())
-      ->setConpherence($this->getConpherence())
-      ->setUpdateURI($this->getUpdateURI());
-
-    $widgets[] = phutil_tag(
-      'div',
-      array(
-        'class' => 'widgets-header',
-      ),
-      id(new PHUIHeaderView())
-      ->setHeader(pht('Participants'))
-      ->addActionItem($new_icon));
-
-    $widgets[] = javelin_tag(
-      'div',
-      array(
-        'class' => 'widgets-body',
-        'id' => 'widgets-people',
-        'sigil' => 'widgets-people',
-      ),
-      $content);
-
-    // without this implosion we get "," between each element in our widgets
-    // array
-    return array('widgets' => phutil_implode_html('', $widgets));
-  }
-
-  private function getUpdateURI() {
-    $conpherence = $this->getConpherence();
-    return $this->getApplicationURI('update/'.$conpherence->getID().'/');
-  }
-
 }
--- a/src/applications/conpherence/view/ConpherenceLayoutView.php
+++ b/src/applications/conpherence/view/ConpherenceLayoutView.php
@ -64,7 +64,7 @@ final class ConpherenceLayoutView extends AphrontView {
  public function render() {
    require_celerity_resource('conpherence-menu-css');
    require_celerity_resource('conpherence-message-pane-css');
-    require_celerity_resource('conpherence-widget-pane-css');
+    require_celerity_resource('conpherence-participant-pane-css');

    $layout_id = 'conpherence-main-layout';

@ -105,7 +105,7 @@ final class ConpherenceLayoutView extends AphrontView {
      $classes[] = 'hide-widgets';
    }

-    $this->initBehavior('conpherence-participants-pane');
+    $this->initBehavior('conpherence-participant-pane');

    return javelin_tag(
      'div',
@ -172,9 +172,9 @@ final class ConpherenceLayoutView extends AphrontView {
            javelin_tag(
              'div',
              array(
-                'class' => 'conpherence-widget-pane',
-                'id' => 'conpherence-widget-pane',
-                'sigil' => 'conpherence-widget-pane',
+                'class' => 'conpherence-participant-pane',
+                'id' => 'conpherence-participant-pane',
+                'sigil' => 'conpherence-participant-pane',
              ),
              array(
                phutil_tag(
--- a/src/applications/conpherence/view/ConpherenceParticipantView.php
+++ b/src/applications/conpherence/view/ConpherenceParticipantView.php
@ -5,29 +5,24 @@ final class ConpherenceParticipantView extends AphrontView {
  private $conpherence;
  private $updateURI;

-  public function setUpdateURI($update_uri) {
-    $this->updateURI = $update_uri;
-    return $this;
-  }
-  public function getUpdateURI() {
-    return $this->updateURI;
-  }
-
  public function setConpherence(ConpherenceThread $conpherence) {
    $this->conpherence = $conpherence;
    return $this;
  }
-  public function getConpherence() {
-    return $this->conpherence;
+
+  public function setUpdateURI($uri) {
+    $this->updateURI = $uri;
+    return $this;
  }

  public function render() {
-    $conpherence = $this->getConpherence();
-    $widget_data = $conpherence->getWidgetData();
-    $viewer = $this->getUser();
+    $conpherence = $this->conpherence;
+    $viewer = $this->getViewer();

    $participants = $conpherence->getParticipants();
+    $count = new PhutilNumber(count($participants));
    $handles = $conpherence->getHandles();
+    $handles = array_intersect_key($handles, $participants);
    $head_handles = array_select_keys($handles, array($viewer->getPHID()));
    $handle_list = mpull($handles, 'getName');
    natcasesort($handle_list);
@ -88,7 +83,30 @@ final class ConpherenceParticipantView extends AphrontView {
        ));
    }

-    return $body;
+    $new_icon = id(new PHUIIconView())
+      ->setIcon('fa-plus-square')
+      ->setHref($this->updateURI)
+      ->setMetadata(array('widget' => null))
+      ->addSigil('conpherence-widget-adder');
+
+    $header = id(new PHUIHeaderView())
+      ->setHeader(pht('Participants (%d)', $count))
+      ->addClass('widgets-header')
+      ->addActionItem($new_icon);
+
+    $content = javelin_tag(
+      'div',
+      array(
+        'class' => 'widgets-body',
+        'id' => 'widgets-people',
+        'sigil' => 'widgets-people',
+      ),
+      array(
+        $header,
+        $body,
+      ));
+
+    return $content;
  }

 }
--- a/webroot/rsrc/css/application/conpherence/participant-pane.css
+++ b/webroot/rsrc/css/application/conpherence/participant-pane.css
@ -1,80 +1,85 @@
 /**
- * @provides conpherence-widget-pane-css
+ * @provides conpherence-participant-pane-css
 */

-.conpherence-widget-pane {
+.conpherence-participant-pane {
  position: fixed;
  right: 0px;
  top: 103px;
  bottom: 0;
  width: 240px;
  border-width: 0 0 0 1px;
-  border-color: {$lightblueborder};
+  border-color: {$thinblueborder};
  border-style: solid;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
 }

-.device .conpherence-widget-pane {
+.device .conpherence-participant-pane {
  background-color: {$page.background};
 }

-.conpherence-widget-pane .aphront-form-input {
+.conpherence-participant-pane .aphront-form-input {
  margin: 0;
  width: 100%;
 }

-.conpherence-widget-pane .aphront-form-inset {
+.conpherence-participant-pane .aphront-form-inset {
  border: 0;
 }

-.conpherence-widget-pane .widgets-header .phui-header-shell {
-  padding: 6px 8px;
+.conpherence-participant-pane .widgets-header.phui-header-shell {
+  padding: 8px 12px 6px;
+  border: none;
 }

-.conpherence-widget-pane .widgets-header .phui-header-header {
+.conpherence-participant-pane .widgets-header .phui-header-header {
  font-size: {$biggerfontsize};
 }

-.conpherence-widget-pane .widgets-header .phui-icon-view.disabled {
+.conpherence-participant-pane .widgets-header .phui-icon-view.disabled {
  color: {$lightgreytext};
 }

-.conpherence-widget-pane .widgets-body {
+.conpherence-participant-pane .widgets-body {
  position: fixed;
  overflow-y: auto;
  bottom: 0;
-  top: 144px;
+  top: 102px;
  width: 240px;
 }

-.conpherence-widget-pane .person-entry {
-  padding: 4px 4px 4px 8px;
+.conpherence-participant-pane .person-entry {
+  padding: 4px 8px 4px 12px;
 }

-.conpherence-widget-pane .person-entry:hover {
+.conpherence-participant-pane .person-entry:hover {
  background-color: {$lightgreybackground};
 }

-.conpherence-widget-pane .person-entry a {
+.conpherence-participant-pane .person-entry a {
  float: left;
-  font-weight: bold;
  line-height: 22px;
-  color: {$darkbluetext};
+  color: {$bluetext};
+  font-weight: bold;
 }

-.conpherence-widget-pane .person-entry a img {
+.conpherence-participant-pane .person-entry:hover a {
+  color: #000;
+}
+
+.conpherence-participant-pane .person-entry a img {
  height: 24px;
  width: 24px;
  border-radius: 3px;
 }

-.conpherence-widget-pane .person-entry .pic {
+.conpherence-participant-pane .person-entry .pic {
  float: left;
  width: 30px;
 }

-.conpherence-widget-pane .person-entry .remove {
+.conpherence-participant-pane .person-entry .remove {
  float: right;
  width: 20px;
  height: 20px;
@ -85,21 +90,21 @@
  color: {$red};
 }

-.conpherence-widget-pane .person-entry .remove:hover {
+.conpherence-participant-pane .person-entry .remove:hover {
  text-decoration: none;
 }

-.conpherence-widget-pane .person-entry .remove .close-icon {
+.conpherence-participant-pane .person-entry .remove .close-icon {
  color: #bfbfbf;
 }

-.conpherence-widget-pane .person-entry .remove:hover .close-icon {
+.conpherence-participant-pane .person-entry .remove:hover .close-icon {
  color: #000;
 }

 /****** Hide Widgets **********************************************************/

-.hide-widgets .conpherence-widget-pane {
+.hide-widgets .conpherence-participant-pane {
  display: none;
 }

--- a/webroot/rsrc/css/core/z-index.css
+++ b/webroot/rsrc/css/core/z-index.css
@ -150,7 +150,7 @@ div.jx-typeahead-results {
  z-index: 21;
 }

-.conpherence-widget-pane {
+.conpherence-participant-pane {
  z-index: 25;
 }

--- a/webroot/rsrc/js/application/conpherence/behavior-menu.js
+++ b/webroot/rsrc/js/application/conpherence/behavior-menu.js
@ -231,7 +231,7 @@ JX.behavior('conpherence-menu', function(config) {

  function markWidgetLoading(loading) {
    var root = JX.DOM.find(document, 'div', 'conpherence-layout');
-    var widgets_root = JX.DOM.find(root, 'div', 'conpherence-widget-pane');
+    var widgets_root = JX.DOM.find(root, 'div', 'conpherence-participant-pane');

    JX.DOM.alterClass(widgets_root, 'loading', loading);
  }
--- a/webroot/rsrc/js/application/conpherence/behavior-participants-pane.js
+++ b/webroot/rsrc/js/application/conpherence/behavior-participants-pane.js
@ -6,10 +6,10 @@
 *           javelin-util
 *           phabricator-notification
 *           conpherence-thread-manager
- * @provides javelin-behavior-conpherence-participants-pane
+ * @provides javelin-behavior-conpherence-participant-pane
 */

-JX.behavior('conpherence-participants-pane', function() {
+JX.behavior('conpherence-participant-pane', function() {

  /**
   * Generified adding new stuff to widgets technology!