Use ActionList-based dropdowns in Policy

Summary: See previous diffs. These mostly look reasonable with shared CSS.

Test Plan: {F150431}

Reviewers: chad, btrahan

Reviewed By: btrahan

Subscribers: epriestley

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

resources/sprite/manifest/status.json

@@ -263,7 +263,7 @@
     },
     "status-policy-admin-white"   : {
       "name" : "status-policy-admin-white",
-      "rule" : ".status-policy-admin-white, .dropdown-menu-item:hover .status-policy-admin",
+      "rule" : ".status-policy-admin-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-admin",
       "hash" : "4b16ec5170bc30fb688f7e086e61a7f1"
     },
     "status-policy-all"           : {
@@ -273,7 +273,7 @@
     },
     "status-policy-all-white"     : {
       "name" : "status-policy-all-white",
-      "rule" : ".status-policy-all-white, .dropdown-menu-item:hover .status-policy-all",
+      "rule" : ".status-policy-all-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-all",
       "hash" : "24ed12bf6f58c21a82be125ace2ff0d0"
     },
     "status-policy-custom"        : {
@@ -283,7 +283,7 @@
     },
     "status-policy-custom-white"  : {
       "name" : "status-policy-custom-white",
-      "rule" : ".status-policy-custom-white, .dropdown-menu-item:hover .status-policy-custom",
+      "rule" : ".status-policy-custom-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-custom",
       "hash" : "ff8b4cbe21f3b4254f343fffc170ef4b"
     },
     "status-policy-elist"         : {
@@ -303,7 +303,7 @@
     },
     "status-policy-noone-white"   : {
       "name" : "status-policy-noone-white",
-      "rule" : ".status-policy-noone-white, .dropdown-menu-item:hover .status-policy-noone",
+      "rule" : ".status-policy-noone-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-noone",
       "hash" : "80fb9b153fec4d8136242c5ddc2d8e77"
     },
     "status-policy-project"       : {
@@ -313,7 +313,7 @@
     },
     "status-policy-project-white" : {
       "name" : "status-policy-project-white",
-      "rule" : ".status-policy-project-white, .dropdown-menu-item:hover .status-policy-project",
+      "rule" : ".status-policy-project-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-project",
       "hash" : "ac2b6f19edb8d6c40f0bcb3fd477a067"
     },
     "status-policy-public"        : {
@@ -323,7 +323,7 @@
     },
     "status-policy-public-white"  : {
       "name" : "status-policy-public-white",
-      "rule" : ".status-policy-public-white, .dropdown-menu-item:hover .status-policy-public",
+      "rule" : ".status-policy-public-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-public",
       "hash" : "cf809ca49eefed5375c2ea081e721971"
     },
     "status-policy-unknown"       : {
@@ -333,7 +333,7 @@
     },
     "status-policy-unknown-white" : {
       "name" : "status-policy-unknown-white",
-      "rule" : ".status-policy-unknown-white, .dropdown-menu-item:hover .status-policy-unknown",
+      "rule" : ".status-policy-unknown-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-unknown",
       "hash" : "98985bfa005672c4b88feaf88cfa72bc"
     },
     "status-policy-user"          : {

src/infrastructure/celerity/CeleritySpriteGenerator.php

@@ -558,21 +558,16 @@ final class CeleritySpriteGenerator {
 
     $sprites = array();
     $prefix = 'status_';
+
+    $pre_rule = ', .phuix-dropdown-menu .phabricator-action-view:hover ';
     $extra_css = array(
-      'policy-custom-white' =>
+      'policy-custom-white' => $pre_rule.'.status-policy-custom',
-        ', .dropdown-menu-item:hover .status-policy-custom',
+      'policy-all-white' => $pre_rule.'.status-policy-all',
-      'policy-all-white' =>
+      'policy-unknown-white' => $pre_rule.'.status-policy-unknown',
-        ', .dropdown-menu-item:hover .status-policy-all',
+      'policy-admin-white' => $pre_rule.'.status-policy-admin',
-      'policy-unknown-white' =>
+      'policy-public-white' => $pre_rule.'.status-policy-public',
-        ', .dropdown-menu-item:hover .status-policy-unknown',
+      'policy-project-white' => $pre_rule.'.status-policy-project',
-      'policy-admin-white' =>
+      'policy-noone-white' => $pre_rule.'.status-policy-noone',
-        ', .dropdown-menu-item:hover .status-policy-admin',
-      'policy-public-white' =>
-        ', .dropdown-menu-item:hover .status-policy-public',
-      'policy-project-white' =>
-        ', .dropdown-menu-item:hover .status-policy-project',
-      'policy-noone-white' =>
-        ', .dropdown-menu-item:hover .status-policy-noone',
     );
 
     foreach ($icons as $icon) {

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

@@ -81,6 +81,10 @@
   color: {$lightgreytext};
 }
 
+.phabricator-action-view-selected {
+  background: {$lightblue};
+}
+
 .phabricator-action-view button[disabled] {
   opacity: 1.0;
 }

webroot/rsrc/css/sprite-status.css

@@ -222,7 +222,7 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
   background-position: 0px -75px;
 }
 
-.status-policy-admin-white, .dropdown-menu-item:hover .status-policy-admin {
+.status-policy-admin-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-admin {
   background-position: -15px -75px;
 }
 
@@ -230,7 +230,7 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
   background-position: -30px -75px;
 }
 
-.status-policy-all-white, .dropdown-menu-item:hover .status-policy-all {
+.status-policy-all-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-all {
   background-position: -45px -75px;
 }
 
@@ -238,7 +238,7 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
   background-position: -60px -75px;
 }
 
-.status-policy-custom-white, .dropdown-menu-item:hover .status-policy-custom {
+.status-policy-custom-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-custom {
   background-position: -75px -75px;
 }
 
@@ -254,7 +254,7 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
   background-position: -120px -75px;
 }
 
-.status-policy-noone-white, .dropdown-menu-item:hover .status-policy-noone {
+.status-policy-noone-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-noone {
   background-position: -135px -75px;
 }
 
@@ -262,7 +262,7 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
   background-position: 0px -90px;
 }
 
-.status-policy-project-white, .dropdown-menu-item:hover .status-policy-project {
+.status-policy-project-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-project {
   background-position: -15px -90px;
 }
 
@@ -270,7 +270,7 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
   background-position: -30px -90px;
 }
 
-.status-policy-public-white, .dropdown-menu-item:hover .status-policy-public {
+.status-policy-public-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-public {
   background-position: -45px -90px;
 }
 
@@ -278,7 +278,7 @@ only screen and (-webkit-min-device-pixel-ratio: 1.5) {
   background-position: -60px -90px;
 }
 
-.status-policy-unknown-white, .dropdown-menu-item:hover .status-policy-unknown {
+.status-policy-unknown-white, .phuix-dropdown-menu .phabricator-action-view:hover .status-policy-unknown {
   background-position: -75px -90px;
 }
 

webroot/rsrc/js/application/policy/behavior-policy-control.js

@@ -3,8 +3,9 @@
  * @requires javelin-behavior
  *           javelin-dom
  *           javelin-util
- *           phabricator-dropdown-menu
+ *           phuix-dropdown-menu
- *           phabricator-menu-item
+ *           phuix-action-list-view
+ *           phuix-action-view
  *           javelin-workflow
  * @javelin
  */
@@ -13,20 +14,20 @@ JX.behavior('policy-control', function(config) {
   var input = JX.$(config.inputID);
   var value = config.value;
 
-  var menu = new JX.PhabricatorDropdownMenu(control)
+  var menu = new JX.PHUIXDropdownMenu(control)
-    .setWidth(260);
+    .setWidth(260)
-
+    .setAlign('left');
-  menu.toggleAlignDropdownRight(false);
 
   menu.listen('open', function() {
-    menu.clear();
+    var list = new JX.PHUIXActionListView();
 
     for (var ii = 0; ii < config.groups.length; ii++) {
       var group = config.groups[ii];
 
-      var header = new JX.PhabricatorMenuItem(config.labels[group], JX.bag);
+      list.addItem(
-      header.setDisabled(true);
+        new JX.PHUIXActionView()
-      menu.addItem(header);
+          .setName(config.labels[group])
+          .setDisabled(true));
 
       for (var jj = 0; jj < config.order[group].length; jj++) {
         var phid = config.order[group][jj];
@@ -52,18 +53,25 @@ JX.behavior('policy-control', function(config) {
           onselect = JX.bind(null, select_policy, phid);
         }
 
-        var item = new JX.PhabricatorMenuItem(
+        var option = config.options[phid];
-          render_option(phid, true),
+        var item = new JX.PHUIXActionView()
-          onselect);
+          .setName(option.name)
+          .setIcon(option.icon, 'status')
+          .setHandler(JX.bind(null, function(fn, e) {
+            e.prevent();
+            menu.close();
+            fn();
+          }, onselect));
 
         if (phid == value) {
           item.setSelected(true);
         }
 
-        menu.addItem(item);
+        list.addItem(item);
       }
     }
 
+    menu.setContent(list.getNode());
   });
 
 

webroot/rsrc/js/phuix/PHUIXActionView.js

@@ -12,8 +12,10 @@ JX.install('PHUIXActionView', {
     _node: null,
     _name: null,
     _icon: 'none',
+    _iconSheet: 'icons',
     _disabled: false,
     _handler: null,
+    _selected: false,
 
     _iconNode: null,
     _nameNode: null,
@@ -30,8 +32,14 @@ JX.install('PHUIXActionView', {
       return this;
     },
 
-    getDisabled: function() {
+    setSelected: function(selected) {
-      return this._disabled;
+      this._selected = selected;
+      JX.DOM.alterClass(
+        this.getNode(),
+        'phabricator-action-view-selected',
+        selected);
+
+      return this;
     },
 
     setName: function(name) {
@@ -46,8 +54,9 @@ JX.install('PHUIXActionView', {
       return this;
     },
 
-    setIcon: function(icon) {
+    setIcon: function(icon, sheet) {
       this._icon = icon;
+      this._iconSheet = sheet || this._iconSheet;
       this._buildIconNode(true);
       return this;
     },
@@ -78,11 +87,15 @@ JX.install('PHUIXActionView', {
     _buildIconNode: function(dirty) {
       if (!this._iconNode || dirty) {
         var attr = {
-          className: 'phui-icon-view sprite-icons phabricator-action-view-icon'
+          className: [
+            'phui-icon-view',
+            'phabricator-action-view-icon',
+            'sprite-' + this._iconSheet
+          ].join(' ')
         };
         var node = JX.$N('span', attr);
 
-        var icon_class = 'icons-' + this._icon;
+        var icon_class = this._iconSheet + '-' + this._icon;
         if (this._disabled) {
           icon_class = icon_class + '-grey';
         }