mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-18 12:52:42 +01:00
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
This commit is contained in:
epriestley
parent
45b827c66e
commit
fc2c3a5ca8
3 changed files with 85 additions and 60 deletions
|
|
@ -81,7 +81,7 @@ return array(
|
|||
'rsrc/css/application/phame/phame.css' => '19ecc703',
|
||||
'rsrc/css/application/pholio/pholio-edit.css' => 'b9e59b6d',
|
||||
'rsrc/css/application/pholio/pholio-inline-comments.css' => '28a2e394',
|
||||
'rsrc/css/application/pholio/pholio.css' => 'fbe373cb',
|
||||
'rsrc/css/application/pholio/pholio.css' => 'cea40026',
|
||||
'rsrc/css/application/phortune/phortune-credit-card-form.css' => 'b25b4beb',
|
||||
'rsrc/css/application/phrequent/phrequent.css' => 'ffc185ad',
|
||||
'rsrc/css/application/phriction/phriction-document-css.css' => '7d7f0071',
|
||||
|
|
@ -389,7 +389,7 @@ return array(
|
|||
'rsrc/js/application/passphrase/phame-credential-control.js' => '1e1c8a59',
|
||||
'rsrc/js/application/phame/phame-post-preview.js' => '61d927ec',
|
||||
'rsrc/js/application/pholio/behavior-pholio-mock-edit.js' => '1e1e8bb0',
|
||||
'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => '8be2cc3d',
|
||||
'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => '9cc93707',
|
||||
'rsrc/js/application/phortune/behavior-balanced-payment-form.js' => '3b3e1664',
|
||||
'rsrc/js/application/phortune/behavior-stripe-payment-form.js' => '1693a296',
|
||||
'rsrc/js/application/phortune/behavior-test-payment-form.js' => 'b3e5ee60',
|
||||
|
|
@ -613,7 +613,7 @@ return array(
|
|||
'javelin-behavior-phabricator-watch-anchor' => '06e05112',
|
||||
'javelin-behavior-phame-post-preview' => '61d927ec',
|
||||
'javelin-behavior-pholio-mock-edit' => '1e1e8bb0',
|
||||
'javelin-behavior-pholio-mock-view' => '8be2cc3d',
|
||||
'javelin-behavior-pholio-mock-view' => '9cc93707',
|
||||
'javelin-behavior-phui-object-box-tabs' => 'a3e2244e',
|
||||
'javelin-behavior-phui-timeline-dropdown-menu' => '4d94d9c3',
|
||||
'javelin-behavior-policy-control' => 'f3fef818',
|
||||
|
|
@ -739,7 +739,7 @@ return array(
|
|||
'phabricator-uiexample-reactor-sendproperties' => '551add57',
|
||||
'phabricator-zindex-css' => 'efb673ac',
|
||||
'phame-css' => '19ecc703',
|
||||
'pholio-css' => 'fbe373cb',
|
||||
'pholio-css' => 'cea40026',
|
||||
'pholio-edit-css' => 'b9e59b6d',
|
||||
'pholio-inline-comments-css' => '28a2e394',
|
||||
'phortune-credit-card-form' => '2290aeef',
|
||||
|
|
@ -1454,21 +1454,6 @@ return array(
|
|||
2 => 'javelin-stratcom',
|
||||
3 => 'javelin-uri',
|
||||
),
|
||||
'8be2cc3d' =>
|
||||
array(
|
||||
0 => 'javelin-behavior',
|
||||
1 => 'javelin-util',
|
||||
2 => 'javelin-stratcom',
|
||||
3 => 'javelin-dom',
|
||||
4 => 'javelin-vector',
|
||||
5 => 'javelin-magical-init',
|
||||
6 => 'javelin-request',
|
||||
7 => 'javelin-history',
|
||||
8 => 'javelin-workflow',
|
||||
9 => 'javelin-mask',
|
||||
10 => 'javelin-behavior-device',
|
||||
11 => 'phabricator-keyboard-shortcut',
|
||||
),
|
||||
'8ef9ab58' =>
|
||||
array(
|
||||
0 => 'javelin-behavior',
|
||||
|
|
@ -1542,6 +1527,21 @@ return array(
|
|||
3 => 'javelin-vector',
|
||||
4 => 'phabricator-hovercard',
|
||||
),
|
||||
'9cc93707' =>
|
||||
array(
|
||||
0 => 'javelin-behavior',
|
||||
1 => 'javelin-util',
|
||||
2 => 'javelin-stratcom',
|
||||
3 => 'javelin-dom',
|
||||
4 => 'javelin-vector',
|
||||
5 => 'javelin-magical-init',
|
||||
6 => 'javelin-request',
|
||||
7 => 'javelin-history',
|
||||
8 => 'javelin-workflow',
|
||||
9 => 'javelin-mask',
|
||||
10 => 'javelin-behavior-device',
|
||||
11 => 'phabricator-keyboard-shortcut',
|
||||
),
|
||||
'9db3d160' =>
|
||||
array(
|
||||
0 => 'javelin-behavior',
|
||||
|
|
|
|||
|
|
@ -68,19 +68,6 @@
|
|||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.pholio-mock-select-fill {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid {$indigo};
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.pholio-mock-select-border {
|
||||
position: absolute;
|
||||
border: 1px dashed #ffffff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pholio-mock-image-panel {
|
||||
padding: 12px;
|
||||
border-top: 1px solid #333;
|
||||
|
|
@ -151,3 +138,37 @@
|
|||
vertical-align: middle;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.pholio-mock-reticle {
|
||||
position: absolute;
|
||||
display: none;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pholio-mock-reticle-selection {
|
||||
background: #ffffff;
|
||||
opacity: 0.40;
|
||||
border: 1px dashed #000;
|
||||
}
|
||||
|
||||
.pholio-mock-reticle-draft {
|
||||
/* TODO: Replace with real icons. */
|
||||
background-image: url('/rsrc/image/icon/fatcow/flag_yellow.png');
|
||||
}
|
||||
|
||||
.pholio-mock-reticle-final {
|
||||
/* TODO: Replace with real icons. */
|
||||
background-image: url('/rsrc/image/icon/fatcow/flag_pink.png');
|
||||
}
|
||||
|
||||
.pholio-mock-reticle-draft:hover,
|
||||
.pholio-mock-reticle-final:hover {
|
||||
border: 1px solid rgba(255, 255, 255, 0.50);
|
||||
}
|
||||
|
||||
|
||||
.device-desktop .mock-has-cursor .pholio-mock-reticle {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,8 +21,7 @@ JX.behavior('pholio-mock-view', function(config) {
|
|||
var panel = JX.$(config.panelID);
|
||||
var viewport = JX.$(config.viewportID);
|
||||
|
||||
var selection_border;
|
||||
var selection_fill;
|
||||
var selection_reticle;
|
||||
var active_image;
|
||||
|
||||
var inline_comments = {};
|
||||
|
|
@ -129,6 +128,20 @@ JX.behavior('pholio-mock-view', function(config) {
|
|||
};
|
||||
})();
|
||||
|
||||
JX.enableDispatch(document.body, 'mouseenter');
|
||||
JX.enableDispatch(document.body, 'mouseleave');
|
||||
|
||||
JX.Stratcom.listen('mouseenter', 'mock-panel', function(e) {
|
||||
JX.DOM.alterClass(e.getNode('mock-panel'), 'mock-has-cursor', true);
|
||||
});
|
||||
|
||||
JX.Stratcom.listen('mouseleave', 'mock-panel', function(e) {
|
||||
var node = e.getNode('mock-panel');
|
||||
if (e.getTarget() == node) {
|
||||
JX.DOM.alterClass(node, 'mock-has-cursor', false);
|
||||
}
|
||||
});
|
||||
|
||||
function get_image_index(id) {
|
||||
for (var ii = 0; ii < config.images.length; ii++) {
|
||||
if (config.images[ii].id == id) {
|
||||
|
|
@ -410,15 +423,16 @@ JX.behavior('pholio-mock-view', function(config) {
|
|||
continue;
|
||||
}
|
||||
|
||||
var inline_selection = render_reticle_fill();
|
||||
var classes = [];
|
||||
if (!inline.transactionphid) {
|
||||
classes.push('pholio-mock-reticle-draft');
|
||||
} else {
|
||||
classes.push('pholio-mock-reticle-final');
|
||||
}
|
||||
|
||||
var inline_selection = render_reticle(classes);
|
||||
stage.addReticle(inline_selection, inline.phid);
|
||||
position_inline_rectangle(inline, inline_selection);
|
||||
|
||||
if (!inline.transactionphid) {
|
||||
var inline_draft = render_reticle_border();
|
||||
stage.addReticle(inline_draft, inline.phid);
|
||||
position_inline_rectangle(inline, inline_draft);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -452,8 +466,8 @@ JX.behavior('pholio-mock-view', function(config) {
|
|||
}
|
||||
|
||||
function redraw_selection() {
|
||||
selection_border = selection_border || render_reticle_border();
|
||||
selection_fill = selection_fill || render_reticle_fill();
|
||||
var classes = ['pholio-mock-reticle-selection'];
|
||||
selection_reticle = selection_reticle || render_reticle(classes);
|
||||
|
||||
var p = JX.$V(
|
||||
Math.min(drag_begin.x, drag_end.x),
|
||||
|
|
@ -470,18 +484,14 @@ JX.behavior('pholio-mock-view', function(config) {
|
|||
d.x *= scale;
|
||||
d.y *= scale;
|
||||
|
||||
var nodes = [selection_fill, selection_border];
|
||||
for (var ii = 0; ii < nodes.length; ii++) {
|
||||
var node = nodes[ii];
|
||||
viewport.appendChild(node);
|
||||
p.setPos(node);
|
||||
d.setDim(node);
|
||||
}
|
||||
viewport.appendChild(selection_reticle);
|
||||
p.setPos(selection_reticle);
|
||||
d.setDim(selection_reticle);
|
||||
}
|
||||
|
||||
function clear_selection() {
|
||||
selection_fill && JX.DOM.remove(selection_fill);
|
||||
selection_border && JX.DOM.remove(selection_border);
|
||||
selection_reticle && JX.DOM.remove(selection_reticle);
|
||||
selection_reticle = null;
|
||||
}
|
||||
|
||||
function load_inline_comments() {
|
||||
|
|
@ -750,16 +760,10 @@ JX.behavior('pholio-mock-view', function(config) {
|
|||
return info;
|
||||
}
|
||||
|
||||
function render_reticle_border() {
|
||||
function render_reticle(classes) {
|
||||
return JX.$N(
|
||||
'div',
|
||||
{className: 'pholio-mock-select-border'});
|
||||
}
|
||||
|
||||
function render_reticle_fill() {
|
||||
return JX.$N(
|
||||
'div',
|
||||
{className: 'pholio-mock-select-fill'});
|
||||
{className: ['pholio-mock-reticle'].concat(classes).join(' ')});
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue