Use ActionList-based dropdowns in Conpherence

Summary:
See D8966, D8973. Replace PhabricatorDropdownMenu with PHUIXDropdownMenu.

These new menus look weird on mobile because all action lists pick up a bunch of weird styles on mobile and we're now reusing the CSS.

Test Plan:
{F150425}

{F150426}

Reviewers: btrahan, chad

Reviewed By: btrahan

Subscribers: epriestley

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

src/applications/conpherence/view/ConpherenceLayoutView.php

@@ -81,11 +81,13 @@ final class ConpherenceLayoutView extends AphrontView {
         'widgetRegistry' => array(
           'conpherence-message-pane' => array(
             'name' => pht('Thread'),
+            'icon' => 'comment',
             'deviceOnly' => true,
             'hasCreate' => false
           ),
           'widgets-people' => array(
             'name' => pht('Participants'),
+            'icon' => 'user',
             'deviceOnly' => false,
             'hasCreate' => true,
             'createData' => array(
@@ -96,11 +98,13 @@ final class ConpherenceLayoutView extends AphrontView {
           ),
           'widgets-files' => array(
             'name' => pht('Files'),
+            'icon' => 'file',
             'deviceOnly' => false,
             'hasCreate' => false
           ),
           'widgets-calendar' => array(
             'name' => pht('Calendar'),
+            'icon' => 'calendar',
             'deviceOnly' => false,
             'hasCreate' => true,
             'createData' => array(
@@ -111,6 +115,7 @@ final class ConpherenceLayoutView extends AphrontView {
           ),
           'widgets-settings' => array(
             'name' => pht('Settings'),
+            'icon' => 'wrench',
             'deviceOnly' => false,
             'hasCreate' => false
           ),

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

@@ -62,11 +62,6 @@
   display: none;
 }
 
-.dropdown-menu-frame {
-  width: 200px !important;
-  margin-top: 4px;
-}
-
 .conpherence-widget-pane .widgets-body {
   position: fixed;
   overflow-y: auto;

webroot/rsrc/css/layout/phabricator-action-list-view.css

@@ -11,6 +11,12 @@
   display: none;
 }
 
+.device .phuix-dropdown-menu .phabricator-action-list-view {
+  /* When an action list view appears inside a dropdown menu, don't hide it
+     by default. */
+  display: block;
+}
+
 .device .phabricator-action-list-view.phabricator-action-list-toggle {
   display: block;
 }

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

@@ -6,8 +6,9 @@
  *           javelin-util
  *           phabricator-notification
  *           javelin-behavior-device
- *           phabricator-dropdown-menu
+ *           phuix-dropdown-menu
- *           phabricator-menu-item
+ *           phuix-action-list-view
+ *           phuix-action-view
  * @provides javelin-behavior-conpherence-widget-pane
  */
 
@@ -37,7 +38,7 @@ JX.behavior('conpherence-widget-pane', function(config) {
       return;
     }
     JX.DOM.show(device_header);
-    var device_menu = new JX.PhabricatorDropdownMenu(device_header);
+    var device_menu = new JX.PHUIXDropdownMenu(device_header);
     data.deviceMenu = true;
     _buildWidgetSelector(device_menu, data);
   };
@@ -51,8 +52,12 @@ JX.behavior('conpherence-widget-pane', function(config) {
     var root = JX.DOM.find(document, 'div', 'conpherence-layout');
     var widget_pane = JX.DOM.find(root, 'div', 'conpherence-widget-pane');
     var widget_header = JX.DOM.find(widget_pane, 'a', 'widgets-selector');
-    var menu = new JX.PhabricatorDropdownMenu(widget_header);
+
-    menu.toggleAlignDropdownRight(false);
+    var menu = new JX.PHUIXDropdownMenu(widget_header);
+    menu
+      .setAlign('left')
+      .setOffsetY(4);
+
     data.deviceMenu = false;
     _buildWidgetSelector(menu, data);
   };
@@ -64,32 +69,40 @@ JX.behavior('conpherence-widget-pane', function(config) {
    */
   var _buildWidgetSelector = function (menu, data) {
     _loadedWidgetsID = data.threadID;
+
+    var list = new JX.PHUIXActionListView();
+    var map = {};
+
     var widgets = config.widgetRegistry;
     for (var widget in widgets) {
       var widget_data = widgets[widget];
       if (widget_data.deviceOnly && data.deviceMenu === false) {
         continue;
       }
-      menu.addItem(new JX.PhabricatorMenuItem(
+
-        widget_data.name,
+      var item = new JX.PHUIXActionView()
-        JX.bind(null, toggleWidget, { widget : widget }),
+        .setIcon(widget_data.icon || 'none')
-        '#'
+        .setName(widget_data.name)
-      ).setDisabled(widget == data.widget));
+        .setHandler(
+          JX.bind(null, function(widget, e) {
+            toggleWidget({widget: widget});
+            e.prevent();
+            menu.close();
+          }, widget));
+
+      map[widget_data.name] = item;
+      list.addItem(item);
     }
 
-    menu.listen(
+    menu
-     'open',
+      .setWidth(200)
-     JX.bind(menu, function () {
+      .setContent(list.getNode());
-       for (var ii = 0; ii < this._items.length; ii++) {
+
-         var item = this._items[ii];
+    menu.listen('open', function() {
-         var name = item.getName();
+      for (var k in map) {
-         if (name == _selectedWidgetName) {
+        map[k].setDisabled((k == _selectedWidgetName));
-           item.setDisabled(true);
+      }
-         } else {
+    });
-           item.setDisabled(false);
-         }
-       }
-     }));
   };
 
   /**

webroot/rsrc/js/phuix/PHUIXDropdownMenu.js

@@ -44,7 +44,9 @@ JX.install('PHUIXDropdownMenu', {
 
   properties: {
     width: null,
-    align: 'right'
+    align: 'right',
+    offsetX: 0,
+    offsetY: 0
   },
 
   members: {
@@ -171,6 +173,8 @@ JX.install('PHUIXDropdownMenu', {
           break;
       }
 
+      v = v.add(this.getOffsetX(), this.getOffsetY());
+
       v.setPos(this._menu);
     }
   }