diff --git a/svelte/src/filesystem/filemanager/CompactView.svelte b/svelte/src/filesystem/filemanager/CompactView.svelte
new file mode 100644
index 0000000..0f2dc01
--- /dev/null
+++ b/svelte/src/filesystem/filemanager/CompactView.svelte
@@ -0,0 +1,83 @@
+
+
+
+
+
diff --git a/svelte/src/filesystem/filemanager/FileManager.svelte b/svelte/src/filesystem/filemanager/FileManager.svelte
index fab7da9..7ff2a4b 100644
--- a/svelte/src/filesystem/filemanager/FileManager.svelte
+++ b/svelte/src/filesystem/filemanager/FileManager.svelte
@@ -4,6 +4,7 @@ import { onMount } from 'svelte'
import CreateDirectory from './CreateDirectory.svelte'
import ListView from './ListView.svelte'
import GalleryView from './GalleryView.svelte'
+import CompactView from './CompactView.svelte'
import Button from '../../layout/Button.svelte';
import FileImporter from './FileImporter.svelte';
import { formatDate } from '../../util/Formatting.svelte';
@@ -136,6 +137,8 @@ const viewing_mode = () => {
const toggle_view = () => {
if (directory_view === "list") {
directory_view = "gallery"
+ } else if (directory_view === "gallery") {
+ directory_view = "compact"
} else {
directory_view = "list"
}
@@ -154,9 +157,21 @@ let moving_items = []
// We need to detect if shift is pressed so we can select multiple items
let shift_pressed = false
let last_selected_node = -1
-const detect_shift = (e) => {
+const keypress = e => {
if (e.key === "Shift") {
shift_pressed = e.type === "keydown"
+ } else if (e.type === "keydown" && e.key === "a" && e.ctrlKey) {
+ // CTRL + A selects all files
+ selecting_mode()
+ for (let i = 0; i < nav.children.length; i++) {
+ nav.children[i].fm_selected = true
+ }
+ e.preventDefault()
+ } else if (e.type === "keydown" && e.key === "Escape" && mode !== "viewing") {
+ // When escape is pressed we return to viewing mode
+ viewing_mode()
+ e.preventDefault()
+ e.stopPropagation()
}
}
@@ -249,7 +264,7 @@ onMount(() => {
})
-
+
{
{:else if mode === "selecting"}
@@ -412,15 +440,20 @@ onMount(() => {
.toolbar {
display: flex;
flex-direction: row;
+ flex-wrap: wrap;
width: 100%;
max-width: 1000px;
margin: auto;
padding-top: 2px;
padding-bottom: 2px;
- justify-content: center;
+ justify-content: space-between;
align-items: center;
}
-.toolbar > * { flex: 0 0 auto; }
+.toolbar > * {
+ flex: 0 0 content;
+ display: flex;
+ flex-direction: row;
+}
.toolbar_spacer {
flex: 1 1 auto;
text-align: center;
@@ -428,6 +461,9 @@ onMount(() => {
.toolbar_edit {
background-color: rgba(0, 255, 0, 0.05);
}
+.icon.button_highlight {
+ border-radius: 4px;
+}
/* Large icon mode only supported on wide screens. Hide the button on small screen */
@media (max-width: 500px) {
diff --git a/svelte/src/filesystem/upload_widget/FSUploadWidget.svelte b/svelte/src/filesystem/upload_widget/FSUploadWidget.svelte
index 33cb742..00b9f6e 100644
--- a/svelte/src/filesystem/upload_widget/FSUploadWidget.svelte
+++ b/svelte/src/filesystem/upload_widget/FSUploadWidget.svelte
@@ -5,6 +5,8 @@ import UploadProgress from "./UploadProgress.svelte";
export let nav
+const max_concurrent_uploads = 5
+
let file_input_field
let file_input_change = (e) => {
// Start uploading the files async
@@ -86,7 +88,7 @@ const start_upload = async () => {
return acc
}, 0)
- for (let i = 0; i < upload_queue.length && active_uploads < 3; i++) {
+ for (let i = 0; i < upload_queue.length && active_uploads < max_concurrent_uploads; i++) {
if (upload_queue[i]) {
if (upload_queue[i].status === "queued") {
active_uploads++