Make Conpherence Pontificate Send-on-Enter

Summary: Fixes T11623. Enables send-on-enter and shift-enter for linebreaks, per durable column. Also cleaned up UI for Joining Room or Logging In.

Test Plan: See room I can join, click Join Room. Leave Room, Log out, visit room with login prompt. Login, Join Room again.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Maniphest Tasks: T11623

Differential Revision: https://secure.phabricator.com/D16595

resources/celerity/map.php

@@ -7,9 +7,9 @@
  */
 return array(
   'names' => array(
-    'conpherence.pkg.css' => '80a3fcb3',
-    'conpherence.pkg.js' => '89b4837e',
-    'core.pkg.css' => 'f7b03076',
+    'conpherence.pkg.css' => '5722975a',
+    'conpherence.pkg.js' => '11f3e07e',
+    'core.pkg.css' => '2fd26498',
     'core.pkg.js' => '1d376fa9',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '3fb7f532',
@@ -49,7 +49,7 @@ return array(
     'rsrc/css/application/conpherence/durable-column.css' => '194ac487',
     'rsrc/css/application/conpherence/header-pane.css' => '517de9fe',
     'rsrc/css/application/conpherence/menu.css' => '78c7b811',
-    'rsrc/css/application/conpherence/message-pane.css' => '8d13ac4d',
+    'rsrc/css/application/conpherence/message-pane.css' => '1b49960e',
     'rsrc/css/application/conpherence/notification.css' => '6cdcc253',
     'rsrc/css/application/conpherence/participant-pane.css' => '7bba0b56',
     'rsrc/css/application/conpherence/transaction.css' => '46253e19',
@@ -138,7 +138,7 @@ return array(
     'rsrc/css/phui/phui-document.css' => 'c32e8dec',
     'rsrc/css/phui/phui-feed-story.css' => 'aa49845d',
     'rsrc/css/phui/phui-fontkit.css' => '9cda225e',
-    'rsrc/css/phui/phui-form-view.css' => '76b4a46c',
+    'rsrc/css/phui/phui-form-view.css' => '9e22b190',
     'rsrc/css/phui/phui-form.css' => 'aac1d51d',
     'rsrc/css/phui/phui-head-thing.css' => 'fd311e5f',
     'rsrc/css/phui/phui-header-view.css' => '06385974',
@@ -441,7 +441,7 @@ return array(
     'rsrc/js/application/conpherence/behavior-durable-column.js' => 'd3506890',
     '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-pontificate.js' => 'f2e58483',
     'rsrc/js/application/conpherence/behavior-quicksand-blacklist.js' => '7927a7d3',
     'rsrc/js/application/conpherence/behavior-toggle-widget.js' => '9bdbbab0',
     'rsrc/js/application/countdown/timer.js' => 'e4cc26b3',
@@ -621,7 +621,7 @@ return array(
     'conpherence-durable-column-view' => '194ac487',
     'conpherence-header-pane-css' => '517de9fe',
     'conpherence-menu-css' => '78c7b811',
-    'conpherence-message-pane-css' => '8d13ac4d',
+    'conpherence-message-pane-css' => '1b49960e',
     'conpherence-notification-css' => '6cdcc253',
     'conpherence-participant-pane-css' => '7bba0b56',
     'conpherence-thread-manager' => '01774ab2',
@@ -670,7 +670,7 @@ return array(
     'javelin-behavior-conpherence-drag-and-drop-photo' => 'cf86d16a',
     'javelin-behavior-conpherence-menu' => '9eb55204',
     'javelin-behavior-conpherence-participant-pane' => '8604caa8',
-    'javelin-behavior-conpherence-pontificate' => '21ba5861',
+    'javelin-behavior-conpherence-pontificate' => 'f2e58483',
     'javelin-behavior-countdown-timer' => 'e4cc26b3',
     'javelin-behavior-dark-console' => 'f411b6ae',
     'javelin-behavior-dashboard-async-panel' => '469c0d9e',
@@ -915,7 +915,7 @@ return array(
     'phui-font-icon-base-css' => '870a7360',
     'phui-fontkit-css' => '9cda225e',
     'phui-form-css' => 'aac1d51d',
-    'phui-form-view-css' => '76b4a46c',
+    'phui-form-view-css' => '9e22b190',
     'phui-head-thing-view-css' => 'fd311e5f',
     'phui-header-view-css' => '06385974',
     'phui-hovercard' => '1bd28176',
@@ -1154,14 +1154,6 @@ return array(
       'javelin-uri',
       'javelin-routable',
     ),
-    '21ba5861' => array(
-      'javelin-behavior',
-      'javelin-dom',
-      'javelin-util',
-      'javelin-workflow',
-      'javelin-stratcom',
-      'conpherence-thread-manager',
-    ),
     '21df4ff5' => array(
       'javelin-install',
       'javelin-workboard-card',
@@ -2208,6 +2200,14 @@ return array(
     'f03e17be' => array(
       'phui-theme-css',
     ),
+    'f2e58483' => array(
+      'javelin-behavior',
+      'javelin-dom',
+      'javelin-util',
+      'javelin-workflow',
+      'javelin-stratcom',
+      'conpherence-thread-manager',
+    ),
     'f411b6ae' => array(
       'javelin-behavior',
       'javelin-stratcom',

src/__phutil_library_map__.php

@@ -4769,7 +4769,7 @@ phutil_register_library_map(array(
     'ConpherenceFulltextQuery' => 'PhabricatorOffsetPagedQuery',
     'ConpherenceImageData' => 'ConpherenceConstants',
     'ConpherenceIndex' => 'ConpherenceDAO',
-    'ConpherenceLayoutView' => 'AphrontView',
+    'ConpherenceLayoutView' => 'AphrontTagView',
     'ConpherenceListController' => 'ConpherenceController',
     'ConpherenceMenuItemView' => 'AphrontTagView',
     'ConpherenceNewRoomController' => 'ConpherenceController',

src/applications/conpherence/controller/ConpherenceController.php

@@ -62,9 +62,15 @@ abstract class ConpherenceController extends PhabricatorController {
         ->addClass((!$data['topic']) ? 'conpherence-no-topic' : null);
 
       $can_edit = PhabricatorPolicyFilter::hasCapability(
-          $viewer,
-          $conpherence,
-          PhabricatorPolicyCapability::CAN_EDIT);
+        $viewer,
+        $conpherence,
+        PhabricatorPolicyCapability::CAN_EDIT);
+
+      $participating = $conpherence->getParticipantIfExists($viewer->getPHID());
+      $can_join = PhabricatorPolicyFilter::hasCapability(
+        $viewer,
+        $conpherence,
+        PhabricatorPolicyCapability::CAN_JOIN);
 
       $header->addActionItem(
         id(new PHUIIconCircleView())
@@ -101,6 +107,38 @@ abstract class ConpherenceController extends PhabricatorController {
           ->setIcon('fa-group')
           ->setHref('#')
           ->addClass('conpherence-participant-toggle'));
+
+      if ($can_join && !$participating) {
+        $action = ConpherenceUpdateActions::JOIN_ROOM;
+        $uri = $this->getApplicationURI('update/'.$conpherence->getID().'/');
+        $button = phutil_tag(
+          'button',
+          array(
+            'type' => 'SUBMIT',
+            'class' => 'button green mlr',
+          ),
+          pht('Join Room'));
+
+        $hidden = phutil_tag(
+          'input',
+          array(
+            'type' => 'hidden',
+            'name' => 'action',
+            'value' => ConpherenceUpdateActions::JOIN_ROOM,
+          ));
+
+        $form = phabricator_form(
+          $viewer,
+          array(
+            'method' => 'POST',
+            'action' => (string)$uri,
+          ),
+          array(
+            $hidden,
+            $button,
+          ));
+        $header->addActionItem($form);
+      }
     }
 
     return $header;

src/applications/conpherence/controller/ConpherenceViewController.php

@@ -118,6 +118,11 @@ final class ConpherenceViewController extends
       return id(new AphrontAjaxResponse())->setContent($content);
     }
 
+    $can_join = PhabricatorPolicyFilter::hasCapability(
+        $user,
+        $conpherence,
+        PhabricatorPolicyCapability::CAN_JOIN);
+
     $layout = id(new ConpherenceLayoutView())
       ->setUser($user)
       ->setBaseURI($this->getApplicationURI())
@@ -128,6 +133,12 @@ final class ConpherenceViewController extends
       ->setLatestTransactionID($data['latest_transaction_id'])
       ->setRole('thread');
 
+    $participating = $conpherence->getParticipantIfExists($user->getPHID());
+
+    if (!$user->isLoggedIn()) {
+      $layout->addClass('conpherence-no-pontificate');
+    }
+
     return $this->newPage()
       ->setTitle($title)
       ->setPageObjectPHIDs(array($conpherence->getPHID()))
@@ -149,46 +160,56 @@ final class ConpherenceViewController extends
     $draft = PhabricatorDraft::newFromUserAndKey(
       $user,
       $conpherence->getPHID());
-    if ($participating) {
-      $action = ConpherenceUpdateActions::MESSAGE;
-      $button_text = pht('Send');
-    } else if ($user->isLoggedIn()) {
-      $action = ConpherenceUpdateActions::JOIN_ROOM;
-      $button_text = pht('Join Room');
+    $update_uri = $this->getApplicationURI('update/'.$conpherence->getID().'/');
+
+    if ($user->isLoggedIn()) {
+      $this->initBehavior('conpherence-pontificate');
+      if ($participating) {
+        $action = ConpherenceUpdateActions::MESSAGE;
+        $status = pht('I\'ll find something to put here.');
+      } else {
+        $action = ConpherenceUpdateActions::JOIN_ROOM;
+        $status = pht('Sending a message will also join the room.');
+      }
+
+      $form = id(new AphrontFormView())
+        ->setUser($user)
+        ->setAction($update_uri)
+        ->addSigil('conpherence-pontificate')
+        ->setWorkflow(true)
+        ->addHiddenInput('action', $action)
+        ->appendChild(
+          id(new PhabricatorRemarkupControl())
+          ->setUser($user)
+          ->setName('text')
+          ->setValue($draft->getDraft()));
+
+      $status_view = phutil_tag(
+        'div',
+        array(
+          'class' => 'conpherence-room-status',
+          'id' => 'conpherence-room-status',
+        ),
+        $status);
+
+      $view = phutil_tag_div(
+        'pontificate-container', array($form, $status_view));
+
+      return $view;
+
     } else {
       // user not logged in so give them a login button.
       $login_href = id(new PhutilURI('/auth/start/'))
         ->setQueryParam('next', '/'.$conpherence->getMonogram());
       return id(new PHUIFormLayoutView())
         ->addClass('login-to-participate')
+        ->appendInstructions(pht('Log in to join this room and participate.'))
         ->appendChild(
           id(new PHUIButtonView())
           ->setTag('a')
           ->setText(pht('Login to Participate'))
           ->setHref((string)$login_href));
     }
-    $update_uri = $this->getApplicationURI('update/'.$conpherence->getID().'/');
-
-    $this->initBehavior('conpherence-pontificate');
-
-    $form =
-      id(new AphrontFormView())
-      ->setUser($user)
-      ->setAction($update_uri)
-      ->addSigil('conpherence-pontificate')
-      ->setWorkflow(true)
-      ->addHiddenInput('action', $action)
-      ->appendChild(
-        id(new PhabricatorRemarkupControl())
-        ->setUser($user)
-        ->setName('text')
-        ->setValue($draft->getDraft()))
-      ->appendChild(
-        id(new AphrontFormSubmitControl())
-        ->setValue($button_text))
-      ->render();
-
-    return $form;
   }
 
   private function getNeededTransactions(

src/applications/conpherence/view/ConpherenceLayoutView.php

@@ -1,6 +1,6 @@
 <?php
 
-final class ConpherenceLayoutView extends AphrontView {
+final class ConpherenceLayoutView extends AphrontTagView {
 
   private $thread;
   private $baseURI;
@@ -61,13 +61,27 @@ final class ConpherenceLayoutView extends AphrontView {
     return (bool)$user->getUserSetting($widget_key, false);
   }
 
-  public function render() {
+  protected function getTagAttributes() {
+    $classes = array();
+    if (!$this->getWidgetColumnVisible()) {
+      $classes[] = 'hide-widgets';
+    }
+
+    return array(
+        'id'    => 'conpherence-main-layout',
+        'sigil' => 'conpherence-layout',
+        'class' => 'conpherence-layout '.
+                    implode(' ', $classes).
+                    ' conpherence-role-'.$this->role,
+      );
+
+  }
+
+  protected function getTagContent() {
     require_celerity_resource('conpherence-menu-css');
     require_celerity_resource('conpherence-message-pane-css');
     require_celerity_resource('conpherence-participant-pane-css');
 
-    $layout_id = 'conpherence-main-layout';
-
     $selected_id = null;
     $selected_thread_id = null;
     $selected_thread_phid = null;
@@ -87,7 +101,7 @@ final class ConpherenceLayoutView extends AphrontView {
     $this->initBehavior('conpherence-menu',
       array(
         'baseURI' => $this->baseURI,
-        'layoutID' => $layout_id,
+        'layoutID' => 'conpherence-main-layout',
         'selectedID' => $selected_id,
         'selectedThreadID' => $selected_thread_id,
         'selectedThreadPHID' => $selected_thread_phid,
@@ -99,26 +113,9 @@ final class ConpherenceLayoutView extends AphrontView {
         'hasWidgets' => false,
       ));
 
-    $classes = array();
-    if (!$this->getUser()->isLoggedIn()) {
-      $classes[] = 'conpherence-logged-out';
-    }
-
-    if (!$this->getWidgetColumnVisible()) {
-      $classes[] = 'hide-widgets';
-    }
-
     $this->initBehavior('conpherence-participant-pane');
 
-    return javelin_tag(
-      'div',
-      array(
-        'id'    => $layout_id,
-        'sigil' => 'conpherence-layout',
-        'class' => 'conpherence-layout '.
-                    implode(' ', $classes).
-                    ' conpherence-role-'.$this->role,
-      ),
+    return
       array(
         javelin_tag(
           'div',
@@ -202,7 +199,7 @@ final class ConpherenceLayoutView extends AphrontView {
                   nonempty($this->replyForm, '')),
               )),
           )),
-      ));
+      );
   }
 
   private function buildNUXView() {

src/view/form/AphrontFormView.php

@@ -9,11 +9,11 @@ final class AphrontFormView extends AphrontView {
   private $encType;
   private $workflow;
   private $id;
-  private $shaded = false;
   private $sigils = array();
   private $metadata;
   private $controls = array();
   private $fullWidth = false;
+  private $classes = array();
 
   public function setMetadata($metadata) {
     $this->metadata = $metadata;
@@ -44,11 +44,6 @@ final class AphrontFormView extends AphrontView {
     return $this;
   }
 
-  public function setShaded($shaded) {
-    $this->shaded = $shaded;
-    return $this;
-  }
-
   public function addHiddenInput($key, $value) {
     $this->data[$key] = $value;
     return $this;
@@ -64,6 +59,11 @@ final class AphrontFormView extends AphrontView {
     return $this;
   }
 
+  public function addClass($class) {
+    $this->classes[] = $class;
+    return $this;
+  }
+
   public function setFullWidth($full_width) {
     $this->fullWidth = $full_width;
     return $this;
@@ -149,7 +149,7 @@ final class AphrontFormView extends AphrontView {
     return phabricator_form(
       $this->getViewer(),
       array(
-        'class'   => $this->shaded ? 'phui-form-shaded' : null,
+        'class'   => implode(' ', $this->classes),
         'action'  => $this->action,
         'method'  => $this->method,
         'enctype' => $this->encType,

webroot/rsrc/css/application/conpherence/message-pane.css

@@ -58,16 +58,12 @@
   left: 240px;
   right: 240px;
   top: 103px;
-  bottom: 148px;
+  bottom: 122px;
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
 
-.conpherence-logged-out .conpherence-message-pane .conpherence-messages {
-  bottom: 42px;
-}
-
 .conpherence-messages.jx-scrollbar-frame {
   overflow-y: hidden;
 }
@@ -77,7 +73,7 @@
   padding-top: 20px;
 }
 
-.conpherence-messages .jx-scrollbar-content .conpherence-edited:last-child {
+.conpherence-messages .conpherence-edited:last-child {
   padding-bottom: 20px;
 }
 
@@ -93,19 +89,9 @@
   box-shadow: none;
 }
 
-.conpherence-message-pane .messages-loading-mask {
-  opacity: .6;
-  background: #fff;
-  display: none;
-}
-
-.loading .messages-loading-mask {
-  display: block;
-}
-
 .conpherence-message-pane .phui-form-view {
   border-width: 0;
-  height: 140px;
+  height: 110px;
   padding: 0 20px 12px;
   position: fixed;
   bottom: 0;
@@ -113,18 +99,40 @@
   right: 241px;
 }
 
+.conpherence-room-status {
+  font-size: {$smallerfontsize};
+  color: {$lightgreytext};
+  font-style: italic;
+  position: absolute;
+  bottom: 6px;
+  left: 24px;
+}
+
+.conpherence-no-pontificate .conpherence-message-pane .phui-form-view {
+  border-top: 1px solid {$thinblueborder};
+  text-align: center;
+}
+
+.conpherence-no-pontificate .conpherence-message-pane
+  .aphront-form-control-submit button,
+.conpherence-no-pontificate .conpherence-message-pane
+  .aphront-form-control-submit a.button {
+  margin: 4px 0 0 0;
+  float: none;
+}
+
+.conpherence-no-pontificate .phui-form-view .aphront-form-instructions {
+  margin: 24px 0 16px;
+  width: 100%;
+  padding: 0;
+  color: {$bluetext};
+  font-size: {$biggestfontsize};
+}
+
 .device .conpherence-message-pane .phui-form-view {
   padding: 8px 8px;
 }
 
-.conpherence-message-pane .phui-form-view.login-to-participate {
-  height: 26px;
-}
-
-.conpherence-message-pane .login-to-participate a.button {
-  float: right;
-}
-
 .conpherence-message-pane .aphront-form-control-submit button,
 .conpherence-message-pane .aphront-form-control-submit a.button {
   margin-top: 6px;
@@ -152,7 +160,7 @@
   border-bottom: none;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
-  background-color: #f7f7f7;
+  background-color: {$lightgreybackground};
 }
 
 .device .conpherence-message-pane .remarkup-assist-bar {
@@ -313,7 +321,7 @@
 }
 
 .conpherence-message-pane .remarkup-assist-textarea {
-  height: 80px;
+  height: 68px;
   padding: 8px;
   border: 2px solid {$lightgreyborder};
   border-top: 1px solid {$thinblueborder};

webroot/rsrc/css/phui/phui-form-view.css

@@ -14,12 +14,6 @@
   padding: 0;
 }
 
-/* only used in transaction comments */
-.phui-form-shaded .phui-form-view {
-  border-bottom: 1px solid #D4DAE0;
-  background: #F4F5F8;
-}
-
 .phui-form-view label.aphront-form-label {
   padding-top: 5px;
   width: 19%;

webroot/rsrc/js/application/conpherence/behavior-pontificate.js

@@ -10,7 +10,7 @@
 
 JX.behavior('conpherence-pontificate', function() {
 
-  var onsubmit = function(e) {
+  var _sendMessage = function(e) {
     e.kill();
     var form = e.getNode('tag:form');
     var threadManager = JX.ConpherenceThreadManager.getInstance();
@@ -20,6 +20,29 @@ JX.behavior('conpherence-pontificate', function() {
   JX.Stratcom.listen(
     ['submit', 'didSyntheticSubmit'],
     'conpherence-pontificate',
-    onsubmit);
+    _sendMessage);
+
+  // Send on enter if the shift key is not held.
+  JX.Stratcom.listen(
+    'keydown',
+    'conpherence-pontificate',
+    function(e) {
+      if (e.getSpecialKey() != 'return') {
+        return;
+      }
+
+      var raw = e.getRawEvent();
+      if (raw.shiftKey) {
+        // If the shift key is pressed, let the browser write a newline into
+        // the textarea.
+        return;
+      }
+
+      // From here on, interpret this as a "send" action, not a literal
+      // newline.
+      e.kill();
+
+      _sendMessage(e);
+    });
 
 });