From 4004621d76bea2e1cd0b4ef4bebeea77e29b5d11 Mon Sep 17 00:00:00 2001 From: epriestley Date: Thu, 7 Feb 2013 06:26:36 -0800 Subject: [PATCH] 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 --- src/__celerity_resource_map__.php | 119 +++++++----------- .../rsrc/css/application/pholio/pholio.css | 15 ++- .../pholio/behavior-pholio-mock-view.js | 62 +++++---- 3 files changed, 95 insertions(+), 101 deletions(-) diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index cad7602664..b245c6583f 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -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', ), )); diff --git a/webroot/rsrc/css/application/pholio/pholio.css b/webroot/rsrc/css/application/pholio/pholio.css index 86031e9d5e..9a44602fb2 100644 --- a/webroot/rsrc/css/application/pholio/pholio.css +++ b/webroot/rsrc/css/application/pholio/pholio.css @@ -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 { diff --git a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js index afeabe579a..7b0e0fb1d1 100644 --- a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js +++ b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js @@ -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'] + "/";