lee/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2026-08-23 22:47:19 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

Disable hover during rubberband file select

Browse Source 
Add a `rubberband-selecting` state on the dashboard while marquee selection is active in `TabFiles`, and remove it when drag ends. CSS now disables pointer events on surrounding files chrome (sidebar, directory tree, and header) during that state so hover highlights/tooltips don’t trigger when the cursor leaves the clamped selection area.
This commit is contained in:
jelveh
2026-07-26 22:23:54 -07:00
parent 29f2a4d9c9
commit 46253fb80a
2 changed files with 15 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/gui/src/UI/Dashboard/TabFiles.js
+6
View File
@@ -3872,6 +3872,11 @@ const TabFiles = {
// Disable pointer events on selection actions bar during drag
_this.$el_window.find('.files-selection-actions').addClass('rubberband-active');
// The marquee is clamped to the files container but the cursor
// isn't — while the drag is active, the chrome around the list
// (sidebars, path bar) must not show hover feedback under it.
_this.$el_window.find('.dashboard').addClass('rubberband-selecting');
// Create selection area element only when drag actually starts (after threshold)
selection_area = document.createElement('div');
$(filesContainer).append(selection_area);
@@ -3938,6 +3943,7 @@ const TabFiles = {
}
// Re-enable pointer events on selection actions bar
_this.$el_window.find('.files-selection-actions').removeClass('rubberband-active');
_this.$el_window.find('.dashboard').removeClass('rubberband-selecting');
_this.updateFooterStats();
});
},
src/gui/src/css/dashboard.css
+9
View File
@@ -2067,6 +2067,15 @@ body.myapps-reordering .myapps-tile {
pointer-events: none;
}
/* The marquee is clamped to the files container but the cursor isn't;
while a rubber-band drag is active, the chrome around the list must
not react to the cursor passing over it (hover highlights, tooltips). */
.dashboard.rubberband-selecting .dashboard-sidebar,
.dashboard.rubberband-selecting .dashboard-section-files .directories,
.dashboard.rubberband-selecting .dashboard-section-files .directory-contents .header {
pointer-events: none;
}
.dashboard-section-files .selection-action-btn {
display: flex;
align-items: center;