Make workboards truly 'fixed' in display

Summary:
**WIP**

This sets a shadow fixed to the full screen of the browser for which panels to live in. I have some minor things to fix, but play with it.

Specifically I haven't been able to dig up when stuff that overflowwed, doesn't always render even after scroll.

Test Plan: Test on a board with many tasks, many panels, small screens. Test on mobile too!

Reviewers: epriestley, btrahan

Reviewed By: btrahan

Subscribers: qgil, epriestley, Korvin

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
 return array(
   'names' =>
   array(
-    'core.pkg.css' => '989eee69',
+    'core.pkg.css' => '719389b0',
     'core.pkg.js' => 'b2ed04a2',
     'darkconsole.pkg.js' => 'ca8671ce',
     'differential.pkg.css' => '4b8686e3',
@@ -24,7 +24,7 @@ return array(
     'rsrc/css/aphront/error-view.css' => '9f1d5518',
     'rsrc/css/aphront/lightbox-attachment.css' => '7acac05d',
     'rsrc/css/aphront/list-filter-view.css' => '2ae43867',
-    'rsrc/css/aphront/multi-column.css' => '667ca7b8',
+    'rsrc/css/aphront/multi-column.css' => '1b95ab2e',
     'rsrc/css/aphront/notification.css' => 'ef2c9b34',
     'rsrc/css/aphront/pager-view.css' => '2e3539af',
     'rsrc/css/aphront/panel-view.css' => '5846dfa2',
@@ -132,12 +132,12 @@ return array(
     'rsrc/css/phui/phui-fontkit.css' => 'de84aa4a',
     'rsrc/css/phui/phui-form-view.css' => '867463b4',
     'rsrc/css/phui/phui-form.css' => 'b78ec020',
-    'rsrc/css/phui/phui-header-view.css' => '5b79f0ef',
+    'rsrc/css/phui/phui-header-view.css' => '5d245c9c',
     'rsrc/css/phui/phui-icon.css' => '215fa314',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-list.css' => 'ef8035b6',
     'rsrc/css/phui/phui-object-box.css' => 'ce92d8ec',
-    'rsrc/css/phui/phui-object-item-list-view.css' => '24444832',
+    'rsrc/css/phui/phui-object-item-list-view.css' => '3bf8e1c9',
     'rsrc/css/phui/phui-pinboard-view.css' => 'e7d3b05e',
     'rsrc/css/phui/phui-property-list-view.css' => 'af4b381f',
     'rsrc/css/phui/phui-remarkup-preview.css' => '19ad512b',
@@ -146,8 +146,8 @@ return array(
     'rsrc/css/phui/phui-tag-view.css' => '295d81c4',
     'rsrc/css/phui/phui-text.css' => '23e9b4b7',
     'rsrc/css/phui/phui-timeline-view.css' => '15ff2a9f',
-    'rsrc/css/phui/phui-workboard-view.css' => '84f2c272',
+    'rsrc/css/phui/phui-workboard-view.css' => '2bf82d00',
-    'rsrc/css/phui/phui-workpanel-view.css' => 'b6ccc22d',
+    'rsrc/css/phui/phui-workpanel-view.css' => '97b69459',
     'rsrc/css/sprite-actions.css' => '969ad0e5',
     'rsrc/css/sprite-apps-large.css' => '3e3ec4c3',
     'rsrc/css/sprite-apps-xlarge.css' => 'db66c878',
@@ -495,7 +495,7 @@ return array(
     'aphront-dialog-view-css' => 'c01d24b4',
     'aphront-error-view-css' => '9f1d5518',
     'aphront-list-filter-view-css' => '2ae43867',
-    'aphront-multi-column-view-css' => '667ca7b8',
+    'aphront-multi-column-view-css' => '1b95ab2e',
     'aphront-pager-view-css' => '2e3539af',
     'aphront-panel-view-css' => '5846dfa2',
     'aphront-request-failure-view-css' => 'da14df31',
@@ -761,12 +761,12 @@ return array(
     'phui-fontkit-css' => 'de84aa4a',
     'phui-form-css' => 'b78ec020',
     'phui-form-view-css' => '867463b4',
-    'phui-header-view-css' => '5b79f0ef',
+    'phui-header-view-css' => '5d245c9c',
     'phui-icon-view-css' => '215fa314',
     'phui-info-panel-css' => '27ea50a1',
     'phui-list-view-css' => 'ef8035b6',
     'phui-object-box-css' => 'ce92d8ec',
-    'phui-object-item-list-view-css' => '24444832',
+    'phui-object-item-list-view-css' => '3bf8e1c9',
     'phui-pinboard-view-css' => 'e7d3b05e',
     'phui-property-list-view-css' => 'af4b381f',
     'phui-remarkup-preview-css' => '19ad512b',
@@ -775,8 +775,8 @@ return array(
     'phui-tag-view-css' => '295d81c4',
     'phui-text-css' => '23e9b4b7',
     'phui-timeline-view-css' => '15ff2a9f',
-    'phui-workboard-view-css' => '84f2c272',
+    'phui-workboard-view-css' => '2bf82d00',
-    'phui-workpanel-view-css' => 'b6ccc22d',
+    'phui-workpanel-view-css' => '97b69459',
     'phuix-action-list-view' => 'b5c256b8',
     'phuix-action-view' => '19a0b148',
     'phuix-dropdown-menu' => 'bd4c8dca',

src/applications/project/controller/PhabricatorProjectBoardViewController.php

@@ -150,55 +150,45 @@ final class PhabricatorProjectBoardViewController
       $board->addPanel($panel);
     }
 
-    $crumbs = $this->buildApplicationCrumbs();
-    $crumbs->addTextCrumb(pht('Board'));
-
     $can_edit = PhabricatorPolicyFilter::hasCapability(
       $viewer,
       $project,
       PhabricatorPolicyCapability::CAN_EDIT);
 
-    $actions = id(new PhabricatorActionListView())
+    $add_icon = id(new PHUIIconView())
-      ->setUser($viewer)
+      ->setIconFont('fa-plus bluegrey');
-      ->addAction(
-        id(new PhabricatorActionView())
-          ->setName(pht('Add Column'))
-          ->setHref($this->getApplicationURI('board/'.$this->id.'/edit/'))
-          ->setIcon('create')
-          ->setDisabled(!$can_edit)
-          ->setWorkflow(!$can_edit));
 
-    $plist = id(new PHUIPropertyListView());
+    $add_button = id(new PHUIButtonView())
+      ->setText(pht('Add Column'))
+      ->setIcon($add_icon)
+      ->setTag('a')
+      ->setHref($this->getApplicationURI('board/'.$this->id.'/edit/'))
+      ->setDisabled(!$can_edit)
+      ->setWorkflow(!$can_edit);
 
-    // TODO: Need this to get actions to render.
+    $header_link = phutil_tag(
-    $plist->addProperty(
+      'a',
-      pht('Project Boards'),
+      array(
-      phutil_tag(
+        'href' => $this->getApplicationURI('view/'.$project->getID().'/')
-        'em',
+      ),
-        array(),
+      $project->getName());
-        pht(
-          'This feature is beta, but should mostly work.')));
-    $plist->setActionList($actions);
 
     $header = id(new PHUIHeaderView())
-      ->setHeader($project->getName())
+      ->setHeader($header_link)
       ->setUser($viewer)
+      ->setNoBackground(true)
       ->setImage($project->getProfileImageURI())
+      ->setImageURL($this->getApplicationURI('view/'.$project->getID().'/'))
+      ->addActionLink($add_button)
       ->setPolicyObject($project);
 
-    $box = id(new PHUIObjectBoxView())
-      ->setHeader($header)
-      ->addPropertyList($plist);
-
     $board_box = id(new PHUIBoxView())
       ->appendChild($board)
-      ->addClass('project-board-wrapper')
+      ->addClass('project-board-wrapper');
-      ->addMargin(PHUI::MARGIN_LARGE);
 
     return $this->buildApplicationPage(
       array(
-        $crumbs,
+        $header,
-        $box,
         $board_box,
       ),
       array(

src/view/phui/PHUIHeaderView.php

@@ -8,6 +8,7 @@ final class PHUIHeaderView extends AphrontView {
   private $header;
   private $tags = array();
   private $image;
+  private $imageURL = null;
   private $subheader;
   private $gradient;
   private $noBackground;
@@ -42,6 +43,11 @@ final class PHUIHeaderView extends AphrontView {
     return $this;
   }
 
+  public function setImageURL($url) {
+    $this->imageURL = $url;
+    return $this;
+  }
+
   public function setSubheader($subheader) {
     $this->subheader = $subheader;
     return $this;
@@ -128,12 +134,13 @@ final class PHUIHeaderView extends AphrontView {
     $image = null;
     if ($this->image) {
       $image = phutil_tag(
-        'span',
+        ($this->imageURL ? 'a' : 'span'),
         array(
+          'href' => $this->imageURL,
           'class' => 'phui-header-image',
           'style' => 'background-image: url('.$this->image.')',
         ),
-        '');
+        ' ');
       $classes[] = 'phui-header-has-image';
     }
 

webroot/rsrc/css/aphront/multi-column.css

@@ -17,6 +17,11 @@
   margin: 0;
 }
 
+.device-desktop .phui-workboard-view-shadow .aphront-multi-column-inner
+  .aphront-multi-column-column-last {
+  margin-right: 8px;
+}
+
 .device .aphront-multi-column-outer
   div.aphront-multi-column-column-outer {
   width: auto;
@@ -28,7 +33,7 @@
 }
 
 .aphront-multi-column-fixed .aphront-multi-column-column-outer {
-  width: 280px;
+  width: 300px;
 }
 
 /* flexible, but with a minimum */
@@ -103,6 +108,10 @@
   width: 100%;
 }
 
+.device-desktop .aphront-multi-column-fixed .aphront-multi-column-inner {
+  margin: 0 0 12px 12px;
+}
+
 /* magic sauce */
 .aphront-multi-column-fluid .aphront-multi-column-inner {
   table-layout: fixed;

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

@@ -50,6 +50,11 @@ body .phui-header-shell.phui-bleed-header
 
 .phui-header-view .phui-header-action-links {
   position: absolute;
+  top: 24px;
+  right: 12px;
+}
+
+.phui-object-box .phui-header-view .phui-header-action-links {
   top: 5px;
   right: 0;
 }

webroot/rsrc/css/phui/phui-object-item-list-view.css

@@ -39,7 +39,6 @@
   border-color: {$lightgreyborder};
   border-width: 0 0 0 4px;
   margin: 5px 0;
-  overflow: hidden;
 }
 
 .phui-object-item .phui-icon-view {
@@ -51,7 +50,6 @@
   border-color: {$lightgreyborder};
   border-bottom-color: {$greyborder};
   border-width: 1px 1px 1px 0;
-  overflow: hidden;
   position: relative;
   min-height: 29px;
 }

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

@@ -6,18 +6,23 @@
   width: 100%;
 }
 
-.phui-workboard-view-shadow {
+.device-desktop .phui-workboard-view-shadow {
   overflow-x: auto;
-  padding-bottom: 8px;
+  position: absolute;
+  top: 120px;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
 
 .phui-workboard-view-shadow::-webkit-scrollbar {
   height: 12px;
+  width: 12px;
+  background: rgba(200,200,200,.6);
 }
 
 .phui-workboard-view-shadow::-webkit-scrollbar-thumb {
   background: {$lightbluetext};
-  border-radius: 10px;
 }
 
 .phui-workboard-action-list {
@@ -68,7 +73,7 @@
   margin: 0 3px;
 }
 
-.device-phone .project-board-wrapper {
+.device-tablet .project-board-wrapper {
-  margin-left: 0;
+  margin-left: 8px;
-  margin-right: 0;
+  margin-right: 8px;
 }

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

@@ -53,7 +53,7 @@
 }
 
 .aphront-multi-column-fixed .phui-workpanel-body {
-  width: 280px;
+  width: 300px;
 }
 
 .phui-workpanel-body .phui-object-item-list-view {