Conpherence - make widget selector be a fun JS-based menu

Summary: Ref T3155. Also re-adds the ability to update Conpherence titles by letting user click the title and fill out a little dialogue. Also fixes a bunch of random bugs and what have you. I tried to make the javascript less mysterious by trying to code what's actually happening more explicitly. Still a work in progress all over the place but a good stopping point for feedback.

Test Plan: played around with Conpherence. In particular, went to /conpherence/ and re-sized and went to /conpherence/X/ and re-sized. Also loaded up my no conpherneces user.

Reviewers: epriestley

Reviewed By: epriestley

CC: chad, aran, Korvin

Maniphest Tasks: T3155

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

src/__celerity_resource_map__.php

@@ -918,7 +918,7 @@ celerity_register_resource_map(array(
   ),
   'conpherence-header-pane-css' =>
   array(
-    'uri' => '/res/762c199d/rsrc/css/application/conpherence/header-pane.css',
+    'uri' => '/res/6d7bfc7e/rsrc/css/application/conpherence/header-pane.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -927,7 +927,7 @@ celerity_register_resource_map(array(
   ),
   'conpherence-menu-css' =>
   array(
-    'uri' => '/res/9991071e/rsrc/css/application/conpherence/menu.css',
+    'uri' => '/res/c955650e/rsrc/css/application/conpherence/menu.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -936,7 +936,7 @@ celerity_register_resource_map(array(
   ),
   'conpherence-message-pane-css' =>
   array(
-    'uri' => '/res/9b319b64/rsrc/css/application/conpherence/message-pane.css',
+    'uri' => '/res/383af93e/rsrc/css/application/conpherence/message-pane.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -954,7 +954,7 @@ celerity_register_resource_map(array(
   ),
   'conpherence-widget-pane-css' =>
   array(
-    'uri' => '/res/c0131a8b/rsrc/css/application/conpherence/widget-pane.css',
+    'uri' => '/res/7aaa78c5/rsrc/css/application/conpherence/widget-pane.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -1303,7 +1303,7 @@ celerity_register_resource_map(array(
   ),
   'javelin-behavior-conpherence-menu' =>
   array(
-    'uri' => '/res/2bffa665/rsrc/js/application/conpherence/behavior-menu.js',
+    'uri' => '/res/a7f3be10/rsrc/js/application/conpherence/behavior-menu.js',
     'type' => 'js',
     'requires' =>
     array(
@@ -1335,7 +1335,7 @@ celerity_register_resource_map(array(
   ),
   'javelin-behavior-conpherence-widget-pane' =>
   array(
-    'uri' => '/res/d2063fd4/rsrc/js/application/conpherence/behavior-widget-pane.js',
+    'uri' => '/res/bc139f8e/rsrc/js/application/conpherence/behavior-widget-pane.js',
     'type' => 'js',
     'requires' =>
     array(
@@ -1346,6 +1346,8 @@ celerity_register_resource_map(array(
       4 => 'javelin-util',
       5 => 'phabricator-notification',
       6 => 'javelin-behavior-device',
+      7 => 'phabricator-dropdown-menu',
+      8 => 'phabricator-menu-item',
     ),
     'disk' => '/rsrc/js/application/conpherence/behavior-widget-pane.js',
   ),

src/applications/conpherence/controller/ConpherenceController.php

@@ -25,7 +25,15 @@ abstract class ConpherenceController extends PhabricatorController {
         ->setName(pht('New Message'))
         ->setHref($this->getApplicationURI('new/'))
         ->setIcon('create')
-        ->setWorkflow(true));
+        ->setWorkflow(true))
+      ->addAction(
+        id(new PhabricatorMenuItemView())
+        ->setName(pht('Thread'))
+        ->setHref('#')
+        ->setIcon('action-menu')
+        ->setStyle('display: none;')
+        ->addClass('device-widgets-selector')
+        ->addSigil('device-widgets-selector'));
     return $crumbs;
   }
 
@@ -38,7 +46,9 @@ abstract class ConpherenceController extends PhabricatorController {
     }
     $crumbs->addCrumb(
       id(new PhabricatorCrumbView())
-      ->setName($title));
+      ->setName($title)
+      ->setHref($this->getApplicationURI('update/'.$conpherence->getID().'/'))
+      ->setWorkflow(true));
 
     return $crumbs;
   }

src/applications/conpherence/controller/ConpherenceUpdateController.php

@@ -92,7 +92,7 @@ final class ConpherenceUpdateController
         case ConpherenceUpdateActions::METADATA:
           $xactions = array();
           $updated = false;
-          // all other metadata updates are continue requests
+          // all metadata updates are continue requests
           if (!$request->isContinueRequest()) {
             break;
           }
@@ -103,6 +103,7 @@ final class ConpherenceUpdateController
               ->setTransactionType(ConpherenceTransactionType::TYPE_TITLE)
               ->setNewValue($title);
             $updated = true;
+            $response_mode = 'redirect';
           }
           if (!$updated) {
             $errors[] = pht(

src/applications/conpherence/controller/ConpherenceViewController.php

@@ -91,10 +91,14 @@ final class ConpherenceViewController extends
       ->setReplyForm($form)
       ->setRole('thread');
 
+    $title = $conpherence->getTitle();
+    if (!$title) {
+      $title = pht('Conpherence');
+    }
     return $this->buildApplicationPage(
       $layout,
       array(
-        'title' => $conpherence->getTitle(),
+        'title' => $title,
         'device' => true,
       ));
   }

src/applications/conpherence/controller/ConpherenceWidgetController.php

@@ -69,83 +69,14 @@ final class ConpherenceWidgetController extends
     $widgets[] = phutil_tag(
       'div',
       array(
-        'class' => 'widgets-header'
+        'class' => 'widgets-header',
       ),
-      phutil_tag(
+      id(new PhabricatorActionHeaderView())
-        'div',
+      ->setHeaderColor(PhabricatorActionHeaderView::HEADER_GREY)
-        array(
+      ->setHeaderTitle('')
-          'class' => 'widgets-header-icon-holder'
+      ->setHeaderHref('#')
-        ),
+      ->setDropdown(true)
-        array(
+      ->addHeaderSigil('widgets-selector'));
-          javelin_tag(
-            'a',
-            array(
-              'sigil' => 'conpherence-change-widget',
-              'meta'  => array(
-                'widget' => 'conpherence-menu-pane',
-              ),
-              'id' => 'conpherence-menu-pane-toggle',
-              'class' => 'sprite-conpherence conpherence_list_off',
-            ),
-            ''),
-          javelin_tag(
-            'a',
-            array(
-              'sigil' => 'conpherence-change-widget',
-              'meta'  => array(
-                'widget' => 'conpherence-message-pane',
-              ),
-              'id' => 'conpherence-message-pane-toggle',
-              'class' => 'sprite-conpherence conpherence_conversation_off',
-            ),
-            ''),
-          javelin_tag(
-            'a',
-            array(
-              'sigil' => 'conpherence-change-widget',
-              'meta'  => array(
-                'widget' => 'widgets-people',
-              ),
-              'id' => 'widgets-people-toggle',
-              'class' =>
-              'sprite-conpherence conpherence_people_on conpherence_people_off'
-            ),
-            ''),
-          javelin_tag(
-            'a',
-            array(
-              'sigil' => 'conpherence-change-widget',
-              'meta'  => array(
-                'widget' => 'widgets-files',
-              ),
-              'id' => 'widgets-files-toggle',
-              'class' =>
-              'sprite-conpherence conpherence_files_off'
-            ),
-            ''),
-          javelin_tag(
-            'a',
-            array(
-              'sigil' => 'conpherence-change-widget',
-              'meta'  => array(
-                'widget' => 'widgets-calendar',
-              ),
-              'id' => 'widgets-calendar-toggle',
-              'class' => 'sprite-conpherence conpherence_calendar_off',
-            ),
-            ''),
-          javelin_tag(
-            'a',
-            array(
-              'sigil' => 'conpherence-change-widget',
-              'meta'  => array(
-                'widget' => 'widgets-settings',
-              ),
-              'id' => 'widgets-settings-toggle',
-              'class' => 'sprite-conpherence conpherence_settings_off',
-            ),
-            '')
-          )));
     $user = $this->getRequest()->getUser();
     // now the widget bodies
     $widgets[] = javelin_tag(

src/applications/conpherence/storage/ConpherenceThread.php

@@ -157,9 +157,10 @@ final class ConpherenceThread extends ConpherenceDAO
       $lucky_handle = reset($handles);
     }
 
-    $title = $this->getTitle();
+    $title = $js_title = $this->getTitle();
     if (!$title) {
       $title = $lucky_handle->getName();
+      $js_title = pht('Conpherence');
     }
     $img_src = $lucky_handle->getImageURI();
 
@@ -191,6 +192,7 @@ final class ConpherenceThread extends ConpherenceDAO
 
     return array(
       'title' => $title,
+      'js_title' => $js_title,
       'subtitle' => $subtitle,
       'unread_count' => $unread_count,
       'epoch' => $this->getDateModified(),

src/applications/conpherence/view/ConpherenceFileWidgetView.php

@@ -85,6 +85,15 @@ final class ConpherenceFileWidgetView extends ConpherenceWidgetView {
         ));
     }
 
+    if (empty($files)) {
+      $files_html[] = javelin_tag(
+        'div',
+        array(
+          'class' => 'no-files',
+          'sigil' => 'no-files'),
+        pht('No files.'));
+    }
+
     return phutil_tag(
       'div',
       array('class' => 'file-list'),

src/applications/conpherence/view/ConpherenceLayoutView.php

@@ -65,40 +65,32 @@ final class ConpherenceLayoutView extends AphrontView {
         'hasWidgets' => false,
       ));
 
-    $all_views = 1;
-    $devices_only = 0;
     Javelin::initBehavior(
       'conpherence-widget-pane',
       array(
-        'allViews' => $all_views,
+        'selectChar' => "\xE2\x96\xBC",
-        'devicesOnly' => $devices_only,
+        'widgetRegistry' => array(
-        'widgetRegistery' => array(
+          'conpherence-message-pane' => array(
-          'conpherence-menu-pane' => $devices_only,
+            'name' => pht('Thread'),
-          'conpherence-message-pane' => $devices_only,
+            'deviceOnly' => true,
-          'widgets-people' => $all_views,
+          ),
-          'widgets-files' => $all_views,
+          'widgets-people' => array(
-          'widgets-calendar' => $all_views,
+            'name' => pht('Participants'),
-          'widgets-settings' => $all_views,
+            'deviceOnly' => false,
-        ),
+          ),
-        'widgetExtraNodes' => array(
+          'widgets-files' => array(
-          'conpherence-menu-pane' => array(
+            'name' => pht('Files'),
-            array(
+            'deviceOnly' => false,
-              'tagname' => 'div',
+          ),
-              'sigil' => 'phabricator-nav-column-background',
+          'widgets-calendar' => array(
-              'showstyle' => 'block',
+            'name' => pht('Calendar'),
-              'hidestyle' => 'none',
+            'deviceOnly' => false,
-              'desktopstyle' => 'block'),
+          ),
-          )
+          'widgets-settings' => array(
-        ),
+            'name' => pht('Settings'),
-        'widgetToggleMap' => array(
+            'deviceOnly' => false,
-          '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',

src/applications/conpherence/view/ConpherenceThreadListView.php

@@ -97,7 +97,7 @@ final class ConpherenceThreadListView extends AphrontView {
       ->addSigil('conpherence-menu-click')
       ->setMetadata(
         array(
-          'title' => $title,
+          'title' => $data['js_title'],
           'id' => $thread->getID(),
           ));
   }

src/view/AphrontTagView.php

@@ -65,8 +65,8 @@ abstract class AphrontTagView extends AphrontView {
     return $this;
   }
 
-  public function getClass() {
+  public function getClasses() {
-    return $this->class;
+    return $this->classes;
   }
 
   public function setID($id) {

src/view/layout/PhabricatorActionHeaderView.php

@@ -15,9 +15,16 @@ final class PhabricatorActionHeaderView extends AphrontView {
   private $headerTitle;
   private $headerHref;
   private $headerIcon;
+  private $headerSigils = array();
   private $actions = array();
   private $iconColor = PhabricatorActionHeaderView::ICON_GREY;
   private $headerColor;
+  private $dropdown;
+
+  public function setDropdown($dropdown) {
+    $this->dropdown = $dropdown;
+    return $this;
+  }
 
   public function addAction(PHUIIconView $action) {
     $this->actions[] = $action;
@@ -39,6 +46,11 @@ final class PhabricatorActionHeaderView extends AphrontView {
     return $this;
   }
 
+  public function addHeaderSigil($sigil) {
+    $this->headerSigils[] = $sigil;
+    return $this;
+  }
+
   public function setHeaderIcon($minicon) {
     $this->headerIcon = $minicon;
     return $this;
@@ -66,6 +78,10 @@ final class PhabricatorActionHeaderView extends AphrontView {
       $classes[] = 'gradient-'.$this->headerColor.'-header';
     }
 
+    if ($this->dropdown) {
+      $classes[] = 'dropdown';
+    }
+
     $action_list = array();
     foreach ($this->actions as $action) {
       $action_list[] = phutil_tag(
@@ -89,11 +105,12 @@ final class PhabricatorActionHeaderView extends AphrontView {
 
     $header_title = $this->headerTitle;
     if ($this->headerHref) {
-      $header_title = phutil_tag(
+      $header_title = javelin_tag(
         'a',
           array(
             'class' => 'phabricator-action-header-link',
-            'href' => $this->headerHref
+            'href' => $this->headerHref,
+            'sigil' => implode(' ', $this->headerSigils)
           ),
           $this->headerTitle);
     }

src/view/layout/PhabricatorCrumbView.php

@@ -6,6 +6,12 @@ final class PhabricatorCrumbView extends AphrontView {
   private $href;
   private $icon;
   private $isLastCrumb;
+  private $workflow;
+
+  public function setWorkflow($workflow) {
+    $this->workflow = $workflow;
+    return $this;
+  }
 
   public function setName($name) {
     $this->name = $name;
@@ -71,14 +77,13 @@ final class PhabricatorCrumbView extends AphrontView {
       $classes[] = 'phabricator-last-crumb';
     }
 
-    return phutil_tag(
+    return javelin_tag(
       $this->href ? 'a' : 'span',
-      array(
+        array(
-        'href'  => $this->href,
+          'sigil' => $this->workflow ? 'workflow' : null,
-        'class' => implode(' ', $classes),
+          'href'  => $this->href,
-      ),
+          'class' => implode(' ', $classes),
-      array($icon, $name, $divider));
+        ),
+        array($icon, $name, $divider));
   }
-
-
 }

src/view/layout/PhabricatorCrumbsView.php

@@ -50,12 +50,19 @@ final class PhabricatorCrumbsView extends AphrontView {
           $action->getName()
         );
 
+        $action_sigils = $action->getSigils();
+        if ($action->getWorkflow()) {
+          $action_sigils[] = 'workflow';
+        }
+        $action_classes = $action->getClasses();
+        $action_classes[] = 'phabricator-crumbs-action';
         $actions[] = javelin_tag(
           'a',
           array(
             'href' => $action->getHref(),
-            'class' => 'phabricator-crumbs-action',
+            'class' => implode(' ', $action_classes),
-            'sigil' => $action->getWorkflow() ? 'workflow' : null,
+            'sigil' => implode(' ', $action_sigils),
+            'style' => $action->getStyle()
           ),
           array(
             $icon,

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

@@ -3,5 +3,4 @@
  */
 
 .device .conpherence-header-pane {
-  display: none;
 }

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

@@ -22,44 +22,49 @@
 }
 
 .conpherence-menu-pane {
-  width: 300px;
+  width: 100%;
   position: absolute;
   overflow-x: hidden;
   overflow-y: auto;
   top: 0;
   bottom: 0;
 }
+.device-desktop .conpherence-layout .conpherence-menu-pane,
+.device-desktop .conpherence-layout .phabricator-nav-column-background {
+  width: 280px;
+}
+.device .conpherence-menu-pane {
+  top: 41px;
+}
+.device .conpherence-role-list .conpherence-menu-pane {
+  top: 0px;
+}
 
 .device-phone .conpherence-menu-pane {
   -webkit-overflow-scrolling: touch;
 }
 
-.conpherence-content-pane {
-  margin-left: 300px;
-  position: relative;
-}
-
 .conpherence-layout .phabricator-nav-column-background {
   display: block;
-  width: 300px;
-}
-
-.device .conpherence-menu-pane {
-  top: 41px;
-}
-
-.device .phabricator-nav-column-background {
-  top: 86px;
-}
-
-.device .conpherence-menu-pane,
-.device .phabricator-nav-column-background {
-  display: none;
   width: 100%;
 }
 
-.device .conpherence-content-pane {
+.device .phabricator-nav-column-background {
-  margin-left: 0;
+  top: 44px;
+}
+
+.device .conpherence-role-thread .conpherence-menu-pane,
+.device .conpherence-role-thread .phabricator-nav-column-background {
+  display: none;
+}
+
+.device-desktop .conpherence-content-pane {
+  margin-left: 280px;
+}
+
+.conpherence-content-pane {
+  margin-left: 0px;
+  position: relative;
 }
 
 .conpherence-menu .conpherence-menu-item-view {
@@ -106,7 +111,7 @@
   color: #ffffff;
   text-shadow: 0px 1px 1px #000000;
   overflow: hidden;
-  width: 160px;
+  width: 140px;
   text-overflow: ellipsis;
 }
 
@@ -151,6 +156,6 @@
   border-top: solid 1px #3B3D3E;
   padding: 20px 0;
   margin: 0px auto;
-  width: 300px;
+  width: 280px;
   text-align: center;
 }

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

@@ -4,8 +4,8 @@
 
 .conpherence-message-pane {
   position: fixed;
-  left: 300px;
+  left: 280px;
-  right: 281px;
+  right: 241px;
   top: 76px;
   min-width: 300px;
   width: auto;
@@ -15,7 +15,6 @@
 .device .conpherence-message-pane {
   left: 0;
   right: 0;
-  top: 85px;
   width: 100%;
 }
 
@@ -31,8 +30,8 @@
 
 .conpherence-message-pane .conpherence-messages {
   position: fixed;
-  left: 300px;
+  left: 280px;
-  right: 281px;
+  right: 241px;
   top: 76px;
   bottom: 190px;
   overflow-y: auto;
@@ -43,7 +42,6 @@
 .device .conpherence-message-pane .conpherence-messages {
   left: 0;
   right: 0;
-  top: 85px;
   bottom: 3em;
   width: 100%;
   box-shadow: none;
@@ -56,8 +54,8 @@
   padding: 0;
   position: fixed;
   bottom: 0;
-  left: 300px;
+  left: 280px;
-  right: 281px;
+  right: 241px;
 }
 
 .device .conpherence-message-pane .remarkup-assist-bar {

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

@@ -5,13 +5,12 @@
 .conpherence-widget-pane {
   position: fixed;
   right: 0px;
-  top: 76px;
+  top: 74px;
-  width: 280px;
+  width: 240px;
   height: 100%;
   border-width: 0 0 0 1px;
   border-color: #CCC;
   border-style: solid;
-  background: url('/rsrc/image/texture/dust_background.jpeg');
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
@@ -23,69 +22,61 @@
 
 .conpherence-widget-pane .aphront-form-input {
   margin: 0;
-  width: 100%;
+  width: 85%;
 }
 
 .conpherence-widget-pane .aphront-form-inset {
   border: 0;
-  background: url('/rsrc/image/texture/dust_background.jpeg');
 }
 
 .conpherence-widget-pane .widgets-header {
-  background-color: #d8dce2;
+  background: #F5F5F5;
-  box-shadow: 0px 2px 2px rgba(0,0,0,0.15);
+  border-bottom: 1px solid #ccc;
 }
 
-.conpherence-widget-pane .widgets-header .widgets-header-icon-holder {
+.device .conpherence-widget-pane .widgets-header {
-  height: 40px;
-  width: 280px;
-  margin: 0px auto;
-}
-
-.device-desktop .conpherence-widget-pane .widgets-header
-.widgets-header-icon-holder {
-  width: 175px;
-}
-
-.conpherence-widget-pane .widgets-header .sprite-conpherence {
-  display: block;
-  width: 29px;
-  height: 34px;
-  margin: 4px 0px 0px 14px;
-  float: left;
-  clear: none;
-}
-
-.conpherence-widget-pane .widgets-header .conpherence_list_on,
-.conpherence-widget-pane .widgets-header .conpherence_conversation_on,
-.conpherence-widget-pane .widgets-header .conpherence_people_on,
-.conpherence-widget-pane .widgets-header .conpherence_files_on,
-.conpherence-widget-pane .widgets-header .conpherence_calendar_on,
-.conpherence-widget-pane .widgets-header .conpherence_settings_on {
-  border-bottom: 3px solid #525252;
-}
-
-.device-desktop .conpherence-widget-pane .widgets-header
-#conpherence-menu-pane-toggle,
-.device-desktop .conpherence-widget-pane .widgets-header
-#conpherence-message-pane-toggle {
   display: none;
 }
 
+.conpherence-widget-pane .widgets-header .caret {
+  float: none;
+  height: 0px;
+  width: 0px;
+  margin-right: 0px;
+  border-top-color: #000;
+}
+.conpherence-widget-pane .widgets-header  a:hover {
+  text-decoration: none;
+}
+.device-desktop .conpherence-layout .device-widgets-selector {
+  display: none;
+}
+
+.dropdown-menu-frame {
+  width: 229px !important;
+}
+
 .conpherence-widget-pane .widgets-body {
   position: fixed;
   overflow-y: auto;
-  top: 116px;
   bottom: 0px;
   width: 100%;
+  top: 74px;
 }
 
-.device .conpherence-widget-pane .widgets-body {
+.device-desktop .conpherence-widget-pane .widgets-body {
-  top: 85px;
+  top: 104px;
+  width: 280px;
 }
 
 /* files widget */
 
+.conpherence-widget-pane #widgets-files .no-files {
+  width: 200px;
+  padding: 20px;
+  text-align: center;
+  color: #555;
+}
 .conpherence-widget-pane #widgets-files .file-entry {
   padding: 12px 0px 14px 0px;
 }
@@ -103,7 +94,7 @@
   top: -4px;
   left: 20px;
   overflow-x: hidden;
-  width: 210px;
+  width: 170px;
   font-weight: bold;
 }
 .conpherence-widget-pane #widgets-files .file-uploaded-by {
@@ -111,14 +102,14 @@
   position: relative;
   top: 0px;
   left: 20px;
-  width: 210px;
+  width: 170px;
   font-size: 11px;
 }
 
 .conpherence-widget-pane #widgets-files .file-extra {
   display: block;
   height: 120px;
-  width: 160px;
+  width: 120px;
   margin: 8px 0px 8px 52px;
   border: 1px solid #7289b7;
   box-shadow: 0 0px 5px rgba(0,0,0,.25);
@@ -128,7 +119,7 @@
 .conpherence-widget-pane #widgets-files .divider {
   float: left;
   clear: both;
-  width: 210px;
+  width: 170px;
   margin: 8px 0px 0px 50px;
   border: 1px dashed #bfbfbf;
 }
@@ -146,7 +137,7 @@
 
 .conpherence-widget-pane #widgets-calendar .aphront-multi-column-view {
   margin: 2px 0px 0px 0px;
-  width: 280px;
+  width: 240px;
 }
 .device .conpherence-widget-pane #widgets-calendar .aphront-multi-column-view {
   width: 100%;
@@ -162,6 +153,8 @@
 .aphront-multi-column-column-outer {
   width: 20%;
   margin-bottom: 0px;
+  float: left;
+  clear: none;
 }
 .conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
 .aphront-multi-column-column-last {
@@ -219,7 +212,7 @@
   border-top: 1px solid #bfbfbf;
   border-bottom: 1px solid #bfbfbf;
   padding: 5px 10px 5px 10px;
-  width: 260px;
+  width: 220px;
 }
 .device .conpherence-widget-pane #widgets-calendar .day-header {
   width: 98%;
@@ -237,7 +230,7 @@
 .conpherence-widget-pane #widgets-calendar .divider {
   float: left;
   clear: both;
-  width: 260px;
+  width: 220px;
   margin: 0px 0px 0px 10px;
   border: 1px dashed #bfbfbf;
 }
@@ -256,7 +249,7 @@
   float: left;
   clear: both;
   height: 60px;
-  width: 280px;
+  width: 240px;
 }
 .device .conpherence-widget-pane #widgets-calendar .user-status {
   width: 100%;
@@ -293,7 +286,7 @@
   position: relative;
   left: 40px;
   top: 0px;
-  width: 260px;
+  width: 220px;
 }
 
 .conpherence-widget-pane #widgets-calendar .user-status .participant {
@@ -302,7 +295,7 @@
   top: 0px;
   font-style: italic;
   font-size: 11px;
-  width: 260px;
+  width: 220px;
 }
 
 .device .conpherence-widget-pane #widgets-calendar .user-status .description,
@@ -323,12 +316,12 @@
 /* people widget */
 .conpherence-widget-pane .people-widget-header {
   float: left;
-  width: 280px;
+  width: 240px;
 }
 .conpherence-widget-pane .people-widget-header .divider {
   float: left;
   clear: both;
-  width: 260px;
+  width: 220px;
   margin: 0px 0px 0px 10px;
   border: 1px dashed #bfbfbf;
 }
@@ -339,18 +332,19 @@
 .conpherence-widget-pane .people-widget-header .add-people-widget {
   float: left;
   padding: 10px 0px 10px 0px;
-  width: 280px;
+  width: 240px;
 }
-
 .device .conpherence-widget-pane .people-widget-header,
 .device .conpherence-widget-pane .people-widget-header .add-people-widget {
   width: 100%;
 }
-
+.conpherence-widget-pane .add-people-widget .aphront-form-input {
+  width: 100%;
+}
 .conpherence-widget-pane .people-widget-header .add-people-widget
 .aphront-form-control-tokenizer {
   float: left;
-  width: 180px;
+  width: 142px;
   padding: 0px 0px 0px 10px
 }
 .device .conpherence-widget-pane .people-widget-header .add-people-widget
@@ -360,7 +354,7 @@
 .conpherence-widget-pane .people-widget-header .add-people-widget
 .people-add-button {
   float: right;
-  margin: 2px 10px 0px 0px;
+  margin: 2px 8px 0px 0px;
   padding: 3px 16px 4px 16px;
 }
 @-moz-document url-prefix() {
@@ -371,7 +365,7 @@
 }
 .conpherence-widget-pane .person-entry {
   float: left;
-  width: 270px;
+  width: 230px;
   clear: both;
   padding: 10px 0px 0px 8px;
 }
@@ -386,7 +380,7 @@
   clear: none;
   font-size: 14px;
   font-weight: bold;
-  width: 164px;
+  width: 124px;
 }
 
 .conpherence-widget-pane .person-entry .pic {
@@ -422,6 +416,7 @@
 }
 
 /* settings widget */
+.conpherence-widget-pane .title-update,
 .conpherence-widget-pane .notifications-update {
   margin: 2px 0px 0px 8px;
 }

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

@@ -97,7 +97,7 @@ JX.behavior('conpherence-menu', function(config) {
     var data = JX.Stratcom.getData(thread.node);
 
     if (thread.visible !== null || !config.hasThread) {
-    var uri = config.base_uri + data.id + '/';
+      var uri = config.base_uri + data.id + '/';
       new JX.Workflow(uri, {})
         .setHandler(onloadthreadresponse)
         .start();
@@ -124,35 +124,23 @@ JX.behavior('conpherence-menu', function(config) {
     updatetoggledwidget();
   }
 
-  function updatetoggledwidget() {
+  function updatetoggledwidget(no_toggle) {
+    JX.Stratcom.invoke(
+      'conpherence-toggle-widget',
+      null,
+      {
+        widget : getdefaultwidget(),
+        no_toggle : no_toggle
+      });
+  }
+
+  function getdefaultwidget() {
     var device = JX.Device.getDevice();
-    if (device != 'desktop') {
+    var widget = 'conpherence-message-pane';
-      if (config.role == 'list') {
+    if (device == 'desktop') {
-        JX.Stratcom.invoke(
+      widget = 'widgets-people';
-          '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-people'
-        }
-      );
     }
+    return widget;
   }
 
   function onloadthreadresponse(response) {
@@ -174,6 +162,22 @@ JX.behavior('conpherence-menu', function(config) {
     var root = JX.DOM.find(document, 'div', 'conpherence-layout');
     var messagesRoot = JX.DOM.find(root, 'div', 'conpherence-messages');
     messagesRoot.scrollTop = messagesRoot.scrollHeight;
+
+    try {
+      var device = JX.Device.getDevice();
+      var deviceWidgetSelector = JX.DOM.find(
+        root,
+        'a',
+        'device-widgets-selector');
+      if (device != 'desktop') {
+        JX.DOM.show(deviceWidgetSelector);
+        updatetoggledwidget(true);
+      } else {
+        JX.DOM.hide(deviceWidgetSelector);
+      }
+    } catch (ex) {
+      // not here yet
+    }
   }
 
   JX.Stratcom.listen(
@@ -262,6 +266,18 @@ JX.behavior('conpherence-menu', function(config) {
     if (new_device === old_device) {
       return;
     }
+
+    if (old_device === null) {
+      old_device = new_device;
+      if (config.role == 'list') {
+        if (new_device != 'desktop') {
+          return;
+        }
+      } else {
+        loadthreads();
+        return;
+      }
+    }
     var update_toggled_widget =
       new_device == 'desktop' || old_device == 'desktop';
     old_device = new_device;
@@ -270,10 +286,12 @@ JX.behavior('conpherence-menu', function(config) {
       updatetoggledwidget();
     }
 
-    if (!config.hasThreadList) {
+    if (config.role == 'list') {
-      loadthreads();
-    } else {
       didloadthreads();
+      config.role = 'thread';
+      var root = JX.DOM.find(document, 'div', 'conpherence-layout');
+      JX.DOM.alterClass(root, 'conpherence-role-list', false);
+      JX.DOM.alterClass(root, 'conpherence-role-thread', true);
     }
   }
 

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

@@ -6,104 +6,113 @@
  *           javelin-util
  *           phabricator-notification
  *           javelin-behavior-device
+ *           phabricator-dropdown-menu
+ *           phabricator-menu-item
  * @provides javelin-behavior-conpherence-widget-pane
  */
 
 JX.behavior('conpherence-widget-pane', function(config) {
 
+  var build_widget_selector = function (data) {
+    var widgets = config.widgetRegistry;
+    var root = JX.DOM.find(document, 'div', 'conpherence-layout');
+    var widgetPane = JX.DOM.find(root, 'div', 'conpherence-widget-pane');
+    var widgetHeader = JX.DOM.find(widgetPane, 'a', 'widgets-selector');
+    var mobileWidgetHeader = null;
+    try {
+      mobileWidgetHeader = JX.DOM.find(
+        root,
+        'a',
+        'device-widgets-selector');
+    } catch (ex) {
+      // is okay - no mobileWidgetHeader yet...
+    }
+    var widgetData = widgets[data.widget];
+    JX.DOM.setContent(
+      widgetHeader,
+      widgetData.name);
+    JX.DOM.appendContent(
+      widgetHeader,
+      JX.$N('span', { className : 'caret' }));
+    if (mobileWidgetHeader) {
+      // this is fragile but adding a sigil to this element is awkward
+      var mobileWidgetHeaderSpans = JX.DOM.scry(mobileWidgetHeader, 'span');
+      var mobileWidgetHeaderSpan = mobileWidgetHeaderSpans[1];
+      JX.DOM.setContent(
+        mobileWidgetHeaderSpan,
+        widgetData.name);
+    }
+
+    var menu = new JX.PhabricatorDropdownMenu(widgetHeader);
+    menu.toggleAlignDropdownRight(false);
+    var deviceMenu = null;
+    if (mobileWidgetHeader) {
+      deviceMenu = new JX.PhabricatorDropdownMenu(mobileWidgetHeader);
+    }
+
+    for (var widget in widgets) {
+      widgetData = widgets[widget];
+      if (mobileWidgetHeader) {
+        deviceMenu.addItem(new JX.PhabricatorMenuItem(
+          widgetData.name,
+          JX.bind(null, build_widget_selector, { widget : widget }),
+          '#'
+          ).setDisabled(widget == data.widget));
+      }
+      if (widgetData.deviceOnly) {
+        continue;
+      }
+      menu.addItem(new JX.PhabricatorMenuItem(
+        widgetData.name,
+        JX.bind(null, build_widget_selector, { widget : widget }),
+        '#'
+      ).setDisabled(widget == data.widget));
+    }
+    if (data.no_toggle) {
+      return;
+    }
+    toggle_widget(data);
+  };
+
   var toggle_widget = function (data) {
+    var widgets = config.widgetRegistry;
+    var widgetData = widgets[data.widget];
     var device = JX.Device.getDevice();
     var is_desktop = device == 'desktop';
-    if (config.widgetRegistery[data.widget] == config.devicesOnly &&
+
-        is_desktop) {
+    if (widgetData.deviceOnly && is_desktop) {
       return;
     }
 
-    var root = JX.DOM.find(document, 'div', 'conpherence-layout');
+    for (var widget in config.widgetRegistry) {
-    var widgetPane = JX.DOM.find(root, 'div', 'conpherence-widget-pane');
+      widgetData = widgets[widget];
-    var i;
+      if (widgetData.deviceOnly && is_desktop) {
-    var tag_data;
+        // some one off code for conpherence messages which are device-only
-    var node;
+        // as a widget, but shown always on the desktop
-
+        if (widget == 'conpherence-message-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]) {
+          JX.Stratcom.invoke('conpherence-redraw-thread', null, {});
-            for (i in config.widgetExtraNodes[widget]) {
-              tag_data = config.widgetExtraNodes[widget][i];
-              node = JX.DOM.find(root, tag_data.tagname, tag_data.sigil);
-              node.style.display = tag_data.desktopstyle;
-            }
-          }
-          continue;
         }
+        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) {
+        // some one off code for conpherence messages - fancier refresh tech
-          widgetPane.style.height = '42px';
-        } else {
-          widgetPane.style.height = '100%';
-        }
-        if (config.widgetExtraNodes[widget]) {
-          for (i in config.widgetExtraNodes[widget]) {
-            tag_data = config.widgetExtraNodes[widget][i];
-            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, title: 'Conpherence' }
-          );
-        }
       } else {
-        JX.DOM.alterClass(
-          cur_toggle,
-          toggle_class,
-          false
-        );
         JX.$(widget).style.display = 'none';
-        if (config.widgetExtraNodes[widget]) {
-          for (i in config.widgetExtraNodes[widget]) {
-            tag_data = config.widgetExtraNodes[widget][i];
-            node = JX.DOM.find(root, tag_data.tagname, tag_data.sigil);
-            node.style.display = tag_data.hidestyle;
-          }
-        }
       }
     }
   };
 
-  JX.Stratcom.listen(
-    ['touchstart', 'mousedown'],
-    'conpherence-change-widget',
-    function(e) {
-      e.kill();
-      var data = e.getNodeData('conpherence-change-widget');
-      toggle_widget(data);
-    }
-  );
-
   JX.Stratcom.listen(
     'conpherence-toggle-widget',
     null,
     function (e) {
-      toggle_widget(e.getData());
+      build_widget_selector(e.getData());
     }
   );