From 7584d10b49d810b81f0b1162917ca81d047527fc Mon Sep 17 00:00:00 2001 From: epriestley Date: Mon, 5 May 2014 10:56:38 -0700 Subject: [PATCH] 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 --- .../view/ConpherenceLayoutView.php | 5 ++ .../application/conpherence/widget-pane.css | 5 -- .../layout/phabricator-action-list-view.css | 6 ++ .../conpherence/behavior-widget-pane.js | 59 +++++++++++-------- webroot/rsrc/js/phuix/PHUIXDropdownMenu.js | 6 +- 5 files changed, 52 insertions(+), 29 deletions(-) diff --git a/src/applications/conpherence/view/ConpherenceLayoutView.php b/src/applications/conpherence/view/ConpherenceLayoutView.php index cc5b09cb75..877559f3a1 100644 --- a/src/applications/conpherence/view/ConpherenceLayoutView.php +++ b/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 ), diff --git a/webroot/rsrc/css/application/conpherence/widget-pane.css b/webroot/rsrc/css/application/conpherence/widget-pane.css index c39e97a94c..515281cc34 100644 --- a/webroot/rsrc/css/application/conpherence/widget-pane.css +++ b/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; diff --git a/webroot/rsrc/css/layout/phabricator-action-list-view.css b/webroot/rsrc/css/layout/phabricator-action-list-view.css index c8ee116d1d..1e8a6e1119 100644 --- a/webroot/rsrc/css/layout/phabricator-action-list-view.css +++ b/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; } diff --git a/webroot/rsrc/js/application/conpherence/behavior-widget-pane.js b/webroot/rsrc/js/application/conpherence/behavior-widget-pane.js index 7c3c6c0ca1..d2bdea3d00 100644 --- a/webroot/rsrc/js/application/conpherence/behavior-widget-pane.js +++ b/webroot/rsrc/js/application/conpherence/behavior-widget-pane.js @@ -6,8 +6,9 @@ * javelin-util * phabricator-notification * javelin-behavior-device - * phabricator-dropdown-menu - * phabricator-menu-item + * phuix-dropdown-menu + * 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, - JX.bind(null, toggleWidget, { widget : widget }), - '#' - ).setDisabled(widget == data.widget)); + + var item = new JX.PHUIXActionView() + .setIcon(widget_data.icon || 'none') + .setName(widget_data.name) + .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( - 'open', - JX.bind(menu, function () { - for (var ii = 0; ii < this._items.length; ii++) { - var item = this._items[ii]; - var name = item.getName(); - if (name == _selectedWidgetName) { - item.setDisabled(true); - } else { - item.setDisabled(false); - } - } - })); + menu + .setWidth(200) + .setContent(list.getNode()); + + menu.listen('open', function() { + for (var k in map) { + map[k].setDisabled((k == _selectedWidgetName)); + } + }); }; /** diff --git a/webroot/rsrc/js/phuix/PHUIXDropdownMenu.js b/webroot/rsrc/js/phuix/PHUIXDropdownMenu.js index ed47a8a792..aa9fe4b224 100644 --- a/webroot/rsrc/js/phuix/PHUIXDropdownMenu.js +++ b/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); } }