mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-29 08:50:58 +01:00
Make Pholio selection reticle prettier
Summary:
The selection reticle in Pholio is functional but not very pretty right now. Make it look a little nicer.
- Using `box-sizing: border-box;` allows us to get rid of the `x - 1` and `y - 2` stuff.
- I draw the reticle with two elements: one mostly-transparent which creates a fill, and one fully opaque to create a strong dashed border.
Test Plan: {F31803}
Reviewers: ljalonen, chad
Reviewed By: chad
CC: aran, kchr
Differential Revision: https://secure.phabricator.com/D4836
This commit is contained in:
epriestley
parent
5b39bbe71b
commit
4004621d76
3 changed files with 95 additions and 101 deletions
|
|
@ -639,7 +639,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'aphront-form-view-css' =>
|
||||
array(
|
||||
'uri' => '/res/ec323d34/rsrc/css/aphront/form-view.css',
|
||||
'uri' => '/res/428fbcd8/rsrc/css/aphront/form-view.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
@ -748,7 +748,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'conpherence-header-pane-css' =>
|
||||
array(
|
||||
'uri' => '/res/11c32adc/rsrc/css/application/conpherence/header-pane.css',
|
||||
'uri' => '/res/4b8aebd2/rsrc/css/application/conpherence/header-pane.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
@ -775,7 +775,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'conpherence-update-css' =>
|
||||
array(
|
||||
'uri' => '/res/92094ed7/rsrc/css/application/conpherence/update.css',
|
||||
'uri' => '/res/8e4757b5/rsrc/css/application/conpherence/update.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
@ -1042,19 +1042,6 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'disk' => '/rsrc/js/application/core/behavior-tokenizer.js',
|
||||
),
|
||||
'javelin-behavior-aphront-crop' =>
|
||||
array(
|
||||
'uri' => '/res/cda1eace/rsrc/js/application/core/behavior-crop.js',
|
||||
'type' => 'js',
|
||||
'requires' =>
|
||||
array(
|
||||
0 => 'javelin-behavior',
|
||||
1 => 'javelin-dom',
|
||||
2 => 'javelin-vector',
|
||||
3 => 'javelin-magical-init',
|
||||
),
|
||||
'disk' => '/rsrc/js/application/core/behavior-crop.js',
|
||||
),
|
||||
'javelin-behavior-aphront-drag-and-drop' =>
|
||||
array(
|
||||
'uri' => '/res/3d809b40/rsrc/js/application/core/behavior-drag-and-drop.js',
|
||||
|
|
@ -1119,19 +1106,6 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'disk' => '/rsrc/js/application/diffusion/behavior-audit-preview.js',
|
||||
),
|
||||
'javelin-behavior-conpherence-drag-and-drop-photo' =>
|
||||
array(
|
||||
'uri' => '/res/9e3eb1cd/rsrc/js/application/conpherence/behavior-drag-and-drop-photo.js',
|
||||
'type' => 'js',
|
||||
'requires' =>
|
||||
array(
|
||||
0 => 'javelin-behavior',
|
||||
1 => 'javelin-dom',
|
||||
2 => 'javelin-workflow',
|
||||
3 => 'phabricator-drag-and-drop-file-upload',
|
||||
),
|
||||
'disk' => '/rsrc/js/application/conpherence/behavior-drag-and-drop-photo.js',
|
||||
),
|
||||
'javelin-behavior-conpherence-init' =>
|
||||
array(
|
||||
'uri' => '/res/bd911b43/rsrc/js/application/conpherence/behavior-init.js',
|
||||
|
|
@ -1889,7 +1863,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'javelin-behavior-pholio-mock-view' =>
|
||||
array(
|
||||
'uri' => '/res/5dd61f73/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
|
||||
'uri' => '/res/518a169e/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
|
||||
'type' => 'js',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
@ -1897,7 +1871,8 @@ celerity_register_resource_map(array(
|
|||
1 => 'javelin-stratcom',
|
||||
2 => 'javelin-dom',
|
||||
3 => 'javelin-vector',
|
||||
4 => 'javelin-event',
|
||||
4 => 'javelin-magical-init',
|
||||
5 => 'javelin-request',
|
||||
),
|
||||
'disk' => '/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
|
||||
),
|
||||
|
|
@ -3232,7 +3207,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'pholio-css' =>
|
||||
array(
|
||||
'uri' => '/res/595f2721/rsrc/css/application/pholio/pholio.css',
|
||||
'uri' => '/res/9de6e0b2/rsrc/css/application/pholio/pholio.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
@ -3422,7 +3397,7 @@ celerity_register_resource_map(array(
|
|||
), array(
|
||||
'packages' =>
|
||||
array(
|
||||
'23503cb9' =>
|
||||
'7d347135' =>
|
||||
array(
|
||||
'name' => 'core.pkg.css',
|
||||
'symbols' =>
|
||||
|
|
@ -3466,7 +3441,7 @@ celerity_register_resource_map(array(
|
|||
36 => 'phabricator-object-item-list-view-css',
|
||||
37 => 'global-drag-and-drop-css',
|
||||
),
|
||||
'uri' => '/res/pkg/23503cb9/core.pkg.css',
|
||||
'uri' => '/res/pkg/7d347135/core.pkg.css',
|
||||
'type' => 'css',
|
||||
),
|
||||
'58743fec' =>
|
||||
|
|
@ -3656,19 +3631,19 @@ celerity_register_resource_map(array(
|
|||
'reverse' =>
|
||||
array(
|
||||
'aphront-attached-file-view-css' => 'e30a3fa8',
|
||||
'aphront-crumbs-view-css' => '23503cb9',
|
||||
'aphront-dialog-view-css' => '23503cb9',
|
||||
'aphront-error-view-css' => '23503cb9',
|
||||
'aphront-form-view-css' => '23503cb9',
|
||||
'aphront-crumbs-view-css' => '7d347135',
|
||||
'aphront-dialog-view-css' => '7d347135',
|
||||
'aphront-error-view-css' => '7d347135',
|
||||
'aphront-form-view-css' => '7d347135',
|
||||
'aphront-headsup-action-list-view-css' => 'ec01d039',
|
||||
'aphront-headsup-view-css' => '23503cb9',
|
||||
'aphront-list-filter-view-css' => '23503cb9',
|
||||
'aphront-pager-view-css' => '23503cb9',
|
||||
'aphront-panel-view-css' => '23503cb9',
|
||||
'aphront-table-view-css' => '23503cb9',
|
||||
'aphront-tokenizer-control-css' => '23503cb9',
|
||||
'aphront-tooltip-css' => '23503cb9',
|
||||
'aphront-typeahead-control-css' => '23503cb9',
|
||||
'aphront-headsup-view-css' => '7d347135',
|
||||
'aphront-list-filter-view-css' => '7d347135',
|
||||
'aphront-pager-view-css' => '7d347135',
|
||||
'aphront-panel-view-css' => '7d347135',
|
||||
'aphront-table-view-css' => '7d347135',
|
||||
'aphront-tokenizer-control-css' => '7d347135',
|
||||
'aphront-tooltip-css' => '7d347135',
|
||||
'aphront-typeahead-control-css' => '7d347135',
|
||||
'differential-changeset-view-css' => 'ec01d039',
|
||||
'differential-core-view-css' => 'ec01d039',
|
||||
'differential-inline-comment-editor' => '95d0d865',
|
||||
|
|
@ -3682,7 +3657,7 @@ celerity_register_resource_map(array(
|
|||
'differential-table-of-contents-css' => 'ec01d039',
|
||||
'diffusion-commit-view-css' => 'c8ce2d88',
|
||||
'diffusion-icons-css' => 'c8ce2d88',
|
||||
'global-drag-and-drop-css' => '23503cb9',
|
||||
'global-drag-and-drop-css' => '7d347135',
|
||||
'inline-comment-summary-css' => 'ec01d039',
|
||||
'javelin-aphlict' => '58743fec',
|
||||
'javelin-behavior' => '88225b70',
|
||||
|
|
@ -3752,48 +3727,48 @@ celerity_register_resource_map(array(
|
|||
'javelin-util' => '88225b70',
|
||||
'javelin-vector' => '88225b70',
|
||||
'javelin-workflow' => '88225b70',
|
||||
'lightbox-attachment-css' => '23503cb9',
|
||||
'lightbox-attachment-css' => '7d347135',
|
||||
'maniphest-task-summary-css' => 'e30a3fa8',
|
||||
'maniphest-transaction-detail-css' => 'e30a3fa8',
|
||||
'phabricator-busy' => '58743fec',
|
||||
'phabricator-content-source-view-css' => 'ec01d039',
|
||||
'phabricator-core-buttons-css' => '23503cb9',
|
||||
'phabricator-core-css' => '23503cb9',
|
||||
'phabricator-crumbs-view-css' => '23503cb9',
|
||||
'phabricator-directory-css' => '23503cb9',
|
||||
'phabricator-core-buttons-css' => '7d347135',
|
||||
'phabricator-core-css' => '7d347135',
|
||||
'phabricator-crumbs-view-css' => '7d347135',
|
||||
'phabricator-directory-css' => '7d347135',
|
||||
'phabricator-drag-and-drop-file-upload' => '95d0d865',
|
||||
'phabricator-dropdown-menu' => '58743fec',
|
||||
'phabricator-file-upload' => '58743fec',
|
||||
'phabricator-filetree-view-css' => '23503cb9',
|
||||
'phabricator-flag-css' => '23503cb9',
|
||||
'phabricator-form-view-css' => '23503cb9',
|
||||
'phabricator-header-view-css' => '23503cb9',
|
||||
'phabricator-jump-nav' => '23503cb9',
|
||||
'phabricator-filetree-view-css' => '7d347135',
|
||||
'phabricator-flag-css' => '7d347135',
|
||||
'phabricator-form-view-css' => '7d347135',
|
||||
'phabricator-header-view-css' => '7d347135',
|
||||
'phabricator-jump-nav' => '7d347135',
|
||||
'phabricator-keyboard-shortcut' => '58743fec',
|
||||
'phabricator-keyboard-shortcut-manager' => '58743fec',
|
||||
'phabricator-main-menu-view' => '23503cb9',
|
||||
'phabricator-main-menu-view' => '7d347135',
|
||||
'phabricator-menu-item' => '58743fec',
|
||||
'phabricator-nav-view-css' => '23503cb9',
|
||||
'phabricator-nav-view-css' => '7d347135',
|
||||
'phabricator-notification' => '58743fec',
|
||||
'phabricator-notification-css' => '23503cb9',
|
||||
'phabricator-notification-menu-css' => '23503cb9',
|
||||
'phabricator-object-item-list-view-css' => '23503cb9',
|
||||
'phabricator-notification-css' => '7d347135',
|
||||
'phabricator-notification-menu-css' => '7d347135',
|
||||
'phabricator-object-item-list-view-css' => '7d347135',
|
||||
'phabricator-object-selector-css' => 'ec01d039',
|
||||
'phabricator-paste-file-upload' => '58743fec',
|
||||
'phabricator-prefab' => '58743fec',
|
||||
'phabricator-project-tag-css' => 'e30a3fa8',
|
||||
'phabricator-remarkup-css' => '23503cb9',
|
||||
'phabricator-remarkup-css' => '7d347135',
|
||||
'phabricator-shaped-request' => '95d0d865',
|
||||
'phabricator-side-menu-view-css' => '23503cb9',
|
||||
'phabricator-standard-page-view' => '23503cb9',
|
||||
'phabricator-side-menu-view-css' => '7d347135',
|
||||
'phabricator-standard-page-view' => '7d347135',
|
||||
'phabricator-textareautils' => '58743fec',
|
||||
'phabricator-tooltip' => '58743fec',
|
||||
'phabricator-transaction-view-css' => '23503cb9',
|
||||
'phabricator-zindex-css' => '23503cb9',
|
||||
'sprite-apps-large-css' => '23503cb9',
|
||||
'sprite-gradient-css' => '23503cb9',
|
||||
'sprite-icon-css' => '23503cb9',
|
||||
'sprite-menu-css' => '23503cb9',
|
||||
'syntax-highlighting-css' => '23503cb9',
|
||||
'phabricator-transaction-view-css' => '7d347135',
|
||||
'phabricator-zindex-css' => '7d347135',
|
||||
'sprite-apps-large-css' => '7d347135',
|
||||
'sprite-gradient-css' => '7d347135',
|
||||
'sprite-icon-css' => '7d347135',
|
||||
'sprite-menu-css' => '7d347135',
|
||||
'syntax-highlighting-css' => '7d347135',
|
||||
),
|
||||
));
|
||||
|
|
|
|||
|
|
@ -21,9 +21,18 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.pholio-mock-select {
|
||||
border: 1px solid #FF0000;
|
||||
position: absolute;
|
||||
.pholio-mock-select-border {
|
||||
position: absolute;
|
||||
background: #ffffff;
|
||||
opacity: 0.25;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
|
||||
.pholio-mock-select-fill {
|
||||
position: absolute;
|
||||
border: 1px dashed #ffffff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pholio-mock-wrapper {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
* javelin-stratcom
|
||||
* javelin-dom
|
||||
* javelin-vector
|
||||
* javelin-event
|
||||
* javelin-magical-init
|
||||
* javelin-request
|
||||
*/
|
||||
JX.behavior('pholio-mock-view', function(config) {
|
||||
var is_dragging = false;
|
||||
|
|
@ -13,7 +14,9 @@ JX.behavior('pholio-mock-view', function(config) {
|
|||
var imageData;
|
||||
var startPos;
|
||||
var endPos;
|
||||
var selection;
|
||||
|
||||
var selection_border;
|
||||
var selection_fill;
|
||||
|
||||
JX.Stratcom.listen(
|
||||
'click', // Listen for clicks...
|
||||
|
|
@ -35,26 +38,28 @@ JX.behavior('pholio-mock-view', function(config) {
|
|||
});
|
||||
|
||||
|
||||
function draw_rectangle(node, current, init) {
|
||||
JX.$V(
|
||||
Math.abs(current.x-init.x),
|
||||
Math.abs(current.y-init.y))
|
||||
.setDim(node);
|
||||
function draw_rectangle(nodes, current, init) {
|
||||
for (var ii = 0; ii < nodes.length; ii++) {
|
||||
var node = nodes[ii];
|
||||
|
||||
JX.$V(
|
||||
(current.x-init.x < 0) ? current.x:init.x,
|
||||
(current.y-init.y < 0) ? current.y:init.y)
|
||||
.setPos(node);
|
||||
JX.$V(
|
||||
Math.abs(current.x-init.x),
|
||||
Math.abs(current.y-init.y))
|
||||
.setDim(node);
|
||||
|
||||
JX.$V(
|
||||
(current.x-init.x < 0) ? current.x:init.x,
|
||||
(current.y-init.y < 0) ? current.y:init.y)
|
||||
.setPos(node);
|
||||
}
|
||||
}
|
||||
|
||||
function getRealXY(parent, point) {
|
||||
var pos = {x: (point.x - parent.x), y: (point.y - parent.y)};
|
||||
var dim = JX.Vector.getDim(image);
|
||||
|
||||
if (pos.x < 0) pos.x = 0;
|
||||
else if (pos.x > image.clientWidth) pos.x = image.clientWidth - 1;
|
||||
|
||||
if (pos.y < 0) pos.y = 0;
|
||||
else if (pos.y > image.clientHeight) pos.y = image.clientHeight - 2;
|
||||
pos.x = Math.max(0, Math.min(pos.x, dim.x));
|
||||
pos.y = Math.max(0, Math.min(pos.y, dim.y));
|
||||
|
||||
return pos;
|
||||
}
|
||||
|
|
@ -72,17 +77,18 @@ JX.behavior('pholio-mock-view', function(config) {
|
|||
|
||||
startPos = getRealXY(JX.$V(wrapper),JX.$V(e));
|
||||
|
||||
selection = JX.$N(
|
||||
selection_border = JX.$N(
|
||||
'div',
|
||||
{className: 'pholio-mock-select'}
|
||||
);
|
||||
{className: 'pholio-mock-select-border'});
|
||||
|
||||
selection_fill = JX.$N(
|
||||
'div',
|
||||
{className: 'pholio-mock-select-fill'});
|
||||
|
||||
JX.$V(startPos.x,startPos.y).setPos(selection);
|
||||
|
||||
JX.DOM.appendContent(wrapper, selection);
|
||||
|
||||
JX.$V(startPos.x, startPos.y).setPos(selection_border);
|
||||
JX.$V(startPos.x, startPos.y).setPos(selection_fill);
|
||||
|
||||
JX.DOM.appendContent(wrapper, [selection_border, selection_fill]);
|
||||
});
|
||||
|
||||
JX.enableDispatch(document.body, 'mousemove');
|
||||
|
|
@ -91,7 +97,10 @@ JX.behavior('pholio-mock-view', function(config) {
|
|||
return;
|
||||
}
|
||||
|
||||
draw_rectangle(selection, getRealXY(JX.$V(wrapper), JX.$V(e)), startPos);
|
||||
draw_rectangle(
|
||||
[selection_border, selection_fill],
|
||||
getRealXY(JX.$V(wrapper),
|
||||
JX.$V(e)), startPos);
|
||||
});
|
||||
|
||||
JX.Stratcom.listen(
|
||||
|
|
@ -107,11 +116,12 @@ JX.behavior('pholio-mock-view', function(config) {
|
|||
|
||||
comment = window.prompt("Add your comment");
|
||||
if (comment == null || comment == "") {
|
||||
selection.remove();
|
||||
JX.DOM.remove(selection_border);
|
||||
JX.DOM.remove(selection_fill);
|
||||
return;
|
||||
}
|
||||
|
||||
selection.title = comment;
|
||||
selection_fill.title = comment;
|
||||
|
||||
var saveURL = "/pholio/inline/" + imageData['imageID'] + "/";
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue