recaptime.dev / phorge
@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.) hq.recaptime.dev/wiki/Phorge
phorge phabricator
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

Add Shadow Panels to PhabricatorMultiColumnView

Summary: This adds the ability to have a multi-column full height container that is responsive based on PHUIBox's shadow box.

Test Plan: Tested new examples in UIExamples and Workboards.

Reviewers: epriestley, edward, btrahan

Reviewed By: epriestley

CC: aran, Korvin

Differential Revision: https://secure.phabricator.com/D5996

Chad Little 6cd62438 c48f64b3

+219 -64
+49 -49
src/__celerity_resource_map__.php
··· 800 800 ), 801 801 'aphront-form-view-css' => 802 802 array( 803 - 'uri' => '/res/cc40cdff/rsrc/css/aphront/form-view.css', 803 + 'uri' => '/res/70404bd5/rsrc/css/aphront/form-view.css', 804 804 'type' => 'css', 805 805 'requires' => 806 806 array( ··· 818 818 ), 819 819 'aphront-multi-column-view-css' => 820 820 array( 821 - 'uri' => '/res/4e5ae0f3/rsrc/css/aphront/multi-column.css', 821 + 'uri' => '/res/972551b3/rsrc/css/aphront/multi-column.css', 822 822 'type' => 'css', 823 823 'requires' => 824 824 array( ··· 3705 3705 ), 3706 3706 'ponder-comment-table-css' => 3707 3707 array( 3708 - 'uri' => '/res/cf9c686f/rsrc/css/application/ponder/comments.css', 3708 + 'uri' => '/res/15cb54fb/rsrc/css/application/ponder/comments.css', 3709 3709 'type' => 'css', 3710 3710 'requires' => 3711 3711 array( ··· 3732 3732 ), 3733 3733 'ponder-vote-css' => 3734 3734 array( 3735 - 'uri' => '/res/104d54ba/rsrc/css/application/ponder/vote.css', 3735 + 'uri' => '/res/26945177/rsrc/css/application/ponder/vote.css', 3736 3736 'type' => 'css', 3737 3737 'requires' => 3738 3738 array( ··· 3994 3994 ), array( 3995 3995 'packages' => 3996 3996 array( 3997 - '9680585d' => 3997 + '190fa563' => 3998 3998 array( 3999 3999 'name' => 'core.pkg.css', 4000 4000 'symbols' => ··· 4043 4043 41 => 'phabricator-property-list-view-css', 4044 4044 42 => 'phabricator-tag-view-css', 4045 4045 ), 4046 - 'uri' => '/res/pkg/9680585d/core.pkg.css', 4046 + 'uri' => '/res/pkg/190fa563/core.pkg.css', 4047 4047 'type' => 'css', 4048 4048 ), 4049 4049 'eb74a94b' => ··· 4237 4237 'reverse' => 4238 4238 array( 4239 4239 'aphront-attached-file-view-css' => '6b1fccc6', 4240 - 'aphront-dialog-view-css' => '9680585d', 4241 - 'aphront-error-view-css' => '9680585d', 4242 - 'aphront-form-view-css' => '9680585d', 4243 - 'aphront-list-filter-view-css' => '9680585d', 4244 - 'aphront-pager-view-css' => '9680585d', 4245 - 'aphront-panel-view-css' => '9680585d', 4246 - 'aphront-table-view-css' => '9680585d', 4247 - 'aphront-tokenizer-control-css' => '9680585d', 4248 - 'aphront-tooltip-css' => '9680585d', 4249 - 'aphront-typeahead-control-css' => '9680585d', 4240 + 'aphront-dialog-view-css' => '190fa563', 4241 + 'aphront-error-view-css' => '190fa563', 4242 + 'aphront-form-view-css' => '190fa563', 4243 + 'aphront-list-filter-view-css' => '190fa563', 4244 + 'aphront-pager-view-css' => '190fa563', 4245 + 'aphront-panel-view-css' => '190fa563', 4246 + 'aphront-table-view-css' => '190fa563', 4247 + 'aphront-tokenizer-control-css' => '190fa563', 4248 + 'aphront-tooltip-css' => '190fa563', 4249 + 'aphront-typeahead-control-css' => '190fa563', 4250 4250 'differential-changeset-view-css' => 'dd27a69b', 4251 4251 'differential-core-view-css' => 'dd27a69b', 4252 4252 'differential-inline-comment-editor' => '9488bb69', ··· 4260 4260 'differential-table-of-contents-css' => 'dd27a69b', 4261 4261 'diffusion-commit-view-css' => 'c8ce2d88', 4262 4262 'diffusion-icons-css' => 'c8ce2d88', 4263 - 'global-drag-and-drop-css' => '9680585d', 4263 + 'global-drag-and-drop-css' => '190fa563', 4264 4264 'inline-comment-summary-css' => 'dd27a69b', 4265 4265 'javelin-aphlict' => 'eb74a94b', 4266 4266 'javelin-behavior' => 'c1359b5d', ··· 4334 4334 'javelin-util' => 'c1359b5d', 4335 4335 'javelin-vector' => 'c1359b5d', 4336 4336 'javelin-workflow' => 'c1359b5d', 4337 - 'lightbox-attachment-css' => '9680585d', 4337 + 'lightbox-attachment-css' => '190fa563', 4338 4338 'maniphest-task-summary-css' => '6b1fccc6', 4339 4339 'maniphest-transaction-detail-css' => '6b1fccc6', 4340 - 'phabricator-action-list-view-css' => '9680585d', 4341 - 'phabricator-application-launch-view-css' => '9680585d', 4340 + 'phabricator-action-list-view-css' => '190fa563', 4341 + 'phabricator-application-launch-view-css' => '190fa563', 4342 4342 'phabricator-busy' => 'eb74a94b', 4343 4343 'phabricator-content-source-view-css' => 'dd27a69b', 4344 - 'phabricator-core-buttons-css' => '9680585d', 4345 - 'phabricator-core-css' => '9680585d', 4346 - 'phabricator-crumbs-view-css' => '9680585d', 4347 - 'phabricator-directory-css' => '9680585d', 4344 + 'phabricator-core-buttons-css' => '190fa563', 4345 + 'phabricator-core-css' => '190fa563', 4346 + 'phabricator-crumbs-view-css' => '190fa563', 4347 + 'phabricator-directory-css' => '190fa563', 4348 4348 'phabricator-drag-and-drop-file-upload' => '9488bb69', 4349 4349 'phabricator-dropdown-menu' => 'eb74a94b', 4350 4350 'phabricator-file-upload' => 'eb74a94b', 4351 - 'phabricator-filetree-view-css' => '9680585d', 4352 - 'phabricator-flag-css' => '9680585d', 4353 - 'phabricator-form-view-css' => '9680585d', 4354 - 'phabricator-header-view-css' => '9680585d', 4351 + 'phabricator-filetree-view-css' => '190fa563', 4352 + 'phabricator-flag-css' => '190fa563', 4353 + 'phabricator-form-view-css' => '190fa563', 4354 + 'phabricator-header-view-css' => '190fa563', 4355 4355 'phabricator-hovercard' => 'eb74a94b', 4356 - 'phabricator-jump-nav' => '9680585d', 4356 + 'phabricator-jump-nav' => '190fa563', 4357 4357 'phabricator-keyboard-shortcut' => 'eb74a94b', 4358 4358 'phabricator-keyboard-shortcut-manager' => 'eb74a94b', 4359 - 'phabricator-main-menu-view' => '9680585d', 4359 + 'phabricator-main-menu-view' => '190fa563', 4360 4360 'phabricator-menu-item' => 'eb74a94b', 4361 - 'phabricator-nav-view-css' => '9680585d', 4361 + 'phabricator-nav-view-css' => '190fa563', 4362 4362 'phabricator-notification' => 'eb74a94b', 4363 - 'phabricator-notification-css' => '9680585d', 4364 - 'phabricator-notification-menu-css' => '9680585d', 4365 - 'phabricator-object-item-list-view-css' => '9680585d', 4363 + 'phabricator-notification-css' => '190fa563', 4364 + 'phabricator-notification-menu-css' => '190fa563', 4365 + 'phabricator-object-item-list-view-css' => '190fa563', 4366 4366 'phabricator-object-selector-css' => 'dd27a69b', 4367 4367 'phabricator-phtize' => 'eb74a94b', 4368 4368 'phabricator-prefab' => 'eb74a94b', 4369 4369 'phabricator-project-tag-css' => '6b1fccc6', 4370 - 'phabricator-property-list-view-css' => '9680585d', 4371 - 'phabricator-remarkup-css' => '9680585d', 4370 + 'phabricator-property-list-view-css' => '190fa563', 4371 + 'phabricator-remarkup-css' => '190fa563', 4372 4372 'phabricator-shaped-request' => '9488bb69', 4373 - 'phabricator-side-menu-view-css' => '9680585d', 4374 - 'phabricator-standard-page-view' => '9680585d', 4375 - 'phabricator-tag-view-css' => '9680585d', 4373 + 'phabricator-side-menu-view-css' => '190fa563', 4374 + 'phabricator-standard-page-view' => '190fa563', 4375 + 'phabricator-tag-view-css' => '190fa563', 4376 4376 'phabricator-textareautils' => 'eb74a94b', 4377 4377 'phabricator-tooltip' => 'eb74a94b', 4378 - 'phabricator-transaction-view-css' => '9680585d', 4379 - 'phabricator-zindex-css' => '9680585d', 4380 - 'phui-form-css' => '9680585d', 4381 - 'phui-icon-view-css' => '9680585d', 4382 - 'spacing-css' => '9680585d', 4383 - 'sprite-apps-large-css' => '9680585d', 4384 - 'sprite-gradient-css' => '9680585d', 4385 - 'sprite-icons-css' => '9680585d', 4386 - 'sprite-menu-css' => '9680585d', 4387 - 'syntax-highlighting-css' => '9680585d', 4378 + 'phabricator-transaction-view-css' => '190fa563', 4379 + 'phabricator-zindex-css' => '190fa563', 4380 + 'phui-form-css' => '190fa563', 4381 + 'phui-icon-view-css' => '190fa563', 4382 + 'spacing-css' => '190fa563', 4383 + 'sprite-apps-large-css' => '190fa563', 4384 + 'sprite-gradient-css' => '190fa563', 4385 + 'sprite-icons-css' => '190fa563', 4386 + 'sprite-menu-css' => '190fa563', 4387 + 'syntax-highlighting-css' => '190fa563', 4388 4388 ), 4389 4389 ));
+105 -9
src/applications/uiexample/examples/PhabricatorMultiColumnExample.php
··· 12 12 } 13 13 14 14 public function renderExample() { 15 + $request = $this->getRequest(); 16 + $user = $request->getUser(); 15 17 16 18 $column1 = phutil_tag( 17 19 'div', ··· 63 65 ->setFluidLayout(true) 64 66 ->setGutter(AphrontMultiColumnView::GUTTER_SMALL); 65 67 68 + $sunday = hsprintf('<strong>Sunday</strong><br /><br />Watch Football'. 69 + '<br />Code<br />Eat<br />Sleep'); 70 + 71 + $monday = hsprintf('<strong>Monday</strong><br /><br />Code'. 72 + '<br />Eat<br />Sleep'); 73 + 74 + $tuesday = hsprintf('<strong>Tuesday</strong><br />'. 75 + '<br />Code<br />Eat<br />Sleep'); 76 + 77 + $wednesday = hsprintf('<strong>Wednesday</strong><br /><br />Code'. 78 + '<br />Eat<br />Sleep'); 79 + 80 + $thursday = hsprintf('<strong>Thursday</strong><br />'. 81 + '<br />Code<br />Eat<br />Sleep'); 82 + 83 + $friday = hsprintf('<strong>Friday</strong><br /><br />Code'. 84 + '<br />Eat<br />Sleep'); 85 + 86 + $saturday = hsprintf('<strong>Saturday</strong><br /><br />StarCraft II'. 87 + '<br />All<br />Damn<br />Day'); 88 + 66 89 $head5 = id(new PhabricatorHeaderView()) 67 90 ->setHeader(pht('7 Column Fluid')); 68 91 $layout5 = id(new AphrontMultiColumnView()) 69 - ->addColumn('Sunday') 70 - ->addColumn('Monday') 71 - ->addColumn('Tuesday') 72 - ->addColumn('Wednesday') 73 - ->addColumn('Thursday') 74 - ->addColumn('Friday') 75 - ->addColumn('Saturday') 76 - ->setFluidLayout(true); 92 + ->addColumn($sunday) 93 + ->addColumn($monday) 94 + ->addColumn($tuesday) 95 + ->addColumn($wednesday) 96 + ->addColumn($thursday) 97 + ->addColumn($friday) 98 + ->addColumn($saturday) 99 + ->setFluidLayout(true) 100 + ->setShadow(true); 101 + 102 + $shipping = id(new AphrontFormLayoutView()) 103 + ->setUser($user) 104 + ->setFullWidth(true) 105 + ->appendChild( 106 + id(new AphrontFormTextControl()) 107 + ->setLabel('Name') 108 + ->setDisableAutocomplete(true) 109 + ->setSigil('name-input')) 110 + ->appendChild( 111 + id(new AphrontFormTextControl()) 112 + ->setLabel('Address') 113 + ->setDisableAutocomplete(true) 114 + ->setSigil('address-input')) 115 + ->appendChild( 116 + id(new AphrontFormTextControl()) 117 + ->setLabel('City/State') 118 + ->setDisableAutocomplete(true) 119 + ->setSigil('city-input')) 120 + ->appendChild( 121 + id(new AphrontFormTextControl()) 122 + ->setLabel('Country') 123 + ->setDisableAutocomplete(true) 124 + ->setSigil('country-input')) 125 + ->appendChild( 126 + id(new AphrontFormTextControl()) 127 + ->setLabel('Postal Code') 128 + ->setDisableAutocomplete(true) 129 + ->setSigil('postal-input')); 130 + 131 + $cc = id(new AphrontFormLayoutView()) 132 + ->setUser($user) 133 + ->setFullWidth(true) 134 + ->appendChild( 135 + id(new AphrontFormTextControl()) 136 + ->setLabel('Card Number') 137 + ->setDisableAutocomplete(true) 138 + ->setSigil('number-input') 139 + ->setError('')) 140 + ->appendChild( 141 + id(new AphrontFormTextControl()) 142 + ->setLabel('CVC') 143 + ->setDisableAutocomplete(true) 144 + ->setSigil('cvc-input') 145 + ->setError('')) 146 + ->appendChild( 147 + id(new PhortuneMonthYearExpiryControl()) 148 + ->setLabel('Expiration') 149 + ->setUser($user) 150 + ->setError('')); 151 + 152 + $shipping_title = pht('Shipping Address'); 153 + $billing_title = pht('Billing Address'); 154 + $cc_title = pht('Payment Information'); 155 + 156 + $head6 = id(new PhabricatorHeaderView()) 157 + ->setHeader(pht('Let\'s Go Shopping')); 158 + $layout6 = id(new AphrontMultiColumnView()) 159 + ->addColumn(hsprintf('<h1>%s</h1>%s', $shipping_title, $shipping)) 160 + ->addColumn(hsprintf('<h1>%s</h1>%s', $billing_title, $shipping)) 161 + ->addColumn(hsprintf('<h1>%s</h1>%s', $cc_title, $cc)) 162 + ->setFluidLayout(true) 163 + ->setShadow(true); 77 164 78 165 $wrap1 = phutil_tag( 79 166 'div', ··· 110 197 ), 111 198 $layout5); 112 199 200 + $wrap6 = phutil_tag( 201 + 'div', 202 + array( 203 + 'class' => 'ml' 204 + ), 205 + $layout6); 206 + 113 207 return phutil_tag( 114 208 'div', 115 209 array(), ··· 123 217 $head4, 124 218 $wrap4, 125 219 $head5, 126 - $wrap5 220 + $wrap5, 221 + $head6, 222 + $wrap6 127 223 )); 128 224 } 129 225 }
+18 -1
src/view/layout/AphrontMultiColumnView.php
··· 9 9 private $column = array(); 10 10 private $fluidLayout = false; 11 11 private $gutter; 12 + private $shadow; 12 13 13 14 public function addColumn($column) { 14 15 $this->columns[] = $column; ··· 25 26 return $this; 26 27 } 27 28 29 + public function setShadow($shadow) { 30 + $this->shadow = $shadow; 31 + return $this; 32 + } 33 + 28 34 public function render() { 29 35 require_celerity_resource('aphront-multi-column-view-css'); 30 36 ··· 41 47 $columns = array(); 42 48 $column_class = array(); 43 49 $column_class[] = 'aphront-multi-column-column'; 50 + $outer_class = array(); 51 + $outer_class[] = 'aphront-multi-column-column-outer'; 44 52 if ($this->gutter) { 45 53 $column_class[] = $this->gutter; 46 54 } ··· 48 56 foreach ($this->columns as $column) { 49 57 if (++$i === count($this->columns)) { 50 58 $column_class[] = 'aphront-multi-column-column-last'; 59 + $outer_class[] = 'aphront-multi-colum-column-outer-last'; 51 60 } 52 61 $column_inner = phutil_tag( 53 62 'div', ··· 58 67 $columns[] = phutil_tag( 59 68 'div', 60 69 array( 61 - 'class' => 'aphront-multi-column-column-outer' 70 + 'class' => implode(' ', $outer_class) 62 71 ), 63 72 $column_inner); 64 73 } ··· 86 95 'class' => implode(' ', $classes) 87 96 ), 88 97 $view); 98 + 99 + if ($this->shadow) { 100 + $board = id(new PHUIBoxView()) 101 + ->setShadow(true) 102 + ->appendChild($board) 103 + ->addPadding(PHUI::PADDING_MEDIUM_TOP) 104 + ->addPadding(PHUI::PADDING_MEDIUM_BOTTOM); 105 + } 89 106 90 107 return phutil_tag( 91 108 'div',
+4
webroot/rsrc/css/aphront/form-view.css
··· 90 90 padding: 4px; 91 91 } 92 92 93 + .aphront-form-full-width .aphront-form-control { 94 + padding: 4px 0; 95 + } 96 + 93 97 .aphront-form-control-submit button, 94 98 .aphront-form-control-submit a.button { 95 99 float: right;
+43 -5
webroot/rsrc/css/aphront/multi-column.css
··· 12 12 width: 100%; 13 13 } 14 14 15 - .aphront-multi-column-column-outer { 16 - float: left; 17 - } 18 - 19 15 .aphront-multi-column-inner .aphront-multi-column-column-last, 20 16 .device-phone .aphront-multi-column-column { 21 17 margin: 0; ··· 23 19 24 20 .device-phone .aphront-multi-column-outer 25 21 div.aphront-multi-column-column-outer { 26 - width: 100%; 22 + width: auto; 27 23 margin-bottom: 20px; 28 24 } 29 25 ··· 123 119 .aphront-multi-column-column-outer { 124 120 width: 14.2857%; 125 121 } 122 + 123 + /* Shadow Panels */ 124 + 125 + .aphront-multi-column-inner { 126 + display: table; 127 + width: 100%; 128 + } 129 + 130 + .device-phone .aphront-multi-column-inner { 131 + display: block; 132 + width: auto; 133 + } 134 + 135 + .aphront-multi-column-column-outer { 136 + display: table-cell; 137 + height: 100%; 138 + } 139 + 140 + .phui-box-shadow .aphront-multi-column-column-outer { 141 + border-right: 1px solid #e7e7e7; 142 + padding-left: 10px; 143 + padding-right: 10px; 144 + } 145 + 146 + .phui-box-shadow .aphront-multi-colum-column-outer-last { 147 + border: none; 148 + } 149 + 150 + .device-phone .aphront-multi-column-column-outer { 151 + display: block; 152 + border: none; 153 + } 154 + 155 + .device-phone .phui-box-shadow .aphront-multi-column-column-outer { 156 + padding-bottom: 20px; 157 + border-bottom: 1px solid #e7e7e7; 158 + } 159 + 160 + .device-phone .phui-box-shadow .aphront-multi-colum-column-outer-last { 161 + border: none; 162 + padding-bottom: 0; 163 + }