@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
Revamp inline commenting UI
Summary:
Rebuilds the UI in Differential commenting. Specifically we look at the following design patterns:
**To the author:**
- The author of the diff should be able to easily identify what comments are done and not done.
- We keep undone comments yellow
- Clicking done turns comment block into 'unsubmitted state'
**To the reviewer:**
- Easier understanding of unsubmitted states
- All conversations to be yellow/important
**Todo**
- Not all color CSS states correct
- Unpulished checkbox support
Test Plan:
Test leaving comments, published and unpublished. Checking Done, unpublished and published. Check delete states.
From the Diff Author's perspective:
{F352094}
For a Diff commenter's perspective:
{F352095}
Reviewers: btrahan, epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T1460, T7660, T7503
Differential Revision: https://secure.phabricator.com/D12171
+599
-310
+15
-10
resources/celerity/map.php
+15
-10
resources/celerity/map.php
···
7
7
*/
8
8
return array(
9
9
'names' => array(
10
-
'core.pkg.css' => '1601392f',
10
+
'core.pkg.css' => '2ff29d1d',
11
11
'core.pkg.js' => '75599122',
12
12
'darkconsole.pkg.js' => '8ab24e01',
13
-
'differential.pkg.css' => '5a0b221c',
13
+
'differential.pkg.css' => '571b1cc1',
14
14
'differential.pkg.js' => 'e324301d',
15
15
'diffusion.pkg.css' => '591664fa',
16
16
'diffusion.pkg.js' => 'bfc0737b',
···
54
54
'rsrc/css/application/countdown/timer.css' => '86b7b0a0',
55
55
'rsrc/css/application/dashboard/dashboard.css' => '17937d22',
56
56
'rsrc/css/application/diff/inline-comment-summary.css' => 'eb5f8e8c',
57
-
'rsrc/css/application/differential/add-comment.css' => 'c478bcaa',
58
-
'rsrc/css/application/differential/changeset-view.css' => 'c5d1e738',
57
+
'rsrc/css/application/differential/add-comment.css' => 'c47f8c40',
58
+
'rsrc/css/application/differential/changeset-view.css' => 'f36406b1',
59
59
'rsrc/css/application/differential/core.css' => '7ac3cabc',
60
+
'rsrc/css/application/differential/phui-inline-comment.css' => '17e89126',
60
61
'rsrc/css/application/differential/results-table.css' => '181aa9d9',
61
-
'rsrc/css/application/differential/revision-comment.css' => '64603753',
62
+
'rsrc/css/application/differential/revision-comment.css' => '024dda6b',
62
63
'rsrc/css/application/differential/revision-history.css' => '0e8eb855',
63
64
'rsrc/css/application/differential/revision-list.css' => 'f3c47d33',
64
65
'rsrc/css/application/differential/table-of-contents.css' => '63f3ef4a',
···
124
125
'rsrc/css/phui/phui-action-list.css' => '9ee9910a',
125
126
'rsrc/css/phui/phui-action-panel.css' => '3ee9afd5',
126
127
'rsrc/css/phui/phui-box.css' => '7b3a2eed',
127
-
'rsrc/css/phui/phui-button.css' => '57eaddc9',
128
+
'rsrc/css/phui/phui-button.css' => '53f55a72',
128
129
'rsrc/css/phui/phui-crumbs-view.css' => '594d719e',
129
130
'rsrc/css/phui/phui-document.css' => '0f83a7df',
130
131
'rsrc/css/phui/phui-feed-story.css' => 'c9f3a0b5',
···
520
521
'conpherence-thread-manager' => 'bb928342',
521
522
'conpherence-update-css' => '1099a660',
522
523
'conpherence-widget-pane-css' => '1979ee8c',
523
-
'differential-changeset-view-css' => 'c5d1e738',
524
+
'differential-changeset-view-css' => 'f36406b1',
524
525
'differential-core-view-css' => '7ac3cabc',
525
526
'differential-inline-comment-editor' => 'b3412377',
526
527
'differential-results-table-css' => '181aa9d9',
527
-
'differential-revision-add-comment-css' => 'c478bcaa',
528
-
'differential-revision-comment-css' => '64603753',
528
+
'differential-revision-add-comment-css' => 'c47f8c40',
529
+
'differential-revision-comment-css' => '024dda6b',
529
530
'differential-revision-history-css' => '0e8eb855',
530
531
'differential-revision-list-css' => 'f3c47d33',
531
532
'differential-table-of-contents-css' => '63f3ef4a',
···
772
773
'phui-action-header-view-css' => '89c497e7',
773
774
'phui-action-panel-css' => '3ee9afd5',
774
775
'phui-box-css' => '7b3a2eed',
775
-
'phui-button-css' => '57eaddc9',
776
+
'phui-button-css' => '53f55a72',
776
777
'phui-calendar-css' => '8675968e',
777
778
'phui-calendar-day-css' => 'de035c8a',
778
779
'phui-calendar-list-css' => 'c1d0ca59',
···
789
790
'phui-image-mask-css' => '5a8b09c8',
790
791
'phui-info-panel-css' => '27ea50a1',
791
792
'phui-info-view-css' => 'c6f0aef8',
793
+
'phui-inline-comment-view-css' => '17e89126',
792
794
'phui-list-view-css' => '2e25ebfb',
793
795
'phui-object-box-css' => 'd68ce5dc',
794
796
'phui-object-item-list-view-css' => '9db65899',
···
1920
1922
'phabricator-prefab',
1921
1923
'multirow-row-manager',
1922
1924
'javelin-json',
1925
+
),
1926
+
'f36406b1' => array(
1927
+
'phui-inline-comment-view-css',
1923
1928
),
1924
1929
'f36e01af' => array(
1925
1930
'javelin-behavior',
+128
-89
src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php
+128
-89
src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php
···
71
71
return $this->objectOwnerPHID;
72
72
}
73
73
74
-
75
-
76
74
public function render() {
77
75
76
+
require_celerity_resource('phui-inline-comment-view-css');
78
77
$inline = $this->inlineComment;
79
78
80
-
$start = $inline->getLineNumber();
81
-
$length = $inline->getLineLength();
82
-
if ($length) {
83
-
$end = $start + $length;
84
-
$line = 'Lines '.number_format($start).'-'.number_format($end);
85
-
} else {
86
-
$line = 'Line '.number_format($start);
87
-
}
79
+
$classes = array(
80
+
'differential-inline-comment',
81
+
);
88
82
89
83
$metadata = array(
90
84
'id' => $inline->getID(),
···
117
111
$is_synthetic = true;
118
112
}
119
113
120
-
$is_draft = false;
121
-
if ($inline->isDraft() && !$is_synthetic) {
122
-
$links[] = pht('Not Submitted Yet');
123
-
$is_draft = true;
114
+
$draft_text = null;
115
+
if (!$is_synthetic) {
116
+
// This display is controlled by CSS
117
+
$draft_text = id(new PHUITagView())
118
+
->setType(PHUITagView::TYPE_SHADE)
119
+
->setName(pht('Unsubmitted'))
120
+
->setSlimShady(true)
121
+
->setShade(PHUITagView::COLOR_RED)
122
+
->addClass('mml inline-draft-text');
124
123
}
125
124
126
-
127
-
// TODO: This stuff is nonfinal, just making it do something.
125
+
// I think this is unused
128
126
if ($inline->getHasReplies()) {
129
-
$links[] = pht('Has Reply');
130
-
$classes[] = 'inline-has-reply';
127
+
$classes[] = 'inline-comment-has-reply';
131
128
}
129
+
// I think this is unused
132
130
if ($inline->getReplyToCommentPHID()) {
133
-
$links[] = pht('Is Reply');
131
+
$classes[] = 'inline-comment-is-reply';
132
+
}
133
+
// Might break?
134
+
if ($this->getCanMarkDone()) {
135
+
$classes[] = 'viewer-is-diff-author';
134
136
}
135
137
138
+
$action_buttons = new PHUIButtonBarView();
139
+
$action_buttons->addClass('mml');
140
+
$nextprev = null;
136
141
if (!$this->preview) {
137
-
$links[] = javelin_tag(
138
-
'a',
139
-
array(
140
-
'href' => '#',
141
-
'mustcapture' => true,
142
-
'sigil' => 'differential-inline-prev',
143
-
),
144
-
pht('Previous'));
142
+
$nextprev = new PHUIButtonBarView();
143
+
$nextprev->addClass('mml');
144
+
$up = id(new PHUIButtonView())
145
+
->setTag('a')
146
+
->setColor(PHUIButtonView::SIMPLE)
147
+
->setTooltip(pht('Previous'))
148
+
->setIconFont('fa-chevron-up')
149
+
->addSigil('differential-inline-prev')
150
+
->setMustCapture(true);
151
+
152
+
$down = id(new PHUIButtonView())
153
+
->setTag('a')
154
+
->setColor(PHUIButtonView::SIMPLE)
155
+
->setTooltip(pht('Next'))
156
+
->setIconFont('fa-chevron-down')
157
+
->addSigil('differential-inline-next')
158
+
->setMustCapture(true);
145
159
146
-
$links[] = javelin_tag(
147
-
'a',
148
-
array(
149
-
'href' => '#',
150
-
'mustcapture' => true,
151
-
'sigil' => 'differential-inline-next',
152
-
),
153
-
pht('Next'));
160
+
$nextprev->addButton($up);
161
+
$nextprev->addButton($down);
154
162
155
163
if ($this->allowReply) {
156
164
···
161
169
// file/line information, and synthetic comments don't have an inline
162
170
// comment ID.
163
171
164
-
$links[] = javelin_tag(
165
-
'a',
166
-
array(
167
-
'href' => '#',
168
-
'mustcapture' => true,
169
-
'sigil' => 'differential-inline-reply',
170
-
),
171
-
pht('Reply'));
172
+
$reply_button = id(new PHUIButtonView())
173
+
->setTag('a')
174
+
->setColor(PHUIButtonView::SIMPLE)
175
+
->setIconFont('fa-reply')
176
+
->setTooltip(pht('Reply'))
177
+
->addSigil('differential-inline-reply')
178
+
->setMustCapture(true);
179
+
$action_buttons->addButton($reply_button);
172
180
}
173
181
174
182
}
···
177
185
$anchor_name = 'inline-'.$inline->getID();
178
186
179
187
if ($this->editable && !$this->preview) {
180
-
$links[] = javelin_tag(
181
-
'a',
182
-
array(
183
-
'href' => '#',
184
-
'mustcapture' => true,
185
-
'sigil' => 'differential-inline-edit',
186
-
),
187
-
pht('Edit'));
188
-
$links[] = javelin_tag(
189
-
'a',
190
-
array(
191
-
'href' => '#',
192
-
'mustcapture' => true,
193
-
'sigil' => 'differential-inline-delete',
194
-
),
195
-
pht('Delete'));
188
+
$edit_button = id(new PHUIButtonView())
189
+
->setTag('a')
190
+
->setColor(PHUIButtonView::SIMPLE)
191
+
->setIconFont('fa-pencil')
192
+
->setTooltip(pht('Edit'))
193
+
->addSigil('differential-inline-edit')
194
+
->setMustCapture(true);
195
+
$action_buttons->addButton($edit_button);
196
+
197
+
$delete_button = id(new PHUIButtonView())
198
+
->setTag('a')
199
+
->setColor(PHUIButtonView::SIMPLE)
200
+
->setIconFont('fa-trash-o')
201
+
->setTooltip(pht('Delete'))
202
+
->addSigil('differential-inline-delete')
203
+
->setMustCapture(true);
204
+
$action_buttons->addButton($delete_button);
205
+
196
206
} else if ($this->preview) {
197
207
$links[] = javelin_tag(
198
208
'a',
199
209
array(
210
+
'class' => 'button simple',
200
211
'meta' => array(
201
212
'anchor' => $anchor_name,
202
213
),
203
214
'sigil' => 'differential-inline-preview-jump',
204
215
),
205
216
pht('Not Visible'));
206
-
$links[] = javelin_tag(
207
-
'a',
208
-
array(
209
-
'href' => '#',
210
-
'mustcapture' => true,
211
-
'sigil' => 'differential-inline-delete',
212
-
),
213
-
pht('Delete'));
217
+
218
+
$delete_button = id(new PHUIButtonView())
219
+
->setTag('a')
220
+
->setColor(PHUIButtonView::SIMPLE)
221
+
->setTooltip(pht('Delete'))
222
+
->setIconFont('fa-trash-o')
223
+
->addSigil('differential-inline-delete')
224
+
->setMustCapture(true);
225
+
$action_buttons->addButton($delete_button);
214
226
}
227
+
228
+
$done_button = null;
215
229
216
230
if (!$is_synthetic) {
217
231
$draft_state = false;
···
241
255
$classes[] = 'inline-state-is-draft';
242
256
}
243
257
244
-
$links[] = javelin_tag(
258
+
$done_input = javelin_tag(
245
259
'input',
246
260
array(
247
261
'type' => 'checkbox',
···
250
264
'class' => 'differential-inline-done',
251
265
'sigil' => 'differential-inline-done',
252
266
));
253
-
}
254
-
255
-
if ($links) {
256
-
$links = phutil_tag(
257
-
'span',
258
-
array('class' => 'differential-inline-comment-links'),
259
-
phutil_implode_html(" \xC2\xB7 ", $links));
260
-
} else {
261
-
$links = null;
267
+
$done_button = phutil_tag(
268
+
'label',
269
+
array(
270
+
'class' => 'differential-inline-done-label '.
271
+
($this->getCanMarkDone() ? null : 'done-is-disabled'),
272
+
),
273
+
array(
274
+
$done_input,
275
+
pht('Done'),
276
+
));
262
277
}
263
278
264
279
$content = $this->markupEngine->getOutput(
···
278
293
'');
279
294
}
280
295
281
-
if ($is_draft) {
296
+
if ($inline->isDraft() && !$is_synthetic) {
282
297
$classes[] = 'differential-inline-comment-unsaved-draft';
283
298
}
284
299
if ($is_synthetic) {
···
286
301
}
287
302
$classes = implode(' ', $classes);
288
303
304
+
$author_owner = null;
289
305
if ($is_synthetic) {
290
306
$author = $inline->getSyntheticAuthor();
291
307
} else {
292
308
$author = $handles[$inline->getAuthorPHID()]->getName();
309
+
if ($inline->getAuthorPHID() == $this->objectOwnerPHID) {
310
+
$author_owner = id(new PHUITagView())
311
+
->setType(PHUITagView::TYPE_SHADE)
312
+
->setName(pht('Author'))
313
+
->setSlimShady(true)
314
+
->setShade(PHUITagView::COLOR_YELLOW)
315
+
->addClass('mml');
316
+
}
293
317
}
294
318
295
-
$line = phutil_tag(
296
-
'span',
297
-
array('class' => 'differential-inline-comment-line'),
298
-
$line);
319
+
$group_left = phutil_tag(
320
+
'div',
321
+
array(
322
+
'class' => 'inline-head-left',
323
+
),
324
+
array(
325
+
$author,
326
+
$author_owner,
327
+
$draft_text,
328
+
));
329
+
330
+
$group_right = phutil_tag(
331
+
'div',
332
+
array(
333
+
'class' => 'inline-head-right',
334
+
),
335
+
array(
336
+
$anchor,
337
+
$links,
338
+
$nextprev,
339
+
$action_buttons,
340
+
$done_button,
341
+
));
299
342
300
343
$markup = javelin_tag(
301
344
'div',
···
305
348
'meta' => $metadata,
306
349
),
307
350
array(
308
-
phutil_tag_div('differential-inline-comment-head', array(
309
-
$anchor,
310
-
$links,
311
-
' ',
312
-
$line,
313
-
' ',
314
-
$author,
351
+
phutil_tag_div('differential-inline-comment-head grouped', array(
352
+
$group_left,
353
+
$group_right,
315
354
)),
316
355
phutil_tag_div(
317
356
'differential-inline-comment-content',
+2
-3
src/infrastructure/diff/view/PHUIDiffInlineCommentEditView.php
+2
-3
src/infrastructure/diff/view/PHUIDiffInlineCommentEditView.php
···
122
122
private function renderBody() {
123
123
$buttons = array();
124
124
125
-
$buttons[] = phutil_tag('button', array(), pht('Ready'));
125
+
$buttons[] = phutil_tag('button', array(), pht('Save Draft'));
126
126
$buttons[] = javelin_tag(
127
127
'button',
128
128
array(
···
148
148
$edit = phutil_tag(
149
149
'div',
150
150
array(
151
-
'class' => 'differential-inline-comment-edit-buttons',
151
+
'class' => 'differential-inline-comment-edit-buttons grouped',
152
152
),
153
153
array(
154
154
$buttons,
155
-
phutil_tag('div', array('style' => 'clear: both'), ''),
156
155
));
157
156
158
157
return javelin_tag(
+1
-1
src/view/phui/PHUIButtonBarView.php
+1
-1
src/view/phui/PHUIButtonBarView.php
+11
-2
webroot/rsrc/css/application/differential/add-comment.css
+11
-2
webroot/rsrc/css/application/differential/add-comment.css
···
3
3
*/
4
4
5
5
#inline-comment-preview {
6
-
margin-left: 60px;
7
-
width: 550px;
6
+
margin-left: 62px;
7
+
width: 640px;
8
+
}
9
+
10
+
#inline-comment-preview .differential-inline-comment {
11
+
margin: 12px 0;
12
+
}
13
+
14
+
#inline-comment-preview
15
+
.differential-inline-comment + .differential-inline-comment {
16
+
margin: 0 0 12px 0;
8
17
}
+54
-194
webroot/rsrc/css/application/differential/changeset-view.css
+54
-194
webroot/rsrc/css/application/differential/changeset-view.css
···
1
1
/**
2
2
* @provides differential-changeset-view-css
3
+
* @requires phui-inline-comment-view-css
3
4
*/
4
5
5
6
.differential-changeset {
···
52
53
}
53
54
54
55
.differential-diff td {
55
-
vertical-align: top;
56
-
white-space: pre-wrap;
57
-
word-wrap: break-word;
58
-
padding: 0 8px 1px;
59
-
line-height: 16px;
56
+
vertical-align: top;
57
+
white-space: pre-wrap;
58
+
word-wrap: break-word;
59
+
padding: 0 8px 1px;
60
+
line-height: 16px;
60
61
}
61
62
62
63
.device .differential-diff td {
63
64
padding: 0 4px 1px;
65
+
}
66
+
67
+
.device .differential-diff .inline td {
68
+
padding: 4px;
64
69
}
65
70
66
71
.differential-diff td .zwsp {
···
69
74
}
70
75
71
76
.differential-diff th {
72
-
text-align: right;
73
-
padding: 2px 6px 0px 0px;
74
-
vertical-align: top;
75
-
background: {$lightbluebackground};
76
-
color: {$bluetext};
77
-
cursor: pointer;
78
-
border-right: 1px solid {$thinblueborder};
79
-
overflow: hidden;
77
+
text-align: right;
78
+
padding: 2px 6px 0px 0px;
79
+
vertical-align: top;
80
+
background: {$lightbluebackground};
81
+
color: {$bluetext};
82
+
cursor: pointer;
83
+
border-right: 1px solid {$thinblueborder};
84
+
overflow: hidden;
80
85
81
-
-moz-user-select: -moz-none;
82
-
-khtml-user-select: none;
83
-
-webkit-user-select: none;
84
-
-ms-user-select: none;
85
-
user-select: none;
86
+
-moz-user-select: -moz-none;
87
+
-khtml-user-select: none;
88
+
-webkit-user-select: none;
89
+
-ms-user-select: none;
90
+
user-select: none;
86
91
}
87
92
88
93
.differential-diff th.selected {
89
-
background: {$hovergrey};
94
+
background-color: {$sh-yellowbackground};
90
95
}
91
96
92
97
.differential-changeset-immutable .differential-diff th {
···
202
207
.differential-diff td.show-more,
203
208
.differential-diff td.differential-shield {
204
209
font: {$basefont};
205
-
font-size: 12px;
210
+
font-size: 12px;
206
211
white-space: normal;
207
212
}
208
213
···
244
249
}
245
250
246
251
.differential-meta-notice {
247
-
border-top: 1px solid {$yellow};
248
-
border-bottom: 1px solid {$yellow};
249
-
background-color: {$lightyellow};
252
+
border-top: 1px solid {$sh-lightyellowborder};
253
+
border-bottom: 1px solid {$sh-lightyellowborder};
254
+
background-color: {$sh-yellowbackground};
250
255
padding: 12px;
251
256
}
252
257
···
266
271
}
267
272
268
273
.differential-reticle {
269
-
background: {$lightyellow};
270
-
border: 1px solid {$yellow};
274
+
background-color: {$sh-yellowbackground};
275
+
border: 1px solid {$sh-yellowborder};
271
276
position: absolute;
272
277
opacity: 0.5;
273
-
top: 0px;
274
-
left: 0px;
278
+
top: 0;
279
+
left: 0;
275
280
box-sizing: border-box;
276
281
}
277
282
278
-
.differential-inline-comment,
279
-
.differential-inline-comment-edit {
280
-
background: #ffffee;
281
-
border: 1px solid #ccccaa;
282
-
font: {$basefont};
283
-
font-size: 12px;
284
-
margin: 6px 0px;
285
-
padding: 8px 10px;
286
-
width: 100%;
287
-
-moz-box-sizing: border-box;
288
-
-webkit-box-sizing: border-box;
289
-
box-sizing: border-box;
290
-
overflow: hidden;
291
-
white-space: normal;
283
+
.differential-diff .inline td {
284
+
padding: 8px 12px;
292
285
}
293
286
294
-
.differential-inline-comment-edit .aphront-form-control-textarea {
295
-
padding: 0;
296
-
}
297
-
298
-
.differential-inline-comment-unsaved-draft {
299
-
background: #f1f1f1;
300
-
border: 1px dashed {$greytext};
301
-
}
302
-
303
-
.differential-inline-comment-head {
304
-
font-weight: bold;
305
-
color: #333333;
306
-
border-bottom: 1px solid rgba(204,204,170,0.37);
307
-
padding-bottom: 4px;
308
-
margin-bottom: 8px;
309
-
}
310
-
311
-
.differential-inline-comment-unsaved-draft .differential-inline-comment-head {
312
-
border-bottom: 1px solid #aaaaaa;
287
+
.differential-loading {
288
+
border-top: 1px solid {$yellow};
289
+
border-bottom: 1px solid {$yellow};
290
+
background-color: {$lightyellow};
291
+
padding: 12px;
292
+
text-align: center;
313
293
}
314
294
315
-
.differential-inline-comment-synthetic {
316
-
background: {$lightblue};
295
+
.differential-collapse-undo {
296
+
color: {$darkbluetext};
297
+
padding: 12px;
317
298
border: 1px solid {$blue};
318
-
}
319
-
320
-
.differential-inline-comment-synthetic .differential-inline-comment-head {
321
-
border-bottom: 1px solid {$blueborder};
322
-
}
323
-
324
-
325
-
.differential-inline-comment-links,
326
-
.differential-inline-comment-line {
327
-
font-weight: normal;
328
-
font-style: italic;
329
-
color: {$greytext};
330
-
float: right;
331
-
white-space: nowrap;
332
-
}
333
-
334
-
.differential-inline-comment-links {
335
-
margin-left: 8px;
336
-
font-style: normal;
299
+
text-align: center;
300
+
background-color: {$lightblue};
337
301
}
338
302
339
-
input.differential-inline-done[type="checkbox"] {
340
-
margin: 0;
341
-
display: inline;
342
-
cursor: pointer;
303
+
.differential-collapse-undo a {
304
+
font-weight: bold;
343
305
}
344
306
345
-
input.differential-inline-done[disabled="disabled"] {
346
-
cursor: auto;
307
+
.differential-file-icon-header .phui-icon-view {
308
+
display: inline-block;
309
+
margin: 0 6px 2px 0;
310
+
vertical-align: middle;
311
+
font-size: 14px;
347
312
}
348
313
349
-
350
-
.differential-inline-comment-edit-body .aphront-form-input {
351
-
margin: 0;
352
-
width: 100%;
314
+
.device-phone .differential-file-icon-header .phui-icon-view {
315
+
display: none;
353
316
}
354
317
355
318
.differential-changeset-buttons {
···
387
350
width: 50%;
388
351
}
389
352
390
-
.differential-inline-undo {
391
-
padding: 4px;
392
-
text-align: center;
393
-
background: {$lightyellow};
394
-
border: 1px solid {$yellow};
395
-
margin: 3px 0 1px;
396
-
color: {$darkgreytext};
397
-
font: {$basefont};
398
-
font-size: 12px;
399
-
}
400
-
401
-
.differential-inline-undo a {
402
-
font-weight: bold;
403
-
}
404
-
405
-
.differential-inline-comment-edit {
406
-
padding: 10px;
407
-
}
408
-
409
-
.differential-inline-comment-edit-buttons {
410
-
padding: 4px 0 0 0;
411
-
}
412
-
413
-
.differential-inline-comment-edit-buttons button {
414
-
float: right;
415
-
margin-left: 6px;
416
-
}
417
-
418
-
.differential-inline-comment-edit-title {
419
-
font-weight: bold;
420
-
color: #333333;
421
-
padding-bottom: 2px;
422
-
margin-bottom: 6px;
423
-
}
424
-
425
-
/* When the inline editor is active, disable all the other inline comment links
426
-
on the page ("Edit", "Reply", "Delete", etc). The goal here is to prevent
427
-
issues where you open up multiple editors and run into problems with
428
-
assumptions about modalness. They are disabled explicitly by the JS, but
429
-
render them in a disabled state as well.
430
-
*/
431
-
.inline-editor-active .differential-inline-comment-links a,
432
-
.inline-editor-active .differential-inline-comment-links a:hover,
433
-
.inline-editor-active .differential-inline-comment-links a:active {
434
-
color: {$lightgreytext};
435
-
cursor: normal;
436
-
text-decoration: none;
437
-
}
438
-
439
353
tr.differential-inline-hidden {
440
354
display: none;
441
355
}
···
443
357
tr.differential-inline-loading {
444
358
opacity: 0.5;
445
359
}
446
-
447
-
448
-
/* In the document, the anchor is positioned inside the inline comment, but
449
-
this makes the browser jump into the comment so the top isn't visible.
450
-
Instead, artificially position it a bit above the comment so we'll jump a
451
-
bit before the comment. This allows us to see the entire comment (and
452
-
generally the commented-on lines, at least in the case of one or two-line
453
-
comments) after the jump.
454
-
*/
455
-
.differential-inline-comment-anchor {
456
-
position: absolute;
457
-
display: block;
458
-
margin-top: -72px;
459
-
}
460
-
461
-
.differential-loading {
462
-
border-top: 1px solid {$yellow};
463
-
border-bottom: 1px solid {$yellow};
464
-
background-color: {$lightyellow};
465
-
padding: 12px;
466
-
text-align: center;
467
-
}
468
-
469
-
.differential-collapse-undo {
470
-
background: #FFE;
471
-
color: #000;
472
-
padding: 1em 0em;
473
-
border: 1px solid #CCA;
474
-
text-align: center;
475
-
background-color: #FFE;
476
-
}
477
-
478
-
.differential-collapse-undo a {
479
-
font-weight: bold;
480
-
}
481
-
482
-
.differential-file-icon-header .phui-icon-view {
483
-
display: inline-block;
484
-
margin: 0 6px 2px 0;
485
-
vertical-align: middle;
486
-
font-size: 14px;
487
-
}
488
-
489
-
.device-phone .differential-file-icon-header .phui-icon-view {
490
-
display: none;
491
-
}
492
-
493
-
.inline-is-done {
494
-
opacity: 0.75;
495
-
}
496
-
497
-
.inline-state-is-draft input.differential-inline-done[type="checkbox"] {
498
-
/* TODO: Possibly style this. */
499
-
}
+381
webroot/rsrc/css/application/differential/phui-inline-comment.css
+381
webroot/rsrc/css/application/differential/phui-inline-comment.css
···
1
+
/**
2
+
* @provides phui-inline-comment-view-css
3
+
*/
4
+
5
+
.differential-comment-list .anchor-target {
6
+
background-color: #ffffdd;
7
+
border-color: #ffff00;
8
+
}
9
+
10
+
/* In the document, the anchor is positioned inside the inline comment, but
11
+
this makes the browser jump into the comment so the top isn't visible.
12
+
Instead, artificially position it a bit above the comment so we'll jump a
13
+
bit before the comment. This allows us to see the entire comment (and
14
+
generally the commented-on lines, at least in the case of one or two-line
15
+
comments) after the jump.
16
+
*/
17
+
.differential-inline-comment-anchor {
18
+
position: absolute;
19
+
display: block;
20
+
margin-top: -72px;
21
+
}
22
+
23
+
.differential-inline-comment-content {
24
+
overflow: auto;
25
+
}
26
+
27
+
.differential-inline-comment,
28
+
.differential-inline-comment-edit {
29
+
background: #fff;
30
+
border: 1px solid {$sh-yellowborder};
31
+
font: {$basefont};
32
+
margin: 0;
33
+
width: 100%;
34
+
-moz-box-sizing: border-box;
35
+
-webkit-box-sizing: border-box;
36
+
box-sizing: border-box;
37
+
overflow: hidden;
38
+
white-space: normal;
39
+
border-radius: 3px;
40
+
}
41
+
42
+
.differential-inline-comment-unsaved-draft {
43
+
border: 1px solid {$lightgreyborder};
44
+
}
45
+
46
+
.differential-inline-comment-head {
47
+
font-weight: bold;
48
+
color: {$darkbluetext};
49
+
border-bottom: 1px solid {$sh-lightyellowborder};
50
+
padding: 4px 5px 2px 12px;
51
+
background-color: {$sh-yellowbackground};
52
+
}
53
+
54
+
.device-desktop .differential-inline-comment .button.simple:hover
55
+
.phui-icon-view,
56
+
.device-desktop .differential-inline-comment .button.simple:hover {
57
+
color: {$sky};
58
+
}
59
+
60
+
.differential-inline-comment-content {
61
+
padding: 12px;
62
+
}
63
+
64
+
.differential-inline-comment-unsaved-draft .differential-inline-comment-head {
65
+
border-bottom: 1px solid {$lightgreyborder};
66
+
background-color: {$lightgreybackground};
67
+
}
68
+
69
+
/* Tighten up spacing on replies */
70
+
.differential-inline-comment.inline-comment-is-reply {
71
+
margin-top: -4px;
72
+
}
73
+
74
+
.differential-inline-comment .inline-head-right {
75
+
float: right;
76
+
}
77
+
78
+
.differential-inline-comment .inline-head-right .button {
79
+
vertical-align: top;
80
+
}
81
+
82
+
.differential-inline-comment .inline-head-left {
83
+
float: left;
84
+
padding: 5px 0;
85
+
}
86
+
87
+
.device-phone .differential-inline-comment .inline-head-left {
88
+
float: none;
89
+
}
90
+
91
+
.device-phone .differential-inline-comment .inline-head-right {
92
+
float: none;
93
+
}
94
+
95
+
.device-phone .differential-inline-comment .inline-head-right .mml {
96
+
margin: 0 4px 0 0;
97
+
}
98
+
99
+
.device-phone .differential-inline-comment .differential-inline-comment-head {
100
+
padding: 0px 0px 4px 8px;
101
+
}
102
+
103
+
104
+
/* - Sythetic Comment ---------------------------------------------------------
105
+
106
+
Comments left by our robot overlords.
107
+
108
+
*/
109
+
110
+
.differential-inline-comment.differential-inline-comment-synthetic {
111
+
border: 1px solid {$blue};
112
+
}
113
+
114
+
.differential-inline-comment.differential-inline-comment-synthetic
115
+
.differential-inline-comment-head {
116
+
border-bottom: 1px solid {$blueborder};
117
+
background-color: {$lightblue};
118
+
}
119
+
120
+
.differential-inline-comment.differential-inline-comment-synthetic
121
+
.button.simple {
122
+
border-color: {$blue};
123
+
}
124
+
125
+
.differential-inline-comment.differential-inline-comment-synthetic
126
+
.button.simple .phui-icon-view {
127
+
color: {$blue};
128
+
}
129
+
130
+
.differential-inline-comment.differential-inline-comment-synthetic
131
+
.differential-inline-comment-head {
132
+
padding-bottom: 4px;
133
+
}
134
+
135
+
136
+
/* - New/Edit Inline Comment --------------------------------------------------
137
+
138
+
Styles for when you are creating or editing an inline comment.
139
+
140
+
*/
141
+
142
+
.differential-inline-comment-edit-body .aphront-form-input {
143
+
margin: 0;
144
+
width: 100%;
145
+
}
146
+
147
+
.differential-inline-comment-edit {
148
+
padding: 8px;
149
+
}
150
+
151
+
.differential-inline-comment-edit-buttons {
152
+
padding: 8px 0 0 0;
153
+
}
154
+
155
+
.differential-inline-comment-edit-buttons button {
156
+
float: right;
157
+
margin-left: 6px;
158
+
}
159
+
160
+
.differential-inline-comment-edit-title {
161
+
font-weight: bold;
162
+
color: {$darkbluetext};
163
+
padding: 4px 0 12px;
164
+
font-size: 14px;
165
+
}
166
+
167
+
.differential-inline-comment-unsaved-draft .phui-button-bar .button {
168
+
border-color: {$lightgreyborder};
169
+
}
170
+
171
+
.differential-inline-comment-unsaved-draft .phui-button-bar .phui-icon-view {
172
+
color: {$lightgreytext};
173
+
}
174
+
175
+
.differential-inline-comment-edit {
176
+
background-color: {$lightgreybackground};
177
+
border: 1px solid {$lightgreyborder};
178
+
}
179
+
180
+
.differential-inline-comment-edit .remarkup-assist-textarea {
181
+
border-left-color: {$lightgreyborder};
182
+
border-right-color: {$lightgreyborder};
183
+
border-bottom-color: {$greyborder};
184
+
}
185
+
186
+
.differential-inline-comment-edit .remarkup-assist-bar {
187
+
border-left-color: {$lightgreyborder};
188
+
border-right-color: {$lightgreyborder};
189
+
border-top-color: {$lightgreyborder};
190
+
}
191
+
192
+
.differential-inline-comment-edit .aphront-form-control-textarea {
193
+
padding: 0;
194
+
}
195
+
196
+
197
+
/* - Action Buttons -----------------------------------------------------------
198
+
199
+
Reply, Edit, Delete, View, Button Bars...
200
+
201
+
*/
202
+
203
+
.differential-inline-comment .differential-inline-done-label,
204
+
.differential-inline-comment .button.simple {
205
+
border-color: {$sh-yellowborder};
206
+
color: {$sh-yellowicon};
207
+
}
208
+
209
+
.differential-inline-comment .button.simple .phui-icon-view {
210
+
color: {$sh-yellowicon};
211
+
}
212
+
213
+
.differential-inline-comment.differential-inline-comment-unsaved-draft
214
+
.differential-inline-done-label,
215
+
.differential-inline-comment.differential-inline-comment-unsaved-draft
216
+
.button.simple {
217
+
border-color: {$lightgreyborder};
218
+
color: {$lightgreytext};
219
+
}
220
+
221
+
.differential-inline-comment.differential-inline-comment-unsaved-draft
222
+
.button.simple .phui-icon-view {
223
+
color: {$lightgreytext};
224
+
}
225
+
226
+
.device-desktop .differential-inline-comment-unsaved-draft
227
+
a.button.simple:hover {
228
+
border-color: {$lightgreyborder};
229
+
}
230
+
231
+
/* - Done Button --------------------------------------------------------------
232
+
233
+
Default colors, hovers, checked styles for the Done Button.
234
+
235
+
*/
236
+
237
+
.differential-inline-done-label {
238
+
border: 1px solid {$sh-yellowborder};
239
+
border-radius: 3px;
240
+
display: inline-block;
241
+
overflow: hidden;
242
+
margin-left: 8px;
243
+
padding: 3px 8px 4px;
244
+
cursor: pointer;
245
+
}
246
+
247
+
.differential-inline-done-label .differential-inline-done {
248
+
margin: 0 6px 0 0;
249
+
display: inline;
250
+
cursor: pointer;
251
+
}
252
+
253
+
input.differential-inline-done[disabled="disabled"] {
254
+
cursor: auto;
255
+
}
256
+
257
+
.device-desktop .differential-inline-comment.inline-is-done
258
+
.differential-inline-done-label:hover,
259
+
.device-desktop .differential-inline-comment
260
+
.differential-inline-done-label:hover {
261
+
background-color: #fff;
262
+
color: {$sky};
263
+
border-color: {$lightblueborder};
264
+
}
265
+
266
+
.differential-inline-comment .differential-inline-comment-head
267
+
.differential-inline-done-label.done-is-disabled {
268
+
color: {$sh-yellowtext};
269
+
border-color: {$sh-yellowborder};
270
+
opacity: .5;
271
+
}
272
+
273
+
.differential-inline-comment.differential-inline-comment-unsaved-draft
274
+
.differential-inline-done-label.done-is-disabled {
275
+
color: {$lightgreytext};
276
+
border-color: {$lightgreyborder};
277
+
opacity: .5;
278
+
}
279
+
280
+
.device-desktop
281
+
.differential-inline-comment.differential-inline-comment-unsaved-draft
282
+
.differential-inline-done-label.done-is-disabled:hover {
283
+
background-color: transparent;
284
+
cursor: auto;
285
+
}
286
+
287
+
.differential-inline-comment
288
+
.differential-inline-done-label.done-is-disabled {
289
+
border-color: {$sh-lightyellowborder};
290
+
color: {$sh-yellowtext};
291
+
}
292
+
293
+
.device-desktop .differential-inline-comment
294
+
.differential-inline-done-label.done-is-disabled:hover {
295
+
background-color: transparent;
296
+
cursor: auto;
297
+
}
298
+
299
+
.differential-inline-comment.inline-is-done
300
+
.differential-inline-done-label {
301
+
background-color: #fff;
302
+
border-color: {$lightblueborder};
303
+
color: {$sky} !important;
304
+
opacity: 1;
305
+
}
306
+
307
+
.device-desktop .differential-inline-comment.inline-is-done
308
+
.differential-inline-done-label:hover {
309
+
background-color: #fff;
310
+
color: {$sky};
311
+
}
312
+
313
+
314
+
/* - Inline Is Done -----------------------------------------------------------
315
+
316
+
Is Done for Diff Author = grey, for Diff Viewer = yellow.
317
+
318
+
*/
319
+
320
+
.differential-inline-comment.inline-is-done {
321
+
border-color: {$lightgreyborder};
322
+
}
323
+
324
+
.differential-inline-comment.inline-is-done
325
+
.differential-inline-comment-head {
326
+
background-color: {$lightgreybackground};
327
+
border-bottom-color: {$lightgreyborder};
328
+
}
329
+
330
+
.differential-inline-comment.inline-is-done .differential-inline-comment-head
331
+
.button.simple,
332
+
.differential-inline-comment.inline-is-done .differential-inline-comment-head
333
+
.differential-inline-done-label {
334
+
border-color: {$lightgreyborder};
335
+
color: {$lightgreytext};
336
+
}
337
+
338
+
.differential-inline-comment.inline-is-done
339
+
.button.simple .phui-icon-view {
340
+
color: {$lightgreytext};
341
+
}
342
+
343
+
344
+
345
+
/* - Unsaved Draft ------------------------------------------------------------
346
+
347
+
The Unsubmitted state of the comment / done checkbox styles.
348
+
349
+
*/
350
+
351
+
.differential-inline-comment .inline-draft-text {
352
+
display: none;
353
+
}
354
+
355
+
.differential-inline-comment.differential-inline-comment-unsaved-draft
356
+
.inline-draft-text {
357
+
display: inline-block;
358
+
}
359
+
360
+
361
+
/* - Undo ---------------------------------------------------------------------
362
+
363
+
A wild undo box appears!
364
+
365
+
*/
366
+
367
+
.differential-inline-undo {
368
+
padding: 8px;
369
+
text-align: center;
370
+
background: {$sh-yellowbackground};
371
+
border: 1px solid {$sh-yellowborder};
372
+
margin: 4px 0;
373
+
color: {$darkgreytext};
374
+
font: {$basefont};
375
+
font-size: 13px;
376
+
border-radius: 3px;
377
+
}
378
+
379
+
.differential-inline-undo a {
380
+
font-weight: bold;
381
+
}
-9
webroot/rsrc/css/application/differential/revision-comment.css
-9
webroot/rsrc/css/application/differential/revision-comment.css