github
/
dufs
mirror of https://gh.cary.cc/https://github.com/sigoden/dufs
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: optimize ui

pull/179/head
sigoden 2023-02-20 17:23:31 +08:00
parent 111103f26b
commit c6c78a16c5
2 changed files with 102 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
assets/index.css
View File

@ -7,6 +7,7 @@ html {
body { body {
/* prevent premature breadcrumb wrapping on mobile */ /* prevent premature breadcrumb wrapping on mobile */
min-width: 500px; min-width: 500px;
margin: 0;
} }
.hidden { .hidden {
@ -17,7 +18,10 @@ body {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
padding: 1em 1em 0; padding: 0.6em 1em;
position: fixed;
width: 100%;
background-color: white;
} }
.breadcrumb { .breadcrumb {
@ -104,7 +108,7 @@ body {
} }
.main { .main {
padding: 0 1em; padding: 3em 1em 0;
} }
.empty-folder { .empty-folder {

74
assets/index.js
View File

@ -58,6 +58,10 @@ let $emptyFolder;
* @type Element * @type Element
*/ */
let $newFolder; let $newFolder;
/**
* @type Element
*/
let $searchbar;
class Uploader { class Uploader {
/** /**
@ -418,6 +422,44 @@ function dropzone() {
}); });
} }
/**
* Setup searchbar
*/
function setupSearch() {
$searchbar.classList.remove("hidden");
$searchbar.addEventListener("submit", event => {
event.preventDefault();
const formData = new FormData($searchbar);
const q = formData.get("q");
let href = getUrl();
if (q) {
href += "?q=" + q;
}
location.href = href;
});
if (PARAMS.q) {
document.getElementById('search').value = PARAMS.q;
}
}
/**
* Setup upload
*/
function setupUpload() {
$newFolder.classList.remove("hidden");
$newFolder.addEventListener("click", () => {
const name = prompt("Enter folder name");
if (name) createFolder(name);
});
document.querySelector(".upload-file").classList.remove("hidden");
document.getElementById("file").addEventListener("change", e => {
const files = e.target.files;
for (let file of files) {
new Uploader(file, []).upload();
}
});
}
/** /**
* Create a folder * Create a folder
* @param {string} name * @param {string} name
@ -523,24 +565,11 @@ function ready() {
$pathsTableBody = document.querySelector(".paths-table tbody"); $pathsTableBody = document.querySelector(".paths-table tbody");
$uploadersTable = document.querySelector(".uploaders-table"); $uploadersTable = document.querySelector(".uploaders-table");
$emptyFolder = document.querySelector(".empty-folder"); $emptyFolder = document.querySelector(".empty-folder");
$searchForm = document.querySelector(".searchbar");
$newFolder = document.querySelector(".new-folder"); $newFolder = document.querySelector(".new-folder");
$searchbar = document.querySelector(".searchbar");
if (DATA.allow_search) { if (DATA.allow_search) {
$searchForm.classList.remove("hidden"); setupSearch()
$searchForm.addEventListener("submit", event => {
event.preventDefault();
const formData = new FormData($searchForm);
const q = formData.get("q");
let href = getUrl();
if (q) {
href += "?q=" + q;
}
location.href = href;
});
if (PARAMS.q) {
document.getElementById('search').value = PARAMS.q;
}
} }
if (DATA.allow_archive) { if (DATA.allow_archive) {
@ -553,19 +582,6 @@ function ready() {
if (DATA.allow_upload) { if (DATA.allow_upload) {
dropzone(); dropzone();
if (DATA.allow_delete) { setupUpload();
$newFolder.classList.remove("hidden");
$newFolder.addEventListener("click", () => {
const name = prompt("Enter name of new folder");
if (name) createFolder(name);
});
}
document.querySelector(".upload-file").classList.remove("hidden");
document.getElementById("file").addEventListener("change", e => {
const files = e.target.files;
for (let file of files) {
new Uploader(file, []).upload();
}
});
} }
} }