@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
Add a top level tab navigation option to PHUITwoColumnView
Summary: Builds out a responsive tab bar system for PHUITwoColumnView pages
Test Plan:
Tested at mobile, tablet, and desktop breakpoints
{F5012429}
{F5012430}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D18148
+106
-5
+5
-5
resources/celerity/map.php
+5
-5
resources/celerity/map.php
···
9
9
'names' => array(
10
10
'conpherence.pkg.css' => 'ff161f2d',
11
11
'conpherence.pkg.js' => 'b5b51108',
12
-
'core.pkg.css' => '6d40b714',
12
+
'core.pkg.css' => '37dd219b',
13
13
'core.pkg.js' => '5d80e0db',
14
14
'darkconsole.pkg.js' => '1f9a31bc',
15
15
'differential.pkg.css' => '4ec4a37a',
···
166
166
'rsrc/css/phui/phui-info-view.css' => '6e217679',
167
167
'rsrc/css/phui/phui-invisible-character-view.css' => '6993d9f0',
168
168
'rsrc/css/phui/phui-lightbox.css' => '0a035e40',
169
-
'rsrc/css/phui/phui-list.css' => '12eb8ce6',
169
+
'rsrc/css/phui/phui-list.css' => 'dcafb463',
170
170
'rsrc/css/phui/phui-object-box.css' => '9cff003c',
171
171
'rsrc/css/phui/phui-pager.css' => 'edcbc226',
172
172
'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
···
177
177
'rsrc/css/phui/phui-status.css' => 'd5263e49',
178
178
'rsrc/css/phui/phui-tag-view.css' => '93b084cf',
179
179
'rsrc/css/phui/phui-timeline-view.css' => '313c7f22',
180
-
'rsrc/css/phui/phui-two-column-view.css' => 'ce9fa0b7',
180
+
'rsrc/css/phui/phui-two-column-view.css' => '5b8cd553',
181
181
'rsrc/css/phui/workboards/phui-workboard-color.css' => '783cdff5',
182
182
'rsrc/css/phui/workboards/phui-workboard.css' => '3bc85455',
183
183
'rsrc/css/phui/workboards/phui-workcard.css' => 'cca5fa92',
···
854
854
'phui-inline-comment-view-css' => 'ffd1a542',
855
855
'phui-invisible-character-view-css' => '6993d9f0',
856
856
'phui-lightbox-css' => '0a035e40',
857
-
'phui-list-view-css' => '12eb8ce6',
857
+
'phui-list-view-css' => 'dcafb463',
858
858
'phui-object-box-css' => '9cff003c',
859
859
'phui-oi-big-ui-css' => '19f9369b',
860
860
'phui-oi-color-css' => 'cd2b9b77',
···
872
872
'phui-tag-view-css' => '93b084cf',
873
873
'phui-theme-css' => '9f261c6b',
874
874
'phui-timeline-view-css' => '313c7f22',
875
-
'phui-two-column-view-css' => 'ce9fa0b7',
875
+
'phui-two-column-view-css' => '5b8cd553',
876
876
'phui-workboard-color-css' => '783cdff5',
877
877
'phui-workboard-view-css' => '3bc85455',
878
878
'phui-workcard-view-css' => 'cca5fa92',
+18
src/view/phui/PHUITwoColumnView.php
+18
src/view/phui/PHUITwoColumnView.php
···
10
10
private $header;
11
11
private $subheader;
12
12
private $footer;
13
+
private $tabs;
13
14
private $propertySection = array();
14
15
private $curtain;
15
16
···
39
40
40
41
public function setSubheader($subheader) {
41
42
$this->subheader = $subheader;
43
+
return $this;
44
+
}
45
+
46
+
public function setTabs(PHUIListView $tabs) {
47
+
$tabs->setType(PHUIListView::TABBAR_LIST);
48
+
$this->tabs = $tabs;
42
49
return $this;
43
50
}
44
51
···
91
98
$classes[] = 'phui-two-column-fluid';
92
99
}
93
100
101
+
if ($this->tabs) {
102
+
$classes[] = 'with-tabs';
103
+
}
104
+
94
105
if ($this->subheader) {
95
106
$classes[] = 'with-subheader';
96
107
}
···
124
135
'phui-two-column-header', $this->header);
125
136
}
126
137
138
+
$tabs = null;
139
+
if ($this->tabs) {
140
+
$tabs = phutil_tag_div(
141
+
'phui-two-column-tabs', $this->tabs);
142
+
}
143
+
127
144
$subheader = null;
128
145
if ($this->subheader) {
129
146
$subheader = phutil_tag_div(
···
137
154
),
138
155
array(
139
156
$header,
157
+
$tabs,
140
158
$subheader,
141
159
$table,
142
160
$footer,
+71
webroot/rsrc/css/phui/phui-list.css
+71
webroot/rsrc/css/phui/phui-list.css
···
144
144
border: none;
145
145
}
146
146
147
+
/* - Two Column View, Responsive Navigations -----------------------------------
148
+
149
+
Sets a two column page with a responsive, top navbar
150
+
151
+
*/
152
+
153
+
.phui-list-view.phui-list-tabbar {
154
+
list-style: none;
155
+
overflow: hidden;
156
+
}
157
+
158
+
.phui-list-view.phui-list-tabbar > li {
159
+
list-style: none;
160
+
float: left;
161
+
display: block;
162
+
}
163
+
164
+
.phui-list-view.phui-list-tabbar > li > * {
165
+
display: block;
166
+
}
167
+
168
+
.phui-list-tabbar .phui-list-item-href {
169
+
color: {$bluetext};
170
+
padding: 8px 24px;
171
+
line-height: 24px;
172
+
font-weight: bold;
173
+
font-size: {$biggerfontsize};
174
+
border-top: 4px solid #fff;
175
+
}
176
+
177
+
.phui-list-tabbar .phui-list-item-selected .phui-list-item-href {
178
+
color: {$sky};
179
+
border-bottom: 4px solid {$sky};
180
+
}
181
+
182
+
.phui-list-tabbar .phui-list-item-selected .phui-list-item-href
183
+
.phui-icon-view {
184
+
color: {$sky};
185
+
}
186
+
187
+
.device-desktop .phui-list-tabbar .phui-list-item-href:hover {
188
+
color: {$sky};
189
+
border-bottom: 4px solid $fff;
190
+
text-decoration: none;
191
+
}
192
+
193
+
.phui-list-tabbar .phui-list-item-icon {
194
+
height: 20px;
195
+
width: 20px;
196
+
display: none;
197
+
font-size: 20px;
198
+
text-align: center;
199
+
}
200
+
201
+
.device-phone .phui-list-tabbar .phui-list-item-icon {
202
+
display: inline-block;
203
+
}
204
+
205
+
.device-phone .phui-list-tabbar .phui-list-item-name {
206
+
display: none;
207
+
}
208
+
209
+
.device-phone .phui-list-tabbar .phui-list-item-href {
210
+
padding: 8px 16px;
211
+
}
212
+
213
+
.device-phone .phui-list-view.phui-list-navbar > li {
214
+
float: none;
215
+
border: none;
216
+
}
217
+
147
218
/* - Status Colors -------------------------------------------------------------
148
219
149
220
Colors for navbars
+12
webroot/rsrc/css/phui/phui-two-column-view.css
+12
webroot/rsrc/css/phui/phui-two-column-view.css
···
12
12
margin-bottom: 12px;
13
13
}
14
14
15
+
.phui-two-column-view.with-tabs .phui-two-column-header,
15
16
.phui-two-column-view.with-subheader .phui-two-column-header {
16
17
margin-bottom: 0;
17
18
}
···
166
167
.device .phui-two-column-view .phui-property-list-section-header,
167
168
.device .phui-two-column-view .phui-property-list-text-content {
168
169
margin: 0 8px;
170
+
}
171
+
172
+
.phui-two-column-tabs {
173
+
padding: 0 32px;
174
+
margin-bottom: 32px;
175
+
background: #fff;
176
+
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
177
+
}
178
+
179
+
.device-phone .phui-two-column-tabs {
180
+
padding: 0 12px;
169
181
}
170
182
171
183
/* Info View */