Footer actions for work panels.

Summary: Adds action items in the footer of workpanels.

Test Plan: UIExamples on Chrome.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

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

Author: chadlittle

src/__celerity_resource_map__.php

@@ -3396,7 +3396,7 @@
   ),
   'phabricator-workpanel-view-css' =>
   array(
-    'uri' => '/res/96a4b5cd/rsrc/css/layout/phabricator-workpanel-view.css',
+    'uri' => '/res/db76713b/rsrc/css/layout/phabricator-workpanel-view.css',
     'type' => 'css',
     'requires' =>
     array(

src/applications/uiexample/examples/PhabricatorWorkboardExample.php

@@ -101,15 +101,20 @@ public function renderExample() {
 
     $panel = id(new PhabricatorWorkpanelView)
           ->setCards($list)
-          ->setHeader('Business Stuff');
+          ->setHeader('Business Stuff')
+          ->setFooterAction(
+            id(new PhabricatorMenuItemView())
+              ->setName(pht('Add Task'))
+              ->setIcon('new')
+              ->setHref('/maniphest/task/create/'));
 
     $panel2 = id(new PhabricatorWorkpanelView)
           ->setCards($list2)
           ->setHeader('Under Duress');
 
     $panel3 = id(new PhabricatorWorkpanelView)
-      ->setCards($list3)
-      ->setHeader('Spicy Thai Chicken');
+          ->setCards($list3)
+          ->setHeader('Spicy Thai Chicken');
 
     $board = id(new PhabricatorWorkboardView)
           ->addPanel($panel)
@@ -122,7 +127,7 @@ public function renderExample() {
           ->addPanel($panel)
           ->addPanel($panel2)
           ->addPanel($panel2)
-          ->addPanel($panel2)
+          ->addPanel($panel)
           ->addPanel($panel2)
           ->addPanel($panel3);
 

src/view/layout/PhabricatorMenuItemView.php

@@ -104,11 +104,26 @@ protected function getTagAttributes() {
 
   protected function getTagContent() {
     $name = null;
+    $icon = null;
+
     if ($this->name) {
+
       $external = null;
       if ($this->isExternal) {
         $external = " \xE2\x86\x97";
       }
+
+      if ($this->icon) {
+        require_celerity_resource('sprite-icon-css');
+        $icon = phutil_tag(
+          'span',
+            array(
+              'class' => 'phabricator-menu-item-icon sprite-icon '.
+                       'action-'.$this->icon,
+        ),
+        '');
+      }
+
       $name = phutil_tag(
         'span',
         array(
@@ -121,6 +136,7 @@ protected function getTagContent() {
     }
 
     return array(
+      $icon,
       $this->renderChildren(),
       $name,
     );

src/view/layout/PhabricatorWorkpanelView.php

@@ -22,7 +22,7 @@ public function setHeaderAction($header_action) {
     return $this;
   }
 
-  public function setFooterAction($footer_action) {
+  public function setFooterAction(PhabricatorMenuItemView $footer_action) {
     $this->footerAction = $footer_action;
     return $this;
   }
@@ -32,15 +32,13 @@ public function render() {
 
     $footer = '';
     if ($this->footerAction) {
-      $action = $this->footerAction;
-      $footer = javelin_tag(
-        'a',
+      $footer_tag = $this->footerAction;
+      $footer = phutil_tag(
+        'div',
           array(
-            'href' => $action->getHref(),
-            'class' => 'phabricator-workpanel-footer-action',
-            'sigil' => $action->getWorkflow() ? 'workflow' : null,
+            'class' => 'phabricator-workpanel-footer-action mst ps'
           ),
-          $action->getName());
+          $footer_tag);
     }
 
     $header = phutil_tag(

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

@@ -63,8 +63,24 @@
   box-shadow: inset 0 0px 5px rgba(0,0,0,.4);
 }
 
-.phabricator-workpanel-view .phabricator-workpanel-footer {
-  padding: 8px 5px;
+.phabricator-workpanel-view .phabricator-workpanel-footer-action a {
+  color: #333;
+  font-weight: bold;
+}
+
+.device-desktop .phabricator-workpanel-view .phabricator-workpanel-footer-action:hover {
+ background-color: rgba(100,100,100,.1);
+}
+
+.phabricator-workpanel-view .phabricator-menu-item-icon {
+  height: 12px;
+  width: 12px;
+  display: inline-block;
+}
+
+.phabricator-workpanel-view .phabricator-menu-item-name {
+  padding-left: 5px;
+  display: inline-block;
 }
 
 /* fluid/flex styles */