From c2502f1bebbf65cf7ea64ca7e1849ffb402e0319 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Wed, 10 Feb 2016 15:31:02 +0000 Subject: [PATCH] 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 | 10 +++--- .../PhabricatorProjectBoardViewController.php | 31 ++++++++++++++++-- src/view/phui/PHUICrumbsView.php | 32 ++++++++++++++----- webroot/rsrc/css/phui/phui-crumbs-view.css | 15 +++++++-- .../css/phui/workboards/phui-workboard.css | 25 +++++++++++++++ 5 files changed, 95 insertions(+), 18 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 9a5263fc8c..664d5b8e2e 100644 --- a/resources/celerity/map.php +++ b/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', diff --git a/src/applications/project/controller/PhabricatorProjectBoardViewController.php b/src/applications/project/controller/PhabricatorProjectBoardViewController.php index ffedb6b17f..ca5132388d 100644 --- a/src/applications/project/controller/PhabricatorProjectBoardViewController.php +++ b/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) { diff --git a/src/view/phui/PHUICrumbsView.php b/src/view/phui/PHUICrumbsView.php index c85c0055d1..00a1f1911e 100644 --- a/src/view/phui/PHUICrumbsView.php +++ b/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); } - $name = phutil_tag( - 'span', - array( - 'class' => 'phui-crumbs-action-name', - ), - $action->getName()); + + $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'; diff --git a/webroot/rsrc/css/phui/phui-crumbs-view.css b/webroot/rsrc/css/phui/phui-crumbs-view.css index 71113dadc9..81c8471c4f 100644 --- a/webroot/rsrc/css/phui/phui-crumbs-view.css +++ b/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; +} diff --git a/webroot/rsrc/css/phui/workboards/phui-workboard.css b/webroot/rsrc/css/phui/workboards/phui-workboard.css index d2652cc45e..36913d1663 100644 --- a/webroot/rsrc/css/phui/workboards/phui-workboard.css +++ b/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; +}