From 38739755c69dd5a0938a653da295500a2b0dd017 Mon Sep 17 00:00:00 2001 From: Chad Little Date: Thu, 8 May 2014 14:21:32 -0700 Subject: [PATCH] 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 | 22 ++++---- .../PhabricatorProjectBoardViewController.php | 52 ++++++++----------- src/view/phui/PHUIHeaderView.php | 11 +++- webroot/rsrc/css/aphront/multi-column.css | 11 +++- webroot/rsrc/css/phui/phui-header-view.css | 5 ++ .../css/phui/phui-object-item-list-view.css | 2 - webroot/rsrc/css/phui/phui-workboard-view.css | 17 +++--- webroot/rsrc/css/phui/phui-workpanel-view.css | 2 +- 8 files changed, 68 insertions(+), 54 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 552a74ae74..767ea18d93 100644 --- a/resources/celerity/map.php +++ b/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-workpanel-view.css' => 'b6ccc22d', + 'rsrc/css/phui/phui-workboard-view.css' => '2bf82d00', + '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-workpanel-view-css' => 'b6ccc22d', + 'phui-workboard-view-css' => '2bf82d00', + 'phui-workpanel-view-css' => '97b69459', 'phuix-action-list-view' => 'b5c256b8', 'phuix-action-view' => '19a0b148', 'phuix-dropdown-menu' => 'bd4c8dca', diff --git a/src/applications/project/controller/PhabricatorProjectBoardViewController.php b/src/applications/project/controller/PhabricatorProjectBoardViewController.php index 2cf8b8ead8..95c59d6f5a 100644 --- a/src/applications/project/controller/PhabricatorProjectBoardViewController.php +++ b/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()) - ->setUser($viewer) - ->addAction( - id(new PhabricatorActionView()) - ->setName(pht('Add Column')) - ->setHref($this->getApplicationURI('board/'.$this->id.'/edit/')) - ->setIcon('create') - ->setDisabled(!$can_edit) - ->setWorkflow(!$can_edit)); + $add_icon = id(new PHUIIconView()) + ->setIconFont('fa-plus bluegrey'); - $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. - $plist->addProperty( - pht('Project Boards'), - phutil_tag( - 'em', - array(), - pht( - 'This feature is beta, but should mostly work.'))); - $plist->setActionList($actions); + $header_link = phutil_tag( + 'a', + array( + 'href' => $this->getApplicationURI('view/'.$project->getID().'/') + ), + $project->getName()); $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') - ->addMargin(PHUI::MARGIN_LARGE); + ->addClass('project-board-wrapper'); return $this->buildApplicationPage( array( - $crumbs, - $box, + $header, $board_box, ), array( diff --git a/src/view/phui/PHUIHeaderView.php b/src/view/phui/PHUIHeaderView.php index 2ed1cf4e1e..7d69fde223 100644 --- a/src/view/phui/PHUIHeaderView.php +++ b/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'; } diff --git a/webroot/rsrc/css/aphront/multi-column.css b/webroot/rsrc/css/aphront/multi-column.css index 2005487d65..51cbd0c855 100644 --- a/webroot/rsrc/css/aphront/multi-column.css +++ b/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; diff --git a/webroot/rsrc/css/phui/phui-header-view.css b/webroot/rsrc/css/phui/phui-header-view.css index 81c52cd023..57d213a569 100644 --- a/webroot/rsrc/css/phui/phui-header-view.css +++ b/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; } diff --git a/webroot/rsrc/css/phui/phui-object-item-list-view.css b/webroot/rsrc/css/phui/phui-object-item-list-view.css index 44d60f5362..04f89e7503 100644 --- a/webroot/rsrc/css/phui/phui-object-item-list-view.css +++ b/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; } diff --git a/webroot/rsrc/css/phui/phui-workboard-view.css b/webroot/rsrc/css/phui/phui-workboard-view.css index 280eb5394f..1176671c7c 100644 --- a/webroot/rsrc/css/phui/phui-workboard-view.css +++ b/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 { - margin-left: 0; - margin-right: 0; +.device-tablet .project-board-wrapper { + margin-left: 8px; + margin-right: 8px; } diff --git a/webroot/rsrc/css/phui/phui-workpanel-view.css b/webroot/rsrc/css/phui/phui-workpanel-view.css index 24b4ab2bf7..f1ef1bc547 100644 --- a/webroot/rsrc/css/phui/phui-workpanel-view.css +++ b/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 {