@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
Approximately rough in persistent chat column very roughly
Summary:
Ref T7014. This is very rough and not hooked up to anything, but gets a couple of the layout pieces in place so we can (a) see that it looks like it'll kinda work; (b) look for problematic interactions and (c) you can fix my mangling of your design.
NOTE: Press "\" to toggle the column.
Test Plan:
Feels pretty good to me?
{F275722}
Reviewers: btrahan, chad
Reviewed By: chad
Subscribers: epriestley
Maniphest Tasks: T7014
Differential Revision: https://secure.phabricator.com/D11497
+257
-3
+12
-3
resources/celerity/map.php
+12
-3
resources/celerity/map.php
···
7
7
*/
8
8
return array(
9
9
'names' => array(
10
-
'core.pkg.css' => '30ec4610',
10
+
'core.pkg.css' => 'f020a5d6',
11
11
'core.pkg.js' => '55716d41',
12
12
'darkconsole.pkg.js' => '8ab24e01',
13
13
'differential.pkg.css' => '8af45893',
···
39
39
'rsrc/css/application/base/main-menu-view.css' => '7bb9c588',
40
40
'rsrc/css/application/base/notification-menu.css' => '6aa0a74b',
41
41
'rsrc/css/application/base/phabricator-application-launch-view.css' => '16ca323f',
42
-
'rsrc/css/application/base/standard-page-view.css' => '661ae3e3',
42
+
'rsrc/css/application/base/standard-page-view.css' => '8db344ee',
43
43
'rsrc/css/application/chatlog/chatlog.css' => '852140ff',
44
44
'rsrc/css/application/config/config-options.css' => '7fedf08b',
45
45
'rsrc/css/application/config/config-template.css' => '25d446d6',
···
342
342
'rsrc/js/application/aphlict/behavior-aphlict-status.js' => 'ea681761',
343
343
'rsrc/js/application/auth/behavior-persona-login.js' => '9414ff18',
344
344
'rsrc/js/application/config/behavior-reorder-fields.js' => '14a827de',
345
+
'rsrc/js/application/conpherence/behavior-durable-column.js' => 'acad7376',
345
346
'rsrc/js/application/conpherence/behavior-menu.js' => 'f0a41b9f',
346
347
'rsrc/js/application/conpherence/behavior-pontificate.js' => '2f6efe18',
347
348
'rsrc/js/application/conpherence/behavior-widget-pane.js' => '40b1ff90',
···
574
575
'javelin-behavior-diffusion-locate-file' => '6d3e1947',
575
576
'javelin-behavior-diffusion-pull-lastmodified' => '2b228192',
576
577
'javelin-behavior-doorkeeper-tag' => 'e5822781',
578
+
'javelin-behavior-durable-column' => 'acad7376',
577
579
'javelin-behavior-error-log' => '6882e80a',
578
580
'javelin-behavior-fancy-datepicker' => 'c51ae228',
579
581
'javelin-behavior-global-drag-and-drop' => '07f199d8',
···
731
733
'phabricator-side-menu-view-css' => '7e8c6341',
732
734
'phabricator-slowvote-css' => '266df6a1',
733
735
'phabricator-source-code-view-css' => '7d346aa4',
734
-
'phabricator-standard-page-view' => '661ae3e3',
736
+
'phabricator-standard-page-view' => '8db344ee',
735
737
'phabricator-textareautils' => '5c93c52c',
736
738
'phabricator-title' => '5c1c758c',
737
739
'phabricator-tooltip' => '1d298e3a',
···
1600
1602
'javelin-dom',
1601
1603
'javelin-util',
1602
1604
'phabricator-prefab',
1605
+
),
1606
+
'acad7376' => array(
1607
+
'javelin-behavior',
1608
+
'javelin-dom',
1609
+
'javelin-stratcom',
1610
+
'javelin-scrollbar',
1611
+
'phabricator-keyboard-shortcut',
1603
1612
),
1604
1613
'b07b009f' => array(
1605
1614
'javelin-behavior',
+2
src/__phutil_library_map__.php
+2
src/__phutil_library_map__.php
···
1137
1137
'PHUICrumbsView' => 'view/phui/PHUICrumbsView.php',
1138
1138
'PHUIDocumentExample' => 'applications/uiexample/examples/PHUIDocumentExample.php',
1139
1139
'PHUIDocumentView' => 'view/phui/PHUIDocumentView.php',
1140
+
'PHUIDurableColumn' => 'view/phui/PHUIDurableColumn.php',
1140
1141
'PHUIFeedStoryExample' => 'applications/uiexample/examples/PHUIFeedStoryExample.php',
1141
1142
'PHUIFeedStoryView' => 'view/phui/PHUIFeedStoryView.php',
1142
1143
'PHUIFormDividerControl' => 'view/form/control/PHUIFormDividerControl.php',
···
4315
4316
'PHUICrumbsView' => 'AphrontView',
4316
4317
'PHUIDocumentExample' => 'PhabricatorUIExample',
4317
4318
'PHUIDocumentView' => 'AphrontTagView',
4319
+
'PHUIDurableColumn' => 'AphrontTagView',
4318
4320
'PHUIFeedStoryExample' => 'PhabricatorUIExample',
4319
4321
'PHUIFeedStoryView' => 'AphrontView',
4320
4322
'PHUIFormDividerControl' => 'AphrontFormControl',
+16
src/view/page/PhabricatorStandardPageView.php
+16
src/view/page/PhabricatorStandardPageView.php
···
16
16
private $pageObjects = array();
17
17
private $applicationMenu;
18
18
private $showFooter = true;
19
+
private $showDurableColumn = true;
19
20
20
21
public function setShowFooter($show_footer) {
21
22
$this->showFooter = $show_footer;
···
71
72
foreach ($objs as $obj) {
72
73
$this->pageObjects[] = $obj;
73
74
}
75
+
}
76
+
77
+
public function setShowDurableColumn($show) {
78
+
$this->showDurableColumn = $show;
79
+
return $this;
80
+
}
81
+
82
+
public function getShowDurableColumn() {
83
+
return $this->showDurableColumn;
74
84
}
75
85
76
86
public function getTitle() {
···
364
374
)),
365
375
));
366
376
377
+
$durable_column = null;
378
+
if ($this->getShowDurableColumn()) {
379
+
$durable_column = new PHUIDurableColumn();
380
+
}
381
+
367
382
return phutil_tag(
368
383
'div',
369
384
array(
···
371
386
),
372
387
array(
373
388
$main_page,
389
+
$durable_column,
374
390
));
375
391
}
376
392
+106
src/view/phui/PHUIDurableColumn.php
+106
src/view/phui/PHUIDurableColumn.php
···
1
+
<?php
2
+
3
+
final class PHUIDurableColumn extends AphrontTagView {
4
+
5
+
protected function getTagAttributes() {
6
+
return array(
7
+
'id' => 'durable-column',
8
+
'class' => 'phui-durable-column',
9
+
);
10
+
}
11
+
12
+
protected function getTagContent() {
13
+
Javelin::initBehavior('durable-column');
14
+
15
+
$classes = array();
16
+
$classes[] = 'phui-durable-column-header';
17
+
$classes[] = 'sprite-main-header';
18
+
$classes[] = 'main-header-'.PhabricatorEnv::getEnvConfig('ui.header-color');
19
+
20
+
$header = phutil_tag(
21
+
'div',
22
+
array(
23
+
'class' => implode(' ', $classes),
24
+
),
25
+
phutil_tag(
26
+
'div',
27
+
array(
28
+
'class' => 'phui-durable-column-header-text',
29
+
),
30
+
pht('Column Prototype')));
31
+
32
+
$icon_bar = phutil_tag(
33
+
'div',
34
+
array(
35
+
'class' => 'phui-durable-column-icon-bar',
36
+
),
37
+
null); // <-- TODO: Icon buttons go here.
38
+
39
+
$copy = pht(
40
+
'This is a very early prototype of a persistent column. It is not '.
41
+
'expected to work yet, and leaving it open will activate other new '.
42
+
'features which will break things. Press "\\" (backslash) on your '.
43
+
'keyboard to close it now.');
44
+
45
+
$content = phutil_tag(
46
+
'div',
47
+
array(
48
+
'class' => 'phui-durable-column-main',
49
+
),
50
+
phutil_tag(
51
+
'div',
52
+
array(
53
+
'id' => 'phui-durable-column-content',
54
+
'class' => 'phui-durable-column-frame',
55
+
),
56
+
phutil_tag(
57
+
'div',
58
+
array(
59
+
'class' => 'phui-durable-column-content',
60
+
),
61
+
$copy)));
62
+
63
+
$input = phutil_tag(
64
+
'textarea',
65
+
array(
66
+
'class' => 'phui-durable-column-textarea',
67
+
'placeholder' => pht('Box for text...'),
68
+
));
69
+
70
+
$footer = phutil_tag(
71
+
'div',
72
+
array(
73
+
'class' => 'phui-durable-column-footer',
74
+
),
75
+
array(
76
+
phutil_tag(
77
+
'button',
78
+
array(
79
+
'class' => 'grey',
80
+
),
81
+
pht('Send')),
82
+
phutil_tag(
83
+
'div',
84
+
array(
85
+
'class' => 'phui-durable-column-status',
86
+
),
87
+
pht('Status Text')),
88
+
));
89
+
90
+
return array(
91
+
$header,
92
+
phutil_tag(
93
+
'div',
94
+
array(
95
+
'class' => 'phui-durable-column-body',
96
+
),
97
+
array(
98
+
$icon_bar,
99
+
$content,
100
+
$input,
101
+
$footer,
102
+
)),
103
+
);
104
+
}
105
+
106
+
}
+94
webroot/rsrc/css/application/base/standard-page-view.css
+94
webroot/rsrc/css/application/base/standard-page-view.css
···
199
199
position: absolute;
200
200
left: -50px;
201
201
}
202
+
203
+
.with-durable-column {
204
+
margin-right: 300px;
205
+
}
206
+
207
+
.phui-durable-column {
208
+
position: absolute;
209
+
top: 0;
210
+
bottom: 0;
211
+
right: 0;
212
+
width: 300px;
213
+
background: #ffffff;
214
+
display: none;
215
+
}
216
+
217
+
.phui-durable-column-header {
218
+
height: 44px;
219
+
border-left: 1px solid #000000;
220
+
}
221
+
222
+
.phui-durable-column-header-text {
223
+
padding: 12px 16px;
224
+
font-size: 15px;
225
+
color: {$lightgreytext};
226
+
}
227
+
228
+
.phui-durable-column-icon-bar {
229
+
height: 34px;
230
+
padding: 5px 16px;
231
+
border-bottom: 1px solid {$lightblueborder};
232
+
}
233
+
234
+
.phui-durable-column-body {
235
+
position: absolute;
236
+
top: 44px;
237
+
bottom: 0;
238
+
right: 0;
239
+
left: 0;
240
+
border-left: 1px solid {$lightgreyborder};
241
+
}
242
+
243
+
.phui-durable-column-main {
244
+
position: absolute;
245
+
top: 44px;
246
+
bottom: 144px;
247
+
left: 0;
248
+
right: 0;
249
+
overflow: hidden;
250
+
}
251
+
252
+
.phui-durable-column-content {
253
+
padding: 8px 16px;
254
+
}
255
+
256
+
.phui-durable-column-textarea {
257
+
position: absolute;
258
+
left: 0;
259
+
right: 0;
260
+
bottom: 44px;
261
+
height: 100px;
262
+
margin: 0;
263
+
border-width: 1px 0;
264
+
border-style: solid;
265
+
border-top-color: {$lightblueborder};
266
+
border-bottom-color: {$lightblueborder};
267
+
padding: 8px 16px;
268
+
resize: none;
269
+
}
270
+
271
+
.phui-durable-column-textarea:focus {
272
+
outline: 0;
273
+
border-top-color: {$sky};
274
+
border-bottom-color: {$sky};
275
+
box-shadow: none;
276
+
}
277
+
278
+
.phui-durable-column-footer {
279
+
position: absolute;
280
+
height: 28px;
281
+
padding: 8px 16px;
282
+
left: 0;
283
+
right: 0;
284
+
bottom: 0;
285
+
}
286
+
287
+
.phui-durable-column-footer button {
288
+
float: right;
289
+
}
290
+
291
+
.phui-durable-column-status {
292
+
vertical-align: middle;
293
+
line-height: 28px;
294
+
color: {$lightgreytext};
295
+
}
+27
webroot/rsrc/js/application/conpherence/behavior-durable-column.js
+27
webroot/rsrc/js/application/conpherence/behavior-durable-column.js
···
1
+
/**
2
+
* @provides javelin-behavior-durable-column
3
+
* @requires javelin-behavior
4
+
* javelin-dom
5
+
* javelin-stratcom
6
+
* javelin-scrollbar
7
+
* phabricator-keyboard-shortcut
8
+
*/
9
+
10
+
JX.behavior('durable-column', function() {
11
+
12
+
var frame = JX.$('phabricator-standard-page');
13
+
var show = false;
14
+
15
+
new JX.KeyboardShortcut('\\', 'Toggle Column (Prototype)')
16
+
.setHandler(function() {
17
+
show = !show;
18
+
JX.DOM.alterClass(frame, 'with-durable-column', show);
19
+
JX.$('durable-column').style.display = (show ? 'block' : 'none');
20
+
JX.Stratcom.invoke('resize');
21
+
})
22
+
.register();
23
+
24
+
new JX.Scrollbar(JX.$('phui-durable-column-content'));
25
+
26
+
27
+
});