diff --git a/static/css/components/multiSelect.css b/static/css/components/multiSelect.css index ec79657a..87961bff 100644 --- a/static/css/components/multiSelect.css +++ b/static/css/components/multiSelect.css @@ -37,15 +37,11 @@ .batch-selection-bar { display: flex; align-items: center; - justify-content: space-between; background: var(--color-multiselect-bg); color: var(--color-multiselect-text); padding: 10px 20px; border-radius: 12px; - margin: 0 0 12px; - height: 60px; overflow: hidden; - transform: translateY(-8px); transition: opacity 0.2s, max-height 0.25s, @@ -55,12 +51,6 @@ pointer-events: auto; } -.batch-bar-left { - display: flex; - align-items: center; - gap: 12px; -} - .batch-bar-close { background: none; border: none; diff --git a/static/css/layout/content.css b/static/css/layout/content.css index b48f32b0..17aeb3cf 100644 --- a/static/css/layout/content.css +++ b/static/css/layout/content.css @@ -49,6 +49,7 @@ .action-buttons { display: flex; + flex: auto; gap: 12px; } diff --git a/static/index.html b/static/index.html index 599ea053..dc5264b6 100644 --- a/static/index.html +++ b/static/index.html @@ -210,42 +210,7 @@

Files

-
- -
-
- -
- - -
-
- -
- -
- - -
-
- +
Home diff --git a/static/js/app/filesView.js b/static/js/app/filesView.js index 81fff22e..30c5175b 100644 --- a/static/js/app/filesView.js +++ b/static/js/app/filesView.js @@ -107,6 +107,7 @@ async function rebuildBreadCrumb() { app.currentFolderInfo = currentFolderInfo; } +// TODO split load() vs view() /** * Files view loading logic * diff --git a/static/js/app/main.js b/static/js/app/main.js index 03e6dbcf..229138d9 100644 --- a/static/js/app/main.js +++ b/static/js/app/main.js @@ -38,9 +38,51 @@ let uploadDropdownDocumentClickHandler = null; let uploadDropdownBindingsController = null; let actionsBarDelegationBound = false; +const _multiSelectButons = ` + +`; + +const _toggleButtons = ` +
+ + +
+`; + const ACTIONS_BAR_TEMPLATES = { files: ` -
+
-
- - -
+ ${_multiSelectButons} + ${_toggleButtons} `, trash: ` -
+
-
- - -
+ ${_toggleButtons} `, favorites: ` -
-
- - -
+
+ ${_multiSelectButons} + ${_toggleButtons} `, recent: ` -
+
-
- - -
+ ${_multiSelectButons} + ${_toggleButtons} ` }; diff --git a/static/js/app/ui.js b/static/js/app/ui.js index 1c3e7f83..aecad705 100644 --- a/static/js/app/ui.js +++ b/static/js/app/ui.js @@ -1309,6 +1309,9 @@ const ui = { filesList.classList.remove('hidden'); filesContainerError?.classList.add('hidden'); + + // apply hook as header changed + multiSelect.init(); }, showEmptyList() { diff --git a/static/js/features/files/multiSelect.js b/static/js/features/files/multiSelect.js index 2f98c1fc..5dc1a7a1 100644 --- a/static/js/features/files/multiSelect.js +++ b/static/js/features/files/multiSelect.js @@ -230,51 +230,12 @@ const multiSelect = { this._syncSelectAllCheckbox(); }, - // ── Selection bar (replaces list-header when items selected) ──── - - /** - * Build the inner HTML for the selection bar that replaces the - * normal list-header columns (Name / Type / Size / Modified). - */ - _buildSelectionBarHTML() { - //FIXME: should support i18n lang change - - return ` -
- - -
-
-
- - - - -
-
- `; - }, - /** Main UI sync — called after every selection change */ _syncUI() { const n = this._selected.size; - const batchSelectionBar = document.getElementById('batch-selection-bar'); - const actionsBar = document.getElementById('actions-bar'); + const multiSelectButtons = document.getElementById('multi-select-buttons'); + const defaultButtons = document.getElementById('default-buttons'); if (n > 0) { this._barVisible = true; @@ -282,16 +243,14 @@ const multiSelect = { const countText = n === 1 ? this._t('batch.one_selected') || '1 item selected' : this._t('batch.n_selected', { count: n }) || `${n} items selected`; document.getElementById('batch-bar-count').innerText = countText; - actionsBar.classList.add('hidden'); - - batchSelectionBar.classList.remove('hidden'); + defaultButtons?.classList.add('hidden'); + multiSelectButtons?.classList.remove('hidden'); } else { this._barVisible = false; // Hide grid bar - batchSelectionBar.classList.add('hidden'); - - if (actionsBar.dataset.mode !== 'hidden') actionsBar.classList.remove('hidden'); + multiSelectButtons?.classList.add('hidden'); + defaultButtons?.classList.remove('hidden'); } // Sync individual item checkboxes @@ -306,7 +265,7 @@ const multiSelect = { const move = document.getElementById('batch-move'); const dl = document.getElementById('batch-download'); const fav = document.getElementById('batch-fav'); - const closeBtn = document.getElementById('batch-grid-close'); + const closeBtn = document.getElementById('batch-selection-close'); if (del) del.onclick = () => this.batchDelete(); if (move) move.onclick = () => this.batchMove(); if (dl) dl.onclick = () => this.batchDownload(); @@ -515,12 +474,6 @@ const multiSelect = { if (e.key === 'Delete' && this.hasSelection) this.batchDelete(); }); - const batchSelectionBar = document.getElementById('batch-selection-bar'); - batchSelectionBar.innerHTML = this._buildSelectionBarHTML(); - - if (i18n?.translateElement) { - i18n.translateElement(batchSelectionBar); - } this._wireBarButtons(); },