From 9b29bb3deb3943dd101d7ab7b01f42ee49951e1b Mon Sep 17 00:00:00 2001 From: Alex Vitkov Date: Fri, 12 Feb 2021 14:33:42 +0200 Subject: icons for different mimetypes --- css/style.css | 6 +++++- loggedin.js | 32 ++++++++++++++++++++++++-------- mimeicons/directory.png | Bin 0 -> 663 bytes mimeicons/text-plain.png | Bin 0 -> 1027 bytes 4 files changed, 29 insertions(+), 9 deletions(-) create mode 100644 mimeicons/directory.png create mode 100644 mimeicons/text-plain.png diff --git a/css/style.css b/css/style.css index 8073fe6..96b48c5 100644 --- a/css/style.css +++ b/css/style.css @@ -277,8 +277,12 @@ input[type=submit]:hover { border-color: #ddd; } +.file > img { + flex: 1 0 0; +} + .file:hover > img { - filter: brightness(150%); + filter: brightness(120%); } .path { diff --git a/loggedin.js b/loggedin.js index d774e16..b275c4a 100644 --- a/loggedin.js +++ b/loggedin.js @@ -8,12 +8,22 @@ const current_directory = document.getElementById("current_directory"); the_file.onchange = on_file_added; -var files = []; const pwd = "/"; const pending_uploads = []; +class FileView { + constructor(filename, visuals, mimetype, is_directory) { + this.filename = filename; + this.visuals = visuals; + this.mimetype = mimetype; + this.is_directory = is_directory; + } +} + +var files = []; + function on_file_added(_e) { if (the_file.files.length >= 1) { filename_input.value = the_file.files[0].name; @@ -54,24 +64,30 @@ function load_dir(pwd) { xhr.open('POST', '/php/readdir.php', true); xhr.onload = function () { for (const f of files) - f[1].remove(); + f.visuals.remove(); files = []; var json = JSON.parse(this.responseText); for (const f of json) { - add_file_visuals(f.name, f.mimetype); + add_file_visuals(f.name, f.is_directory, f.mimetype); } }; xhr.send(data); } -function add_file_visuals(name, mimetype) { +function add_file_visuals(name, is_directory, mimetype) { var fileDiv = document.createElement('div'); var img = document.createElement('img'); var filename = document.createElement('div'); - img.src="/mimeicons/application-pdf.png"; + if (is_directory) { + img.src="/mimeicons/directory.png"; + } + else { + img.src=`/mimeicons/${mimetype.replace("/", "-")}.png`; + } + fileDiv.classList.add('file'); filename.classList.add('filename'); filename.innerText = name; @@ -81,9 +97,9 @@ function add_file_visuals(name, mimetype) { current_directory.appendChild(fileDiv); - files.push([name, fileDiv]); - - return fileDiv; + var file = new FileView(name, fileDiv, mimetype, is_directory); + files.push(file); + return file; } function begin_upload() { diff --git a/mimeicons/directory.png b/mimeicons/directory.png new file mode 100644 index 0000000..bcf2639 Binary files /dev/null and b/mimeicons/directory.png differ diff --git a/mimeicons/text-plain.png b/mimeicons/text-plain.png new file mode 100644 index 0000000..924a5eb Binary files /dev/null and b/mimeicons/text-plain.png differ -- cgit v1.2.3 From 34ba723e18a7ba0f785e456e38a9234d6efda9b7 Mon Sep 17 00:00:00 2001 From: Alex Vitkov Date: Fri, 12 Feb 2021 15:36:38 +0200 Subject: css --- css/style.css | 76 ++++++++++++++++++++++++++++++++++---------------- index.php | 2 ++ loggedin.js | 25 ++++++++++++++--- loggedin.php | 11 ++++++-- mimeicons/pending.png | Bin 0 -> 9024 bytes 5 files changed, 83 insertions(+), 31 deletions(-) create mode 100644 mimeicons/pending.png diff --git a/css/style.css b/css/style.css index 96b48c5..24fa86f 100644 --- a/css/style.css +++ b/css/style.css @@ -6,7 +6,7 @@ html, body { body { background: #f0f0f0; color: black; - font-family: sans-serif; + font-family: Roboto, sans-serif; overflow: hidden; } @@ -96,12 +96,11 @@ body { } form { - background: white; + background: #fbfbfb; margin: 4.5rem; padding-top: 0; box-shadow: 0 0.8rem 1.3rem rgba(0,0,0,0.2); border-radius: 0.5rem; - border-radius: 0.5rem; border: 1px solid #b9b9b9; } @@ -170,21 +169,20 @@ form p { min-width: 300px; } -input:not([type=file]) { +button, +input:not([type=file]) +{ border: 1px solid #bbb; - padding: 0.8rem 2rem 0.5rem 2rem; + padding: 0.5rem 0.8rem; font-size: inherit; font-family: inherit; border-radius: 0.3rem; - background: #f6f6f6; + background: #fcfcfc; } input[type=button], button, input[type=submit] { cursor: pointer; } -input[type=button]:hover, button:hover, input[type=submit]:hover { - background: white; -} input[type=submit] { margin-top: 2rem; @@ -198,9 +196,11 @@ input[type=submit] { outline: none; } -input:focus, -input:hover { - background: white; + +input:hover, +button:hover +{ + background: white; } input:focus { @@ -240,7 +240,6 @@ input[type=submit]:hover { padding: 0; box-shadow: 0 0.8rem 1.3rem rgba(0,0,0,0.2); border-radius: 0.5rem; - border-radius: 0.5rem; border: 1px solid #b9b9b9; display: block; @@ -250,7 +249,7 @@ input[type=submit]:hover { padding: 1rem; display: grid; - grid-gap: 20px; + grid-gap: 0rem; grid-auto-rows: 10rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); } @@ -285,21 +284,50 @@ input[type=submit]:hover { filter: brightness(120%); } -.path { - font-size: 1.5rem; +.filesystem > h2 { + display: flex; + align-items: stretch; + font-weight: normal; + padding: 0rem; + border-bottom: 1px solid #bbb; + } -.path > a { - color: #333; - text-decoration: none; +.filesystem > h2 button { + border: none; + padding: 0.3rem 0.7rem; + background: inherit; + border-radius: 0; } -.path > a:hover { - text-decoration: underline; +.filesystem > h2 button:not(.pathentry):hover { + background: white; } -.filesystem > h2 { +.filesystem > h2 > .separator { + flex: 0 0 1px; + align-self: stretch; + background: #bbb; +} + +.filesystem > h2 > *:first-child { + border-top-left-radius: 0.5rem; +} + +.path { display: flex; - align-items: baseline; - font-weight: normal; + align-items: stretch; + font-size: 0.8em; +} + +.path > .separator { + user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + padding: 0 0.2rem; + align-self: center; +} + +.pathentry:hover { + text-decoration: underline; } diff --git a/index.php b/index.php index f8a1e14..1d28812 100644 --- a/index.php +++ b/index.php @@ -5,6 +5,8 @@ + + shady file upload diff --git a/loggedin.js b/loggedin.js index b275c4a..d4f56ae 100644 --- a/loggedin.js +++ b/loggedin.js @@ -1,4 +1,4 @@ -var FORM_ASYNC = false; +var FORM_ASYNC = true; const upload_form = document.getElementById("upload_form"); const the_file = document.getElementById("the_file"); @@ -22,6 +22,12 @@ class FileView { } } +class PendingUpload { + constructor(fileview) { + this.fileview = fileview; + } +} + var files = []; function on_file_added(_e) { @@ -33,13 +39,15 @@ function on_file_added(_e) { return; } + var fileview = add_file_visuals(filename_input.value, false, "pending"); + // Send the form asynchronously through the fetch api fetch(upload_form.action, { method: upload_form.method, body: new FormData(upload_form) }).then((resp) => { if (resp.status == 200) { - add_file_visuals(filename_input.value, true); + done_upload(fileview); } else { alert("Upload failed"); @@ -47,13 +55,19 @@ function on_file_added(_e) { }, () => { alert("Upload failed") }); - - + + pending_uploads.push(fileview); } else { alert("No files selected"); } +} +function done_upload(fileview) { + var index = pending_uploads.indexOf(fileview); + if (index >= 0) + pending_uploads.splice(index, 1); + load_dir(pwd); } function load_dir(pwd) { @@ -92,6 +106,9 @@ function add_file_visuals(name, is_directory, mimetype) { filename.classList.add('filename'); filename.innerText = name; + if (mimetype == "pending") + fileDiv.classList.add('pending'); + fileDiv.appendChild(img); fileDiv.appendChild(filename); diff --git a/loggedin.php b/loggedin.php index b525ed6..0c95750 100644 --- a/loggedin.php +++ b/loggedin.php @@ -1,9 +1,14 @@
-

+

+ +
- 's files/foo/bar
- + + +
»
+ +

diff --git a/mimeicons/pending.png b/mimeicons/pending.png new file mode 100644 index 0000000..1b0ee1a Binary files /dev/null and b/mimeicons/pending.png differ -- cgit v1.2.3 From d682faeaeea940ab8ab6bcb59245a2116bcc80b1 Mon Sep 17 00:00:00 2001 From: Alex Vitkov Date: Fri, 12 Feb 2021 16:03:14 +0200 Subject: path selector --- css/style.css | 2 +- loggedin.js | 48 +++++++++++++++++++++++++++++++++++++++--------- loggedin.php | 10 +++++----- 3 files changed, 45 insertions(+), 15 deletions(-) diff --git a/css/style.css b/css/style.css index 24fa86f..39a545c 100644 --- a/css/style.css +++ b/css/style.css @@ -295,7 +295,7 @@ input[type=submit]:hover { .filesystem > h2 button { border: none; - padding: 0.3rem 0.7rem; + padding: 0.3rem 1.1rem; background: inherit; border-radius: 0; } diff --git a/loggedin.js b/loggedin.js index d4f56ae..1affb09 100644 --- a/loggedin.js +++ b/loggedin.js @@ -4,13 +4,12 @@ const upload_form = document.getElementById("upload_form"); const the_file = document.getElementById("the_file"); const filename_input = document.getElementById("filename"); const upload_btn = document.getElementById("upload_btn"); +const the_path = document.getElementById("the_path"); const current_directory = document.getElementById("current_directory"); the_file.onchange = on_file_added; - -const pwd = "/"; - +var pwd = []; const pending_uploads = []; class FileView { @@ -48,8 +47,7 @@ function on_file_added(_e) { }).then((resp) => { if (resp.status == 200) { done_upload(fileview); - } - else { + } else { alert("Upload failed"); } }, () => { @@ -67,12 +65,40 @@ function done_upload(fileview) { var index = pending_uploads.indexOf(fileview); if (index >= 0) pending_uploads.splice(index, 1); - load_dir(pwd); + + load_dir(); } -function load_dir(pwd) { +function load_dir() { var data = new FormData(); - data.append('path', '/'); + + var path = "/"; + for (const d of pwd) + path += d + "/"; + + while (the_path.children.length > 1) + the_path.removeChild(the_path.lastChild); + + for (let i = 0; i < pwd.length; i++) { + var d = pwd[i]; + + var separator_div = document.createElement('div'); + separator_div.classList.add('separator'); + the_path.appendChild(separator_div); + separator_div.innerText = "»"; + + var entry = document.createElement('button'); + entry.classList.add('pathentry'); + entry.innerText = d; + the_path.appendChild(entry); + + entry.onclick = () => { + pwd.length = i + 1; + load_dir(); + } + } + + data.append('path', path); var xhr = new XMLHttpRequest(); xhr.open('POST', '/php/readdir.php', true); @@ -97,6 +123,10 @@ function add_file_visuals(name, is_directory, mimetype) { if (is_directory) { img.src="/mimeicons/directory.png"; + fileDiv.onclick = () => { + pwd.push(name); + load_dir(); + } } else { img.src=`/mimeicons/${mimetype.replace("/", "-")}.png`; @@ -123,4 +153,4 @@ function begin_upload() { the_file.click(); } -load_dir("/"); +load_dir(); diff --git a/loggedin.php b/loggedin.php index 0c95750..34b8997 100644 --- a/loggedin.php +++ b/loggedin.php @@ -3,11 +3,11 @@

-
- - -
»
- + +
+
+ +

-- cgit v1.2.3 From e9d94ce6144746fe69a3d9f26e12a8fab9d4a534 Mon Sep 17 00:00:00 2001 From: Alex Vitkov Date: Fri, 12 Feb 2021 16:27:47 +0200 Subject: right click context menu on files --- css/style.css | 28 ++++++++++++++++++++++++++++ loggedin.js | 48 ++++++++++++++++++++++++++++++++++++++++++++++-- loggedin.php | 1 + 3 files changed, 75 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 39a545c..bbd2035 100644 --- a/css/style.css +++ b/css/style.css @@ -331,3 +331,31 @@ input[type=submit]:hover { .pathentry:hover { text-decoration: underline; } + +.context { + background: white; + position: absolute; + z-index: 1000; + list-style-type: none; + margin: 0; + padding: 0; + top: 0; + left: 0; + + border: 1px solid #ccc; + box-shadow: 0 0.3rem 0.5rem rgba(0,0,0,0.2); +} + +.context > li { + padding: 0.4rem 1.5rem; + margin: 0; + + user-select: none; + -webkit-user-select: none; + -ms-user-select: none; +} + +.context > li:hover { + background: #2e91db; + color: white; +} diff --git a/loggedin.js b/loggedin.js index 1affb09..d80c734 100644 --- a/loggedin.js +++ b/loggedin.js @@ -12,6 +12,8 @@ the_file.onchange = on_file_added; var pwd = []; const pending_uploads = []; +var context_menu = null; + class FileView { constructor(filename, visuals, mimetype, is_directory) { this.filename = filename; @@ -127,11 +129,27 @@ function add_file_visuals(name, is_directory, mimetype) { pwd.push(name); load_dir(); } - } - else { + } else { img.src=`/mimeicons/${mimetype.replace("/", "-")}.png`; } + fileDiv.oncontextmenu = (e) => { + context(e, [ + ['Open', () => { + if (is_directory) { + pwd.push(name); + load_dir(); + } else { + alert('not implemented'); + } + }], + ['Rename', () => {alert('not implemented')}], + ['Share', () => {alert('not implemented')}], + ['Delete', () => {alert('not implemented')}], + ]); + e.preventDefault(); + } + fileDiv.classList.add('file'); filename.classList.add('filename'); filename.innerText = name; @@ -153,4 +171,30 @@ function begin_upload() { the_file.click(); } +function context(e, entries) { + if (context_menu) + context_menu.remove(); + + context_menu = document.createElement('ul'); + context_menu.classList.add('context'); + + context_menu.style.left = e.clientX + "px"; + context_menu.style.top = e.clientY + "px"; + + + for (const e of entries) { + const li = document.createElement('li'); + li.innerText = e[0]; + li.onclick = e[1]; + context_menu.appendChild(li); + } + + document.body.appendChild(context_menu); +} + +document.body.onclick = () => { + if (context_menu) + context_menu.remove(); +} + load_dir(); diff --git a/loggedin.php b/loggedin.php index 34b8997..5c900c9 100644 --- a/loggedin.php +++ b/loggedin.php @@ -22,4 +22,5 @@ + -- cgit v1.2.3 From 6992510faf7de95b37d151da3d5e6f7026af343e Mon Sep 17 00:00:00 2001 From: Alex Vitkov Date: Fri, 12 Feb 2021 16:35:22 +0200 Subject: front end code for rename/delete --- loggedin.js | 52 ++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 44 insertions(+), 8 deletions(-) diff --git a/loggedin.js b/loggedin.js index d80c734..78a7099 100644 --- a/loggedin.js +++ b/loggedin.js @@ -72,11 +72,6 @@ function done_upload(fileview) { } function load_dir() { - var data = new FormData(); - - var path = "/"; - for (const d of pwd) - path += d + "/"; while (the_path.children.length > 1) the_path.removeChild(the_path.lastChild); @@ -100,7 +95,8 @@ function load_dir() { } } - data.append('path', path); + var data = new FormData(); + data.append('path', get_path()); var xhr = new XMLHttpRequest(); xhr.open('POST', '/php/readdir.php', true); @@ -117,6 +113,39 @@ function load_dir() { xhr.send(data); } +function delete_file(filename) { + var file_full_path = get_path() + filename; + + var data = new FormData(); + data.append('path', file_full_path); + + var xhr = new XMLHttpRequest(); + xhr.open('POST', '/php/delete.php', true); + xhr.onload = function () { + load_dir(); + }; + xhr.send(data); +} + +function rename_file(filename) { + var file_full_path = get_path() + filename; + + var new_name = prompt(`Rename ${filename} to`, filename); + if (!new_name) + return; + + var data = new FormData(); + data.append('path', file_full_path); + data.append('new_name', new_name); + + var xhr = new XMLHttpRequest(); + xhr.open('POST', '/php/rename.php', true); + xhr.onload = function () { + load_dir(); + }; + xhr.send(data); +} + function add_file_visuals(name, is_directory, mimetype) { var fileDiv = document.createElement('div'); @@ -143,9 +172,9 @@ function add_file_visuals(name, is_directory, mimetype) { alert('not implemented'); } }], - ['Rename', () => {alert('not implemented')}], + ['Rename', () => { rename_file(name); }], ['Share', () => {alert('not implemented')}], - ['Delete', () => {alert('not implemented')}], + ['Delete', () => { delete_file(name); }], ]); e.preventDefault(); } @@ -192,6 +221,13 @@ function context(e, entries) { document.body.appendChild(context_menu); } +function get_path() { + var path = "/"; + for (const d of pwd) + path += d + "/"; + return path; +} + document.body.onclick = () => { if (context_menu) context_menu.remove(); -- cgit v1.2.3