Move ActionList mobile links to better location

Summary: Ref T5752, moves mobile action menus to the object box instead of crumbs.

Test Plan: View action menus at tablet, desktop, and mobile break points. Verify clicking buttons works as expected opening menu.

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T5752

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '8fc8031a',
+    'core.pkg.css' => '2b129813',
     'core.pkg.js' => '61af8961',
     'darkconsole.pkg.js' => '8ab24e01',
     'differential.pkg.css' => '8af45893',
@@ -112,7 +112,7 @@ return array(
     'rsrc/css/font/font-awesome.css' => '0c10d96b',
     'rsrc/css/font/font-source-sans-pro.css' => '91d53463',
     'rsrc/css/font/phui-font-icon-base.css' => '3dad2ae3',
-    'rsrc/css/layout/phabricator-crumbs-view.css' => 'a49339de',
+    'rsrc/css/layout/phabricator-crumbs-view.css' => 'd5aa87e4',
     'rsrc/css/layout/phabricator-filetree-view.css' => 'fccf9f82',
     'rsrc/css/layout/phabricator-hovercard-view.css' => '893f4783',
     'rsrc/css/layout/phabricator-side-menu-view.css' => '90eafc85',
@@ -130,7 +130,7 @@ return array(
     'rsrc/css/phui/phui-fontkit.css' => '9c3d2dce',
     'rsrc/css/phui/phui-form-view.css' => 'aad06f2a',
     'rsrc/css/phui/phui-form.css' => '9aecbda1',
-    'rsrc/css/phui/phui-header-view.css' => '8d9907ad',
+    'rsrc/css/phui/phui-header-view.css' => '0873d56f',
     'rsrc/css/phui/phui-icon.css' => 'a013a63d',
     'rsrc/css/phui/phui-image-mask.css' => '5a8b09c8',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
@@ -707,7 +707,7 @@ return array(
     'phabricator-content-source-view-css' => '4b8b05d4',
     'phabricator-core-css' => 'ca42b69f',
     'phabricator-countdown-css' => '86b7b0a0',
-    'phabricator-crumbs-view-css' => 'a49339de',
+    'phabricator-crumbs-view-css' => 'd5aa87e4',
     'phabricator-dashboard-css' => 'a2bfdcbf',
     'phabricator-drag-and-drop-file-upload' => '8c49f386',
     'phabricator-draggable-list' => 'a16ec1c6',
@@ -774,7 +774,7 @@ return array(
     'phui-fontkit-css' => '9c3d2dce',
     'phui-form-css' => '9aecbda1',
     'phui-form-view-css' => 'aad06f2a',
-    'phui-header-view-css' => '8d9907ad',
+    'phui-header-view-css' => '0873d56f',
     'phui-icon-view-css' => 'a013a63d',
     'phui-image-mask-css' => '5a8b09c8',
     'phui-info-panel-css' => '27ea50a1',

src/applications/differential/controller/DifferentialRevisionViewController.php

@@ -457,7 +457,6 @@ final class DifferentialRevisionViewController extends DifferentialController {
 
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->addTextCrumb($object_id, '/'.$object_id);
-    $crumbs->setActionList($revision_detail->getActionList());
 
     $prefs = $user->loadPreferences();
 

src/applications/drydock/controller/DrydockBlueprintViewController.php

@@ -49,7 +49,6 @@ final class DrydockBlueprintViewController extends DrydockBlueprintController {
     $pager->setOffset($request->getInt('offset'));
 
     $crumbs = $this->buildApplicationCrumbs();
-    $crumbs->setActionList($actions);
     $crumbs->addTextCrumb(pht('Blueprint %d', $blueprint->getID()));
 
     $object_box = id(new PHUIObjectBoxView())

src/applications/drydock/controller/DrydockLeaseViewController.php

@@ -46,7 +46,6 @@ final class DrydockLeaseViewController extends DrydockLeaseController {
     $log_table->appendChild($pager);
 
     $crumbs = $this->buildApplicationCrumbs();
-    $crumbs->setActionList($actions);
     $crumbs->addTextCrumb($title, $lease_uri);
 
     $object_box = id(new PHUIObjectBoxView())

src/applications/drydock/controller/DrydockResourceViewController.php

@@ -58,7 +58,6 @@ final class DrydockResourceViewController extends DrydockResourceController {
     $log_table->appendChild($pager);
 
     $crumbs = $this->buildApplicationCrumbs();
-    $crumbs->setActionList($actions);
     $crumbs->addTextCrumb(pht('Resource %d', $resource->getID()));
 
     $object_box = id(new PHUIObjectBoxView())

src/applications/files/controller/PhabricatorFileInfoController.php

@@ -60,7 +60,6 @@ final class PhabricatorFileInfoController extends PhabricatorFileController {
     $actions = $this->buildActionView($file);
     $timeline = $this->buildTransactionView($file);
     $crumbs = $this->buildApplicationCrumbs();
-    $crumbs->setActionList($actions);
     $crumbs->addTextCrumb(
       'F'.$file->getID(),
       $this->getApplicationURI("/info/{$phid}/"));

src/applications/fund/controller/FundInitiativeViewController.php

@@ -54,7 +54,6 @@ final class FundInitiativeViewController
     $properties = $this->buildPropertyListView($initiative);
     $actions = $this->buildActionListView($initiative);
     $properties->setActionList($actions);
-    $crumbs->setActionList($actions);
 
     $box = id(new PHUIObjectBoxView())
       ->setHeader($header)

src/applications/herald/controller/HeraldRuleViewController.php

@@ -45,7 +45,6 @@ final class HeraldRuleViewController extends HeraldController {
 
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->addTextCrumb("H{$id}");
-    $crumbs->setActionList($actions);
 
     $object_box = id(new PHUIObjectBoxView())
       ->setHeader($header)

src/applications/legalpad/controller/LegalpadDocumentManageController.php

@@ -68,7 +68,6 @@ final class LegalpadDocumentManageController extends LegalpadController {
     $add_comment = $this->buildAddCommentView($document, $comment_form_id);
 
     $crumbs = $this->buildApplicationCrumbs($this->buildSideNav());
-    $crumbs->setActionList($actions);
     $crumbs->addTextCrumb(
       $document->getMonogram(),
       '/'.$document->getMonogram());

src/applications/macro/controller/PhabricatorMacroViewController.php

@@ -34,7 +34,6 @@ final class PhabricatorMacroViewController
     $actions = $this->buildActionView($macro);
 
     $crumbs = $this->buildApplicationCrumbs();
-    $crumbs->setActionList($actions);
     $crumbs->addTextCrumb(
       $title_short,
       $this->getApplicationURI('/view/'.$macro->getID().'/'));

src/applications/maniphest/controller/ManiphestTaskDetailController.php

@@ -328,8 +328,7 @@ final class ManiphestTaskDetailController extends ManiphestController {
     $actions = $this->buildActionView($task);
 
     $crumbs = $this->buildApplicationCrumbs()
-      ->addTextCrumb($object_name, '/'.$object_name)
+      ->addTextCrumb($object_name, '/'.$object_name);
-      ->setActionList($actions);
 
     $header = $this->buildHeaderView($task);
     $properties = $this->buildPropertyView(

src/applications/passphrase/controller/PassphraseCredentialViewController.php

@@ -39,8 +39,6 @@ final class PassphraseCredentialViewController extends PassphraseController {
     $actions = $this->buildActionView($credential, $type);
     $properties = $this->buildPropertyView($credential, $type, $actions);
 
-    $crumbs->setActionList($actions);
-
     $box = id(new PHUIObjectBoxView())
       ->setHeader($header)
       ->addPropertyList($properties);

src/applications/paste/controller/PhabricatorPasteViewController.php

@@ -87,7 +87,6 @@ final class PhabricatorPasteViewController extends PhabricatorPasteController {
       ->addMargin(PHUI::MARGIN_LARGE_TOP);
 
     $crumbs = $this->buildApplicationCrumbs($this->buildSideNavView())
-      ->setActionList($actions)
       ->addTextCrumb('P'.$paste->getID(), '/P'.$paste->getID());
 
     $timeline = $this->buildTransactionTimeline(

src/applications/people/controller/PhabricatorPeopleProfileController.php

@@ -131,7 +131,7 @@ final class PhabricatorPeopleProfileController
 
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->addTextCrumb($user->getUsername());
-    $crumbs->setActionList($actions);
+
     $feed = $this->renderUserFeed($user);
     $cal_class = 'PhabricatorCalendarApplication';
     $classes = array();

src/applications/phame/controller/post/PhamePostViewController.php

@@ -32,7 +32,6 @@ final class PhamePostViewController extends PhameController {
     $properties = $this->renderProperties($post, $user, $actions);
 
     $crumbs = $this->buildApplicationCrumbs();
-    $crumbs->setActionList($actions);
     $crumbs->addTextCrumb(
       $post->getTitle(),
       $this->getApplicationURI('post/view/'.$post->getID().'/'));

src/applications/pholio/controller/PholioMockViewController.php

@@ -94,7 +94,6 @@ final class PholioMockViewController extends PholioController {
     $add_comment = $this->buildAddCommentView($mock, $comment_form_id);
 
     $crumbs = $this->buildApplicationCrumbs();
-    $crumbs->setActionList($actions);
     $crumbs->addTextCrumb('M'.$mock->getID(), '/M'.$mock->getID());
 
     $object_box = id(new PHUIObjectBoxView())

src/applications/phortune/controller/PhortuneAccountViewController.php

@@ -55,8 +55,6 @@ final class PhortuneAccountViewController extends PhortuneController {
           ->setDisabled(!$can_edit)
           ->setWorkflow(!$can_edit));
 
-    $crumbs->setActionList($actions);
-
     $properties = id(new PHUIPropertyListView())
       ->setObject($account)
       ->setUser($user);

src/applications/phortune/controller/PhortuneCartViewController.php

@@ -159,7 +159,6 @@ final class PhortuneCartViewController
     $crumbs = $this->buildApplicationCrumbs();
     $this->addAccountCrumb($crumbs, $cart->getAccount());
     $crumbs->addTextCrumb(pht('Cart %d', $cart->getID()));
-    $crumbs->setActionList($actions);
 
     $timeline = $this->buildTransactionTimeline(
       $cart,

src/applications/phortune/controller/PhortuneMerchantViewController.php

@@ -43,7 +43,6 @@ final class PhortuneMerchantViewController
     $properties = $this->buildPropertyListView($merchant, $providers);
     $actions = $this->buildActionListView($merchant);
     $properties->setActionList($actions);
-    $crumbs->setActionList($actions);
 
     $provider_list = $this->buildProviderList(
       $merchant,

src/applications/phortune/controller/PhortuneProductViewController.php

@@ -32,7 +32,6 @@ final class PhortuneProductViewController extends PhortuneController {
       ->setObjectURI($request->getRequestURI());
 
     $crumbs = $this->buildApplicationCrumbs();
-    $crumbs->setActionList($actions);
     $crumbs->addTextCrumb(
       pht('Products'),
       $this->getApplicationURI('product/'));

src/applications/phriction/controller/PhrictionDocumentController.php

@@ -185,7 +185,6 @@ final class PhrictionDocumentController
     $actions = $this->buildActionView($user, $document);
 
     $crumbs = $this->buildApplicationCrumbs();
-    $crumbs->setActionList($actions);
     $crumb_views = $this->renderBreadcrumbs($slug);
     foreach ($crumb_views as $view) {
       $crumbs->addCrumb($view);

src/applications/ponder/controller/PonderQuestionViewController.php

@@ -61,7 +61,6 @@ final class PonderQuestionViewController extends PonderController {
       ->addPropertyList($properties);
 
     $crumbs = $this->buildApplicationCrumbs($this->buildSideNavView());
-    $crumbs->setActionList($actions);
     $crumbs->addTextCrumb('Q'.$this->questionID, '/Q'.$this->questionID);
 
     return $this->buildApplicationPage(

src/applications/project/controller/PhabricatorProjectEditMainController.php

@@ -48,7 +48,6 @@ final class PhabricatorProjectEditMainController
       $project->getName(),
       $this->getApplicationURI('view/'.$project->getID().'/'));
     $crumbs->addTextCrumb(pht('Edit'));
-    $crumbs->setActionList($actions);
 
     $object_box = id(new PHUIObjectBoxView())
       ->setHeader($header)

src/applications/project/controller/PhabricatorProjectProfileController.php

@@ -87,8 +87,7 @@ final class PhabricatorProjectProfileController
     $properties = $this->buildPropertyListView($project, $actions);
 
     $crumbs = $this->buildApplicationCrumbs();
-    $crumbs->addTextCrumb($project->getName())
+    $crumbs->addTextCrumb($project->getName());
-      ->setActionList($actions);
 
     $object_box = id(new PHUIObjectBoxView())
       ->setHeader($header)

src/view/layout/PhabricatorCrumbsView.php

@@ -4,7 +4,6 @@ final class PhabricatorCrumbsView extends AphrontView {
 
   private $crumbs = array();
   private $actions = array();
-  private $actionListID = null;
 
   protected function canAppendChild() {
     return false;
@@ -36,17 +35,11 @@ final class PhabricatorCrumbsView extends AphrontView {
     return $this;
   }
 
-  public function setActionList(PhabricatorActionListView $list) {
-    $this->actionListID = celerity_generate_unique_node_id();
-    $list->setId($this->actionListID);
-    return $this;
-  }
-
   public function render() {
     require_celerity_resource('phabricator-crumbs-view-css');
 
     $action_view = null;
-    if (($this->actions) || ($this->actionListID)) {
+    if ($this->actions) {
       $actions = array();
       foreach ($this->actions as $action) {
         $icon = null;
@@ -92,38 +85,6 @@ final class PhabricatorCrumbsView extends AphrontView {
           ));
       }
 
-      if ($this->actionListID) {
-        $icon_id = celerity_generate_unique_node_id();
-        $icon = id(new PHUIIconView())
-          ->setIconFont('fa-bars');
-        $name = phutil_tag(
-          'span',
-            array(
-              'class' => 'phabricator-crumbs-action-name',
-            ),
-          pht('Actions'));
-
-        $actions[] = javelin_tag(
-          'a',
-            array(
-              'href'  => '#',
-              'class' =>
-                'phabricator-crumbs-action phabricator-crumbs-action-menu',
-              'sigil' => 'jx-toggle-class',
-              'id'    => $icon_id,
-              'meta'  => array(
-                'map' => array(
-                  $this->actionListID => 'phabricator-action-list-toggle',
-                  $icon_id => 'phabricator-crumbs-action-menu-open',
-                ),
-              ),
-            ),
-            array(
-              $icon,
-              $name,
-            ));
-      }
-
       $action_view = phutil_tag(
         'div',
         array(

src/view/phui/PHUIButtonView.php

@@ -22,6 +22,9 @@ final class PHUIButtonView extends AphrontTagView {
   private $title = null;
   private $disabled;
   private $name;
+  private $id;
+  private $sigil;
+  private $meta;
 
   public function setName($name) {
     $this->name = $name;
@@ -82,6 +85,21 @@ final class PHUIButtonView extends AphrontTagView {
     return $this;
   }
 
+  public function setID($id) {
+    $this->id = $id;
+    return $this;
+  }
+
+  public function setSigil($sigil) {
+    $this->sigil = $sigil;
+    return $this;
+  }
+
+  public function setMeta($meta) {
+    $this->meta = $meta;
+    return $this;
+  }
+
   public function getTagName() {
     return $this->tag;
   }
@@ -118,6 +136,9 @@ final class PHUIButtonView extends AphrontTagView {
       'href'   => $this->href,
       'name'   => $this->name,
       'title'  => $this->title,
+      'id'     => $this->id,
+      'sigil'  => $this->sigil,
+      'meta'   => $this->meta,
     );
   }
 

src/view/phui/PHUIObjectBoxView.php

@@ -14,6 +14,7 @@ final class PHUIObjectBoxView extends AphrontView {
   private $id;
   private $sigils = array();
   private $metadata;
+  private $actionListID;
 
   private $tabs = array();
   private $propertyLists = array();
@@ -71,6 +72,12 @@ final class PHUIObjectBoxView extends AphrontView {
 
     $this->propertyLists[$key][] = $property_list;
 
+    $action_list = $property_list->getActionList();
+    if ($action_list) {
+      $this->actionListID = celerity_generate_unique_node_id();
+      $action_list->setId($this->actionListID);
+    }
+
     return $this;
   }
 
@@ -156,6 +163,27 @@ final class PHUIObjectBoxView extends AphrontView {
         ->setHeaderColor($header_color);
     }
 
+    if ($this->actionListID) {
+      $icon_id = celerity_generate_unique_node_id();
+      $icon = id(new PHUIIconView())
+        ->setIconFont('fa-bars');
+      $meta = array(
+        'map' => array(
+          $this->actionListID => 'phabricator-action-list-toggle',
+          $icon_id => 'phui-mobile-action-menu-open',
+        ),);
+      $mobile_menu = id(new PHUIButtonView())
+        ->setTag('a')
+        ->setText(pht('Actions'))
+        ->setHref('#')
+        ->setIcon($icon)
+        ->addClass('phui-mobile-menu')
+        ->setID($icon_id)
+        ->setSigil('jx-toggle-class')
+        ->setMeta($meta);
+      $header->addActionLink($mobile_menu);
+    }
+
     $ex = $this->validationException;
     $exception_errors = null;
     if ($ex) {

src/view/phui/PHUIPropertyListView.php

@@ -6,7 +6,7 @@ final class PHUIPropertyListView extends AphrontView {
   private $hasKeyboardShortcuts;
   private $object;
   private $invokedWillRenderEvent;
-  private $actionList;
+  private $actionList = null;
   private $classes = array();
   private $stacked;
 
@@ -27,6 +27,10 @@ final class PHUIPropertyListView extends AphrontView {
     return $this;
   }
 
+  public function getActionList() {
+    return $this->actionList;
+  }
+
   public function setStacked($stacked) {
     $this->stacked = $stacked;
     return $this;

webroot/rsrc/css/layout/phabricator-crumbs-view.css

@@ -28,18 +28,6 @@
   color: {$lightgreytext};
 }
 
-.phabricator-crumbs-action.phabricator-crumbs-action-menu {
-  display: none;
-}
-
-.device .phabricator-crumbs-action.phabricator-crumbs-action-menu {
-  display: inline-block;
-}
-
-.device .phabricator-crumbs-action-menu-open {
-  background: rgba(0,0,0,.1);
-}
-
 .phabricator-crumbs-view + .phui-header-shell {
   border-top: none;
 }

webroot/rsrc/css/phui/phui-header-view.css

@@ -138,3 +138,15 @@ body.device-phone .phui-header-view {
 .phui-header-subheader .phui-header-status-green {
   color: {$green};
 }
+
+.phui-header-action-links .phui-mobile-menu {
+  display: none;
+}
+
+.device .phui-header-action-links .phui-mobile-menu {
+  display: inline-block;
+}
+
+.phui-mobile-action-menu-open {
+  background: white !important;
+}