Actions for Workboards.

Summary: Adds an action panel on the left side of the workboard.

Test Plan: Tested Fluid and mobile layouts

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: aran, Korvin

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

src/__celerity_resource_map__.php

@@ -448,6 +448,48 @@ celerity_register_resource_map(array(
     'disk' => '/rsrc/image/menu_texture.png',
     'type' => 'png',
   ),
+  '/rsrc/image/people/harding.png' =>
+  array(
+    'hash' => '818b035ace2c480aa8df7b7f11cef58b',
+    'uri' => '/res/818b035a/rsrc/image/people/harding.png',
+    'disk' => '/rsrc/image/people/harding.png',
+    'type' => 'png',
+  ),
+  '/rsrc/image/people/jefferson.png' =>
+  array(
+    'hash' => '55fe807ff02f9320e595fb59442e2038',
+    'uri' => '/res/55fe807f/rsrc/image/people/jefferson.png',
+    'disk' => '/rsrc/image/people/jefferson.png',
+    'type' => 'png',
+  ),
+  '/rsrc/image/people/lincoln.png' =>
+  array(
+    'hash' => '2363337947ab52fd5fda79e4a004e930',
+    'uri' => '/res/23633379/rsrc/image/people/lincoln.png',
+    'disk' => '/rsrc/image/people/lincoln.png',
+    'type' => 'png',
+  ),
+  '/rsrc/image/people/mckinley.png' =>
+  array(
+    'hash' => '0b7b05dd47c49a0874670e5e8200bba8',
+    'uri' => '/res/0b7b05dd/rsrc/image/people/mckinley.png',
+    'disk' => '/rsrc/image/people/mckinley.png',
+    'type' => 'png',
+  ),
+  '/rsrc/image/people/taft.png' =>
+  array(
+    'hash' => 'f3e47d45b59b0b009fd536dabae9a151',
+    'uri' => '/res/f3e47d45/rsrc/image/people/taft.png',
+    'disk' => '/rsrc/image/people/taft.png',
+    'type' => 'png',
+  ),
+  '/rsrc/image/people/washington.png' =>
+  array(
+    'hash' => '01412761cab769f7993d69eba986d949',
+    'uri' => '/res/01412761/rsrc/image/people/washington.png',
+    'disk' => '/rsrc/image/people/washington.png',
+    'type' => 'png',
+  ),
   '/rsrc/image/phrequent_active.png' =>
   array(
     'hash' => '716cddc08630eaa33934b2008723cac0',
@@ -3401,7 +3443,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-workboard-view-css' =>
   array(
-    'uri' => '/res/98971c26/rsrc/css/layout/phabricator-workboard-view.css',
+    'uri' => '/res/b70667c6/rsrc/css/layout/phabricator-workboard-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3410,7 +3452,7 @@ celerity_register_resource_map(array(
   ),
   'phabricator-workpanel-view-css' =>
   array(
-    'uri' => '/res/db76713b/rsrc/css/layout/phabricator-workpanel-view.css',
+    'uri' => '/res/d2eea288/rsrc/css/layout/phabricator-workpanel-view.css',
     'type' => 'css',
     'requires' =>
     array(

src/__phutil_library_map__.php

@@ -1435,6 +1435,7 @@ phutil_register_library_map(array(
     'PhabricatorUserStatusInvalidEpochException' => 'applications/people/exception/PhabricatorUserStatusInvalidEpochException.php',
     'PhabricatorUserStatusOverlapException' => 'applications/people/exception/PhabricatorUserStatusOverlapException.php',
     'PhabricatorUserTestCase' => 'applications/people/storage/__tests__/PhabricatorUserTestCase.php',
+    'PhabricatorWorkboardActionView' => 'view/layout/PhabricatorWorkboardActionView.php',
     'PhabricatorWorkboardExample' => 'applications/uiexample/examples/PhabricatorWorkboardExample.php',
     'PhabricatorWorkboardView' => 'view/layout/PhabricatorWorkboardView.php',
     'PhabricatorWorker' => 'infrastructure/daemon/workers/PhabricatorWorker.php',
@@ -3084,6 +3085,7 @@ phutil_register_library_map(array(
     'PhabricatorUserStatusInvalidEpochException' => 'Exception',
     'PhabricatorUserStatusOverlapException' => 'Exception',
     'PhabricatorUserTestCase' => 'PhabricatorTestCase',
+    'PhabricatorWorkboardActionView' => 'AphrontView',
     'PhabricatorWorkboardExample' => 'PhabricatorUIExample',
     'PhabricatorWorkboardView' => 'AphrontView',
     'PhabricatorWorkerActiveTask' => 'PhabricatorWorkerTask',

src/applications/uiexample/examples/PhabricatorWorkboardExample.php

@@ -99,7 +99,7 @@ final class PhabricatorWorkboardExample extends PhabricatorUIExample {
         ->setHeader(pht('Playing Card'))
         ->setBarColor('orange'));
 
-    $panel = id(new PhabricatorWorkpanelView)
+    $panel = id(new PhabricatorWorkpanelView())
           ->setCards($list)
           ->setHeader('Business Stuff')
           ->setFooterAction(
@@ -108,21 +108,21 @@ final class PhabricatorWorkboardExample extends PhabricatorUIExample {
               ->setIcon('new')
               ->setHref('/maniphest/task/create/'));
 
-    $panel2 = id(new PhabricatorWorkpanelView)
+    $panel2 = id(new PhabricatorWorkpanelView())
           ->setCards($list2)
           ->setHeader('Under Duress');
 
-    $panel3 = id(new PhabricatorWorkpanelView)
+    $panel3 = id(new PhabricatorWorkpanelView())
           ->setCards($list3)
           ->setHeader('Spicy Thai Chicken');
 
-    $board = id(new PhabricatorWorkboardView)
+    $board = id(new PhabricatorWorkboardView())
           ->addPanel($panel)
           ->addPanel($panel2)
           ->addPanel($panel2)
           ->addPanel($panel3);
 
-    $board2 = id(new PhabricatorWorkboardView)
+    $board2 = id(new PhabricatorWorkboardView())
           ->setFlexLayout(true)
           ->addPanel($panel)
           ->addPanel($panel2)
@@ -131,12 +131,44 @@ final class PhabricatorWorkboardExample extends PhabricatorUIExample {
           ->addPanel($panel2)
           ->addPanel($panel3);
 
+    $action = new PhabricatorWorkboardActionView();
+    $action->setHref('/maniphest/task/create');
+    $action->setImage('/rsrc/image/actions/edit.png');
+
+    $person1 = new PhabricatorWorkboardActionView();
+    $person1->setHref('http://en.wikipedia.org/wiki/George_Washington');
+    $person1->setImage(
+      celerity_get_resource_uri('/rsrc/image/people/washington.png'));
+
+    $person2 = new PhabricatorWorkboardActionView();
+    $person2->setHref('http://en.wikipedia.org/wiki/Warren_G._Harding');
+    $person2->setImage(
+      celerity_get_resource_uri('/rsrc/image/people/harding.png'));
+
+    $person3 = new PhabricatorWorkboardActionView();
+    $person3->setHref('http://en.wikipedia.org/wiki/William_Howard_Taft');
+    $person3->setImage(
+      celerity_get_resource_uri('/rsrc/image/people/taft.png'));
+
+    $board3 = id(new PhabricatorWorkboardView())
+          ->setFlexLayout(true)
+          ->addPanel($panel)
+          ->addPanel($panel)
+          ->addPanel($panel2)
+          ->addPanel($panel3)
+          ->addAction($action)
+          ->addAction($person1)
+          ->addAction($person2)
+          ->addAction($person3);
+
     $head1 = id(new PhabricatorHeaderView())
       ->setHeader(pht('Fixed Panel'));
 
     $head2 = id(new PhabricatorHeaderView())
       ->setHeader(pht('Fluid Panel'));
 
+    $head3 = id(new PhabricatorHeaderView())
+      ->setHeader(pht('Action Panel'));
 
     $wrap1 = phutil_tag(
       'div',
@@ -152,6 +184,13 @@ final class PhabricatorWorkboardExample extends PhabricatorUIExample {
         ),
         $board2);
 
+    $wrap3 = phutil_tag(
+      'div',
+        array(
+          'class' => 'ml'
+        ),
+        $board3);
+
     return phutil_tag(
       'div',
         array(),
@@ -159,7 +198,9 @@ final class PhabricatorWorkboardExample extends PhabricatorUIExample {
           $head1,
           $wrap1,
           $head2,
-          $wrap2
+          $wrap2,
+          $head3,
+          $wrap3
         ));
   }
 }

src/view/layout/PhabricatorWorkboardActionView.php

@@ -0,0 +1,35 @@
+<?php
+
+final class PhabricatorWorkboardActionView extends AphrontView {
+
+  private $href;
+  private $workflow;
+  private $image;
+
+  public function setHref($href) {
+    $this->href = $href;
+    return $this;
+  }
+
+  public function setWorkflow($workflow) {
+    $this->workflow = $workflow;
+    return $this;
+  }
+
+  public function setImage($image) {
+    $this->image = $image;
+  }
+
+  public function render() {
+
+    return phutil_tag(
+      'a',
+        array(
+          'href'  => $this->href,
+          'class' => 'phabricator-workboard-action-item-link',
+          'sigil' => $this->workflow ? 'workflow' : null,
+          'style' => 'background-image: url('.$this->image.');'
+        ),
+        '');
+  }
+}

src/view/layout/PhabricatorWorkboardView.php

@@ -4,6 +4,7 @@ final class PhabricatorWorkboardView extends AphrontView {
 
   private $panels = array();
   private $flexLayout = false;
+  private $actions = array();
 
   public function addPanel(PhabricatorWorkpanelView $panel) {
     $this->panels[] = $panel;
@@ -15,6 +16,11 @@ final class PhabricatorWorkboardView extends AphrontView {
     return $this;
   }
 
+  public function addAction(PhabricatorWorkboardActionView $action) {
+    $this->actions[] = $action;
+    return $this;
+  }
+
   public function render() {
     require_celerity_resource('phabricator-workboard-view-css');
 
@@ -25,6 +31,25 @@ final class PhabricatorWorkboardView extends AphrontView {
       throw new Exception("No more than 6 panels per workboard.");
     }
 
+    $action_list = null;
+    if (!empty($this->actions)) {
+      $items = array();
+      foreach ($this->actions as $action) {
+        $items[] = phutil_tag(
+          'li',
+            array(
+              'class' => 'phabricator-workboard-action-item'
+            ),
+            $action);
+      }
+      $action_list = phutil_tag(
+        'ul',
+          array(
+            'class' => 'phabricator-workboard-action-list'
+          ),
+          $items);
+    }
+
     $classes[] = 'workboard-'.count($this->panels).'-up';
 
     $view = phutil_tag(
@@ -44,11 +69,21 @@ final class PhabricatorWorkboardView extends AphrontView {
       $classes[] = 'phabricator-workboard-fixed';
     }
 
-    return phutil_tag(
+    $board = phutil_tag(
       'div',
         array(
           'class' => implode(' ', $classes)
         ),
         $view);
+
+    return phutil_tag(
+      'div',
+        array(
+          'class' => 'phabricator-workboard-view'
+        ),
+        array(
+          $action_list,
+          $board
+        ));
   }
 }

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

@@ -2,14 +2,29 @@
  * @provides phabricator-workboard-view-css
  */
 
+.phabricator-workboard-view {
+  width: 100%;
+}
+
 .phabricator-workboard-view-outer {
   padding: 8px;
+  min-height: 120px;
   overflow-x: scroll;
   border-radius: 5px;
   background: rgba(150,150,150,.1);
   box-shadow: inset 0 0 5px rgba(0,0,0,.5);
 }
 
+.phabricator-workboard-action-list {
+  width: 60px;
+  float: left;
+  min-height: 60px;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+  margin-top: 40px;
+  background: rgba(150,150,150,.2);
+}
+
 .device-phone .phabricator-workboard-view-outer {
   background: none;
   box-shadow: none;
@@ -18,6 +33,25 @@
   width: 100%;
 }
 
+.device-phone .phabricator-workboard-action-list {
+  width: 100%;
+  float: none;
+  display: block;
+  border-radius: 3px;
+  margin: 0 0 5px;
+  overflow: hidden;
+}
+
+.device-phone .phabricator-workboard-action-list li {
+  display: inline;
+  float: left;
+  margin: 0px;
+}
+
+.device-phone .phabricator-workboard-action-item-link {
+  margin-right: 0;
+}
+
 /* math here is based on panel width and margins */
 .phabricator-workboard-fixed
   .phabricator-workboard-view-inner.workboard-1-up {
@@ -52,3 +86,10 @@
 .device-phone .phabricator-workboard-fixed .phabricator-workboard-view-inner {
    width: 100%;
 }
+
+.phabricator-workboard-action-item-link {
+  display: block;
+  width: 50px;
+  height: 50px;
+  margin: 5px 4px 5px 5px;
+}

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

@@ -70,6 +70,7 @@
 
 .device-desktop .phabricator-workpanel-view .phabricator-workpanel-footer-action:hover {
  background-color: rgba(100,100,100,.1);
+ border-radius: 3px;
 }
 
 .phabricator-workpanel-view .phabricator-menu-item-icon {