From fec00256be1f8b9133076b8d7329f0a99c891daa Mon Sep 17 00:00:00 2001 From: Andre Klapper Date: Mon, 27 May 2024 23:36:46 +0200 Subject: [PATCH] Allow collapsing/expanding workboard column content by clicking its header Summary: Reduce users' need for scrolling on smaller screens with 920px or less viewport width by using HTML5's `
`/`` so clicking on a workboard column header hides the content of that column, in all CSS views (mobile, tablet, desktop). Keep expanding its content by default. On mobile and tablet devices, display an arrow in the column header box below the header text to potentially make those users aware of this functionality that benefit the most from it. Do not render these arrows on desktop devices (though the collapse/expand functionality still works there). See https://caniuse.com/details for browser (in)compatibility. Closes T15843 Test Plan: Go to a project workboard with several columns and tasks in them on a screen with 920px or less width. See a small arrow below the column header text. Click on a column header to collapse and expand the column content. Reviewers: O1 Blessed Committers, valerio.bozzolan, avivey Reviewed By: O1 Blessed Committers, valerio.bozzolan, avivey Subscribers: avivey, tobiaswiese, valerio.bozzolan, Matthew, Cigaryno Maniphest Tasks: T15843 Differential Revision: https://we.phorge.it/D25672 --- resources/celerity/map.php | 6 +++--- src/view/phui/PHUIBoxView.php | 24 +++++++++++++++++++++- src/view/phui/PHUIHeaderView.php | 15 ++++++++++++++ src/view/phui/PHUIWorkpanelView.php | 4 +++- webroot/rsrc/css/phui/phui-header-view.css | 21 +++++++++++++++++++ 5 files changed, 65 insertions(+), 5 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 3cce373c8a..c6c577aa3a 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -9,7 +9,7 @@ return array( 'names' => array( 'conpherence.pkg.css' => '2f25eb4f', 'conpherence.pkg.js' => '020aebcf', - 'core.pkg.css' => '3471f5d3', + 'core.pkg.css' => 'ac619266', 'core.pkg.js' => '2eeda9e0', 'dark-console.pkg.js' => '187792c2', 'differential.pkg.css' => '6d3700f0', @@ -158,7 +158,7 @@ return array( 'rsrc/css/phui/phui-form.css' => '1f177cb7', 'rsrc/css/phui/phui-formation-view.css' => 'd2dec8ed', 'rsrc/css/phui/phui-head-thing.css' => 'd7f293df', - 'rsrc/css/phui/phui-header-view.css' => '36c86a58', + 'rsrc/css/phui/phui-header-view.css' => '4cd25427', 'rsrc/css/phui/phui-hovercard.css' => '39fd2e14', 'rsrc/css/phui/phui-icon-set-selector.css' => '19e0253b', 'rsrc/css/phui/phui-icon.css' => '084ac612', @@ -851,7 +851,7 @@ return array( 'phui-form-view-css' => '57edecb7', 'phui-formation-view-css' => 'd2dec8ed', 'phui-head-thing-view-css' => 'd7f293df', - 'phui-header-view-css' => '36c86a58', + 'phui-header-view-css' => '4cd25427', 'phui-hovercard' => '6199f752', 'phui-hovercard-list' => 'de4b4919', 'phui-hovercard-view-css' => '39fd2e14', diff --git a/src/view/phui/PHUIBoxView.php b/src/view/phui/PHUIBoxView.php index 7068f8811c..33924379cc 100644 --- a/src/view/phui/PHUIBoxView.php +++ b/src/view/phui/PHUIBoxView.php @@ -6,6 +6,7 @@ final class PHUIBoxView extends AphrontTagView { private $padding = array(); private $border = false; private $color; + private $collapsible; const BLUE = 'phui-box-blue'; const GREY = 'phui-box-grey'; @@ -30,6 +31,17 @@ final class PHUIBoxView extends AphrontTagView { return $this; } + /** + * Render PHUIBoxView as a
instead of a
HTML tag. + * To be used for collapse/expand in combination with PHUIHeaderView. + * + * @param bool True to wrap in instead of
HTML tag. + */ + public function setCollapsible($collapsible) { + $this->collapsible = $collapsible; + return $this; + } + protected function getTagAttributes() { require_celerity_resource('phui-box-css'); $outer_classes = array(); @@ -51,10 +63,20 @@ final class PHUIBoxView extends AphrontTagView { $outer_classes[] = $this->color; } - return array('class' => $outer_classes); + $tag_classes = array('class' => $outer_classes); + + if ($this->collapsible) { + $attribute = array('open' => ''); // expand column by default + $tag_classes = array_merge($tag_classes, $attribute); + } + + return $tag_classes; } protected function getTagName() { + if ($this->collapsible) { + return 'details'; + } return 'div'; } diff --git a/src/view/phui/PHUIHeaderView.php b/src/view/phui/PHUIHeaderView.php index 465768ae16..f1952b4843 100644 --- a/src/view/phui/PHUIHeaderView.php +++ b/src/view/phui/PHUIHeaderView.php @@ -24,6 +24,7 @@ final class PHUIHeaderView extends AphrontTagView { private $href; private $actionList; private $actionListID; + private $collapsible; public function setHeader($header) { $this->header = $header; @@ -90,6 +91,17 @@ final class PHUIHeaderView extends AphrontTagView { return $this; } + /** + * Render PHUIHeaderView as a instead of a
HTML tag. + * To be used for collapse/expand in combination with PHUIBoxView. + * + * @param bool True to wrap in instead of
HTML tag. + */ + public function setCollapsible($collapsible) { + $this->collapsible = $collapsible; + return $this; + } + public function setPolicyObject(PhabricatorPolicyInterface $object) { $this->policyObject = $object; return $this; @@ -156,6 +168,9 @@ final class PHUIHeaderView extends AphrontTagView { } protected function getTagName() { + if ($this->collapsible) { + return 'summary'; + } return 'div'; } diff --git a/src/view/phui/PHUIWorkpanelView.php b/src/view/phui/PHUIWorkpanelView.php index 911d38c2e3..ad8c77fd07 100644 --- a/src/view/phui/PHUIWorkpanelView.php +++ b/src/view/phui/PHUIWorkpanelView.php @@ -81,7 +81,8 @@ final class PHUIWorkpanelView extends AphrontTagView { $header = id(new PHUIHeaderView()) ->setHeader($this->header) - ->setSubheader($this->subheader); + ->setSubheader($this->subheader) + ->setCollapsible(true); foreach ($this->headerActions as $action) { $header->addActionItem($action); @@ -112,6 +113,7 @@ final class PHUIWorkpanelView extends AphrontTagView { $view = id(new PHUIBoxView()) ->setColor(PHUIBoxView::GREY) ->addClass('phui-workpanel-view-inner') + ->setCollapsible(true) ->appendChild( array( $header, diff --git a/webroot/rsrc/css/phui/phui-header-view.css b/webroot/rsrc/css/phui/phui-header-view.css index 7131db5640..0e418059ec 100644 --- a/webroot/rsrc/css/phui/phui-header-view.css +++ b/webroot/rsrc/css/phui/phui-header-view.css @@ -56,6 +56,27 @@ body .phui-header-shell.phui-bleed-header border-top-width: 0; } +details > summary.phui-header-shell { + cursor: pointer; + list-style: none; +} + +details > summary.phui-header-shell::marker { + content: none; +} + +.device-phone details > summary.phui-header-shell::after, +.device-tablet details > summary.phui-header-shell::after { + font-family: FontAwesome; + content: "\f061"; +} + +.device-phone details[open] > summary.phui-header-shell::after, +.device-tablet details[open] > summary.phui-header-shell::after { + font-family: FontAwesome; + content: "\f063"; +} + .phui-property-list-view + .diviner-document-section { margin-top: -1px; }