@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
Redesign Comment Box
Summary: Redesign the action comment box for better use in two column, mobile, nuance.
Test Plan: Test in mobile / desktop / tablet, adding and removing actions. Actionless comment boxes, etc.
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: cspeckmim, Korvin
Differential Revision: https://secure.phabricator.com/D16811
+281
-48
+24
-22
resources/celerity/map.php
+24
-22
resources/celerity/map.php
···
9
9
'names' => array(
10
10
'conpherence.pkg.css' => 'cea72e09',
11
11
'conpherence.pkg.js' => '6249a1cf',
12
-
'core.pkg.css' => '4fc9469e',
12
+
'core.pkg.css' => 'c99a9eb4',
13
13
'core.pkg.js' => '1a77dddf',
14
14
'darkconsole.pkg.js' => 'e7393ebb',
15
15
'differential.pkg.css' => 'a4ba74b5',
···
109
109
'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
110
110
'rsrc/css/application/uiexample/example.css' => '528b19de',
111
111
'rsrc/css/core/core.css' => 'd0801452',
112
-
'rsrc/css/core/remarkup.css' => 'cd912f2c',
112
+
'rsrc/css/core/remarkup.css' => '04ab9f17',
113
113
'rsrc/css/core/syntax.css' => '769d3498',
114
114
'rsrc/css/core/z-index.css' => 'd1270942',
115
115
'rsrc/css/diviner/diviner-shared.css' => 'aa3656aa',
···
132
132
'rsrc/css/phui/phui-button.css' => '4a5fbe3d',
133
133
'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
134
134
'rsrc/css/phui/phui-cms.css' => 'be43c8a8',
135
+
'rsrc/css/phui/phui-comment-form.css' => '103cdc49',
135
136
'rsrc/css/phui/phui-crumbs-view.css' => '195ac419',
136
137
'rsrc/css/phui/phui-curtain-view.css' => '947bf1a4',
137
138
'rsrc/css/phui/phui-document-pro.css' => 'ca1fed81',
···
139
140
'rsrc/css/phui/phui-document.css' => 'c32e8dec',
140
141
'rsrc/css/phui/phui-feed-story.css' => '44a9c8e9',
141
142
'rsrc/css/phui/phui-fontkit.css' => '9cda225e',
142
-
'rsrc/css/phui/phui-form-view.css' => '9e22b190',
143
+
'rsrc/css/phui/phui-form-view.css' => 'b5bfd17a',
143
144
'rsrc/css/phui/phui-form.css' => 'aac1d51d',
144
145
'rsrc/css/phui/phui-head-thing.css' => 'fd311e5f',
145
146
'rsrc/css/phui/phui-header-view.css' => '06385974',
···
456
457
'rsrc/js/application/search/behavior-reorder-profile-menu-items.js' => 'e2e0a072',
457
458
'rsrc/js/application/search/behavior-reorder-queries.js' => 'e9581f08',
458
459
'rsrc/js/application/slowvote/behavior-slowvote-embed.js' => '887ad43f',
459
-
'rsrc/js/application/transactions/behavior-comment-actions.js' => '0300eae6',
460
+
'rsrc/js/application/transactions/behavior-comment-actions.js' => '1be09f3f',
460
461
'rsrc/js/application/transactions/behavior-reorder-configs.js' => 'd7a74243',
461
462
'rsrc/js/application/transactions/behavior-reorder-fields.js' => 'b59e1e96',
462
463
'rsrc/js/application/transactions/behavior-show-older-transactions.js' => '94c65b72',
···
545
546
'rsrc/js/phuix/PHUIXActionView.js' => '8cf6d262',
546
547
'rsrc/js/phuix/PHUIXAutocomplete.js' => '6d86ce8b',
547
548
'rsrc/js/phuix/PHUIXDropdownMenu.js' => '82e270da',
548
-
'rsrc/js/phuix/PHUIXFormControl.js' => 'e15869a8',
549
+
'rsrc/js/phuix/PHUIXFormControl.js' => '301b7812',
549
550
'rsrc/js/phuix/PHUIXIconView.js' => 'bff6884b',
550
551
),
551
552
'symbols' => array(
···
612
613
'javelin-behavior-bulk-job-reload' => 'edf8a145',
613
614
'javelin-behavior-calendar-month-view' => 'fe33e256',
614
615
'javelin-behavior-choose-control' => '327a00d1',
615
-
'javelin-behavior-comment-actions' => '0300eae6',
616
+
'javelin-behavior-comment-actions' => '1be09f3f',
616
617
'javelin-behavior-config-reorder-fields' => 'b6993408',
617
618
'javelin-behavior-conpherence-menu' => '7524fcfa',
618
619
'javelin-behavior-conpherence-participant-pane' => '8604caa8',
···
811
812
'phabricator-object-selector-css' => '85ee8ce6',
812
813
'phabricator-phtize' => 'd254d646',
813
814
'phabricator-prefab' => '8d40ae75',
814
-
'phabricator-remarkup-css' => 'cd912f2c',
815
+
'phabricator-remarkup-css' => '04ab9f17',
815
816
'phabricator-search-results-css' => '7dea472c',
816
817
'phabricator-shaped-request' => '7cbe244b',
817
818
'phabricator-slowvote-css' => 'a94b7230',
···
854
855
'phui-calendar-month-css' => '8e10e92c',
855
856
'phui-chart-css' => '6bf6f78e',
856
857
'phui-cms-css' => 'be43c8a8',
858
+
'phui-comment-form-css' => '103cdc49',
857
859
'phui-crumbs-view-css' => '195ac419',
858
860
'phui-curtain-view-css' => '947bf1a4',
859
861
'phui-document-summary-view-css' => '9ca48bdf',
···
863
865
'phui-font-icon-base-css' => '870a7360',
864
866
'phui-fontkit-css' => '9cda225e',
865
867
'phui-form-css' => 'aac1d51d',
866
-
'phui-form-view-css' => '9e22b190',
868
+
'phui-form-view-css' => 'b5bfd17a',
867
869
'phui-head-thing-view-css' => 'fd311e5f',
868
870
'phui-header-view-css' => '06385974',
869
871
'phui-hovercard' => '1bd28176',
···
898
900
'phuix-action-view' => '8cf6d262',
899
901
'phuix-autocomplete' => '6d86ce8b',
900
902
'phuix-dropdown-menu' => '82e270da',
901
-
'phuix-form-control-view' => 'e15869a8',
903
+
'phuix-form-control-view' => '301b7812',
902
904
'phuix-icon-view' => 'bff6884b',
903
905
'policy-css' => '957ea14c',
904
906
'policy-edit-css' => '815c66f7',
···
941
943
'javelin-dom',
942
944
'phabricator-keyboard-shortcut',
943
945
),
944
-
'0300eae6' => array(
945
-
'javelin-behavior',
946
-
'javelin-stratcom',
947
-
'javelin-workflow',
948
-
'javelin-dom',
949
-
'phuix-form-control-view',
950
-
'phuix-icon-view',
951
-
'javelin-behavior-phabricator-gesture',
952
-
),
953
946
'05270951' => array(
954
947
'javelin-util',
955
948
'javelin-magical-init',
···
1081
1074
'javelin-request',
1082
1075
'javelin-uri',
1083
1076
),
1077
+
'1be09f3f' => array(
1078
+
'javelin-behavior',
1079
+
'javelin-stratcom',
1080
+
'javelin-workflow',
1081
+
'javelin-dom',
1082
+
'phuix-form-control-view',
1083
+
'phuix-icon-view',
1084
+
'javelin-behavior-phabricator-gesture',
1085
+
),
1084
1086
'1def2711' => array(
1085
1087
'javelin-install',
1086
1088
'javelin-dom',
···
1147
1149
),
1148
1150
'2ee659ce' => array(
1149
1151
'javelin-install',
1152
+
),
1153
+
'301b7812' => array(
1154
+
'javelin-install',
1155
+
'javelin-dom',
1150
1156
),
1151
1157
'320810c8' => array(
1152
1158
'javelin-install',
···
2062
2068
'javelin-behavior',
2063
2069
'javelin-dom',
2064
2070
'phabricator-prefab',
2065
-
),
2066
-
'e15869a8' => array(
2067
-
'javelin-install',
2068
-
'javelin-dom',
2069
2071
),
2070
2072
'e1d25dfb' => array(
2071
2073
'javelin-behavior',
+50
-16
src/applications/transactions/view/PhabricatorApplicationTransactionCommentView.php
+50
-16
src/applications/transactions/view/PhabricatorApplicationTransactionCommentView.php
···
150
150
->setQueryParam('next', (string)$this->getRequestURI());
151
151
return id(new PHUIObjectBoxView())
152
152
->setFlush(true)
153
-
->setHeaderText(pht('Add Comment'))
154
153
->appendChild(
155
154
javelin_tag(
156
155
'a',
···
183
182
));
184
183
}
185
184
185
+
require_celerity_resource('phui-comment-form-css');
186
+
$image_uri = $user->getProfileImageURI();
187
+
$image = phutil_tag(
188
+
'div',
189
+
array(
190
+
'style' => 'background-image: url('.$image_uri.')',
191
+
'class' => 'phui-comment-image',
192
+
));
193
+
$wedge = phutil_tag(
194
+
'div',
195
+
array(
196
+
'class' => 'phui-timeline-wedge',
197
+
),
198
+
'');
186
199
$comment_box = id(new PHUIObjectBoxView())
187
200
->setFlush(true)
188
-
->setHeaderText($this->headerText)
201
+
->addClass('phui-comment-form-view')
202
+
->appendChild($image)
203
+
->appendChild($wedge)
189
204
->appendChild($comment);
190
205
191
206
return array($comment_box, $preview);
···
287
302
'id' => $input_id,
288
303
)));
289
304
290
-
$form->appendChild(
291
-
id(new AphrontFormSelectControl())
292
-
->setLabel(pht('Actions'))
293
-
->setID($action_id)
294
-
->setOptions($options));
305
+
$invisi_bar = phutil_tag(
306
+
'div',
307
+
array(
308
+
'id' => $place_id,
309
+
'class' => 'phui-comment-control-stack',
310
+
));
295
311
296
-
// This is an empty placeholder node so we know where to insert the
297
-
// new actions.
298
-
$form->appendChild(
299
-
phutil_tag(
300
-
'div',
301
-
array(
302
-
'id' => $place_id,
303
-
)));
312
+
$action_select = id(new AphrontFormSelectControl())
313
+
->addClass('phui-comment-fullwidth-control')
314
+
->addClass('phui-comment-action-control')
315
+
->setID($action_id)
316
+
->setOptions($options);
317
+
318
+
$action_bar = phutil_tag(
319
+
'div',
320
+
array(
321
+
'class' => 'phui-comment-action-bar grouped',
322
+
),
323
+
array(
324
+
$action_select,
325
+
));
326
+
327
+
$form->appendChild($action_bar);
328
+
$form->appendChild($invisi_bar);
329
+
$form->addClass('phui-comment-has-actions');
304
330
305
331
Javelin::initBehavior(
306
332
'comment-actions',
···
318
344
));
319
345
}
320
346
347
+
$submit_button = id(new AphrontFormSubmitControl())
348
+
->addClass('phui-comment-fullwidth-control')
349
+
->addClass('phui-comment-submit-control')
350
+
->setValue($this->getSubmitButtonName());
351
+
321
352
$form
322
353
->appendChild(
323
354
id(new PhabricatorRemarkupControl())
324
355
->setID($this->getCommentID())
356
+
->addClass('phui-comment-fullwidth-control')
357
+
->addClass('phui-comment-textarea-control')
325
358
->setName('comment')
326
-
->setLabel(pht('Comment'))
327
359
->setUser($this->getUser())
328
360
->setValue($draft_comment))
329
361
->appendChild(
330
362
id(new AphrontFormSubmitControl())
363
+
->addClass('phui-comment-fullwidth-control')
364
+
->addClass('phui-comment-submit-control')
331
365
->setValue($this->getSubmitButtonName()));
332
366
333
367
return $form;
+1
-5
webroot/rsrc/css/core/remarkup.css
+1
-5
webroot/rsrc/css/core/remarkup.css
···
487
487
float: left;
488
488
}
489
489
490
-
.remarkup-assist-button:hover {
491
-
background-color: rgba(100,100,100,.15);
492
-
}
493
-
494
490
.remarkup-assist-button:hover .phui-icon-view.phui-font-fa {
495
-
color: {$darkbluetext};
491
+
color: {$sky};
496
492
}
497
493
498
494
.remarkup-assist-button:active {
+194
webroot/rsrc/css/phui/phui-comment-form.css
+194
webroot/rsrc/css/phui/phui-comment-form.css
···
1
+
/**
2
+
* @provides phui-comment-form-css
3
+
*/
4
+
5
+
body .phui-box.phui-object-box.phui-comment-form-view {
6
+
background-color: #fff;
7
+
margin-left: 62px;
8
+
position: relative;
9
+
}
10
+
11
+
body.device .phui-box.phui-object-box.phui-comment-form-view {
12
+
margin-left: 0;
13
+
}
14
+
15
+
.phui-comment-form-view.phui-object-box {
16
+
padding: 0;
17
+
}
18
+
19
+
.phui-comment-form-view .phui-form-view {
20
+
padding: 0;
21
+
}
22
+
23
+
.phui-comment-form-view .phui-comment-image {
24
+
background-repeat: no-repeat;
25
+
position: absolute;
26
+
border-radius: 3px;
27
+
background-size: 100%;
28
+
display: block;
29
+
}
30
+
31
+
.device-desktop .phui-comment-form-view .phui-comment-image {
32
+
width: 50px;
33
+
height: 50px;
34
+
top: 0px;
35
+
left: -62px;
36
+
}
37
+
38
+
.phui-comment-form-view .phui-timeline-wedge {
39
+
top: 26px;
40
+
}
41
+
42
+
.phui-comment-fullwidth-control .aphront-form-input {
43
+
margin: 0;
44
+
width: auto;
45
+
}
46
+
47
+
.phui-comment-form-view .remarkup-assist-bar {
48
+
height: 32px;
49
+
border-color: {$lightblueborder};
50
+
border-top-left-radius: 3px;
51
+
border-top-right-radius: 3px;
52
+
padding: 0 4px;
53
+
}
54
+
55
+
.device-phone .phui-comment-form-view .remarkup-assist-bar,
56
+
.device-phone .phui-comment-form-view .aphront-form-input
57
+
.remarkup-assist-textarea {
58
+
border-radius: 0;
59
+
}
60
+
61
+
.phui-comment-form-view .remarkup-assist-button {
62
+
margin-top: 2px;
63
+
padding: 4px 5px;
64
+
border-radius: 3px;
65
+
}
66
+
67
+
.phui-comment-form-view .remarkup-assist-separator {
68
+
height: 18px;
69
+
margin: 7px 6px;
70
+
}
71
+
72
+
.phui-comment-form-view .aphront-form-input .remarkup-assist-textarea {
73
+
border-color: {$lightblueborder};
74
+
border-top: 1px solid {$thinblueborder};
75
+
padding: 8px;
76
+
border-bottom-left-radius: 3px;
77
+
border-bottom-right-radius: 3px;
78
+
height: 10em;
79
+
background-color: rgba({$alphablue},.02);
80
+
}
81
+
82
+
.phui-comment-form-view .aphront-form-input .remarkup-assist-textarea:focus {
83
+
background-color: #fff;
84
+
}
85
+
86
+
.device-phone .phui-comment-form-view .aphront-form-input
87
+
.remarkup-assist-textarea {
88
+
height: 8em;
89
+
}
90
+
91
+
.phui-comment-form-view .phui-comment-textarea-control {
92
+
padding: 16px 16px 8px 16px;
93
+
}
94
+
95
+
.phui-comment-form-view .phui-comment-has-actions
96
+
.phui-comment-textarea-control {
97
+
padding-top: 0;
98
+
}
99
+
100
+
.device-phone .phui-comment-form-view .phui-comment-textarea-control {
101
+
padding: 0;
102
+
margin: -1px;
103
+
}
104
+
105
+
.phui-comment-action {
106
+
background-color: rgba(239, 243, 252, .75);
107
+
border-radius: 3px;
108
+
margin: 0px 16px 8px;
109
+
padding: 6px;
110
+
}
111
+
112
+
.phui-comment-action + .phui-comment-action {
113
+
margin-top: -4px;
114
+
}
115
+
116
+
.device-phone .phui-comment-action {
117
+
margin: 8px;
118
+
}
119
+
120
+
.phui-comment-form-view .phui-comment-action-bar {
121
+
border-bottom: 1px solid {$thinblueborder};
122
+
background-color: rgba(239, 243, 252, .75);
123
+
padding: 2px 12px 4px 12px;
124
+
margin-bottom: 16px;
125
+
}
126
+
127
+
.device-phone .phui-comment-form-view .phui-comment-action-bar {
128
+
margin: 0;
129
+
padding: 8px;
130
+
}
131
+
132
+
.phui-comment-form-view .phui-comment-submit-control {
133
+
padding: 0 16px 12px;
134
+
}
135
+
136
+
.device-phone .phui-comment-form-view .phui-comment-submit-control {
137
+
margin: 0px;
138
+
padding: 6px 8px 8px;
139
+
}
140
+
141
+
.phui-comment-form-view .phui-comment-action-control {
142
+
float: left;
143
+
}
144
+
145
+
.device-phone .phui-comment-form-view .phui-comment-action-control {
146
+
float: none;
147
+
width: 100%;
148
+
margin: 0;
149
+
padding: 0;
150
+
}
151
+
152
+
.phui-comment-form-view .phui-comment-action-icon {
153
+
float: left;
154
+
font-size: 20px;
155
+
color: {$lightbluetext};
156
+
height: 40px;
157
+
line-height: 40px;
158
+
margin: 0 4px;
159
+
}
160
+
161
+
.device-phone .phui-comment-form-view .phui-comment-action-icon {
162
+
display: none;
163
+
}
164
+
165
+
/* h8rs gonna h8 */
166
+
.phui-comment-form-view select {
167
+
-webkit-appearance: none;
168
+
-moz-appearance: none;
169
+
appearance: none;
170
+
171
+
background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC") no-repeat right 8px center;
172
+
background-size: 8px 10px;
173
+
border-radius: 3px;
174
+
color: {$darkbluetext};
175
+
height: 28px;
176
+
position: relative;
177
+
padding: 0 8px;
178
+
width: 180px;
179
+
}
180
+
181
+
.device-phone .aphront-form-control-submit button {
182
+
width: 100%;
183
+
}
184
+
185
+
.phui-comment-form-view .phui-form-view label.aphront-form-label,
186
+
.phui-comment-form-view .phui-form-view .aphront-form-error {
187
+
height: 26px;
188
+
line-height: 26px;
189
+
padding: 0;
190
+
}
191
+
192
+
.phui-comment-form-view .aphront-form-error .phui-icon-view {
193
+
padding: 4px;
194
+
}
+3
-3
webroot/rsrc/css/phui/phui-form-view.css
+3
-3
webroot/rsrc/css/phui/phui-form-view.css
···
476
476
display: none;
477
477
}
478
478
479
-
480
479
.login-to-comment {
481
480
margin: 12px;
482
481
}
···
533
532
}
534
533
535
534
.aphront-form-error .phui-icon-view {
535
+
float: right;
536
536
color: {$lightgreyborder};
537
-
font-size: 16px;
537
+
font-size: 20px;
538
538
}
539
539
540
540
.device-desktop .aphront-form-error .phui-icon-view:hover {
541
-
color: {$darkgreyborder};
541
+
color: {$red};
542
542
}
+2
-1
webroot/rsrc/js/application/transactions/behavior-comment-actions.js
+2
-1
webroot/rsrc/js/application/transactions/behavior-comment-actions.js
···
58
58
var control = new JX.PHUIXFormControl()
59
59
.setLabel(action.label)
60
60
.setError(remove)
61
-
.setControl(action.type, action.spec);
61
+
.setControl(action.type, action.spec)
62
+
.setClass('phui-comment-action');
62
63
var node = control.getNode();
63
64
64
65
JX.Stratcom.addSigil(node, 'touchable');
+7
-1
webroot/rsrc/js/phuix/PHUIXFormControl.js
+7
-1
webroot/rsrc/js/phuix/PHUIXFormControl.js
···
11
11
_labelNode: null,
12
12
_errorNode: null,
13
13
_inputNode: null,
14
+
_className: null,
14
15
_valueSetCallback: null,
15
16
_valueGetCallback: null,
16
17
···
21
22
22
23
setError: function(error) {
23
24
JX.DOM.setContent(this._getErrorNode(), error);
25
+
return this;
26
+
},
27
+
28
+
setClass: function(className) {
29
+
this._className = className;
24
30
return this;
25
31
},
26
32
···
67
73
if (!this._node) {
68
74
69
75
var attrs = {
70
-
className: 'aphront-form-control grouped'
76
+
className: 'aphront-form-control ' + this._className + ' grouped'
71
77
};
72
78
73
79
var content = [