From ebc780fa084ebeb8300d20fd9bdbc144fd4f6212 Mon Sep 17 00:00:00 2001 From: Nikola-Mircic Date: Tue, 15 Mar 2022 21:35:27 +0100 Subject: [PATCH 1/5] Scrolling down to opened text files --- client/assets/js/workspace.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/client/assets/js/workspace.js b/client/assets/js/workspace.js index f1ae51e..e04b21d 100644 --- a/client/assets/js/workspace.js +++ b/client/assets/js/workspace.js @@ -80,20 +80,22 @@ function showData(path){ if(file.type().split("/")[0] == "text"){ data = String.fromCharCode.apply(null, data); - var t = $(""); + var t = $(``); t.val(data); $("#dataView").append(t); - $("#dataView #fileName").html(`${file.name()}`); + $("#dataView #fileName").html(file.name()); $("#dataView #fileSize").html(`${file.size()/1000} kb`); $("textarea").on('change keyup paste', updateTextData); + + document.getElementById("dataView").scrollIntoView(); } if(file.type().split("/")[0] == "image"){ var urlCreator = window.URL || window.webkitURL; var imageUrl = urlCreator.createObjectURL(file.original); - $("#dataView").append(`\"${file.name()}\"src=\"${imageUrl}\"`); + $("#dataView").append(`\"${file.name()}\"src=\"${imageUrl}\"`); $("#dataView #fileName").html(`${file.name()}`); $("#dataView #fileSize").html(`${file.size()/1000} kb`); } From bd5714e28c60370deb0493487be3c13390d51844 Mon Sep 17 00:00:00 2001 From: Nikola-Mircic Date: Mon, 21 Mar 2022 22:55:04 +0100 Subject: [PATCH 2/5] Deleting files --- client/assets/css/index.css | 23 ++++++++++++++- client/assets/css/main.css | 2 +- client/assets/js/main.js | 54 +++++++++++++++++++++++++++++++---- client/assets/js/workspace.js | 12 ++++++-- 4 files changed, 81 insertions(+), 10 deletions(-) diff --git a/client/assets/css/index.css b/client/assets/css/index.css index 7103112..695bc33 100644 --- a/client/assets/css/index.css +++ b/client/assets/css/index.css @@ -103,7 +103,28 @@ max-width: 90%; } -#fileStats p{ +#fileStats>div{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; + min-width: 50%; +} + +#fileStats button{ + font-size: 100%; + display: block; + position: relative; + width: fit-content; + height: fit-content; + background-color: rgba(0, 0, 0, 0); + border: none; +} + +/*#fileStats button:hover{ + +}*/ + +#fileStats>p{ word-break: break-all; white-space: normal; } diff --git a/client/assets/css/main.css b/client/assets/css/main.css index cf49394..c29d583 100644 --- a/client/assets/css/main.css +++ b/client/assets/css/main.css @@ -121,7 +121,7 @@ button:hover { transition-duration: 0.2s; color: rgb(67, 217, 255); background-color: rgb(15, 53, 124); - padding: 5px; + /*padding: 5px;*/ /*font-size: 1.6rem;*/ } diff --git a/client/assets/js/main.js b/client/assets/js/main.js index 3e62fb4..f70f77d 100644 --- a/client/assets/js/main.js +++ b/client/assets/js/main.js @@ -1,5 +1,3 @@ -'use strict' - //const socket = require("socket.io-client/lib/socket"); var activeUsers = []; @@ -103,10 +101,18 @@ function writeLoadedFiles(directory, list){ directory.files.forEach((file)=>{ let filePath = (file.path=="")?("/"+file.name()):file.path; list.append(`
  • -
    -

    ${file.name()}

    -

    ${file.size()/1000} kb

    -
    +
    +

    + ${file.name()}

    +
    +

    + ${file.size()/1000} kb +

    + +
    +
    • `); if(file.state == EDITING){ @@ -461,4 +467,40 @@ function addFileToList(file){ $("#received").show(); $("#data ol").html(htmlData); +} + +function deleteFile(path, event){ + event.stopPropagation() + + var pathSteps = path.split("/"); + + var dir = workspaceFiles; + + for(let i=1;i{ + return file.name() != pathSteps[pathSteps.length-1]; + }); + + if(dir.files.length == 0){ + function deleteEmptyFolders(folder, index){ + if(index > pathSteps.length-2) return; + + let dir_name = pathSteps[index]; + + let current_folder = folder.directories[dir_name]; + + if(Object.keys(current_folder.directories).length != 0){ + deleteEmptyFolders(current_folder, index+1); + } + + if(Object.keys(current_folder.directories).length == 0 && current_folder.files.length == 0){ + delete folder.directories[dir_name]; + } + } + + deleteEmptyFolders(workspaceFiles, 1) + } + + writeLoadedFiles(workspaceFiles, filesListDiv) } \ No newline at end of file diff --git a/client/assets/js/workspace.js b/client/assets/js/workspace.js index e04b21d..c4502c5 100644 --- a/client/assets/js/workspace.js +++ b/client/assets/js/workspace.js @@ -188,8 +188,16 @@ async function onInput(e){ for(let i=0;i
    -

    ${files[i].name}

    -

    ${files[i].size/1000} kb

    +

    + ${files[i].name}

    +
    +

    + ${files[i].size/1000} kb +

    + +
    `); From 21082c89782f580fb583992a1cefba7ee799886e Mon Sep 17 00:00:00 2001 From: Nikola-Mircic Date: Mon, 21 Mar 2022 23:17:52 +0100 Subject: [PATCH 3/5] Dropping files to the folders --- client/assets/js/main.js | 6 +++--- client/assets/js/workspace.js | 20 ++++++++++++-------- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/client/assets/js/main.js b/client/assets/js/main.js index f70f77d..6fe2c75 100644 --- a/client/assets/js/main.js +++ b/client/assets/js/main.js @@ -122,7 +122,7 @@ function writeLoadedFiles(directory, list){ Object.keys(directory.directories).forEach((key)=>{ if(directory.directories[key].isOpen){ - list.append(`
  • + list.append(`
  • ${key}:
    • `); @@ -131,7 +131,7 @@ function writeLoadedFiles(directory, list){ writeLoadedFiles(directory.directories[key], dirList); list.append(dirList); }else{ - list.append(`
  • + list.append(`
  • ${key}:
    • `); } @@ -485,7 +485,7 @@ function deleteFile(path, event){ if(dir.files.length == 0){ function deleteEmptyFolders(folder, index){ if(index > pathSteps.length-2) return; - + let dir_name = pathSteps[index]; let current_folder = folder.directories[dir_name]; diff --git a/client/assets/js/workspace.js b/client/assets/js/workspace.js index c4502c5..f997bdf 100644 --- a/client/assets/js/workspace.js +++ b/client/assets/js/workspace.js @@ -19,7 +19,6 @@ fetch(window.location.origin+'/get-user-ip').then((ip)=>{ }) $(".headerContainer").on('click', ()=>{ - console.log("Clicked header!"); $("#headerContainer").toggle(); $("#userIpAddr").toggle(); }); @@ -33,8 +32,6 @@ $(".headerContainer").on('click', ()=>{ function toggleEntryList(path){ var pathSteps = path.split("/"); - console.log(pathSteps); - var dir = workspaceFiles; for(let i=1; i{ if(file.state == EDITING){ file.original = new File([text], file.name(), { @@ -133,7 +130,7 @@ function loadFileData(entry, directory, writeFunc){ temp.original = sample; temp.isFile = true; - temp.path = entry.fullPath; + temp.path = directory.path+"/"+entry.name; directory.files=[...(directory.files || []),temp]; @@ -142,7 +139,7 @@ function loadFileData(entry, directory, writeFunc){ }else if(entry.isDirectory){ var temp = Object.assign({}, DirectoryStruct); temp.directories = {}; - temp.path = entry.fullPath; + temp.path = directory.path+"/"+entry.name; var reader = entry.createReader(); reader.readEntries((entries)=>{ @@ -156,17 +153,24 @@ function loadFileData(entry, directory, writeFunc){ } } -function onFileDrop(event){ +function onFileDrop(event, dir_path){ event.preventDefault(); + event.stopPropagation(); $("#dropField").hide(); $("#selection_view").show(); + var default_folder = workspaceFiles; + if(dir_path){ + dir_path = dir_path.split("/"); + for(let i=1;i Date: Wed, 23 Mar 2022 21:26:49 +0100 Subject: [PATCH 4/5] Buttons for download and delete UI --- client/assets/css/index.css | 32 ++++++++++++++++++++++++-------- client/index.html | 3 ++- 2 files changed, 26 insertions(+), 9 deletions(-) diff --git a/client/assets/css/index.css b/client/assets/css/index.css index 695bc33..22282e5 100644 --- a/client/assets/css/index.css +++ b/client/assets/css/index.css @@ -59,13 +59,18 @@ margin: 5px auto 15px auto; } -#selection_view button{ - position: absolute; - display: block; +#selection_view>div{ + display: flex; + justify-content: space-around; width: 100%; +} + +#selection_view>div>button{ + width: fit-content; height: fit-content; font-size: 135%; - border: 2px solid rgba(16, 14, 54, 0.9);; + border: 2px solid rgba(16, 14, 54, 0.9); + min-width: 25%; } #selectedFiles{ @@ -94,7 +99,7 @@ width: 100%; } -#fileStats{ +#fileStats, .folderStats{ position: relative; margin: 5px auto; display: flex; @@ -103,14 +108,25 @@ max-width: 90%; } -#fileStats>div{ +/*#fileStats .fileControl{ display: flex; justify-content: space-between; flex-wrap: wrap; min-width: 50%; +}*/ + +#fileStats div{ + display: flex; +} + +#fileStats .buttonSet, .folderStats .buttonSet{ + display: flex; + justify-content: space-evenly; + align-items: center; + min-width: 20%; } -#fileStats button{ +#fileStats button, .folderStats button{ font-size: 100%; display: block; position: relative; @@ -124,7 +140,7 @@ }*/ -#fileStats>p{ +#fileStats>p, .folderStats>p{ word-break: break-all; white-space: normal; } diff --git a/client/index.html b/client/index.html index b848c35..f33be7c 100644 --- a/client/index.html +++ b/client/index.html @@ -53,7 +53,8 @@