From 8a0fccf97a109675d96c735e03e34dcfbb56595b Mon Sep 17 00:00:00 2001 From: Chad Little Date: Tue, 26 Mar 2013 13:15:15 -0700 Subject: [PATCH] Mobile Crumbs. Summary: Not for full review. This makes crumbs appear consistently in mobile. It helps give a quick link to the apps home, the page title currently on, and action icons for the object. It will take additional clean-up to make this consistent across apps. Passing for early review from a UEX perspective. I actually really like it and think onces it's everywhere, helps mobile feel complete. Test Plan: Testing in iOS and Simulator. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin Maniphest Tasks: T2796 Differential Revision: https://secure.phabricator.com/D5446 --- src/__celerity_resource_map__.php | 78 +++++++++---------- .../DifferentialDiffCreateController.php | 15 +++- .../PhabricatorFileListController.php | 5 +- .../PhabricatorFileUploadController.php | 13 ++-- .../PhabricatorMacroEditController.php | 15 ++-- .../ManiphestTaskDetailController.php | 7 +- .../ManiphestTaskEditController.php | 12 +++ .../PhabricatorPasteListController.php | 5 +- .../phlux/controller/PhluxListController.php | 4 - .../controller/PholioMockEditController.php | 9 ++- .../PhabricatorProjectListController.php | 4 - src/view/layout/PhabricatorCrumbView.php | 2 + src/view/layout/PhabricatorCrumbsView.php | 9 ++- .../css/layout/phabricator-crumbs-view.css | 30 ++++++- 14 files changed, 129 insertions(+), 79 deletions(-) diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index be9be7d5a5..f7b035838e 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -2793,7 +2793,7 @@ celerity_register_resource_map(array( ), 'phabricator-crumbs-view-css' => array( - 'uri' => '/res/4f15b2ae/rsrc/css/layout/phabricator-crumbs-view.css', + 'uri' => '/res/2857d229/rsrc/css/layout/phabricator-crumbs-view.css', 'type' => 'css', 'requires' => array( @@ -3701,7 +3701,7 @@ celerity_register_resource_map(array( ), array( 'packages' => array( - '93e81012' => + 'bcecb316' => array( 'name' => 'core.pkg.css', 'symbols' => @@ -3743,7 +3743,7 @@ celerity_register_resource_map(array( 34 => 'phabricator-object-item-list-view-css', 35 => 'global-drag-and-drop-css', ), - 'uri' => '/res/pkg/93e81012/core.pkg.css', + 'uri' => '/res/pkg/bcecb316/core.pkg.css', 'type' => 'css', ), '95ceba95' => @@ -3934,16 +3934,16 @@ celerity_register_resource_map(array( 'reverse' => array( 'aphront-attached-file-view-css' => '6b1fccc6', - 'aphront-dialog-view-css' => '93e81012', - 'aphront-error-view-css' => '93e81012', - 'aphront-form-view-css' => '93e81012', - 'aphront-list-filter-view-css' => '93e81012', - 'aphront-pager-view-css' => '93e81012', - 'aphront-panel-view-css' => '93e81012', - 'aphront-table-view-css' => '93e81012', - 'aphront-tokenizer-control-css' => '93e81012', - 'aphront-tooltip-css' => '93e81012', - 'aphront-typeahead-control-css' => '93e81012', + 'aphront-dialog-view-css' => 'bcecb316', + 'aphront-error-view-css' => 'bcecb316', + 'aphront-form-view-css' => 'bcecb316', + 'aphront-list-filter-view-css' => 'bcecb316', + 'aphront-pager-view-css' => 'bcecb316', + 'aphront-panel-view-css' => 'bcecb316', + 'aphront-table-view-css' => 'bcecb316', + 'aphront-tokenizer-control-css' => 'bcecb316', + 'aphront-tooltip-css' => 'bcecb316', + 'aphront-typeahead-control-css' => 'bcecb316', 'differential-changeset-view-css' => '8aaacd1b', 'differential-core-view-css' => '8aaacd1b', 'differential-inline-comment-editor' => '322728f3', @@ -3957,7 +3957,7 @@ celerity_register_resource_map(array( 'differential-table-of-contents-css' => '8aaacd1b', 'diffusion-commit-view-css' => 'c8ce2d88', 'diffusion-icons-css' => 'c8ce2d88', - 'global-drag-and-drop-css' => '93e81012', + 'global-drag-and-drop-css' => 'bcecb316', 'inline-comment-summary-css' => '8aaacd1b', 'javelin-aphlict' => '95ceba95', 'javelin-behavior' => 'fe22443b', @@ -4029,48 +4029,48 @@ celerity_register_resource_map(array( 'javelin-util' => 'fe22443b', 'javelin-vector' => 'fe22443b', 'javelin-workflow' => 'fe22443b', - 'lightbox-attachment-css' => '93e81012', + 'lightbox-attachment-css' => 'bcecb316', 'maniphest-task-summary-css' => '6b1fccc6', 'maniphest-transaction-detail-css' => '6b1fccc6', 'phabricator-busy' => '95ceba95', 'phabricator-content-source-view-css' => '8aaacd1b', - 'phabricator-core-buttons-css' => '93e81012', - 'phabricator-core-css' => '93e81012', - 'phabricator-crumbs-view-css' => '93e81012', - 'phabricator-directory-css' => '93e81012', + 'phabricator-core-buttons-css' => 'bcecb316', + 'phabricator-core-css' => 'bcecb316', + 'phabricator-crumbs-view-css' => 'bcecb316', + 'phabricator-directory-css' => 'bcecb316', 'phabricator-drag-and-drop-file-upload' => '322728f3', 'phabricator-dropdown-menu' => '95ceba95', 'phabricator-file-upload' => '95ceba95', - 'phabricator-filetree-view-css' => '93e81012', - 'phabricator-flag-css' => '93e81012', - 'phabricator-form-view-css' => '93e81012', - 'phabricator-header-view-css' => '93e81012', - 'phabricator-jump-nav' => '93e81012', + 'phabricator-filetree-view-css' => 'bcecb316', + 'phabricator-flag-css' => 'bcecb316', + 'phabricator-form-view-css' => 'bcecb316', + 'phabricator-header-view-css' => 'bcecb316', + 'phabricator-jump-nav' => 'bcecb316', 'phabricator-keyboard-shortcut' => '95ceba95', 'phabricator-keyboard-shortcut-manager' => '95ceba95', - 'phabricator-main-menu-view' => '93e81012', + 'phabricator-main-menu-view' => 'bcecb316', 'phabricator-menu-item' => '95ceba95', - 'phabricator-nav-view-css' => '93e81012', + 'phabricator-nav-view-css' => 'bcecb316', 'phabricator-notification' => '95ceba95', - 'phabricator-notification-css' => '93e81012', - 'phabricator-notification-menu-css' => '93e81012', - 'phabricator-object-item-list-view-css' => '93e81012', + 'phabricator-notification-css' => 'bcecb316', + 'phabricator-notification-menu-css' => 'bcecb316', + 'phabricator-object-item-list-view-css' => 'bcecb316', 'phabricator-object-selector-css' => '8aaacd1b', 'phabricator-paste-file-upload' => '95ceba95', 'phabricator-prefab' => '95ceba95', 'phabricator-project-tag-css' => '6b1fccc6', - 'phabricator-remarkup-css' => '93e81012', + 'phabricator-remarkup-css' => 'bcecb316', 'phabricator-shaped-request' => '322728f3', - 'phabricator-side-menu-view-css' => '93e81012', - 'phabricator-standard-page-view' => '93e81012', + 'phabricator-side-menu-view-css' => 'bcecb316', + 'phabricator-standard-page-view' => 'bcecb316', 'phabricator-textareautils' => '95ceba95', 'phabricator-tooltip' => '95ceba95', - 'phabricator-transaction-view-css' => '93e81012', - 'phabricator-zindex-css' => '93e81012', - 'sprite-apps-large-css' => '93e81012', - 'sprite-gradient-css' => '93e81012', - 'sprite-icon-css' => '93e81012', - 'sprite-menu-css' => '93e81012', - 'syntax-highlighting-css' => '93e81012', + 'phabricator-transaction-view-css' => 'bcecb316', + 'phabricator-zindex-css' => 'bcecb316', + 'sprite-apps-large-css' => 'bcecb316', + 'sprite-gradient-css' => 'bcecb316', + 'sprite-icon-css' => 'bcecb316', + 'sprite-menu-css' => 'bcecb316', + 'syntax-highlighting-css' => 'bcecb316', ), )); diff --git a/src/applications/differential/controller/DifferentialDiffCreateController.php b/src/applications/differential/controller/DifferentialDiffCreateController.php index b141bcb17d..a335727d17 100644 --- a/src/applications/differential/controller/DifferentialDiffCreateController.php +++ b/src/applications/differential/controller/DifferentialDiffCreateController.php @@ -65,13 +65,24 @@ final class DifferentialDiffCreateController extends DifferentialController { $panel = new AphrontPanelView(); $panel->setHeader(pht('Create New Diff')); + $panel->setNoBackground(); $panel->appendChild($form); $panel->setWidth(AphrontPanelView::WIDTH_FORM); - return $this->buildStandardPageResponse( - $panel, + $crumbs = $this->buildApplicationCrumbs(); + $crumbs->addCrumb( + id(new PhabricatorCrumbView()) + ->setName(pht('Create Diff')) + ->setHref('/differential/diff/create/')); + + return $this->buildApplicationPage( + array( + $crumbs, + $panel + ), array( 'title' => pht('Create Diff'), + 'device' => true, )); } diff --git a/src/applications/files/controller/PhabricatorFileListController.php b/src/applications/files/controller/PhabricatorFileListController.php index 9586148441..5f6ee24013 100644 --- a/src/applications/files/controller/PhabricatorFileListController.php +++ b/src/applications/files/controller/PhabricatorFileListController.php @@ -48,12 +48,8 @@ final class PhabricatorFileListController extends PhabricatorFileController { $side_nav = $this->buildSideNavView(); $side_nav->selectFilter($this->getFilter()); - $header_view = id(new PhabricatorHeaderView()) - ->setHeader($header); - $side_nav->appendChild( array( - $header_view, $file_list, $pager, new PhabricatorGlobalUploadTargetView(), @@ -72,6 +68,7 @@ final class PhabricatorFileListController extends PhabricatorFileController { array( 'title' => 'Files', 'device' => true, + 'dust' => true, )); } diff --git a/src/applications/files/controller/PhabricatorFileUploadController.php b/src/applications/files/controller/PhabricatorFileUploadController.php index 896291eb86..d78a093270 100644 --- a/src/applications/files/controller/PhabricatorFileUploadController.php +++ b/src/applications/files/controller/PhabricatorFileUploadController.php @@ -39,7 +39,6 @@ final class PhabricatorFileUploadController extends PhabricatorFileController { 'desktop onto this page or the Phabricator home page.'))); $form = id(new AphrontFormView()) - ->setFlexible(true) ->setUser($user) ->setEncType('multipart/form-data') ->appendChild( @@ -68,9 +67,6 @@ final class PhabricatorFileUploadController extends PhabricatorFileController { $title = pht('Upload File'); - $header = id(new PhabricatorHeaderView()) - ->setHeader($title); - if ($errors) { $errors = id(new AphrontErrorView()) ->setTitle(pht('Form Errors')) @@ -80,12 +76,17 @@ final class PhabricatorFileUploadController extends PhabricatorFileController { $global_upload = id(new PhabricatorGlobalUploadTargetView()) ->setShowIfSupportedID($support_id); + $panel = new AphrontPanelView(); + $panel->setHeader(pht('New File Upload')); + $panel->setNoBackground(); + $panel->appendChild($form); + $panel->setWidth(AphrontPanelView::WIDTH_FORM); + return $this->buildApplicationPage( array( $crumbs, - $header, $errors, - $form, + $panel, $global_upload, ), array( diff --git a/src/applications/macro/controller/PhabricatorMacroEditController.php b/src/applications/macro/controller/PhabricatorMacroEditController.php index e225f43664..10e82ee261 100644 --- a/src/applications/macro/controller/PhabricatorMacroEditController.php +++ b/src/applications/macro/controller/PhabricatorMacroEditController.php @@ -152,7 +152,6 @@ final class PhabricatorMacroEditController } $form = new AphrontFormView(); - $form->setFlexible(true); $form->addHiddenInput('name_form', 1); $form->setUser($request->getUser()); @@ -237,10 +236,6 @@ final class PhabricatorMacroEditController ->setHref($request->getRequestURI()) ->setName($crumb)); - $header = id(new PhabricatorHeaderView()) - ->setHeader($title); - - $upload = null; if ($macro->getID()) { $upload_header = id(new PhabricatorHeaderView()) @@ -272,16 +267,22 @@ final class PhabricatorMacroEditController $upload = array($upload_header, $upload_form); } + $panel = new AphrontPanelView(); + $panel->setHeader(pht('Create New Macro')); + $panel->setNoBackground(); + $panel->appendChild($form); + $panel->setWidth(AphrontPanelView::WIDTH_FORM); + return $this->buildApplicationPage( array( $crumbs, - $header, $error_view, - $form, + $panel, $upload, ), array( 'title' => $title, + 'device' => true, )); } } diff --git a/src/applications/maniphest/controller/ManiphestTaskDetailController.php b/src/applications/maniphest/controller/ManiphestTaskDetailController.php index ad7bda8316..0e077497d3 100644 --- a/src/applications/maniphest/controller/ManiphestTaskDetailController.php +++ b/src/applications/maniphest/controller/ManiphestTaskDetailController.php @@ -340,7 +340,12 @@ final class ManiphestTaskDetailController extends ManiphestController { $crumbs->addCrumb( id(new PhabricatorCrumbView()) ->setName($object_name) - ->setHref('/'.$object_name)); + ->setHref('/'.$object_name)) + ->addAction( + id(new PhabricatorMenuItemView()) + ->setHref($this->getApplicationURI('/task/create/')) + ->setName(pht('Create Task')) + ->setIcon('create')); $header = $this->buildHeaderView($task); $actions = $this->buildActionView($task); diff --git a/src/applications/maniphest/controller/ManiphestTaskEditController.php b/src/applications/maniphest/controller/ManiphestTaskEditController.php index 77e4be866a..367c4d1722 100644 --- a/src/applications/maniphest/controller/ManiphestTaskEditController.php +++ b/src/applications/maniphest/controller/ManiphestTaskEditController.php @@ -532,8 +532,20 @@ final class ManiphestTaskEditController extends ManiphestController { $page_objects = array(); } + $crumbs = $this->buildApplicationCrumbs(); + $crumbs->addCrumb( + id(new PhabricatorCrumbView()) + ->setName($header_name) + ->setHref($this->getApplicationURI('/task/create/'))) + ->addAction( + id(new PhabricatorMenuItemView()) + ->setHref($this->getApplicationURI('/task/create/')) + ->setName(pht('Create Task')) + ->setIcon('create')); + return $this->buildApplicationPage( array( + $crumbs, $error_view, $panel, $description_preview_panel, diff --git a/src/applications/paste/controller/PhabricatorPasteListController.php b/src/applications/paste/controller/PhabricatorPasteListController.php index f58acf5c92..80d6a2acc1 100644 --- a/src/applications/paste/controller/PhabricatorPasteListController.php +++ b/src/applications/paste/controller/PhabricatorPasteListController.php @@ -43,12 +43,8 @@ final class PhabricatorPasteListController extends PhabricatorPasteController { $list->setPager($pager); $list->setNoDataString($nodata); - $header = id(new PhabricatorHeaderView()) - ->setHeader($title); - $nav->appendChild( array( - $header, $list, )); @@ -66,6 +62,7 @@ final class PhabricatorPasteListController extends PhabricatorPasteController { array( 'title' => $title, 'device' => true, + 'dust' => true, )); } diff --git a/src/applications/phlux/controller/PhluxListController.php b/src/applications/phlux/controller/PhluxListController.php index 9578d47aee..949d79b86a 100644 --- a/src/applications/phlux/controller/PhluxListController.php +++ b/src/applications/phlux/controller/PhluxListController.php @@ -36,13 +36,9 @@ final class PhluxListController extends PhluxController { ->setName($title) ->setHref($this->getApplicationURI())); - $header = id(new PhabricatorHeaderView()) - ->setHeader($title); - return $this->buildApplicationPage( array( $crumbs, - $header, $view, $pager, ), diff --git a/src/applications/pholio/controller/PholioMockEditController.php b/src/applications/pholio/controller/PholioMockEditController.php index be6ac90a32..571a40feee 100644 --- a/src/applications/pholio/controller/PholioMockEditController.php +++ b/src/applications/pholio/controller/PholioMockEditController.php @@ -219,11 +219,14 @@ final class PholioMockEditController extends PholioController { ->setName('can_view')) ->appendChild($submit); - $header = id(new PhabricatorHeaderView()) - ->setHeader($title); + $crumbs = $this->buildApplicationCrumbs($this->buildSideNav()); + $crumbs->addCrumb( + id(new PhabricatorCrumbView()) + ->setName($title) + ->setHref($this->getApplicationURI())); $content = array( - $header, + $crumbs, $error_view, $form, ); diff --git a/src/applications/project/controller/PhabricatorProjectListController.php b/src/applications/project/controller/PhabricatorProjectListController.php index e08c606f59..41ef51ebb8 100644 --- a/src/applications/project/controller/PhabricatorProjectListController.php +++ b/src/applications/project/controller/PhabricatorProjectListController.php @@ -123,12 +123,8 @@ final class PhabricatorProjectListController $list->addItem($item); } - $header = id(new PhabricatorHeaderView()) - ->setHeader($table_header); - $nav->appendChild( array( - $header, $list, $pager, )); diff --git a/src/view/layout/PhabricatorCrumbView.php b/src/view/layout/PhabricatorCrumbView.php index 11d311172b..35754493d5 100644 --- a/src/view/layout/PhabricatorCrumbView.php +++ b/src/view/layout/PhabricatorCrumbView.php @@ -67,6 +67,8 @@ final class PhabricatorCrumbView extends AphrontView { 'class' => 'sprite-menu phabricator-crumb-divider', ), ''); + } else { + $classes[] = 'phabricator-last-crumb'; } return phutil_tag( diff --git a/src/view/layout/PhabricatorCrumbsView.php b/src/view/layout/PhabricatorCrumbsView.php index 9cc8759050..ae97d8b162 100644 --- a/src/view/layout/PhabricatorCrumbsView.php +++ b/src/view/layout/PhabricatorCrumbsView.php @@ -37,6 +37,13 @@ final class PhabricatorCrumbsView extends AphrontView { ), ''); } + $name = phutil_tag( + 'span', + array( + 'class' => 'phabricator-crumbs-action-name' + ), + $action->getName() + ); $actions[] = javelin_tag( 'a', array( @@ -46,7 +53,7 @@ final class PhabricatorCrumbsView extends AphrontView { ), array( $icon, - $action->getName(), + $name, )); } diff --git a/webroot/rsrc/css/layout/phabricator-crumbs-view.css b/webroot/rsrc/css/layout/phabricator-crumbs-view.css index e9d35c8e93..bcc4fc3498 100644 --- a/webroot/rsrc/css/layout/phabricator-crumbs-view.css +++ b/webroot/rsrc/css/layout/phabricator-crumbs-view.css @@ -2,10 +2,6 @@ * @provides phabricator-crumbs-view-css */ -.device .phabricator-crumbs-view { - display: none; -} - .phabricator-crumbs-view { background-color: #d8dce2; height: 31px; @@ -43,6 +39,15 @@ line-height: 31px; } +.device-phone .phabricator-crumb-view { + display: none; +} + +.device-phone .phabricator-crumb-view.phabricator-last-crumb, +.device-phone .phabricator-crumb-view.phabricator-crumb-has-icon { + display: inline-block; +} + .phabricator-crumb-icon { display: inline-block; width: 28px; @@ -51,6 +56,10 @@ vertical-align: top; } +.device-phone .phabricator-crumb-icon { + margin-left: 7px; +} + .phabricator-crumbs-actions { float: right; } @@ -62,6 +71,19 @@ position: relative; } +.device-phone a.phabricator-crumbs-action { + padding: 13px 20px 4px 10px; + border-left: 1px solid #ccc; +} + +.device-phone .phabricator-crumbs-action-name { + display: none; +} + +.device-phone a.phabricator-crumbs-action .sprite-icon { + margin-left: 5px; +} + .phabricator-crumbs-action .sprite-icon { width: 14px; height: 14px;