@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<?php
2
3final class PhabricatorMultiColumnUIExample extends PhabricatorUIExample {
4
5 public function getName() {
6 return pht('Multiple Column Layouts');
7 }
8
9 public function getDescription() {
10 return pht(
11 'A container good for 1-7 equally spaced columns. '.
12 'Fixed and Fluid layouts.');
13 }
14
15 public function renderExample() {
16 $request = $this->getRequest();
17 $user = $request->getUser();
18
19 $column1 = phutil_tag(
20 'div',
21 array(
22 'class' => 'pm',
23 'style' => 'border: 1px solid green;',
24 ),
25 'Bruce Campbell');
26
27 $column2 = phutil_tag(
28 'div',
29 array(
30 'class' => 'pm',
31 'style' => 'border: 1px solid blue;',
32 ),
33 'Army of Darkness');
34
35 $head1 = id(new PHUIHeaderView())
36 ->setHeader(pht('2 Column Fixed'));
37 $layout1 = id(new AphrontMultiColumnView())
38 ->addColumn($column1)
39 ->addColumn($column2)
40 ->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM);
41
42 $head2 = id(new PHUIHeaderView())
43 ->setHeader(pht('2 Column Fluid'));
44 $layout2 = id(new AphrontMultiColumnView())
45 ->addColumn($column1)
46 ->addColumn($column2)
47 ->setFluidLayout(true)
48 ->setGutter(AphrontMultiColumnView::GUTTER_MEDIUM);
49
50 $head3 = id(new PHUIHeaderView())
51 ->setHeader(pht('4 Column Fixed'));
52 $layout3 = id(new AphrontMultiColumnView())
53 ->addColumn($column1)
54 ->addColumn($column2)
55 ->addColumn($column1)
56 ->addColumn($column2)
57 ->setGutter(AphrontMultiColumnView::GUTTER_SMALL);
58
59 $head4 = id(new PHUIHeaderView())
60 ->setHeader(pht('4 Column Fluid'));
61 $layout4 = id(new AphrontMultiColumnView())
62 ->addColumn($column1)
63 ->addColumn($column2)
64 ->addColumn($column1)
65 ->addColumn($column2)
66 ->setFluidLayout(true)
67 ->setGutter(AphrontMultiColumnView::GUTTER_SMALL);
68
69 $sunday = hsprintf('<strong>Sunday</strong><br /><br />Watch Football'.
70 '<br />Code<br />Eat<br />Sleep');
71
72 $monday = hsprintf('<strong>Monday</strong><br /><br />Code'.
73 '<br />Eat<br />Sleep');
74
75 $tuesday = hsprintf('<strong>Tuesday</strong><br />'.
76 '<br />Code<br />Eat<br />Sleep');
77
78 $wednesday = hsprintf('<strong>Wednesday</strong><br /><br />Code'.
79 '<br />Eat<br />Sleep');
80
81 $thursday = hsprintf('<strong>Thursday</strong><br />'.
82 '<br />Code<br />Eat<br />Sleep');
83
84 $friday = hsprintf('<strong>Friday</strong><br /><br />Code'.
85 '<br />Eat<br />Sleep');
86
87 $saturday = hsprintf('<strong>Saturday</strong><br /><br />StarCraft II'.
88 '<br />All<br />Damn<br />Day');
89
90 $head5 = id(new PHUIHeaderView())
91 ->setHeader(pht('7 Column Fluid'));
92 $layout5 = id(new AphrontMultiColumnView())
93 ->addColumn($sunday)
94 ->addColumn($monday)
95 ->addColumn($tuesday)
96 ->addColumn($wednesday)
97 ->addColumn($thursday)
98 ->addColumn($friday)
99 ->addColumn($saturday)
100 ->setFluidLayout(true)
101 ->setBorder(true);
102
103 $shipping = id(new PHUIFormLayoutView())
104 ->setUser($user)
105 ->setFullWidth(true)
106 ->appendChild(
107 id(new AphrontFormTextControl())
108 ->setLabel(pht('Name'))
109 ->setDisableAutocomplete(true)
110 ->setSigil('name-input'))
111 ->appendChild(
112 id(new AphrontFormTextControl())
113 ->setLabel(pht('Address'))
114 ->setDisableAutocomplete(true)
115 ->setSigil('address-input'))
116 ->appendChild(
117 id(new AphrontFormTextControl())
118 ->setLabel(pht('City/State'))
119 ->setDisableAutocomplete(true)
120 ->setSigil('city-input'))
121 ->appendChild(
122 id(new AphrontFormTextControl())
123 ->setLabel(pht('Country'))
124 ->setDisableAutocomplete(true)
125 ->setSigil('country-input'))
126 ->appendChild(
127 id(new AphrontFormTextControl())
128 ->setLabel(pht('Postal Code'))
129 ->setDisableAutocomplete(true)
130 ->setSigil('postal-input'));
131
132 $cc = id(new PHUIFormLayoutView())
133 ->setUser($user)
134 ->setFullWidth(true)
135 ->appendChild(
136 id(new AphrontFormTextControl())
137 ->setLabel(pht('Card Number'))
138 ->setDisableAutocomplete(true)
139 ->setSigil('number-input')
140 ->setError(''))
141 ->appendChild(
142 id(new AphrontFormTextControl())
143 ->setLabel(pht('CVC'))
144 ->setDisableAutocomplete(true)
145 ->setSigil('cvc-input')
146 ->setError(''))
147 ->appendChild(
148 id(new PhortuneMonthYearExpiryControl())
149 ->setLabel(pht('Expiration'))
150 ->setUser($user)
151 ->setError(''));
152
153 $shipping_title = pht('Shipping Address');
154 $billing_title = pht('Billing Address');
155 $cc_title = pht('Payment Information');
156
157 $head6 = id(new PHUIHeaderView())
158 ->setHeader(pht("Let's Go Shopping"));
159 $layout6 = id(new AphrontMultiColumnView())
160 ->addColumn(hsprintf('<h1>%s</h1>%s', $shipping_title, $shipping))
161 ->addColumn(hsprintf('<h1>%s</h1>%s', $billing_title, $shipping))
162 ->addColumn(hsprintf('<h1>%s</h1>%s', $cc_title, $cc))
163 ->setFluidLayout(true)
164 ->setBorder(true);
165
166 $wrap1 = phutil_tag(
167 'div',
168 array(
169 'class' => 'ml',
170 ),
171 $layout1);
172
173 $wrap2 = phutil_tag(
174 'div',
175 array(
176 'class' => 'ml',
177 ),
178 $layout2);
179
180 $wrap3 = phutil_tag(
181 'div',
182 array(
183 'class' => 'ml',
184 ),
185 $layout3);
186
187 $wrap4 = phutil_tag(
188 'div',
189 array(
190 'class' => 'ml',
191 ),
192 $layout4);
193
194 $wrap5 = phutil_tag(
195 'div',
196 array(
197 'class' => 'ml',
198 ),
199 $layout5);
200
201 $wrap6 = phutil_tag(
202 'div',
203 array(
204 'class' => 'ml',
205 ),
206 $layout6);
207
208 return phutil_tag(
209 'div',
210 array(),
211 array(
212 $head1,
213 $wrap1,
214 $head2,
215 $wrap2,
216 $head3,
217 $wrap3,
218 $head4,
219 $wrap4,
220 $head5,
221 $wrap5,
222 $head6,
223 $wrap6,
224 ));
225 }
226}