@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
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
+75
-23
+19
-19
resources/celerity/map.php
+19
-19
resources/celerity/map.php
···
179
179
'rsrc/css/phui/workboards/phui-workboard-color.css' => 'e86de308',
180
180
'rsrc/css/phui/workboards/phui-workboard.css' => '74fc9d98',
181
181
'rsrc/css/phui/workboards/phui-workcard.css' => '9e9eb0df',
182
-
'rsrc/css/phui/workboards/phui-workpanel.css' => '4e4ec9f0',
182
+
'rsrc/css/phui/workboards/phui-workpanel.css' => 'f43b8c7f',
183
183
'rsrc/css/sprite-login.css' => '18b368a6',
184
184
'rsrc/css/sprite-tokens.css' => 'f1896dc5',
185
185
'rsrc/css/syntax/syntax-default.css' => '055fc231',
···
409
409
'rsrc/js/application/phortune/phortune-credit-card-form.js' => 'd12d214f',
410
410
'rsrc/js/application/policy/behavior-policy-control.js' => '0eaa33a9',
411
411
'rsrc/js/application/policy/behavior-policy-rule-editor.js' => '9347f172',
412
-
'rsrc/js/application/projects/WorkboardBoard.js' => '3ba8e6ad',
412
+
'rsrc/js/application/projects/WorkboardBoard.js' => '223af34e',
413
413
'rsrc/js/application/projects/WorkboardCard.js' => '0392a5d8',
414
414
'rsrc/js/application/projects/WorkboardCardTemplate.js' => '2a61f8d4',
415
415
'rsrc/js/application/projects/WorkboardColumn.js' => 'c3d24e63',
···
737
737
'javelin-view-renderer' => '9aae2b66',
738
738
'javelin-view-visitor' => '308f9fe4',
739
739
'javelin-websocket' => 'fdc13e4e',
740
-
'javelin-workboard-board' => '3ba8e6ad',
740
+
'javelin-workboard-board' => '223af34e',
741
741
'javelin-workboard-card' => '0392a5d8',
742
742
'javelin-workboard-card-template' => '2a61f8d4',
743
743
'javelin-workboard-column' => 'c3d24e63',
···
869
869
'phui-workboard-color-css' => 'e86de308',
870
870
'phui-workboard-view-css' => '74fc9d98',
871
871
'phui-workcard-view-css' => '9e9eb0df',
872
-
'phui-workpanel-view-css' => '4e4ec9f0',
872
+
'phui-workpanel-view-css' => 'f43b8c7f',
873
873
'phuix-action-list-view' => 'c68f183f',
874
874
'phuix-action-view' => 'aaa08f3b',
875
875
'phuix-autocomplete' => '8f139ef0',
···
1073
1073
'javelin-behavior',
1074
1074
'javelin-request',
1075
1075
),
1076
+
'223af34e' => array(
1077
+
'javelin-install',
1078
+
'javelin-dom',
1079
+
'javelin-util',
1080
+
'javelin-stratcom',
1081
+
'javelin-workflow',
1082
+
'phabricator-draggable-list',
1083
+
'javelin-workboard-column',
1084
+
'javelin-workboard-header-template',
1085
+
'javelin-workboard-card-template',
1086
+
'javelin-workboard-order-template',
1087
+
),
1076
1088
'225bbb98' => array(
1077
1089
'javelin-install',
1078
1090
'javelin-reactor',
···
1227
1239
'javelin-behavior',
1228
1240
'phabricator-prefab',
1229
1241
),
1230
-
'3ba8e6ad' => array(
1231
-
'javelin-install',
1232
-
'javelin-dom',
1233
-
'javelin-util',
1234
-
'javelin-stratcom',
1235
-
'javelin-workflow',
1236
-
'phabricator-draggable-list',
1237
-
'javelin-workboard-column',
1238
-
'javelin-workboard-header-template',
1239
-
'javelin-workboard-card-template',
1240
-
'javelin-workboard-order-template',
1241
-
),
1242
1242
'3dc5ad43' => array(
1243
1243
'javelin-behavior',
1244
1244
'javelin-stratcom',
···
1350
1350
'phuix-form-control-view',
1351
1351
'phuix-icon-view',
1352
1352
'javelin-behavior-phabricator-gesture',
1353
-
),
1354
-
'4e4ec9f0' => array(
1355
-
'phui-workcard-view-css',
1356
1353
),
1357
1354
'4e61fa88' => array(
1358
1355
'javelin-behavior',
···
2143
2140
'phabricator-keyboard-shortcut',
2144
2141
'phabricator-darklog',
2145
2142
'phabricator-darkmessage',
2143
+
),
2144
+
'f43b8c7f' => array(
2145
+
'phui-workcard-view-css',
2146
2146
),
2147
2147
'f51e9c17' => array(
2148
2148
'javelin-behavior',
+16
-4
webroot/rsrc/css/phui/workboards/phui-workpanel.css
+16
-4
webroot/rsrc/css/phui/workboards/phui-workpanel.css
···
189
189
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
190
190
border: 1px solid {$lightblueborder};
191
191
padding: 4px 0;
192
-
}
193
-
194
-
.workboard-drop-preview:hover {
195
-
opacity: 0.25;
192
+
background: #fff;
196
193
}
197
194
198
195
.workboard-drop-preview li {
···
225
222
background: {$blue};
226
223
color: #fff;
227
224
}
225
+
226
+
.workboard-drop-preview-fade {
227
+
animation: 0.1s workboard-drop-preview-fade-out;
228
+
opacity: 0.25;
229
+
}
230
+
231
+
@keyframes workboard-drop-preview-fade-out {
232
+
0% {
233
+
opacity: 1;
234
+
}
235
+
236
+
100% {
237
+
opacity: 0.25;
238
+
}
239
+
}
+40
webroot/rsrc/js/application/projects/WorkboardBoard.js
+40
webroot/rsrc/js/application/projects/WorkboardBoard.js
···
43
43
_dropPreviewListNode: null,
44
44
_previewPHID: null,
45
45
_hidePreivew: false,
46
+
_previewPositionVector: null,
47
+
_previewDimState: false,
46
48
47
49
getRoot: function() {
48
50
return this._root;
···
148
150
var on_out = JX.bind(this, this._hideTriggerPreview);
149
151
JX.Stratcom.listen('mouseover', 'trigger-preview', on_over);
150
152
JX.Stratcom.listen('mouseout', 'trigger-preview', on_out);
153
+
154
+
var on_move = JX.bind(this, this._dimPreview);
155
+
JX.Stratcom.listen('mousemove', null, on_move);
156
+
},
157
+
158
+
_dimPreview: function(e) {
159
+
var p = this._previewPositionVector;
160
+
if (!p) {
161
+
return;
162
+
}
163
+
164
+
// When the mouse cursor gets near the drop preview element, fade it
165
+
// out so you can see through it. We can't do this with ":hover" because
166
+
// we disable cursor events.
167
+
168
+
var cursor = JX.$V(e);
169
+
var margin = 64;
170
+
171
+
var near_x = (cursor.x > (p.x - margin));
172
+
var near_y = (cursor.y > (p.y - margin));
173
+
var should_dim = (near_x && near_y);
174
+
175
+
this._setPreviewDimState(should_dim);
176
+
},
177
+
178
+
_setPreviewDimState: function(is_dim) {
179
+
if (is_dim === this._previewDimState) {
180
+
return;
181
+
}
182
+
183
+
this._previewDimState = is_dim;
184
+
var node = this._getDropPreviewNode();
185
+
JX.DOM.alterClass(node, 'workboard-drop-preview-fade', is_dim);
151
186
},
152
187
153
188
_showTriggerPreview: function(e) {
···
325
360
326
361
if (!effects.length) {
327
362
JX.DOM.remove(node);
363
+
this._previewPositionVector = null;
328
364
return;
329
365
}
330
366
···
336
372
337
373
JX.DOM.setContent(this._getDropPreviewListNode(), items);
338
374
document.body.appendChild(node);
375
+
376
+
// Undim the drop preview element if it was previously dimmed.
377
+
this._setPreviewDimState(false);
378
+
this._previewPositionVector = JX.$V(node);
339
379
},
340
380
341
381
_getDropPreviewNode: function() {