diff --git a/resources/celerity/map.php b/resources/celerity/map.php --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -179,7 +179,7 @@ 'rsrc/css/phui/workboards/phui-workboard-color.css' => 'e86de308', 'rsrc/css/phui/workboards/phui-workboard.css' => '74fc9d98', 'rsrc/css/phui/workboards/phui-workcard.css' => '9e9eb0df', - 'rsrc/css/phui/workboards/phui-workpanel.css' => '4e4ec9f0', + 'rsrc/css/phui/workboards/phui-workpanel.css' => 'f43b8c7f', 'rsrc/css/sprite-login.css' => '18b368a6', 'rsrc/css/sprite-tokens.css' => 'f1896dc5', 'rsrc/css/syntax/syntax-default.css' => '055fc231', @@ -409,7 +409,7 @@ 'rsrc/js/application/phortune/phortune-credit-card-form.js' => 'd12d214f', 'rsrc/js/application/policy/behavior-policy-control.js' => '0eaa33a9', 'rsrc/js/application/policy/behavior-policy-rule-editor.js' => '9347f172', - 'rsrc/js/application/projects/WorkboardBoard.js' => '3ba8e6ad', + 'rsrc/js/application/projects/WorkboardBoard.js' => '223af34e', 'rsrc/js/application/projects/WorkboardCard.js' => '0392a5d8', 'rsrc/js/application/projects/WorkboardCardTemplate.js' => '2a61f8d4', 'rsrc/js/application/projects/WorkboardColumn.js' => 'c3d24e63', @@ -737,7 +737,7 @@ 'javelin-view-renderer' => '9aae2b66', 'javelin-view-visitor' => '308f9fe4', 'javelin-websocket' => 'fdc13e4e', - 'javelin-workboard-board' => '3ba8e6ad', + 'javelin-workboard-board' => '223af34e', 'javelin-workboard-card' => '0392a5d8', 'javelin-workboard-card-template' => '2a61f8d4', 'javelin-workboard-column' => 'c3d24e63', @@ -869,7 +869,7 @@ 'phui-workboard-color-css' => 'e86de308', 'phui-workboard-view-css' => '74fc9d98', 'phui-workcard-view-css' => '9e9eb0df', - 'phui-workpanel-view-css' => '4e4ec9f0', + 'phui-workpanel-view-css' => 'f43b8c7f', 'phuix-action-list-view' => 'c68f183f', 'phuix-action-view' => 'aaa08f3b', 'phuix-autocomplete' => '8f139ef0', @@ -1073,6 +1073,18 @@ 'javelin-behavior', 'javelin-request', ), + '223af34e' => array( + 'javelin-install', + 'javelin-dom', + 'javelin-util', + 'javelin-stratcom', + 'javelin-workflow', + 'phabricator-draggable-list', + 'javelin-workboard-column', + 'javelin-workboard-header-template', + 'javelin-workboard-card-template', + 'javelin-workboard-order-template', + ), '225bbb98' => array( 'javelin-install', 'javelin-reactor', @@ -1227,18 +1239,6 @@ 'javelin-behavior', 'phabricator-prefab', ), - '3ba8e6ad' => array( - 'javelin-install', - 'javelin-dom', - 'javelin-util', - 'javelin-stratcom', - 'javelin-workflow', - 'phabricator-draggable-list', - 'javelin-workboard-column', - 'javelin-workboard-header-template', - 'javelin-workboard-card-template', - 'javelin-workboard-order-template', - ), '3dc5ad43' => array( 'javelin-behavior', 'javelin-stratcom', @@ -1351,9 +1351,6 @@ 'phuix-icon-view', 'javelin-behavior-phabricator-gesture', ), - '4e4ec9f0' => array( - 'phui-workcard-view-css', - ), '4e61fa88' => array( 'javelin-behavior', 'javelin-aphlict', @@ -2144,6 +2141,9 @@ 'phabricator-darklog', 'phabricator-darkmessage', ), + 'f43b8c7f' => array( + 'phui-workcard-view-css', + ), 'f51e9c17' => array( 'javelin-behavior', 'javelin-stratcom', diff --git a/webroot/rsrc/css/phui/workboards/phui-workpanel.css b/webroot/rsrc/css/phui/workboards/phui-workpanel.css --- a/webroot/rsrc/css/phui/workboards/phui-workpanel.css +++ b/webroot/rsrc/css/phui/workboards/phui-workpanel.css @@ -189,10 +189,7 @@ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); border: 1px solid {$lightblueborder}; padding: 4px 0; -} - -.workboard-drop-preview:hover { - opacity: 0.25; + background: #fff; } .workboard-drop-preview li { @@ -225,3 +222,18 @@ background: {$blue}; color: #fff; } + +.workboard-drop-preview-fade { + animation: 0.1s workboard-drop-preview-fade-out; + opacity: 0.25; +} + +@keyframes workboard-drop-preview-fade-out { + 0% { + opacity: 1; + } + + 100% { + opacity: 0.25; + } +} diff --git a/webroot/rsrc/js/application/projects/WorkboardBoard.js b/webroot/rsrc/js/application/projects/WorkboardBoard.js --- a/webroot/rsrc/js/application/projects/WorkboardBoard.js +++ b/webroot/rsrc/js/application/projects/WorkboardBoard.js @@ -43,6 +43,8 @@ _dropPreviewListNode: null, _previewPHID: null, _hidePreivew: false, + _previewPositionVector: null, + _previewDimState: false, getRoot: function() { return this._root; @@ -148,6 +150,39 @@ var on_out = JX.bind(this, this._hideTriggerPreview); JX.Stratcom.listen('mouseover', 'trigger-preview', on_over); JX.Stratcom.listen('mouseout', 'trigger-preview', on_out); + + var on_move = JX.bind(this, this._dimPreview); + JX.Stratcom.listen('mousemove', null, on_move); + }, + + _dimPreview: function(e) { + var p = this._previewPositionVector; + if (!p) { + return; + } + + // When the mouse cursor gets near the drop preview element, fade it + // out so you can see through it. We can't do this with ":hover" because + // we disable cursor events. + + var cursor = JX.$V(e); + var margin = 64; + + var near_x = (cursor.x > (p.x - margin)); + var near_y = (cursor.y > (p.y - margin)); + var should_dim = (near_x && near_y); + + this._setPreviewDimState(should_dim); + }, + + _setPreviewDimState: function(is_dim) { + if (is_dim === this._previewDimState) { + return; + } + + this._previewDimState = is_dim; + var node = this._getDropPreviewNode(); + JX.DOM.alterClass(node, 'workboard-drop-preview-fade', is_dim); }, _showTriggerPreview: function(e) { @@ -325,6 +360,7 @@ if (!effects.length) { JX.DOM.remove(node); + this._previewPositionVector = null; return; } @@ -336,6 +372,10 @@ JX.DOM.setContent(this._getDropPreviewListNode(), items); document.body.appendChild(node); + + // Undim the drop preview element if it was previously dimmed. + this._setPreviewDimState(false); + this._previewPositionVector = JX.$V(node); }, _getDropPreviewNode: function() {