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:
parent
c53ed72e4c
commit
686b03a1d5
3 changed files with 75 additions and 23 deletions
|
@ -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',
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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() {
|
||||
|
|
Loading…
Reference in a new issue