1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-09 16:32:39 +01:00

Dim the action drop preview element when the cursor approaches

Summary:
Depends on D20308. Ref T5474. The element which previews what will happen when you drop a task somewhere can cover the bottom part of the rightmost column on a workboard.

To fix this, I'm trying to just fade it out if you put your cursor over it. I tried to do this in a simple way previously (":hover" + "opacity: 0.25") but it doesn't actually work because "pointer-events: none" stops ":hover" from working.

Instead, do this in Javascript. This is a little more complicated but: it works; and we can do the fade when you get //near// the element instead of actually over it, which feels a little better.

Test Plan:
  - Shrank window to fairly small size so that the preview could cover up stuff on the workboard.
  - Dragged a card toward the rightmost column.
  - Before: drop action preview covered some workboard stuff.
  - After: preview faded out as my cursor approached.

Reviewers: amckinley

Reviewed By: amckinley

Maniphest Tasks: T5474

Differential Revision: https://secure.phabricator.com/D20320
This commit is contained in:
epriestley 2019-03-25 08:04:33 -07:00
parent c53ed72e4c
commit 686b03a1d5
3 changed files with 75 additions and 23 deletions

View file

@ -179,7 +179,7 @@ return array(
'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 @@ return array(
'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 @@ return array(
'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 @@ return array(
'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 @@ return array(
'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 @@ return array(
'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 @@ return array(
'phuix-icon-view',
'javelin-behavior-phabricator-gesture',
),
'4e4ec9f0' => array(
'phui-workcard-view-css',
),
'4e61fa88' => array(
'javelin-behavior',
'javelin-aphlict',
@ -2144,6 +2141,9 @@ return array(
'phabricator-darklog',
'phabricator-darkmessage',
),
'f43b8c7f' => array(
'phui-workcard-view-css',
),
'f51e9c17' => array(
'javelin-behavior',
'javelin-stratcom',

View file

@ -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;
}
}

View file

@ -43,6 +43,8 @@ JX.install('WorkboardBoard', {
_dropPreviewListNode: null,
_previewPHID: null,
_hidePreivew: false,
_previewPositionVector: null,
_previewDimState: false,
getRoot: function() {
return this._root;
@ -148,6 +150,39 @@ JX.install('WorkboardBoard', {
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 @@ JX.install('WorkboardBoard', {
if (!effects.length) {
JX.DOM.remove(node);
this._previewPositionVector = null;
return;
}
@ -336,6 +372,10 @@ JX.install('WorkboardBoard', {
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() {