diff --git a/app/src/App.css b/app/src/App.css
index 66fb95fe..b5a84cc6 100644
--- a/app/src/App.css
+++ b/app/src/App.css
@@ -328,3 +328,20 @@ table.ratio-table td.min-width {
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
}
+
+/* Sticky footer for file browser */
+.sticky-footer {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 0.5em 1em;
+ background-color: #f9fafb;
+ border-top: 1px solid rgba(34, 36, 38, 0.15);
+ z-index: 100;
+}
+
+.sticky-footer.inverted {
+ background-color: #1b1c1d;
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
diff --git a/app/src/components/FileBrowser.js b/app/src/components/FileBrowser.js
index 21fab418..a34530cc 100644
--- a/app/src/components/FileBrowser.js
+++ b/app/src/components/FileBrowser.js
@@ -7,7 +7,6 @@ import {
PlaceholderLine,
TableBody,
TableCell,
- TableFooter,
TableHeader,
TableHeaderCell,
TableRow
@@ -20,7 +19,7 @@ import {SortableTable} from "./SortableTable";
import {useBrowseFiles, useMediaDirectory, useWROLMode} from "../hooks/customHooks";
import {FileRowTagIcon, FilesRefreshButton} from "./Files";
import {FilePreviewContext} from "./FilePreview";
-import {SettingsContext} from "../contexts/contexts";
+import {SettingsContext, ThemeContext} from "../contexts/contexts";
import {BulkTagModal} from "./BulkTagModal";
function depthIndentation(path) {
@@ -146,6 +145,7 @@ export function FileBrowser() {
const [isDirectoryIgnored, setIsDirectoryIgnored] = React.useState(false);
const {settings, fetchSettings} = React.useContext(SettingsContext);
+ const {inverted} = React.useContext(ThemeContext);
const selectedPathsCount = selectedPaths ? selectedPaths.length : 0;
@@ -217,88 +217,85 @@ export function FileBrowser() {
}
}
- const footer =
-
-
-
-
-
-
- ;
+ const footerClassName = `sticky-footer ${inverted}`;
+ const footer =
+
+
+ setRenameOpen(true)}
+ disabled={wrolModeEnabled || selectedPathsCount !== 1}
+ />
+ {selectedPathsCount === 1 ?
+ setRenameOpen(false)}
+ onPending={setPending}
+ path={selectedPaths[0]}
+ onSubmit={reset}
+ /> : null}
+ setMoveOpen(true)}
+ />
+ {selectedPathsCount > 0 ?
+ setMoveOpen(false)}
+ paths={selectedPaths}
+ onSubmit={reset}
+ /> : null}
+ setMakeDirectoryOpen(true)}
+ disabled={wrolModeEnabled}
+ style={{paddingLeft: '1em', paddingRight: '0.8em'}}
+ >
+
+
+
+
+
+ setMakeDirectoryOpen(false)}
+ parent={selectedPaths.length ? selectedPaths[0] : null}
+ onSubmit={handleMakeDirectory}
+ />
+ setIgnoreDirectoryOpen(true)}
+ />
+
+ setBulkTagOpen(true)}
+ />
+ setBulkTagOpen(false)}
+ paths={selectedPaths}
+ onComplete={reset}
+ />
+ ;
const onFolderClick = async (folder) => {
let newFolders;
@@ -323,24 +320,26 @@ export function FileBrowser() {
}
return <>
- setPreviewFile(i)}
- sortData={sortData}
- selectedPaths={selectedPaths}
- onSelect={onSelect}
- disabled={pending}
- />}
- footer={footer}
- />
+
+
setPreviewFile(i)}
+ sortData={sortData}
+ selectedPaths={selectedPaths}
+ onSelect={onSelect}
+ disabled={pending}
+ />}
+ />
+
+ {footer}
>
}
@@ -564,4 +563,4 @@ export function MakeDirectoryModal({open, onClose, parent, onSubmit}) {
Create
-}
\ No newline at end of file
+}