revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-29 08:50:58 +01:00
Code Issues Releases Wiki Activity

Make Pholio selection reticle prettier

Browse source 
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 2013-02-07 06:26:36 -08:00
parent 5b39bbe71b
commit 4004621d76
3 changed files with 95 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

119
src/__celerity_resource_map__.php
View file

@ -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',
),
));

13
webroot/rsrc/css/application/pholio/pholio.css
View file

@ -21,9 +21,18 @@
display: inline-block;
}
.pholio-mock-select {
border: 1px solid #FF0000;
.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 {

46
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
View file

@ -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,7 +38,10 @@ JX.behavior('pholio-mock-view', function(config) {
});
function draw_rectangle(node, current, init) {
function draw_rectangle(nodes, current, init) {
for (var ii = 0; ii < nodes.length; ii++) {
var node = nodes[ii];
JX.$V(
Math.abs(current.x-init.x),
Math.abs(current.y-init.y))
@ -46,15 +52,14 @@ JX.behavior('pholio-mock-view', function(config) {
(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'] + "/";