@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
Increase finesse of inline comments in Pholio
Summary:
- Hide inline areas on mobile, and when the mouse cursor is not on the stage.
- Show small icon markers instead of areas.
- Yellow icons show draft comments; pink icons show final comments.
Test Plan: {F166544}
Reviewers: chad
Reviewed By: chad
Subscribers: epriestley
Differential Revision: https://secure.phabricator.com/D9536
+85
-60
+19
-19
resources/celerity/map.php
+19
-19
resources/celerity/map.php
···
81
81
'rsrc/css/application/phame/phame.css' => '19ecc703',
82
82
'rsrc/css/application/pholio/pholio-edit.css' => 'b9e59b6d',
83
83
'rsrc/css/application/pholio/pholio-inline-comments.css' => '28a2e394',
84
-
'rsrc/css/application/pholio/pholio.css' => 'fbe373cb',
84
+
'rsrc/css/application/pholio/pholio.css' => 'cea40026',
85
85
'rsrc/css/application/phortune/phortune-credit-card-form.css' => 'b25b4beb',
86
86
'rsrc/css/application/phrequent/phrequent.css' => 'ffc185ad',
87
87
'rsrc/css/application/phriction/phriction-document-css.css' => '7d7f0071',
···
389
389
'rsrc/js/application/passphrase/phame-credential-control.js' => '1e1c8a59',
390
390
'rsrc/js/application/phame/phame-post-preview.js' => '61d927ec',
391
391
'rsrc/js/application/pholio/behavior-pholio-mock-edit.js' => '1e1e8bb0',
392
-
'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => '8be2cc3d',
392
+
'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => '9cc93707',
393
393
'rsrc/js/application/phortune/behavior-balanced-payment-form.js' => '3b3e1664',
394
394
'rsrc/js/application/phortune/behavior-stripe-payment-form.js' => '1693a296',
395
395
'rsrc/js/application/phortune/behavior-test-payment-form.js' => 'b3e5ee60',
···
613
613
'javelin-behavior-phabricator-watch-anchor' => '06e05112',
614
614
'javelin-behavior-phame-post-preview' => '61d927ec',
615
615
'javelin-behavior-pholio-mock-edit' => '1e1e8bb0',
616
-
'javelin-behavior-pholio-mock-view' => '8be2cc3d',
616
+
'javelin-behavior-pholio-mock-view' => '9cc93707',
617
617
'javelin-behavior-phui-object-box-tabs' => 'a3e2244e',
618
618
'javelin-behavior-phui-timeline-dropdown-menu' => '4d94d9c3',
619
619
'javelin-behavior-policy-control' => 'f3fef818',
···
739
739
'phabricator-uiexample-reactor-sendproperties' => '551add57',
740
740
'phabricator-zindex-css' => 'efb673ac',
741
741
'phame-css' => '19ecc703',
742
-
'pholio-css' => 'fbe373cb',
742
+
'pholio-css' => 'cea40026',
743
743
'pholio-edit-css' => 'b9e59b6d',
744
744
'pholio-inline-comments-css' => '28a2e394',
745
745
'phortune-credit-card-form' => '2290aeef',
···
1454
1454
2 => 'javelin-stratcom',
1455
1455
3 => 'javelin-uri',
1456
1456
),
1457
-
'8be2cc3d' =>
1458
-
array(
1459
-
0 => 'javelin-behavior',
1460
-
1 => 'javelin-util',
1461
-
2 => 'javelin-stratcom',
1462
-
3 => 'javelin-dom',
1463
-
4 => 'javelin-vector',
1464
-
5 => 'javelin-magical-init',
1465
-
6 => 'javelin-request',
1466
-
7 => 'javelin-history',
1467
-
8 => 'javelin-workflow',
1468
-
9 => 'javelin-mask',
1469
-
10 => 'javelin-behavior-device',
1470
-
11 => 'phabricator-keyboard-shortcut',
1471
-
),
1472
1457
'8ef9ab58' =>
1473
1458
array(
1474
1459
0 => 'javelin-behavior',
···
1541
1526
2 => 'javelin-stratcom',
1542
1527
3 => 'javelin-vector',
1543
1528
4 => 'phabricator-hovercard',
1529
+
),
1530
+
'9cc93707' =>
1531
+
array(
1532
+
0 => 'javelin-behavior',
1533
+
1 => 'javelin-util',
1534
+
2 => 'javelin-stratcom',
1535
+
3 => 'javelin-dom',
1536
+
4 => 'javelin-vector',
1537
+
5 => 'javelin-magical-init',
1538
+
6 => 'javelin-request',
1539
+
7 => 'javelin-history',
1540
+
8 => 'javelin-workflow',
1541
+
9 => 'javelin-mask',
1542
+
10 => 'javelin-behavior-device',
1543
+
11 => 'phabricator-keyboard-shortcut',
1544
1544
),
1545
1545
'9db3d160' =>
1546
1546
array(
+34
-13
webroot/rsrc/css/application/pholio/pholio.css
+34
-13
webroot/rsrc/css/application/pholio/pholio.css
···
68
68
cursor: crosshair;
69
69
}
70
70
71
-
.pholio-mock-select-fill {
72
-
position: absolute;
73
-
box-sizing: border-box;
74
-
border: 2px solid {$indigo};
75
-
border-radius: 2px;
76
-
}
77
-
78
-
.pholio-mock-select-border {
79
-
position: absolute;
80
-
border: 1px dashed #ffffff;
81
-
box-sizing: border-box;
82
-
}
83
-
84
71
.pholio-mock-image-panel {
85
72
padding: 12px;
86
73
border-top: 1px solid #333;
···
151
138
vertical-align: middle;
152
139
padding-left: 8px;
153
140
}
141
+
142
+
.pholio-mock-reticle {
143
+
position: absolute;
144
+
display: none;
145
+
background-repeat: no-repeat;
146
+
background-position: center center;
147
+
box-sizing: border-box;
148
+
}
149
+
150
+
.pholio-mock-reticle-selection {
151
+
background: #ffffff;
152
+
opacity: 0.40;
153
+
border: 1px dashed #000;
154
+
}
155
+
156
+
.pholio-mock-reticle-draft {
157
+
/* TODO: Replace with real icons. */
158
+
background-image: url('/rsrc/image/icon/fatcow/flag_yellow.png');
159
+
}
160
+
161
+
.pholio-mock-reticle-final {
162
+
/* TODO: Replace with real icons. */
163
+
background-image: url('/rsrc/image/icon/fatcow/flag_pink.png');
164
+
}
165
+
166
+
.pholio-mock-reticle-draft:hover,
167
+
.pholio-mock-reticle-final:hover {
168
+
border: 1px solid rgba(255, 255, 255, 0.50);
169
+
}
170
+
171
+
172
+
.device-desktop .mock-has-cursor .pholio-mock-reticle {
173
+
display: block;
174
+
}
+32
-28
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
+32
-28
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
···
21
21
var panel = JX.$(config.panelID);
22
22
var viewport = JX.$(config.viewportID);
23
23
24
-
var selection_border;
25
-
var selection_fill;
24
+
var selection_reticle;
26
25
var active_image;
27
26
28
27
var inline_comments = {};
···
128
127
addCard: add_card
129
128
};
130
129
})();
130
+
131
+
JX.enableDispatch(document.body, 'mouseenter');
132
+
JX.enableDispatch(document.body, 'mouseleave');
133
+
134
+
JX.Stratcom.listen('mouseenter', 'mock-panel', function(e) {
135
+
JX.DOM.alterClass(e.getNode('mock-panel'), 'mock-has-cursor', true);
136
+
});
137
+
138
+
JX.Stratcom.listen('mouseleave', 'mock-panel', function(e) {
139
+
var node = e.getNode('mock-panel');
140
+
if (e.getTarget() == node) {
141
+
JX.DOM.alterClass(node, 'mock-has-cursor', false);
142
+
}
143
+
});
131
144
132
145
function get_image_index(id) {
133
146
for (var ii = 0; ii < config.images.length; ii++) {
···
410
423
continue;
411
424
}
412
425
413
-
var inline_selection = render_reticle_fill();
414
-
stage.addReticle(inline_selection, inline.phid);
415
-
position_inline_rectangle(inline, inline_selection);
416
-
426
+
var classes = [];
417
427
if (!inline.transactionphid) {
418
-
var inline_draft = render_reticle_border();
419
-
stage.addReticle(inline_draft, inline.phid);
420
-
position_inline_rectangle(inline, inline_draft);
428
+
classes.push('pholio-mock-reticle-draft');
429
+
} else {
430
+
classes.push('pholio-mock-reticle-final');
421
431
}
432
+
433
+
var inline_selection = render_reticle(classes);
434
+
stage.addReticle(inline_selection, inline.phid);
435
+
position_inline_rectangle(inline, inline_selection);
422
436
}
423
437
}
424
438
···
452
466
}
453
467
454
468
function redraw_selection() {
455
-
selection_border = selection_border || render_reticle_border();
456
-
selection_fill = selection_fill || render_reticle_fill();
469
+
var classes = ['pholio-mock-reticle-selection'];
470
+
selection_reticle = selection_reticle || render_reticle(classes);
457
471
458
472
var p = JX.$V(
459
473
Math.min(drag_begin.x, drag_end.x),
···
470
484
d.x *= scale;
471
485
d.y *= scale;
472
486
473
-
var nodes = [selection_fill, selection_border];
474
-
for (var ii = 0; ii < nodes.length; ii++) {
475
-
var node = nodes[ii];
476
-
viewport.appendChild(node);
477
-
p.setPos(node);
478
-
d.setDim(node);
479
-
}
487
+
viewport.appendChild(selection_reticle);
488
+
p.setPos(selection_reticle);
489
+
d.setDim(selection_reticle);
480
490
}
481
491
482
492
function clear_selection() {
483
-
selection_fill && JX.DOM.remove(selection_fill);
484
-
selection_border && JX.DOM.remove(selection_border);
493
+
selection_reticle && JX.DOM.remove(selection_reticle);
494
+
selection_reticle = null;
485
495
}
486
496
487
497
function load_inline_comments() {
···
750
760
return info;
751
761
}
752
762
753
-
function render_reticle_border() {
754
-
return JX.$N(
755
-
'div',
756
-
{className: 'pholio-mock-select-border'});
757
-
}
758
-
759
-
function render_reticle_fill() {
763
+
function render_reticle(classes) {
760
764
return JX.$N(
761
765
'div',
762
-
{className: 'pholio-mock-select-fill'});
766
+
{className: ['pholio-mock-reticle'].concat(classes).join(' ')});
763
767
}
764
768
765
769