Add fullscreen mode to Workboards

Summary: Cleans up Crumb Actions on Workboards. Adds fullscreen option. Fixes T6066

Test Plan:
Clicky Clicky. Test icon does not display on tablet, mobile.

{F1102458}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Maniphest Tasks: T6066

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

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'e55b8873',
+    'core.pkg.css' => 'e8763436',
     'core.pkg.js' => '17380dd3',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '2de124c9',
@@ -126,7 +126,7 @@ return array(
     'rsrc/css/phui/phui-box.css' => '6e8ac7fd',
     'rsrc/css/phui/phui-button.css' => 'd6ac72db',
     'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
-    'rsrc/css/phui/phui-crumbs-view.css' => '414406b5',
+    'rsrc/css/phui/phui-crumbs-view.css' => '79d536e5',
     'rsrc/css/phui/phui-document-pro.css' => '8799acf7',
     'rsrc/css/phui/phui-document-summary.css' => '9ca48bdf',
     'rsrc/css/phui/phui-document.css' => '9c71d2bf',
@@ -155,7 +155,7 @@ return array(
     'rsrc/css/phui/phui-tag-view.css' => '9d5d4400',
     'rsrc/css/phui/phui-timeline-view.css' => '2efceff8',
     'rsrc/css/phui/phui-two-column-view.css' => 'c75bfc5b',
-    'rsrc/css/phui/workboards/phui-workboard.css' => '0047084f',
+    'rsrc/css/phui/workboards/phui-workboard.css' => 'e9e56029',
     'rsrc/css/phui/workboards/phui-workcard.css' => '3646fb96',
     'rsrc/css/phui/workboards/phui-workpanel.css' => 'a78c0661',
     'rsrc/css/sprite-login.css' => '60e8560e',
@@ -800,7 +800,7 @@ return array(
     'phui-calendar-list-css' => 'c1c7f338',
     'phui-calendar-month-css' => '476be7e0',
     'phui-chart-css' => '6bf6f78e',
-    'phui-crumbs-view-css' => '414406b5',
+    'phui-crumbs-view-css' => '79d536e5',
     'phui-document-summary-view-css' => '9ca48bdf',
     'phui-document-view-css' => '9c71d2bf',
     'phui-document-view-pro-css' => '8799acf7',
@@ -833,7 +833,7 @@ return array(
     'phui-theme-css' => 'ab7b848c',
     'phui-timeline-view-css' => '2efceff8',
     'phui-two-column-view-css' => 'c75bfc5b',
-    'phui-workboard-view-css' => '0047084f',
+    'phui-workboard-view-css' => 'e9e56029',
     'phui-workcard-view-css' => '3646fb96',
     'phui-workpanel-view-css' => 'a78c0661',
     'phuix-action-list-view' => 'b5c256b8',

src/applications/project/controller/PhabricatorProjectBoardViewController.php

@@ -373,6 +373,9 @@ final class PhabricatorProjectBoardViewController
       ->addClass('project-board-wrapper');
 
     $nav = $this->getProfileMenu();
+    $divider = id(new PHUIListItemView())
+      ->setType(PHUIListItemView::TYPE_DIVIDER);
+    $fullscreen = $this->buildFullscreenMenu();
 
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->addTextCrumb(pht('Workboard'));
@@ -380,7 +383,9 @@ final class PhabricatorProjectBoardViewController
 
     $crumbs->addAction($sort_menu);
     $crumbs->addAction($filter_menu);
+    $crumbs->addAction($divider);
     $crumbs->addAction($manage_menu);
+    $crumbs->addAction($fullscreen);
 
     return $this->newPage()
       ->setTitle(
@@ -460,7 +465,7 @@ final class PhabricatorProjectBoardViewController
     }
 
     $sort_button = id(new PHUIListItemView())
-      ->setName(pht('Sort: %s', $active_order))
+      ->setName($active_order)
       ->setIcon('fa-sort-amount-asc')
       ->setHref('#')
       ->addSigil('boards-dropdown-menu')
@@ -534,7 +539,7 @@ final class PhabricatorProjectBoardViewController
     }
 
     $filter_button = id(new PHUIListItemView())
-      ->setName(pht('Filter: %s', $active_filter))
+      ->setName($active_filter)
       ->setIcon('fa-search')
       ->setHref('#')
       ->addSigil('boards-dropdown-menu')
@@ -624,18 +629,38 @@ final class PhabricatorProjectBoardViewController
     }
 
     $manage_button = id(new PHUIListItemView())
-      ->setName(pht('Manage Board'))
       ->setIcon('fa-cog')
       ->setHref('#')
       ->addSigil('boards-dropdown-menu')
+      ->addSigil('has-tooltip')
       ->setMetadata(
         array(
+          'tip' => pht('Manage'),
+          'align' => 'S',
           'items' => hsprintf('%s', $manage_menu),
         ));
 
     return $manage_button;
   }
 
+  private function buildFullscreenMenu() {
+
+    $up = id(new PHUIListItemView())
+      ->setIcon('fa-arrows-alt')
+      ->setHref('#')
+      ->addClass('phui-workboard-expand-icon')
+      ->addSigil('jx-toggle-class')
+      ->addSigil('has-tooltip')
+      ->setMetaData(array(
+        'tip' => pht('Fullscreen'),
+        'map' => array(
+          'phabricator-standard-page' => 'phui-workboard-fullscreen',
+        ),
+      ));
+
+    return $up;
+  }
+
   private function buildColumnMenu(
     PhabricatorProject $project,
     PhabricatorProjectColumn $column) {

src/view/phui/PHUICrumbsView.php

@@ -52,6 +52,15 @@ final class PHUICrumbsView extends AphrontView {
     if ($this->actions) {
       $actions = array();
       foreach ($this->actions as $action) {
+      if ($action->getType() == PHUIListItemView::TYPE_DIVIDER) {
+          $actions[] = phutil_tag(
+            'span',
+            array(
+              'class' => 'phui-crumb-action-divider',
+            ));
+          continue;
+        }
+
         $icon = null;
         if ($action->getIcon()) {
           $icon_name = $action->getIcon();
@@ -63,19 +72,26 @@ final class PHUICrumbsView extends AphrontView {
             ->setIcon($icon_name);
 
         }
+
+        $action_classes = $action->getClasses();
+        $action_classes[] = 'phui-crumbs-action';
+
+        $name = null;
+        if ($action->getName()) {
           $name = phutil_tag(
             'span',
               array(
                 'class' => 'phui-crumbs-action-name',
               ),
             $action->getName());
+        } else {
+          $action_classes[] = 'phui-crumbs-action-icon';
+        }
 
         $action_sigils = $action->getSigils();
         if ($action->getWorkflow()) {
           $action_sigils[] = 'workflow';
         }
-        $action_classes = $action->getClasses();
-        $action_classes[] = 'phui-crumbs-action';
 
         if ($action->getDisabled()) {
           $action_classes[] = 'phui-crumbs-action-disabled';

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

@@ -89,12 +89,15 @@
 }
 
 a.phui-crumbs-action .phui-icon-view {
-  margin-right: 5px;
   color: {$darkbluetext};
 }
 
+a.phui-crumbs-action .phui-crumbs-action-name {
+  margin-left: 6px;
+}
+
 .device-phone a.phui-crumbs-action .phui-icon-view {
-  margin-left: 5px;
+  margin-left: 4px;
 }
 
 .phui-crumb-divider {
@@ -112,3 +115,11 @@ body .phui-crumbs-view + .phui-object-box {
 body .phui-crumbs-view + .phui-object-item-list-view {
   padding-top: 0;
 }
+
+.phui-crumb-action-divider {
+  border-left: 1px solid {$lightgreyborder};
+}
+
+.phui-crumbs-action-icon + .phui-crumbs-action-icon {
+  padding-left: 4px;
+}

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

@@ -80,3 +80,28 @@
   pointer-events: auto;
   cursor: auto;
 }
+
+/* Fullscreen */
+
+.device-desktop .phui-workboard-fullscreen .phabricator-main-menu {
+  display: none;
+}
+
+.device-desktop .phui-workboard-fullscreen .phui-profile-menu
+  .phui-workboard-view-shadow {
+    top: 35px;
+    left: 0;
+}
+
+.device-desktop .phui-workboard-fullscreen .phui-workpanel-body-content {
+  max-height: calc(100vh - 120px);
+}
+
+.device-desktop .phui-workboard-fullscreen .phui-profile-menu
+  .phabricator-nav-local {
+    display: none;
+}
+
+.device .phui-workboard-expand-icon {
+  display: none;
+}