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 `<details>`/`<summary>` 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

Andre Klapper 2 years ago fec00256 03092ca4

+65 -5

5 changed files

expand all

resources

celerity

map.php

src

view

phui

PHUIBoxView.php

PHUIHeaderView.php

PHUIWorkpanelView.php

webroot

rsrc

css

phui

phui-header-view.css

+3 -3

resources/celerity/map.php

··· 9 9 'names' => array( 10 10 'conpherence.pkg.css' => '2f25eb4f', 11 11 'conpherence.pkg.js' => '020aebcf', 12 - 'core.pkg.css' => '3471f5d3', 12 + 'core.pkg.css' => 'ac619266', 13 13 'core.pkg.js' => '2eeda9e0', 14 14 'dark-console.pkg.js' => '187792c2', 15 15 'differential.pkg.css' => '6d3700f0', ··· 158 158 'rsrc/css/phui/phui-form.css' => '1f177cb7', 159 159 'rsrc/css/phui/phui-formation-view.css' => 'd2dec8ed', 160 160 'rsrc/css/phui/phui-head-thing.css' => 'd7f293df', 161 - 'rsrc/css/phui/phui-header-view.css' => '36c86a58', 161 + 'rsrc/css/phui/phui-header-view.css' => '4cd25427', 162 162 'rsrc/css/phui/phui-hovercard.css' => '39fd2e14', 163 163 'rsrc/css/phui/phui-icon-set-selector.css' => '19e0253b', 164 164 'rsrc/css/phui/phui-icon.css' => '084ac612', ··· 851 851 'phui-form-view-css' => '57edecb7', 852 852 'phui-formation-view-css' => 'd2dec8ed', 853 853 'phui-head-thing-view-css' => 'd7f293df', 854 - 'phui-header-view-css' => '36c86a58', 854 + 'phui-header-view-css' => '4cd25427', 855 855 'phui-hovercard' => '6199f752', 856 856 'phui-hovercard-list' => 'de4b4919', 857 857 'phui-hovercard-view-css' => '39fd2e14',

+23 -1

src/view/phui/PHUIBoxView.php

··· 6 6 private $padding = array(); 7 7 private $border = false; 8 8 private $color; 9 + private $collapsible; 9 10 10 11 const BLUE = 'phui-box-blue'; 11 12 const GREY = 'phui-box-grey'; ··· 27 28 28 29 public function setColor($color) { 29 30 $this->color = $color; 31 + return $this; 32 + } 33 + 34 + /** 35 + * Render PHUIBoxView as a <details> instead of a <div> HTML tag. 36 + * To be used for collapse/expand in combination with PHUIHeaderView. 37 + * 38 + * @param bool True to wrap in <summary> instead of <div> HTML tag. 39 + */ 40 + public function setCollapsible($collapsible) { 41 + $this->collapsible = $collapsible; 30 42 return $this; 31 43 } 32 44 ··· 51 63 $outer_classes[] = $this->color; 52 64 } 53 65 54 - return array('class' => $outer_classes); 66 + $tag_classes = array('class' => $outer_classes); 67 + 68 + if ($this->collapsible) { 69 + $attribute = array('open' => ''); // expand column by default 70 + $tag_classes = array_merge($tag_classes, $attribute); 71 + } 72 + 73 + return $tag_classes; 55 74 } 56 75 57 76 protected function getTagName() { 77 + if ($this->collapsible) { 78 + return 'details'; 79 + } 58 80 return 'div'; 59 81 } 60 82

+15

src/view/phui/PHUIHeaderView.php

··· 24 24 private $href; 25 25 private $actionList; 26 26 private $actionListID; 27 + private $collapsible; 27 28 28 29 public function setHeader($header) { 29 30 $this->header = $header; ··· 90 91 return $this; 91 92 } 92 93 94 + /** 95 + * Render PHUIHeaderView as a <summary> instead of a <div> HTML tag. 96 + * To be used for collapse/expand in combination with PHUIBoxView. 97 + * 98 + * @param bool True to wrap in <summary> instead of <div> HTML tag. 99 + */ 100 + public function setCollapsible($collapsible) { 101 + $this->collapsible = $collapsible; 102 + return $this; 103 + } 104 + 93 105 public function setPolicyObject(PhabricatorPolicyInterface $object) { 94 106 $this->policyObject = $object; 95 107 return $this; ··· 156 168 } 157 169 158 170 protected function getTagName() { 171 + if ($this->collapsible) { 172 + return 'summary'; 173 + } 159 174 return 'div'; 160 175 } 161 176

+3 -1

src/view/phui/PHUIWorkpanelView.php

··· 81 81 82 82 $header = id(new PHUIHeaderView()) 83 83 ->setHeader($this->header) 84 - ->setSubheader($this->subheader); 84 + ->setSubheader($this->subheader) 85 + ->setCollapsible(true); 85 86 86 87 foreach ($this->headerActions as $action) { 87 88 $header->addActionItem($action); ··· 112 113 $view = id(new PHUIBoxView()) 113 114 ->setColor(PHUIBoxView::GREY) 114 115 ->addClass('phui-workpanel-view-inner') 116 + ->setCollapsible(true) 115 117 ->appendChild( 116 118 array( 117 119 $header,

+21

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

··· 56 56 border-top-width: 0; 57 57 } 58 58 59 + details > summary.phui-header-shell { 60 + cursor: pointer; 61 + list-style: none; 62 + } 63 + 64 + details > summary.phui-header-shell::marker { 65 + content: none; 66 + } 67 + 68 + .device-phone details > summary.phui-header-shell::after, 69 + .device-tablet details > summary.phui-header-shell::after { 70 + font-family: FontAwesome; 71 + content: "\f061"; 72 + } 73 + 74 + .device-phone details[open] > summary.phui-header-shell::after, 75 + .device-tablet details[open] > summary.phui-header-shell::after { 76 + font-family: FontAwesome; 77 + content: "\f063"; 78 + } 79 + 59 80 .phui-property-list-view + .diviner-document-section { 60 81 margin-top: -1px; 61 82 }

Configure Feed

Configure Feed