Conpherence - mobilized

Summary:
makes conpherence switch to a liquid layout once we go from desktop -> less than that. When we make the switch conpherence updates to show a few more "Widgets" -- the list of conpherences and the current conversation -- and the switcher starts working. As you transition from device to device you are automagically forced to have the "conversation" widget toggled on initial change to smaller than desktop and then file widget once you get back to desktop.

Generally looks good when I make my browser small. Does not look as good on iOS simulator - in particular there seems to be a weird visual artifact on the "add people" widget that is present in all tokenizers, and the pontificate UI on mobile could use some work. ref T2399.

Test Plan: played in Safari, FF, Chrome and iOS Simulator. The first 3 were all pretty spiffy, and otherwise iOS add people widget was a bit ugly.

Reviewers: epriestley, chad

Reviewed By: epriestley

CC: aran, Korvin, AnhNhan

Maniphest Tasks: T2399

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

src/__celerity_resource_map__.php

@@ -897,7 +897,7 @@ celerity_register_resource_map(array(
   ),
   'conpherence-header-pane-css' =>
   array(
-    'uri' => '/res/7f7cc347/rsrc/css/application/conpherence/header-pane.css',
+    'uri' => '/res/0c8d4664/rsrc/css/application/conpherence/header-pane.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -906,7 +906,7 @@ celerity_register_resource_map(array(
   ),
   'conpherence-menu-css' =>
   array(
-    'uri' => '/res/2ba4444e/rsrc/css/application/conpherence/menu.css',
+    'uri' => '/res/ea53bb96/rsrc/css/application/conpherence/menu.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -915,7 +915,7 @@ celerity_register_resource_map(array(
   ),
   'conpherence-message-pane-css' =>
   array(
-    'uri' => '/res/6a4811a7/rsrc/css/application/conpherence/message-pane.css',
+    'uri' => '/res/cee244ea/rsrc/css/application/conpherence/message-pane.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -933,7 +933,7 @@ celerity_register_resource_map(array(
   ),
   'conpherence-widget-pane-css' =>
   array(
-    'uri' => '/res/207ef6fc/rsrc/css/application/conpherence/widget-pane.css',
+    'uri' => '/res/da148aa8/rsrc/css/application/conpherence/widget-pane.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -1282,7 +1282,7 @@ celerity_register_resource_map(array(
   ),
   'javelin-behavior-conpherence-menu' =>
   array(
-    'uri' => '/res/7021ec83/rsrc/js/application/conpherence/behavior-menu.js',
+    'uri' => '/res/22d7f114/rsrc/js/application/conpherence/behavior-menu.js',
     'type' => 'js',
     'requires' =>
     array(
@@ -1313,7 +1313,7 @@ celerity_register_resource_map(array(
   ),
   'javelin-behavior-conpherence-widget-pane' =>
   array(
-    'uri' => '/res/32f4bf14/rsrc/js/application/conpherence/behavior-widget-pane.js',
+    'uri' => '/res/458394ef/rsrc/js/application/conpherence/behavior-widget-pane.js',
     'type' => 'js',
     'requires' =>
     array(
@@ -1323,6 +1323,7 @@ celerity_register_resource_map(array(
       3 => 'javelin-workflow',
       4 => 'javelin-util',
       5 => 'phabricator-notification',
+      6 => 'javelin-behavior-device',
     ),
     'disk' => '/rsrc/js/application/conpherence/behavior-widget-pane.js',
   ),

src/applications/conpherence/controller/ConpherenceController.php

@@ -43,11 +43,14 @@ abstract class ConpherenceController extends PhabricatorController {
 
     $all_participation = $unread + $read;
     $all_conpherence_phids = array_keys($all_participation);
+    $all_conpherences = array();
+    if ($all_conpherence_phids) {
       $all_conpherences = id(new ConpherenceThreadQuery())
         ->setViewer($user)
         ->withPHIDs($all_conpherence_phids)
         ->needParticipantCache(true)
         ->execute();
+    }
     $unread_conpherences = array_select_keys(
       $all_conpherences,
       array_keys($unread));
@@ -63,7 +66,7 @@ abstract class ConpherenceController extends PhabricatorController {
     $nav = new PhabricatorMenuView();
 
     $nav->newLink(
-      pht('New Conversation'),
+      pht('New Message'),
       $this->getApplicationURI('new/'));
 
     return $nav;
@@ -75,7 +78,7 @@ abstract class ConpherenceController extends PhabricatorController {
     $crumbs
       ->addAction(
         id(new PhabricatorMenuItemView())
-          ->setName(pht('New Conversation'))
+          ->setName(pht('New Message'))
           ->setHref($this->getApplicationURI('new/'))
           ->setIcon('create'))
       ->addCrumb(

src/applications/conpherence/controller/ConpherenceNewController.php

@@ -13,7 +13,7 @@ final class ConpherenceNewController extends ConpherenceController {
       ->attachParticipants(array())
       ->attachFilePHIDs(array())
       ->setMessageCount(0);
-    $title = pht('New Conversation');
+    $title = pht('New Message');
     $participants = array();
     $message = '';
     $files = array();
@@ -137,7 +137,7 @@ final class ConpherenceNewController extends ConpherenceController {
       ->setUser($user)
       ->setTitle($title)
       ->addCancelButton($cancel_uri)
-      ->addSubmitButton(pht('Create Conversation'));
+      ->addSubmitButton(pht('Send Message'));
 
     $form = id(new AphrontFormLayoutView())
       ->setUser($user)

src/applications/conpherence/controller/ConpherenceWidgetController.php

@@ -63,21 +63,6 @@ final class ConpherenceWidgetController extends
   private function renderWidgetPaneContent() {
     require_celerity_resource('conpherence-widget-pane-css');
     require_celerity_resource('sprite-conpherence-css');
-    $can_toggle = 1;
-    $cant_toggle = 0;
-    Javelin::initBehavior(
-      'conpherence-widget-pane',
-      array(
-        'widgetRegistery' => array(
-          'widgets-conpherence-list' => $cant_toggle,
-          'widgets-conversation' => $cant_toggle,
-          'widgets-people' => $can_toggle,
-          'widgets-files' => $can_toggle,
-          'widgets-calendar' => $can_toggle,
-          'widgets-settings' => $can_toggle,
-        )
-      ));
-
     $conpherence = $this->getConpherence();
 
     $widgets = array();
@@ -97,10 +82,9 @@ final class ConpherenceWidgetController extends
             array(
               'sigil' => 'conpherence-change-widget',
               'meta'  => array(
-                'widget' => 'widgets-conpherence-list',
+                'widget' => 'conpherence-menu-pane',
-                'toggleClass' => 'conpherence_list_on'
               ),
-              'id' => 'widgets-conpherence-list-toggle',
+              'id' => 'conpherence-menu-pane-toggle',
               'class' => 'sprite-conpherence conpherence_list_off',
             ),
             ''),
@@ -109,10 +93,9 @@ final class ConpherenceWidgetController extends
             array(
               'sigil' => 'conpherence-change-widget',
               'meta'  => array(
-                'widget' => 'widgets-conversation',
+                'widget' => 'conpherence-message-pane',
-                'toggleClass' => 'conpherence_conversation_on'
               ),
-              'id' => 'widgets-conpherence-conversation-toggle',
+              'id' => 'conpherence-message-pane-toggle',
               'class' => 'sprite-conpherence conpherence_conversation_off',
             ),
             ''),
@@ -122,7 +105,6 @@ final class ConpherenceWidgetController extends
               'sigil' => 'conpherence-change-widget',
               'meta'  => array(
                 'widget' => 'widgets-people',
-                'toggleClass' => 'conpherence_people_on'
               ),
               'id' => 'widgets-people-toggle',
               'class' => 'sprite-conpherence conpherence_people_off'
@@ -134,7 +116,6 @@ final class ConpherenceWidgetController extends
               'sigil' => 'conpherence-change-widget',
               'meta'  => array(
                 'widget' => 'widgets-files',
-                'toggleClass' => 'conpherence_files_on'
               ),
               'id' => 'widgets-files-toggle',
               'class' =>
@@ -147,7 +128,6 @@ final class ConpherenceWidgetController extends
               'sigil' => 'conpherence-change-widget',
               'meta'  => array(
                 'widget' => 'widgets-calendar',
-                'toggleClass' => 'conpherence_calendar_on'
               ),
               'id' => 'widgets-calendar-toggle',
               'class' => 'sprite-conpherence conpherence_calendar_off',
@@ -159,7 +139,6 @@ final class ConpherenceWidgetController extends
               'sigil' => 'conpherence-change-widget',
               'meta'  => array(
                 'widget' => 'widgets-settings',
-                'toggleClass' => 'conpherence_settings_on'
               ),
               'id' => 'widgets-settings-toggle',
               'class' => 'sprite-conpherence conpherence_settings_off',
@@ -326,6 +305,9 @@ final class ConpherenceWidgetController extends
           // This list is sorted, so we can stop looking.
           break;
         }
+
+        if ($status->getDateFrom() < $epoch_end &&
+            $status->getDateTo() > $epoch_start) {
           if (!$first_status_of_the_day) {
             $content[] = phutil_tag(
               'div',
@@ -334,8 +316,6 @@ final class ConpherenceWidgetController extends
               ),
               '');
           }
-        if ($status->getDateFrom() < $epoch_end &&
-            $status->getDateTo() > $epoch_start) {
           $statuses_of_the_day[$status->getUserPHID()] = $status;
           $timespan = $status->getDateTo() - $status->getDateFrom();
           if ($timespan > $one_day) {

src/applications/conpherence/events/ConpherencePeopleMenuEventListener.php

@@ -21,7 +21,7 @@ final class ConpherencePeopleMenuEventListener extends PhutilEventListener {
 
     $conpherence_uri =
       new PhutilURI('/conpherence/new/?participant='.$person->getPHID());
-    $name = pht('Conpherence');
+    $name = pht('Message');
 
     $menu->addMenuItemBefore('activity',
       id(new PhabricatorMenuItemView())

src/applications/conpherence/view/ConpherenceLayoutView.php

@@ -57,12 +57,6 @@ final class ConpherenceLayoutView extends AphrontView {
     Javelin::initBehavior('conpherence-menu',
       array(
         'base_uri' => $this->baseURI,
-        'header' => 'conpherence-header-pane',
-        'messages' => 'conpherence-messages',
-        'messages_pane' => 'conpherence-message-pane',
-        'widgets_pane' => 'conpherence-widget-pane',
-        'form_pane' => 'conpherence-form',
-        'menu_pane' => 'conpherence-menu',
         'layoutID' => $layout_id,
         'selectedID' => ($this->thread ? $this->thread->getID() : null),
         'role' => $this->role,
@@ -79,6 +73,47 @@ final class ConpherenceLayoutView extends AphrontView {
         'activated_class' => 'conpherence-header-upload-photo',
       ));
 
+    $all_views = 1;
+    $devices_only = 0;
+    Javelin::initBehavior(
+      'conpherence-widget-pane',
+      array(
+        'allViews' => $all_views,
+        'devicesOnly' => $devices_only,
+        'widgetRegistery' => array(
+          'conpherence-menu-pane' => $devices_only,
+          'conpherence-message-pane' => $devices_only,
+          'widgets-people' => $all_views,
+          'widgets-files' => $all_views,
+          'widgets-calendar' => $all_views,
+          'widgets-settings' => $all_views,
+        ),
+        'widgetExtraNodes' => array(
+          'conpherence-menu-pane' => array(
+            array(
+              'tagname' => 'div',
+              'sigil' => 'phabricator-nav-column-background',
+              'showstyle' => 'block',
+              'hidestyle' => 'none',
+              'desktopstyle' => 'block'),
+            array(
+              'tagname' => 'a',
+              'sigil' =>  'conpherence-new-conversation',
+              'showstyle' => 'none',
+              'hidestyle' => 'none',
+              'desktopstyle' => 'block'),
+          )
+        ),
+        'widgetToggleMap' => array(
+          'conpherence-menu-pane' => 'conpherence_list_on',
+          'conpherence-message-pane' => 'conpherence_conversation_on',
+          'widgets-people' => 'conpherence_people_on',
+          'widgets-files' => 'conpherence_files_on',
+          'widgets-calendar' => 'conpherence_calendar_on',
+          'widgets-settings' => 'conpherence_settings_on',
+        )
+      ));
+
     return javelin_tag(
       'div',
       array(
@@ -91,11 +126,13 @@ final class ConpherenceLayoutView extends AphrontView {
           'div',
           array(
             'class' => 'phabricator-nav-column-background',
+            'sigil' => 'phabricator-nav-column-background',
           ),
           ''),
         javelin_tag(
           'div',
           array(
+            'id' => 'conpherence-menu-pane',
             'class' => 'conpherence-menu-pane phabricator-side-menu',
             'sigil' => 'conpherence-menu-pane',
           ),
@@ -109,16 +146,40 @@ final class ConpherenceLayoutView extends AphrontView {
             javelin_tag(
               'div',
               array(
-                'class' => 'conpherence-header-pane',
+                'class' => 'conpherence-no-threads',
-                'id' => 'conpherence-header-pane',
+                'sigil' => 'conpherence-no-threads',
-                'sigil' => 'conpherence-header',
+                'style' => 'display: none;',
               ),
-              nonempty($this->header, '')),
+              array(
                 phutil_tag(
+                  'div',
+                  array(
+                    'class' => 'text'
+                  ),
+                  pht('You do not have any conpherences yet.')),
+                javelin_tag(
+                  'a',
+                  array(
+                    'href' => '/conpherence/new/',
+                    'class' => 'button',
+                    'sigil' => 'workflow',
+                  ),
+                  pht('Start a Conpherence'))
+            )),
+            javelin_tag(
+              'div',
+              array(
+                'class' => 'conpherence-header-pane',
+                'id' => 'conpherence-header-pane',
+                'sigil' => 'conpherence-header-pane',
+              ),
+              nonempty($this->header, '')),
+            javelin_tag(
               'div',
               array(
                 'class' => 'conpherence-widget-pane',
-                'id' => 'conpherence-widget-pane'
+                'id' => 'conpherence-widget-pane',
+                'sigil' => 'conpherence-widget-pane',
               ),
               ''),
             javelin_tag(
@@ -136,10 +197,11 @@ final class ConpherenceLayoutView extends AphrontView {
                     'sigil' => 'conpherence-messages',
                   ),
                   nonempty($this->messages, '')),
-                phutil_tag(
+                javelin_tag(
                   'div',
                   array(
-                    'id' => 'conpherence-form'
+                    'id' => 'conpherence-form',
+                    'sigil' => 'conpherence-form'
                   ),
                   nonempty($this->replyForm, ''))
               )),

src/applications/conpherence/view/ConpherenceThreadListView.php

@@ -32,7 +32,8 @@ final class ConpherenceThreadListView extends AphrontView {
 
     $menu->addMenuItem(
       id(new PhabricatorMenuItemView())
-        ->setName(pht('New Conversation'))
+        ->addSigil('conpherence-new-conversation')
+        ->setName(pht('New Message'))
         ->setWorkflow(true)
         ->setKey('new')
         ->setHref($this->baseURI.'new/')

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

@@ -8,6 +8,10 @@
   width: 100%;
 }
 
+.device .conpherence-header-pane {
+  display: none;
+}
+
 .conpherence-header-pane .edit {
   float: right;
   margin: 16px 16px 0px 0px;

webroot/rsrc/css/application/conpherence/menu.css

@@ -10,6 +10,17 @@
   top: 44px;
 }
 
+.conpherence-layout .conpherence-no-threads {
+  height 80%;
+  width: 80%;
+  padding: 10%;
+  text-align: center;
+}
+
+.conpherence-layout .conpherence-no-threads .text {
+  margin: 0px 0px 16px 0px;
+}
+
 .conpherence-menu-pane {
   width: 300px;
   position: absolute;
@@ -28,39 +39,29 @@
   position: relative;
 }
 
-div.conpherence-layout .phabricator-nav-column-background {
+.conpherence-layout .phabricator-nav-column-background {
   display: block;
   width: 300px;
 }
 
-.device .conpherence-role-list .conpherence-menu-pane,
+.device .conpherence-menu-pane {
-.device .conpherence-role-list .phabricator-nav-column-background {
+  top: 41px;
+}
+
+.device .phabricator-nav-column-background {
+  top: 86px;
+}
+
+.device .conpherence-menu-pane,
+.device .phabricator-nav-column-background {
+  display: none;
   width: 100%;
 }
 
-.device .conpherence-role-list .conpherence-content-pane {
+.device .conpherence-content-pane {
-  display: none;
-}
-
-.device .conpherence-role-thread .conpherence-menu-pane,
-.device .conpherence-role-thread .phabricator-nav-column-background,
-.device .conpherence-role-thread .conpherence-widget-pane {
-  display: none;
-}
-
-.device .conpherence-role-thread .conpherence-content-pane {
   margin-left: 0;
 }
 
-.device .conpherence-role-thread .conpherence-message-pane,
-.device .conpherence-role-thread .conpherence-messages,
-.device .conpherence-role-thread .phabricator-form-view {
-  left: 0;
-  right: 0;
-  width: 100%;
-}
-
-
 .conpherence-menu .conpherence-menu-item-view {
   display: block;
   height: 55px;

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

@@ -1,6 +1,7 @@
 /**
  * @provides conpherence-message-pane-css
  */
+
 .conpherence-message-pane {
   position: fixed;
   left: 300px;
@@ -11,6 +12,14 @@
   height: 100%;
 }
 
+.device .conpherence-message-pane {
+  left: 0;
+  right: 0;
+  top: 85px;
+  width: 100%;
+}
+
+
 .conpherence-show-older-messages {
   display: block;
   background: #e0e3ec;
@@ -31,6 +40,15 @@
   -webkit-overflow-scrolling: touch;
 }
 
+.device .conpherence-message-pane .conpherence-messages {
+  left: 0;
+  right: 0;
+  top: 85px;
+  bottom: 3em;
+  width: 100%;
+  box-shadow: none;
+}
+
 .conpherence-message-pane .phabricator-form-view {
   border-width: 0;
   background: none;
@@ -42,6 +60,18 @@
   right: 281px;
 }
 
+.device .conpherence-message-pane .remarkup-assist-bar {
+  height: 0px;
+}
+
+.device .conpherence-message-pane .phabricator-form-view {
+  left: 0;
+  right: 0;
+  background-color: #d8dce2;
+  height: 3em;
+  width: 100%;
+}
+
 .conpherence-layout .conpherence-message-pane .phabricator-form-view
   div.aphront-form-input {
   margin: 0;
@@ -91,16 +121,38 @@
 }
 
 .conpherence-message-pane .remarkup-assist-textarea {
+  height: 6em;
+  padding: 6px;
   border-width: 0 0 1px 0;
   border-color: #e7e7e7;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+.device .conpherence-message-pane .remarkup-assist-textarea {
+  margin: 0.5em 0em 0em 2%;
+  padding: 6px 1%;
+  width: 98%;
+  height: 2em;
+  resize: none;
 }
 
 .conpherence-message-pane .remarkup-assist-textarea:focus {
   outline: none;
 }
 
-.conpherence-message-pane .aphront-form-input textarea {
+.device .conpherence-message-pane .aphront-form-control-textarea {
-  padding: 6px;
+  float: left;
-  height: 6em;
+  height: 2em;
+}
+.device-tablet .conpherence-message-pane .aphront-form-control-textarea {
+  width: 76%;
+}
+.device-phone .conpherence-message-pane .aphront-form-control-textarea {
+  width: 63%;
 }
 
+.device .conpherence-message-pane .aphront-form-control-submit button {
+  margin: 0.6em 0 0 2%;
+}

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

@@ -11,12 +11,12 @@
   border-width: 0 0 0 1px;
   border-color: #CCC;
   border-style: solid;
-  background: url('/rsrc/image/texture/dust_background.jpg');
+  background: url('/rsrc/image/texture/dust_background.jpeg');
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
 
-.device-phone .conpherence-widget-pane {
+.device .conpherence-widget-pane {
   top: 44px;
   width: 100%;
 }
@@ -28,7 +28,7 @@
 
 .conpherence-widget-pane .aphront-form-inset {
   border: 0;
-  background: url('/rsrc/image/texture/dust_background.jpg');
+  background: url('/rsrc/image/texture/dust_background.jpeg');
 }
 
 .conpherence-widget-pane .widgets-header {
@@ -39,13 +39,12 @@
 .conpherence-widget-pane .widgets-header .widgets-header-icon-holder {
   height: 40px;
   width: 280px;
-  margin: 0 auto;
+  margin: 0px auto;
 }
 
 .device-desktop .conpherence-widget-pane .widgets-header
 .widgets-header-icon-holder {
   width: 175px;
-  margin: 0px auto 0px auto;
 }
 
 .conpherence-widget-pane .widgets-header .sprite-conpherence {
@@ -67,9 +66,9 @@
 }
 
 .device-desktop .conpherence-widget-pane .widgets-header
-#widgets-conpherence-list-toggle,
+#conpherence-menu-pane-toggle,
 .device-desktop .conpherence-widget-pane .widgets-header
-#widgets-conpherence-conversation-toggle {
+#conpherence-message-pane-toggle {
   display: none;
 }
 
@@ -81,7 +80,7 @@
   width: 100%;
 }
 
-.device-phone .conpherence-widget-pane .widgets-body {
+.device .conpherence-widget-pane .widgets-body {
   top: 85px;
 }
 
@@ -134,18 +133,35 @@
   border: 1px dashed #bfbfbf;
 }
 
+.device .conpherence-widget-pane #widgets-files .file-title,
+.device .conpherence-widget-pane #widgets-files .file-uploaded-by {
+  width: 82%;
+}
+.device .conpherence-widget-pane #widgets-files .divider {
+  width: 80%;
+  margin: 8px 0px 0px 10%;
+}
+
 /* calendar widget */
 
 .conpherence-widget-pane #widgets-calendar .aphront-multi-column-view {
   margin: 2px 0px 0px 0px;
   width: 280px;
 }
+.device .conpherence-widget-pane #widgets-calendar .aphront-multi-column-view {
+  width: 100%;
+}
 .conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
 .aphront-multi-column-column {
   background: white;
   border-right: 1px solid #bfbfbf;
   text-align: center;
 }
+.device-phone .conpherence-widget-pane #widgets-calendar
+.aphront-multi-column-fluid .aphront-multi-column-5-up
+.aphront-multi-column-column-outer {
+  width: 20%;
+}
 .conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
 .aphront-multi-column-column-last {
   border-right: 0;
@@ -204,6 +220,10 @@
   padding: 5px 10px 5px 10px;
   width: 260px;
 }
+.device .conpherence-widget-pane #widgets-calendar .day-header {
+  width: 98%;
+  padding: 5px 1% 5px 1%;
+}
 .conpherence-widget-pane #widgets-calendar .day-header .day-name {
   float: left;
   clear: none;
@@ -220,6 +240,10 @@
   margin: 0px 0px 0px 10px;
   border: 1px dashed #bfbfbf;
 }
+.conpherence-widget-pane #widgets-calendar .divider {
+  width: 96%;
+  margin: 0px 0px 0px 2%;
+}
 .conpherence-widget-pane #widgets-calendar .spacer {
   float: left;
   clear: both;
@@ -233,6 +257,9 @@
   height: 60px;
   width: 280px;
 }
+.device .conpherence-widget-pane #widgets-calendar .user-status {
+  width: 100%;
+}
 
 .conpherence-widget-pane #widgets-calendar .user-status .icon {
   border-radius: 10px;
@@ -277,6 +304,11 @@
   width: 260px;
 }
 
+.device .conpherence-widget-pane #widgets-calendar .user-status .description,
+.device .conpherence-widget-pane #widgets-calendar .user-status .participant {
+  /* we keep these short so no need to change the width */
+}
+
 .conpherence-widget-pane .widget-icon {
   display: block;
   height: 14px;
@@ -292,7 +324,6 @@
   float: left;
   width: 280px;
 }
-
 .conpherence-widget-pane .people-widget-header .divider {
   float: left;
   clear: both;
@@ -300,31 +331,43 @@
   margin: 0px 0px 0px 10px;
   border: 1px dashed #bfbfbf;
 }
+.device .conpherence-widget-pane .people-widget-header .divider {
+  width: 96%;
+  margin: 0px 0px 0px 2%;
+}
 .conpherence-widget-pane .people-widget-header .add-people-widget {
   float: left;
   padding: 10px 0px 10px 0px;
   width: 280px;
 }
 
+.device .conpherence-widget-pane .people-widget-header,
+.device .conpherence-widget-pane .people-widget-header .add-people-widget {
+  width: 100%;
+}
+
 .conpherence-widget-pane .people-widget-header .add-people-widget
 .aphront-form-control-tokenizer {
   float: left;
   width: 180px;
   padding: 0px 0px 0px 10px
 }
-
+.device .conpherence-widget-pane .people-widget-header .add-people-widget
-.conpherence-widget-pane .people-widget-header .add-people-widget
+.aphront-form-control-tokenizer {
-.jx-tokenizer-input {
+  width: 70%;
-  padding: 1px 3px 1px 3px;
 }
-
 .conpherence-widget-pane .people-widget-header .add-people-widget
 .people-add-button {
   float: right;
-  margin: 0px 10px 0px 0px;
+  margin: 2px 10px 0px 0px;
   padding: 3px 16px 4px 16px;
 }
-
+@-moz-document url-prefix() {
+  .conpherence-widget-pane .people-widget-header .add-people-widget
+  .people-add-button {
+    margin: -1px 10px 0px 0px;
+  }
+}
 .conpherence-widget-pane .person-entry {
   float: left;
   width: 270px;
@@ -332,6 +375,11 @@
   padding: 10px 0px 0px 8px;
 }
 
+.device .conpherence-widget-pane .person-entry {
+  width: 98%;
+  padding: 10px 0px 0px 2%;
+}
+
 .conpherence-widget-pane .person-entry a {
   float: left;
   clear: none;

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

@@ -18,18 +18,18 @@ JX.behavior('conpherence-menu', function(config) {
     visible: null
   };
 
-  function selectthreadid(id) {
+  function selectthreadid(id, updatePageData) {
     var threads = JX.DOM.scry(document.body, 'a', 'conpherence-menu-click');
     for (var ii = 0; ii < threads.length; ii++) {
       var data = JX.Stratcom.getData(threads[ii]);
       if (data.id == id) {
-        selectthread(threads[ii]);
+        selectthread(threads[ii], updatePageData);
         return;
       }
     }
   }
 
-  function selectthread(node) {
+  function selectthread(node, updatePageData) {
 
     if (thread.node) {
       JX.DOM.alterClass(thread.node, 'conpherence-selected', false);
@@ -46,12 +46,32 @@ JX.behavior('conpherence-menu', function(config) {
     var data = JX.Stratcom.getData(node);
     thread.selected = data.id;
 
-    JX.History.replace(config.base_uri + data.id + '/');
+    if (updatePageData) {
-    document.title = data.title;
+      updatepagedata(data);
+    }
 
     redrawthread();
   }
 
+  function updatepagedata(data) {
+    var uri_suffix = thread.selected + '/';
+    if (data.use_base_uri) {
+      uri_suffix = '';
+    }
+    JX.History.replace(config.base_uri + uri_suffix);
+    if (data.title) {
+      document.title = data.title;
+    }
+  }
+
+  JX.Stratcom.listen(
+    'conpherence-update-page-data',
+    null,
+    function (e) {
+      updatepagedata(e.getData());
+    }
+  );
+
   JX.Stratcom.listen(
     'conpherence-selectthread',
     null,
@@ -86,26 +106,59 @@ JX.behavior('conpherence-menu', function(config) {
       new JX.Workflow(widget_uri, {})
         .setHandler(onwidgetresponse)
         .start();
+    } else {
+      updatetoggledwidget();
     }
 
     thread.visible = thread.selected;
   }
 
   function onwidgetresponse(response) {
-    var widgets = JX.$H(response.widgets);
+    var root = JX.DOM.find(document, 'div', 'conpherence-layout');
-    var widgetsRoot = JX.$(config.widgets_pane);
+    var widgetsRoot = JX.DOM.find(root, 'div', 'conpherence-widget-pane');
-    JX.DOM.setContent(widgetsRoot, widgets);
+    JX.DOM.setContent(widgetsRoot, JX.$H(response.widgets));
+    updatetoggledwidget();
+  }
+
+  function updatetoggledwidget() {
+    var device = JX.Device.getDevice();
+    if (device != 'desktop') {
+      if (config.role == 'list') {
+        JX.Stratcom.invoke(
+          'conpherence-toggle-widget',
+          null,
+          {
+            widget : 'conpherence-menu-pane'
+          }
+        );
+      } else {
+        JX.Stratcom.invoke(
+          'conpherence-toggle-widget',
+          null,
+          {
+            widget : 'conpherence-message-pane'
+          }
+        );
+      }
+    } else {
+      JX.Stratcom.invoke(
+        'conpherence-toggle-widget',
+        null,
+        {
+          widget : 'widgets-files'
+        }
+      );
+    }
   }
 
   function onresponse(response) {
     var header = JX.$H(response.header);
     var messages = JX.$H(response.messages);
     var form = JX.$H(response.form);
-    var headerRoot = JX.$(config.header);
+    var root = JX.DOM.find(document, 'div', 'conpherence-layout');
-    var messagesRoot = JX.$(config.messages);
+    var headerRoot = JX.DOM.find(root, 'div', 'conpherence-header-pane');
-    var formRoot = JX.$(config.form_pane);
+    var messagesRoot = JX.DOM.find(root, 'div', 'conpherence-messages');
-    var widgetsRoot = JX.$(config.widgets_pane);
+    var formRoot = JX.DOM.find(root, 'div', 'conpherence-form');
-    var menuRoot = JX.$(config.menu_pane);
     JX.DOM.setContent(headerRoot, header);
     JX.DOM.setContent(messagesRoot, messages);
     JX.DOM.setContent(formRoot, form);
@@ -114,10 +167,19 @@ JX.behavior('conpherence-menu', function(config) {
   }
 
   function didredrawthread() {
-    var messagesRoot = JX.$(config.messages);
+    var root = JX.DOM.find(document, 'div', 'conpherence-layout');
+    var messagesRoot = JX.DOM.find(root, 'div', 'conpherence-messages');
     messagesRoot.scrollTop = messagesRoot.scrollHeight;
   }
 
+  JX.Stratcom.listen(
+    null,
+    'conpherence-redraw-thread',
+    function (e) {
+      didredrawthread();
+    }
+  );
+
   JX.Stratcom.listen(
     'click',
     'conpherence-menu-click',
@@ -132,7 +194,7 @@ JX.behavior('conpherence-menu', function(config) {
       }
 
       e.kill();
-      selectthread(e.getNode('conpherence-menu-click'));
+      selectthread(e.getNode('conpherence-menu-click'), true);
     });
 
   JX.Stratcom.listen('click', 'conpherence-edit-metadata', function (e) {
@@ -140,7 +202,7 @@ JX.behavior('conpherence-menu', function(config) {
     var root = e.getNode('conpherence-layout');
     var form = JX.DOM.find(root, 'form', 'conpherence-pontificate');
     var data = e.getNodeData('conpherence-edit-metadata');
-    var header = JX.DOM.find(root, 'div', 'conpherence-header');
+    var header = JX.DOM.find(root, 'div', 'conpherence-header-pane');
     var messages = JX.DOM.find(root, 'div', 'conpherence-messages');
 
     new JX.Workflow.newFromForm(form, data)
@@ -176,7 +238,8 @@ JX.behavior('conpherence-menu', function(config) {
     var last_offset = e.getNodeData('show-older-messages').offset;
     var conf_id = e.getNodeData('show-older-messages').ID;
     JX.DOM.remove(e.getNode('show-older-messages'));
-    var messages_root = JX.$(config.messages);
+    var root = JX.DOM.find(document, 'div', 'conpherence-layout');
+    var messages_root = JX.DOM.find(root, 'div', 'conpherence-messages');
     new JX.Request(config.base_uri + conf_id + '/', function(r) {
       var messages = JX.$H(r.messages);
       JX.DOM.prependContent(messages_root,
@@ -195,10 +258,12 @@ JX.behavior('conpherence-menu', function(config) {
     if (new_device === old_device) {
       return;
     }
+    var update_toggled_widget =
+      new_device == 'desktop' || old_device == 'desktop';
     old_device = new_device;
 
-    if (new_device != 'desktop') {
+    if (thread.visible !== null && update_toggled_widget) {
-      return;
+      updatetoggledwidget();
     }
 
     if (!config.hasThreadList) {
@@ -231,11 +296,15 @@ JX.behavior('conpherence-menu', function(config) {
     // first thread.
     if (!thread.selected) {
       if (config.selectedID) {
-        selectthreadid(config.selectedID);
+        selectthreadid(config.selectedID, true);
       } else {
-        var threads = JX.DOM.scry(document.body, 'a', 'conpherence-menu-click');
+        var layout = JX.$(config.layoutID);
+        var threads = JX.DOM.scry(layout, 'a', 'conpherence-menu-click');
         if (threads.length) {
           selectthread(threads[0]);
+        } else {
+          var nothreads = JX.DOM.find(layout, 'div', 'conpherence-no-threads');
+          nothreads.style.display = 'block';
         }
       }
     }

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

@@ -45,15 +45,11 @@ JX.behavior('conpherence-pontificate', function(config) {
         var textarea = JX.DOM.find(form, 'textarea');
         textarea.value = '';
 
-        try {
         JX.Stratcom.invoke(
           'conpherence-selectthread',
           null,
           { id : r.conpherence_phid + '-nav-item' }
         );
-        } catch (ex) {
-          // Ignore; this view may not have a menu.
-        }
       }))
     .start();
   };

webroot/rsrc/js/application/conpherence/behavior-widget-pane.js

@@ -5,40 +5,105 @@
  *           javelin-workflow
  *           javelin-util
  *           phabricator-notification
+ *           javelin-behavior-device
  * @provides javelin-behavior-conpherence-widget-pane
  */
 
 JX.behavior('conpherence-widget-pane', function(config) {
 
+  var toggle_widget = function (data) {
+    var device = JX.Device.getDevice();
+    var is_desktop = device == 'desktop';
+    if (config.widgetRegistery[data.widget] == config.devicesOnly &&
+        is_desktop) {
+      return;
+    }
+
+    var root = JX.DOM.find(document, 'div', 'conpherence-layout');
+    var widgetPane = JX.DOM.find(root, 'div', 'conpherence-widget-pane');
+    for (var widget in config.widgetRegistery) {
+      // device-only widgets are *always shown* on the desktop
+      if (config.widgetRegistery[widget] == config.devicesOnly) {
+        if (is_desktop) {
+          JX.$(widget).style.display = 'block';
+          if (config.widgetExtraNodes[widget]) {
+            for (var i in config.widgetExtraNodes[widget]) {
+              var tag_data = config.widgetExtraNodes[widget][i];
+              var node = JX.DOM.find(root, tag_data.tagname, tag_data.sigil);
+              node.style.display = tag_data.desktopstyle;
+            }
+          }
+          continue;
+        }
+      }
+
+      var cur_toggle = JX.$(widget + '-toggle');
+      var toggle_class = config.widgetToggleMap[widget];
+      if (widget == data.widget) {
+        JX.DOM.alterClass(cur_toggle, toggle_class, true);
+        JX.$(widget).style.display = 'block';
+        if (config.widgetRegistery[widget] == config.devicesOnly) {
+          widgetPane.style.height = '42px';
+        } else {
+          widgetPane.style.height = '100%';
+        }
+        if (config.widgetExtraNodes[widget]) {
+          for (var i in config.widgetExtraNodes[widget]) {
+            var tag_data = config.widgetExtraNodes[widget][i];
+            var node = JX.DOM.find(root, tag_data.tagname, tag_data.sigil);
+            node.style.display = tag_data.showstyle;
+          }
+        }
+        // some one off code for conpherence messages
+        if (widget == 'conpherence-message-pane') {
+          JX.Stratcom.invoke('conpherence-redraw-thread', null, {});
+          JX.Stratcom.invoke('conpherence-update-page-data', null, {});
+        }
+        // some one off code for conpherence list
+        if (widget == 'conpherence-menu-pane') {
+          JX.Stratcom.invoke(
+            'conpherence-update-page-data',
+            null,
+            { use_base_uri : true }
+          );
+        }
+      } else {
+        JX.DOM.alterClass(
+          cur_toggle,
+          toggle_class,
+          false
+        );
+        JX.$(widget).style.display = 'none';
+        if (config.widgetExtraNodes[widget]) {
+          for (var i in config.widgetExtraNodes[widget]) {
+            var tag_data = config.widgetExtraNodes[widget][i];
+            var node = JX.DOM.find(root, tag_data.tagname, tag_data.sigil);
+            node.style.display = tag_data.hidestyle;
+          }
+        }
+      }
+    }
+  };
+
   JX.Stratcom.listen(
-    'click',
+    ['touchstart', 'mousedown'],
     'conpherence-change-widget',
     function(e) {
       e.kill();
       var data = e.getNodeData('conpherence-change-widget');
-      // abort if this widget isn't exactly involved in this toggle business
+      toggle_widget(data);
-      if (!config.widgetRegistery[data.widget]) {
-        return;
-      }
-      for (var widget in config.widgetRegistery) {
-        if (!config.widgetRegistery[widget]) {
-          continue;
-        } else if (widget == data.widget) {
-          JX.$(widget).style.display = 'block';
-          JX.DOM.alterClass(e.getTarget(), data.toggleClass, true);
-        } else {
-          JX.$(widget).style.display = 'none';
-          var cur_toggle = JX.$(widget + '-toggle');
-          JX.DOM.alterClass(
-            cur_toggle,
-            JX.Stratcom.getData(cur_toggle).toggleClass,
-            false
-          );
-        }
-      }
     }
   );
 
+  JX.Stratcom.listen(
+    'conpherence-toggle-widget',
+    null,
+    function (e) {
+      toggle_widget(e.getData());
+    }
+  );
+
+
   /* people widget */
   JX.Stratcom.listen(
     ['submit', 'didSyntheticSubmit'],
@@ -79,7 +144,7 @@ JX.behavior('conpherence-widget-pane', function(config) {
   );
 
   JX.Stratcom.listen(
-    ['click'],
+    ['touchstart', 'mousedown'],
     'remove-person',
     function (e) {
       var peopleRoot = e.getNode('widgets-people');