|
|
@@ -27,13 +27,15 @@
|
|
|
<body class="whiteTheme">
|
|
|
<div id="navibar" class="navibar whiteTheme">
|
|
|
<!-- File Opr Group-->
|
|
|
- <button class="fileOprBtn" title="Open" onclick="openViaButton();"><img class="opricon" src="img/opr/open.svg"><p class="oprtxt" locale="fileopr/Open">Open</p></button>
|
|
|
- <button class="fileOprBtn" title="Copy" onclick="copy();"><img class="opricon" src="img/opr/copy.svg"><p class="oprtxt" locale="fileopr/Copy">Copy</p></button>
|
|
|
- <button class="fileOprBtn" title="Paste" onclick="paste();"><img class="opricon" src="img/opr/paste.svg"><p class="oprtxt" locale="fileopr/Paste">Paste</p></button>
|
|
|
- <div class="fileoprGroupDivider" style="display: inline-block; vertical-align: top;">
|
|
|
- <button class="fileoprSmallBtn" title="Open with" onclick="openWith();"><i class="external icon"></i> <span locale="fileopr/Open with">Open With</span></button><br>
|
|
|
- <button class="fileoprSmallBtn" title="Cut" onclick="cut();"><i class="blue cut icon"></i> <span locale="fileopr/Cut">Cut</span></button><br>
|
|
|
- <button class="fileoprSmallBtn" title="Rename" onclick="rename();"><i class="teal i cursor icon"></i> <span locale="fileopr/Rename">Rename</span></button>
|
|
|
+ <div class="btnGroup" style="display:inline-block;">
|
|
|
+ <button class="fileOprBtn" title="Open" onclick="openViaButton();"><img class="opricon" src="img/opr/open.svg"><p class="oprtxt" locale="fileopr/Open">Open</p></button>
|
|
|
+ <button class="fileOprBtn" title="Copy" onclick="copy();"><img class="opricon" src="img/opr/copy.svg"><p class="oprtxt" locale="fileopr/Copy">Copy</p></button>
|
|
|
+ <button class="fileOprBtn" title="Paste" onclick="paste();"><img class="opricon" src="img/opr/paste.svg"><p class="oprtxt" locale="fileopr/Paste">Paste</p></button>
|
|
|
+ <div class="fileoprGroupDivider" style="display: inline-block; vertical-align: top;">
|
|
|
+ <button class="fileoprSmallBtn" title="Open with" onclick="openWith();"><i class="external icon"></i> <span locale="fileopr/Open with">Open With</span></button><br>
|
|
|
+ <button class="fileoprSmallBtn" title="Cut" onclick="cut();"><i class="blue cut icon"></i> <span locale="fileopr/Cut">Cut</span></button><br>
|
|
|
+ <button class="fileoprSmallBtn" title="Rename" onclick="rename();"><i class="teal i cursor icon"></i> <span locale="fileopr/Rename">Rename</span></button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<button class="fileOprBtn" title="Upload" onclick="upload();"><img class="opricon" src="img/opr/upload.svg"><p class="oprtxt" locale="fileopr/Upload">Upload</p></button>
|
|
|
<button class="fileOprBtn" title="Download" onclick="downloadFile();"><img class="opricon" src="img/opr/download.svg"><p class="oprtxt" locale="fileopr/Download">Download</p></button>
|
|
|
@@ -51,45 +53,47 @@
|
|
|
</div>
|
|
|
<button class="fileOprBtn" title="Delete" onclick="deleteFile();"><img class="opricon" src="img/opr/delete.svg"><p class="oprtxt" locale="fileopr/Delete">Delete</p></button>
|
|
|
<button class="fileOprBtn" title="Share File" onclick="shareFile();"><img class="opricon" src="img/opr/share.svg"><p class="oprtxt" locale="fileopr/Share">Share</p></button>
|
|
|
-
|
|
|
+ <div class="fileoprGroupDivider" style="display: inline-block; vertical-align: top; height: 80px;"></div>
|
|
|
+ <div style="display: inline-block; vertical-align: top;">
|
|
|
+ <select id="sortingMethodSelector" title="Sorting Method" class="ui basic borderless mini dropdown" onchange="updateSortingMethods();" autocomplete="off">
|
|
|
+ <option value="default" locale="menu/sort/asc">Ascending</option>
|
|
|
+ <option value="reverse" locale="menu/sort/desc">Descending</option>
|
|
|
+ <option value="smallToLarge" locale="menu/sort/small">Smallest</option>
|
|
|
+ <option value="largeToSmall" locale="menu/sort/large"> Largest</option>
|
|
|
+ <option value="mostRecent" locale="menu/sort/mostrecent">Most Recent</option>
|
|
|
+ <option value="leastRecent" locale="menu/sort/leastrecent">Least Recent</option>
|
|
|
+ </select>
|
|
|
+ <div class="buttons">
|
|
|
+ <!-- Viewport-->
|
|
|
+ <button class="ui icon tiny button basic videmode" mode="grid" title="Block View" onclick="changeViewMode(this);"><i class="block layout icon"></i></button>
|
|
|
+ <button class="ui icon tiny button basic videmode" mode="list" title="List View" onclick="changeViewMode(this);"><i class="align justify icon"></i></button>
|
|
|
+ <button class="ui icon tiny button basic videmode" mode="details" title="Detail View" onclick="changeViewMode(this);"><i class="list ul icon"></i></button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<br>
|
|
|
- <!-- Address group -->
|
|
|
- <!-- Search group -->
|
|
|
<!-- Directoy navigations -->
|
|
|
- <button id="backbtn" class="ui icon tiny button standard whiteTheme" onclick="previosPath();" title="Back"><i class="left arrow icon"></i></button>
|
|
|
- <button id="ppbtn" class="ui icon tiny button standard whiteTheme rightPad" onclick="parentDir();" title="Parent Folder"><i class="up arrow icon"></i></button>
|
|
|
-
|
|
|
-
|
|
|
- <div class="addressBar">
|
|
|
- <button class="ui icon tiny button standard whiteTheme" onclick="toggleSidebar();" title="Toggle Folder List"><i class="content icon"></i></button>
|
|
|
- <button class="ui icon tiny button inverted" title="Dark Theme" onclick="toggleDarkTheme();"><i class="moon icon" id="darkthemebtn"></i></button>
|
|
|
- <button class="ui tiny icon button standard whiteTheme" title="Edit Path" onclick="showEditCurrentPathInput(event)"><i class="ui edit icon"></i></button>
|
|
|
- <div id="pathDisplayField" class="ui breadcrumb whiteTheme addressText pathDisplay desktopOnly" ondblclick="showEditCurrentPathInput(event);">
|
|
|
- <div class="section whiteTheme selectable"><i class="folder icon"></i> user</div>
|
|
|
- <div class="divider whiteTheme">:/</div>
|
|
|
- <div class="section whiteTheme selectable">Desktop</div>
|
|
|
+ <div class="addressBar">
|
|
|
+ <button id="backbtn" class="navibarBtn" onclick="previosPath();" title="Back"><i class="left arrow icon"></i></button>
|
|
|
+ <button id="ppbtn" class="navibarBtn" onclick="parentDir();" title="Parent Folder"><i class="up arrow icon"></i></button>
|
|
|
+
|
|
|
+ <button class="navibarBtn" onclick="toggleSidebar();" title="Toggle Folder List"><i class="content icon"></i></button>
|
|
|
+ <button class="navibarBtn DarkThemeToggle" title="Dark Theme" onclick="toggleDarkTheme();"><i class="moon icon" id="darkthemebtn"></i></button>
|
|
|
+
|
|
|
+ <div id="pathDisplayField" class="ui breadcrumb addressText pathDisplay desktopOnly" ondblclick="showEditCurrentPathInput(event);">
|
|
|
+ <div class="section selectable"><i class="folder icon"></i> user</div>
|
|
|
+ <div class="divider">:/</div>
|
|
|
+ <div class="section selectable">Desktop</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div id="pathInputField" class="ui action mini input whiteTheme" style="display:none;">
|
|
|
+ <button id="editPathBtn" class="navibarBtn" style="margin-left: 0.4em;" title="Edit Path" onclick="showEditCurrentPathInput(event)"><i class="ui edit icon"></i></button>
|
|
|
+ <div id="pathInputField" class="ui action mini input" style="display:none;">
|
|
|
<input type="text" style="min-width: 200px;" class="whiteTheme" placeholder="Type a path and press enter" onkeydown="handleOpenPathKeydown(event);">
|
|
|
- <button class="ui icon button" title="Open" onclick="openEnteredPath(this);">
|
|
|
+ <button class="ui icon basic button" title="Open" onclick="openEnteredPath(this);">
|
|
|
<i class="checkmark icon"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
- <div class="rightAlign">
|
|
|
- <select id="sortingMethodSelector" title="Sorting Method" class="ui basic borderless mini dropdown" onchange="updateSortingMethods();" autocomplete="off">
|
|
|
- <option value="default" locale="menu/sort/asc">Ascending</option>
|
|
|
- <option value="reverse" locale="menu/sort/desc">Descending</option>
|
|
|
- <option value="smallToLarge" locale="menu/sort/small">Smallest</option>
|
|
|
- <option value="largeToSmall" locale="menu/sort/large"> Largest</option>
|
|
|
- <option value="mostRecent" locale="menu/sort/mostrecent">Most Recent</option>
|
|
|
- <option value="leastRecent" locale="menu/sort/leastrecent">Least Recent</option>
|
|
|
- </select>
|
|
|
- <button id="searhbtn" class="ui icon tiny button standard whiteTheme" title="Search" onclick="toggleSearch();"><i class="search icon"></i></button>
|
|
|
- <button class="ui icon tiny button standard whiteTheme videmode" mode="grid" title="Block View" onclick="changeViewMode(this);"><i class="block layout icon"></i></button>
|
|
|
- <button class="ui icon tiny button standard whiteTheme videmode" mode="list" title="List View" onclick="changeViewMode(this);"><i class="align justify icon"></i></button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <button id="searhbtn" class="navibarBtn" title="Search" onclick="toggleSearch();"><i class="search icon"></i></button>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="mobilePathDisplayWrapper">
|
|
|
<div id="mobilePathDisplay" style="width:100%;" class="ui pathDisplay breadcrumb whiteTheme addressText mobileOnly">
|
|
|
<div class="section whiteTheme selectable"><i class="folder icon"></i> user</div>
|
|
|
@@ -97,15 +101,15 @@
|
|
|
<div class="section whiteTheme selectable">Desktop</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="searchbar" style="z-index:999; display:none;">
|
|
|
- <div style="width: 80%; display:inline-block; margin-top:-4px;">
|
|
|
+ <div class="searchbar" style="display:none;">
|
|
|
+ <div class="searInputBar" style="width: 80%; display:inline-block; margin-top:-4px;">
|
|
|
<div class="ui mini fluid input">
|
|
|
<input autocomplete="off" id="searchInput" type="text" class="whiteTheme" placeholder="File Search (Start wildcard search with / , e.g. /*.mp3)" onkeypress="handleSearchBarPress(event);">
|
|
|
</div>
|
|
|
</div>
|
|
|
- <button class="ui icon tiny button standard whiteTheme" title="Case Sensitive" onclick="toggleCaseSensitive(this);">Aa</button>
|
|
|
- <button class="ui icon tiny button standard whiteTheme" title="Search" onclick="handleSearch();"><i class="search icon"></i></button>
|
|
|
- <button class="ui icon tiny button standard whiteTheme" title="Clear Search" onclick="hideSearchBar();"><i class="remove icon"></i></button>
|
|
|
+ <button class="navibarBtn" title="Case Sensitive" onclick="toggleCaseSensitive(this);" style="margin-left: 0.4em;">Aa</button>
|
|
|
+ <button class="navibarBtn" title="Search" onclick="handleSearch();"><i class="search icon"></i></button>
|
|
|
+ <button class="navibarBtn" title="Clear Search" onclick="hideSearchBar();"><i class="red remove icon"></i></button>
|
|
|
</div>
|
|
|
<div class="msgbox" style="z-index:999; display:none;">
|
|
|
<i class="checkmark icon"></i> <span>No Message</span>
|
|
|
@@ -128,10 +132,10 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div id="folderView" ondrop="drop(event)" ondragover="allowDrop(event)">
|
|
|
- <div id="folderList" class="ui segmented fluid list">
|
|
|
+ <div id="folderList" class="fileviewList">
|
|
|
|
|
|
</div>
|
|
|
- <div id="fileList" class="ui segmented fluid list">
|
|
|
+ <div id="fileList" class="fileviewList">
|
|
|
|
|
|
</div>
|
|
|
<br>
|
|
|
@@ -415,7 +419,7 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- Context Menu -->
|
|
|
- <div id="contextmenu" class="ui small contextmenu visible whiteTheme" style="min-width:250px;">
|
|
|
+ <div id="contextmenu" class="contextmenu" style="min-width:250px;">
|
|
|
<div class="item" onclick="openViaButton();">
|
|
|
<i class="folder open icon"></i> <span locale="contextmenu/open">Open</span>
|
|
|
</div>
|
|
|
@@ -593,7 +597,7 @@
|
|
|
let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
|
|
|
|
|
//Intiiation functions
|
|
|
- $(document).ready(function(){
|
|
|
+ $(document).ready(function(){
|
|
|
if (applocale){
|
|
|
//Applocale found. Do localization
|
|
|
applocale.init("../locale/file_explorer.json", function(){
|
|
|
@@ -601,6 +605,7 @@
|
|
|
initRootDirs();
|
|
|
initSystemInfo();
|
|
|
initUploadMode();
|
|
|
+ $(".dropdown").dropdown();
|
|
|
});
|
|
|
}else{
|
|
|
//Applocale not found. Is this a trim down version of ArozOS?
|
|
|
@@ -612,6 +617,7 @@
|
|
|
initRootDirs();
|
|
|
initSystemInfo();
|
|
|
initUploadMode();
|
|
|
+ $(".dropdown").dropdown();
|
|
|
}
|
|
|
|
|
|
if (isMobile){
|
|
|
@@ -629,13 +635,9 @@
|
|
|
$(".desktopOnly").hide();
|
|
|
$(".mobileOnly").show();
|
|
|
|
|
|
- //Adjust minor css on mobile devices
|
|
|
- $(".rightPad").css("margin-right", "37px");
|
|
|
}else{
|
|
|
$(".mobileOnly").hide();
|
|
|
$(".desktopOnly").show();
|
|
|
-
|
|
|
- $(".rightPad").css("margin-right", "37px");
|
|
|
}
|
|
|
//Initialize view mode buttons
|
|
|
updateViewmodeButtons();
|
|
|
@@ -727,8 +729,14 @@
|
|
|
}
|
|
|
|
|
|
});
|
|
|
- }, 5000)
|
|
|
+ }, 5000);
|
|
|
+
|
|
|
|
|
|
+ //Update the window sizes for special cases
|
|
|
+ if (window.innerWidth < 620 && !isMobile){
|
|
|
+ toggleSidebar(false);
|
|
|
+ }
|
|
|
+ initWindowSizes(false);
|
|
|
});
|
|
|
|
|
|
//END OF INIT FUNCTIONS
|
|
|
@@ -760,7 +768,7 @@
|
|
|
var icon = specifcRootInfo[0];
|
|
|
var displayName = specifcRootInfo[1];
|
|
|
var vpath = thisRootObject.Filepath;
|
|
|
- $("#userroot").append(`<div class="dir item userroot" filepath="${vpath}" type="folder" onclick="openthis(this);"><i class="${icon} rightmargin icon"></i> ${displayName}</div>`);
|
|
|
+ $("#userroot").append(`<div class="dir item userrootfolder" filepath="${vpath}" type="folder" onclick="openthis(this);"><i class="${icon} rightmargin icon"></i> ${displayName}</div>`);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -793,7 +801,7 @@
|
|
|
if (usagePercentage > 90){
|
|
|
className = "negative";
|
|
|
}
|
|
|
- $("#deviceList").append(`<div class="dir item ${currentTheme}" filepath="${drivePath}" ><i class="disk outline rightmargin icon"></i> ${drivePath}
|
|
|
+ $("#deviceList").append(`<div class="dir item" filepath="${drivePath}" ><i class="disk outline rightmargin icon"></i> ${drivePath}
|
|
|
<div style="width:100px;height:15px !important; position:absolute;right:3px;top:6px;"">
|
|
|
<div class="ui ${className} tiny progress">
|
|
|
<div class="bar" style="width: ${usagePercentage}%"></div>
|
|
|
@@ -908,19 +916,12 @@
|
|
|
|
|
|
//Add loading screen to the folderlists and fileList
|
|
|
$("#fileList").html("");
|
|
|
- if (currentTheme == "darkTheme"){
|
|
|
- $("#folderList").html(`<div style="height: 100px;">
|
|
|
- <div class="ui active dimmer">
|
|
|
- <div class="ui text loader">${applocale.getString("message/loading", "Loading")}</div>
|
|
|
- </div>
|
|
|
- </div>`);
|
|
|
- }else{
|
|
|
- $("#folderList").html(`<div style="height: 100px;">
|
|
|
- <div class="ui active inverted dimmer">
|
|
|
- <div class="ui text loader">${applocale.getString("message/loading", "Loading")}</div>
|
|
|
- </div>
|
|
|
- </div>`);
|
|
|
- }
|
|
|
+ $("#folderList").html(`<div style="height: 100px;">
|
|
|
+ <div class="ui active inverted dimmer">
|
|
|
+ <div class="ui text loader">${applocale.getString("message/loading", "Loading")}</div>
|
|
|
+ </div>
|
|
|
+ </div>`);
|
|
|
+
|
|
|
|
|
|
//Highlight the target vroot name on the side bar
|
|
|
$(".vroot.active").removeClass("active");
|
|
|
@@ -999,10 +1000,10 @@
|
|
|
|
|
|
//Print folder not found exception
|
|
|
$("#folderList").show();
|
|
|
- $("#folderList").html(`<div class="ui basic segment ${currentTheme}">
|
|
|
+ $("#folderList").html(`<div class="ui basic segment">
|
|
|
<div class="ui header">
|
|
|
- <i class="remove icon ${currentTheme}"></i> <span class="${currentTheme}">${applocale.getString("message/folderCannotOpen","This Folder Cannot Be Opened")}</span>
|
|
|
- <div class="sub header ${currentTheme}" style="margin-top:12px;">${applocale.getString("message/folderCannotOpen/codedesc","The server return the following error message:")} <br><code>${data.error.toUpperCase()}</code><br>
|
|
|
+ <i class="remove icon"></i> <span>${applocale.getString("message/folderCannotOpen","This Folder Cannot Be Opened")}</span>
|
|
|
+ <div class="sub header" style="margin-top:12px;">${applocale.getString("message/folderCannotOpen/codedesc","The server return the following error message:")} <br><code>${data.error.toUpperCase()}</code><br>
|
|
|
${new Date().toLocaleString(undefined, {year: 'numeric', month: '2-digit', day: '2-digit', weekday:"long", hour: '2-digit', hour12: false, minute:'2-digit', second:'2-digit'})}</div>
|
|
|
</div>
|
|
|
</div>`);
|
|
|
@@ -1051,13 +1052,37 @@
|
|
|
$("#folderList").html("");
|
|
|
//Build the css strcture of the list
|
|
|
if (viewMode == "list"){
|
|
|
- $("#fileList").attr("class",`ts segmented fluid list ${currentTheme}`);
|
|
|
- $("#folderList").attr("class",`ts segmented fluid list ${currentTheme}`);
|
|
|
+
|
|
|
}else if (viewMode == "details"){
|
|
|
-
|
|
|
+ //Append the table structure to the corrisponding elements
|
|
|
+ $("#folderList").append(`<table class="ui very basic compact unstackable table" style="padding-right: 2em;">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th><span class="foldercounter"></span>${applocale.getString("view/details/folders", " Folders")}</th>
|
|
|
+ <th>${applocale.getString("view/details/modTime", "Last Modification")}</th>
|
|
|
+ <th>${applocale.getString("view/details/shared", "Shared")}</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody class="folderDetailList detailTableContent">
|
|
|
+
|
|
|
+ </tbody>
|
|
|
+ </table>`);
|
|
|
+ $("#fileList").append(`<table class="ui very basic compact unstackable table" style="padding-right: 2em;">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th><span class="filecounter"></span>${applocale.getString("view/details/files", " Files")}</th>
|
|
|
+ <th>${applocale.getString("view/details/ext", "Extension")}</th>
|
|
|
+ <th>${applocale.getString("view/details/size", "Filesize")}</th>
|
|
|
+ <th class="collapsing">${applocale.getString("view/details/modTime", "Last Modification")}</th>
|
|
|
+ <th>${applocale.getString("view/details/shared", "Shared")}</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody class="fileDetailList detailTableContent">
|
|
|
+
|
|
|
+ </tbody>
|
|
|
+ </table>`);
|
|
|
}else if (viewMode == "grid"){
|
|
|
- $("#fileList").attr("class",`${currentTheme}`).css("vertical-align","top");
|
|
|
- $("#folderList").attr("class",`${currentTheme}`).css("vertical-align","top");
|
|
|
+
|
|
|
}
|
|
|
|
|
|
var files = [];
|
|
|
@@ -1097,12 +1122,13 @@
|
|
|
var filesize = folders[i].Filesize;
|
|
|
var Displaysize = folders[i].Displaysize;
|
|
|
var isShared = folders[i].IsShared;
|
|
|
+ var modTime = folders[i].ModTime;
|
|
|
var ext = getExtFromPath(filepath);
|
|
|
//var icon = ao_module_utils.getIconFromExt(ext);
|
|
|
var icon = "folder";
|
|
|
var shareicon = "";
|
|
|
if (isShared == true){
|
|
|
- shareicon = `<button class="sharebtn ${currentTheme}" onclick='handleShareFilebuttonClick(event, this);' style="margin-left: 4px; height: 16px;">
|
|
|
+ shareicon = `<button class="sharebtn" onclick='handleShareFilebuttonClick(event, this);' style="margin-left: 4px; height: 16px;">
|
|
|
<i class='share alternate icon'></i>
|
|
|
</button>`
|
|
|
}
|
|
|
@@ -1123,7 +1149,7 @@
|
|
|
|
|
|
}
|
|
|
|
|
|
- $("#folderList").append(`<div class="fileObject item ${currentTheme}" draggable="true" ondragstart="onFileObjectDragStart(this,event);" ondrop="dropToFolder(event)" ondragover="allowDrop(event)" fileID="${i}" filename="${filename}" filepath="${filepath}" ondblclick="openthis(this,event);" type="folder">
|
|
|
+ $("#folderList").append(`<div class="fileObject item" draggable="true" ondragstart="onFileObjectDragStart(this,event);" ondrop="dropToFolder(event)" ondragover="allowDrop(event)" fileID="${i}" filename="${filename}" filepath="${filepath}" ondblclick="openthis(this,event);" type="folder">
|
|
|
<span style="display:inline-block !important;word-break: break-all;" class="${textclass}">
|
|
|
<i class="${icon} icon" style="margin-right:12px; color:#eab54e;"></i> ${displayName} ${shareicon}
|
|
|
</span></div>`);
|
|
|
@@ -1144,14 +1170,27 @@
|
|
|
displayName = displayName.substring(0,16) + "...";
|
|
|
}
|
|
|
$("#folderList").append(`
|
|
|
- <div class="ui card fileObject ${currentTheme}" draggable="true" ondragstart="onFileObjectDragStart(this,event);" ondrop="dropToFolder(event)" ondragover="allowDrop(event)" fileID="${i}" filename="${filename}" filepath="${filepath}" ondblclick="openthis(this,event);" type="folder" style="width:${gridSize}px; display:inline-block !important;vertical-align:top; height:15em; margin-top:0px !important; overflow:hidden;">
|
|
|
+ <div class="fileObject card" draggable="true" ondragstart="onFileObjectDragStart(this,event);" ondrop="dropToFolder(event)" ondragover="allowDrop(event)" fileID="${i}" filename="${filename}" filepath="${filepath}" ondblclick="openthis(this,event);" type="folder" style="width:${gridSize}px; display:inline-block !important;vertical-align:top; height:15em; margin-top:0px !important; overflow:hidden;">
|
|
|
<div class="image" style="text-align: center;">
|
|
|
<img draggable="true"ondragstart="disableDrag(event);" src="../../img/desktop/files_icon/${filesIconTheme}/folder.png" style="height: 148px; width: 148px; display: inline-block;">
|
|
|
</div>
|
|
|
<div class="content" style="font-size: 12px;">
|
|
|
- <div class="header ${currentTheme} ${textclass}" title="${filename}">${displayName} ${shareicon}</div>
|
|
|
+ <div class="header ${textclass}" title="${filename}">${displayName} ${shareicon}</div>
|
|
|
</div>
|
|
|
</div>`);
|
|
|
+ }else if (viewMode == "details"){
|
|
|
+ let isSharedIcon = '<i class="ui grey remove icon" style="margin-left: 8px;"></i>';
|
|
|
+ if (isShared){
|
|
|
+ isSharedIcon = shareicon;
|
|
|
+ }
|
|
|
+
|
|
|
+ //Convert the unix timestamp to datetime
|
|
|
+ var date = new Date(modTime * 1000);
|
|
|
+ $("#folderList").find(".folderDetailList").append(`<tr class="fileObject details" draggable="true" ondragstart="onFileObjectDragStart(this,event);" ondrop="dropToFolder(event)" ondragover="allowDrop(event)" fileID="${i}" filename="${filename}" filepath="${filepath}" ondblclick="openthis(this,event);" type="folder">
|
|
|
+ <td><i class="${icon} icon" style="margin-right:12px; color:#eab54e;"></i> ${filename}</td>
|
|
|
+ <td class="light-text">${date.toLocaleDateString("default") + " " + date.toLocaleTimeString("default")}</td>
|
|
|
+ <td>${isSharedIcon}</td>
|
|
|
+ </tr>`);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1160,6 +1199,7 @@
|
|
|
}else{
|
|
|
$("#folderList").show();
|
|
|
}
|
|
|
+
|
|
|
|
|
|
//List all files
|
|
|
var fl = folders.length;
|
|
|
@@ -1170,7 +1210,9 @@
|
|
|
var filesize = files[i].Filesize;
|
|
|
var Displaysize = files[i].Displaysize;
|
|
|
var isShared = files[i].IsShared;
|
|
|
+ var modTime = files[i].ModTime;
|
|
|
var ext = getExtFromPath(filepath);
|
|
|
+
|
|
|
var icon = "file outline";
|
|
|
if (ext == ""){
|
|
|
icon = "file outline";
|
|
|
@@ -1189,7 +1231,7 @@
|
|
|
|
|
|
var shareicon = "";
|
|
|
if (isShared){
|
|
|
- shareicon = `<button class="sharebtn ${currentTheme}" onclick='handleShareFilebuttonClick(event, this);' style="margin-left: 4px; height: 16px;">
|
|
|
+ shareicon = `<button class="sharebtn" onclick='handleShareFilebuttonClick(event, this);' style="margin-left: 4px; height: 16px;">
|
|
|
<i class='share alternate icon'></i>
|
|
|
</button>`
|
|
|
}
|
|
|
@@ -1202,9 +1244,6 @@
|
|
|
if (viewMode == "list"){
|
|
|
var displayName = filename;
|
|
|
var textclass = "normal object";
|
|
|
- if (currentTheme == "darkTheme"){
|
|
|
- textclass += " darkTheme";
|
|
|
- }
|
|
|
|
|
|
if (ext == "shortcut"){
|
|
|
//This is a shortcut file
|
|
|
@@ -1231,7 +1270,7 @@
|
|
|
}
|
|
|
filename = ao_module_codec.decodeUmFilename(filename);
|
|
|
}
|
|
|
- $("#fileList").append(`<div class="fileObject item ${currentTheme}" draggable="true" ondragstart="onFileObjectDragStart(this,event);" fileID="${fl + i}" filename="${filename}" filepath="${filepath}" ondblclick="openthis(this,event);" type="${fileType}" filesize="${filesize}" displaysize="${Displaysize}">
|
|
|
+ $("#fileList").append(`<div class="fileObject item" draggable="true" ondragstart="onFileObjectDragStart(this,event);" fileID="${fl + i}" filename="${filename}" filepath="${filepath}" ondblclick="openthis(this,event);" type="${fileType}" filesize="${filesize}" displaysize="${Displaysize}">
|
|
|
<span style="display:inline-block !important;word-break: break-all;text-overflow: ellipsis !important;overflow: hidden;" class="${textclass}">
|
|
|
<i class="${icon} icon" style="margin-right:12px;"></i>
|
|
|
${displayName} ${shareicon}
|
|
|
@@ -1273,21 +1312,53 @@
|
|
|
|
|
|
|
|
|
$("#fileList").append(`
|
|
|
- <div class="ui card fileObject ${currentTheme}" draggable="true" ondragstart="onFileObjectDragStart(this,event);" fileID="${fl + i}" filename="${filename}" filepath="${filepath}" ondblclick="openthis(this,event);" type="${fileType}" style="width:${gridSize}px; display:inline-block !important;vertical-align:top; height:20em; margin-top:0px !important; overflow:hidden;">
|
|
|
+ <div class="fileObject card" draggable="true" ondragstart="onFileObjectDragStart(this,event);" fileID="${fl + i}" filename="${filename}" filepath="${filepath}" ondblclick="openthis(this,event);" type="${fileType}" style="width:${gridSize}px; display:inline-block !important;vertical-align:top; height:20em; margin-top:0px !important; overflow:hidden;">
|
|
|
<div class="image" style="text-align: center !important;">
|
|
|
<img draggable="true"ondragstart="disableDrag(event);" style="height: 148px; width: 148px; display:inline-block;" src="${imagePath}">
|
|
|
</div>
|
|
|
<div class="content">
|
|
|
- <div class="header ${currentTheme} ${textclass}" title="${filename}" style="text-overflow: ellipsis; font-size: 100%">${displayName} ${shareicon}</div>
|
|
|
- <div class="meta ${currentTheme}">
|
|
|
+ <div class="header ${textclass}" title="${filename}" style="text-overflow: ellipsis; font-size: 100%">${displayName} ${shareicon}</div>
|
|
|
+ <div class="meta">
|
|
|
<div>${ext}</div>
|
|
|
</div>
|
|
|
- <div class="description ${currentTheme}">
|
|
|
+ <div class="description">
|
|
|
${Displaysize}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
`);
|
|
|
+ }else if (viewMode == "details"){
|
|
|
+ if (ext == "shortcut"){
|
|
|
+ //This is a shortcut file
|
|
|
+ displayName = files[i].Shortcut.Name;
|
|
|
+
|
|
|
+ //Adjust the icon based on its shortcut ype
|
|
|
+ switch(files[i].Shortcut.Type){
|
|
|
+ case "folder":
|
|
|
+ icon = "blue folder";
|
|
|
+ break;
|
|
|
+ case "module":
|
|
|
+ icon = "blue play circle";
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ icon = "blue external";
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let isSharedIcon = '<i class="ui grey remove icon" style="margin-left: 8px;"></i>';
|
|
|
+ if (isShared){
|
|
|
+ isSharedIcon = shareicon;
|
|
|
+ }
|
|
|
+
|
|
|
+ var date = new Date(modTime * 1000);
|
|
|
+
|
|
|
+ $("#fileList").find(".fileDetailList").append(`<tr class="fileObject details" draggable="true" ondragstart="onFileObjectDragStart(this,event);" ondrop="dropToFolder(event)" ondragover="allowDrop(event)" fileID="${i}" filename="${filename}" filepath="${filepath}" ondblclick="openthis(this,event);" type="folder">
|
|
|
+ <td><i class="${icon} icon" style="margin-right:12px;"></i> ${filename}</td>
|
|
|
+ <td class="light-text">${ext}</td>
|
|
|
+ <td class="light-text">${Displaysize} <br>(${filesize} bytes)</td>
|
|
|
+ <td class="light-text">${date.toLocaleDateString("default") + " " + date.toLocaleTimeString("default")}</td>
|
|
|
+ <td>${isSharedIcon}</td>
|
|
|
+ </tr>`);
|
|
|
}
|
|
|
}
|
|
|
if (files.length == 0){
|
|
|
@@ -1305,8 +1376,15 @@
|
|
|
enableAutoRefresh = true;
|
|
|
});
|
|
|
|
|
|
- //If viewmode is grid, load file thumbnails
|
|
|
- if (viewMode == "grid"){
|
|
|
+ //Finish up the rendering
|
|
|
+ if (viewMode == "list"){
|
|
|
+
|
|
|
+ }else if (viewMode == "details"){
|
|
|
+ //Load the statistic of the folder details
|
|
|
+ $("#folderList").find(".foldercounter").text(folders.length);
|
|
|
+ $("#fileList").find(".filecounter").text(files.length);
|
|
|
+ }else if (viewMode == "grid"){
|
|
|
+ //If viewmode is grid, load file thumbnails
|
|
|
startThumbnailLoader();
|
|
|
}
|
|
|
|
|
|
@@ -1793,6 +1871,7 @@
|
|
|
function showEditCurrentPathInput(e){
|
|
|
e.preventDefault();
|
|
|
$("#pathInputField").find("input").val(currentPath);
|
|
|
+ $("#editPathBtn").hide();
|
|
|
if (isMobile){
|
|
|
$("#mobilePathDisplay").hide();
|
|
|
$(".mobilePathDisplayWrapper").append($("#pathInputField"));
|
|
|
@@ -1817,6 +1896,9 @@
|
|
|
newPath = newPath.split("\\").join("/");
|
|
|
listDirectory(newPath);
|
|
|
hideManualOpenPathInput();
|
|
|
+
|
|
|
+ //Restore the edit btn
|
|
|
+ $("#editPathBtn").show();
|
|
|
}
|
|
|
|
|
|
function hideManualOpenPathInput(){
|
|
|
@@ -2340,7 +2422,7 @@
|
|
|
var ext = thisfilename.split(".").pop();
|
|
|
var icon = ao_module_utils.getIconFromExt(ext);
|
|
|
deletePendingList.push(thispath);
|
|
|
- $(listObject).append(`<div class="item ${currentTheme}" ><span style="display:inline-block;">${thisfilename}</span></div>`);
|
|
|
+ $(listObject).append(`<div class="item" ><span style="display:inline-block;">${thisfilename}</span></div>`);
|
|
|
});
|
|
|
showPopupWrapper();
|
|
|
$("#forceDeleteConfirmBox").fadeIn(100);
|
|
|
@@ -2380,7 +2462,7 @@
|
|
|
var thisfilename = $(this).attr('filename');
|
|
|
var thisFilepath = $(this).attr('filepath');
|
|
|
deleteFileList.push(thisFilepath);
|
|
|
- $("#deleteConfirmBox").find(".deleteFilelist").append(`<div class="item ${currentTheme}" ><span style="display:inline-block;">${thisfilename}</span></div>`);
|
|
|
+ $("#deleteConfirmBox").find(".deleteFilelist").append(`<div class="item" ><span style="display:inline-block;">${thisfilename}</span></div>`);
|
|
|
});
|
|
|
if (deleteFileList.length == 0){
|
|
|
//No files selected
|
|
|
@@ -2490,23 +2572,23 @@
|
|
|
var l = pathInfo.length;
|
|
|
//Append the starting vdir
|
|
|
$(".pathDisplay").html("");
|
|
|
- $(".pathDisplay").append(`<div class="section ${currentTheme} selectable" onclick="rootDir();"><i class="folder icon"></i> ${vdID}</div>`);
|
|
|
- $(".pathDisplay").append(`<div class="divider ${currentTheme} whiteTheme">/</div>`);
|
|
|
+ $(".pathDisplay").append(`<div class="section selectable" onclick="rootDir();"><i class="folder icon"></i> ${vdID}</div>`);
|
|
|
+ $(".pathDisplay").append(`<div class="divider whiteTheme">/</div>`);
|
|
|
//console.log(pathInfo);
|
|
|
if (l > 3){
|
|
|
//E.g. user:/Desktop/test/boo/ => Display as user:/.../test/boo/
|
|
|
- $(".pathDisplay").append(`<div class="section ${currentTheme}">...</div>`);
|
|
|
- $(".pathDisplay").append(`<div class="divider ${currentTheme} whiteTheme">/</div>`);
|
|
|
- $(".pathDisplay").append(`<div class="section ${currentTheme} selectable" onclick="parentDir();">${shortenLongFoldername(pathInfo[l-2], 40)}</div>`);
|
|
|
- $(".pathDisplay").append(`<div class="divider ${currentTheme} whiteTheme">/</div>`);
|
|
|
- $(".pathDisplay").append(`<div class="section ${currentTheme} selectable" onclick="refreshList();">${shortenLongFoldername(pathInfo[l-1], 60)}</div>`);
|
|
|
+ $(".pathDisplay").append(`<div class="section">...</div>`);
|
|
|
+ $(".pathDisplay").append(`<div class="divider whiteTheme">/</div>`);
|
|
|
+ $(".pathDisplay").append(`<div class="section selectable" onclick="parentDir();">${shortenLongFoldername(pathInfo[l-2], 40)}</div>`);
|
|
|
+ $(".pathDisplay").append(`<div class="divider whiteTheme">/</div>`);
|
|
|
+ $(".pathDisplay").append(`<div class="section selectable" onclick="refreshList();">${shortenLongFoldername(pathInfo[l-1], 60)}</div>`);
|
|
|
}else if (l == 3){
|
|
|
- $(".pathDisplay").append(`<div class="section ${currentTheme} selectable" onclick="parentDir();">${shortenLongFoldername(pathInfo[l-2], 40)}</div>`);
|
|
|
- $(".pathDisplay").append(`<div class="divider ${currentTheme} whiteTheme">/</div>`);
|
|
|
- $(".pathDisplay").append(`<div class="section ${currentTheme} selectable" onclick="refreshList();">${shortenLongFoldername(pathInfo[l-1], 60)}</div>`);
|
|
|
+ $(".pathDisplay").append(`<div class="section selectable" onclick="parentDir();">${shortenLongFoldername(pathInfo[l-2], 40)}</div>`);
|
|
|
+ $(".pathDisplay").append(`<div class="divider whiteTheme">/</div>`);
|
|
|
+ $(".pathDisplay").append(`<div class="section selectable" onclick="refreshList();">${shortenLongFoldername(pathInfo[l-1], 60)}</div>`);
|
|
|
}else if (l == 2){
|
|
|
//E.g. user:/Desktop or user:/
|
|
|
- $(".pathDisplay").append(`<div class="section ${currentTheme} selectable" onclick="refreshList();">${shortenLongFoldername(pathInfo[1], 80)}</div>`);
|
|
|
+ $(".pathDisplay").append(`<div class="section selectable" onclick="refreshList();">${shortenLongFoldername(pathInfo[1], 80)}</div>`);
|
|
|
}
|
|
|
|
|
|
//Update the manual input field as well
|
|
|
@@ -3230,13 +3312,6 @@
|
|
|
}
|
|
|
|
|
|
// ============================== WINDOW RESIZE FUNCTIONS =====================
|
|
|
- $(document).ready(function(data){
|
|
|
- if (window.innerWidth < 620 && !isMobile){
|
|
|
- toggleSidebar(false);
|
|
|
- }
|
|
|
- initWindowSizes(false);
|
|
|
- });
|
|
|
-
|
|
|
$(window).on("resize",function(){
|
|
|
initWindowSizes(false);
|
|
|
if (!isMobile && window.innerWidth < 620 && sideBarShown == true){
|
|
|
@@ -3261,6 +3336,8 @@
|
|
|
$(object).parent().parent().addClass("selected");
|
|
|
}else if (viewMode == "grid"){
|
|
|
$(object).parent().parent().parent().addClass("selected");
|
|
|
+ }else if (viewMode == "details"){
|
|
|
+ $(object).parent().parent().addClass("selected");
|
|
|
}
|
|
|
|
|
|
shareFile();
|
|
|
@@ -3281,7 +3358,10 @@
|
|
|
|
|
|
});
|
|
|
|
|
|
- if (selectedFiles.length != 1){
|
|
|
+ if (selectedFiles.length == 0){
|
|
|
+ console.log("No file is selected for sharing");
|
|
|
+ return;
|
|
|
+ }else if (selectedFiles > 1){
|
|
|
//Try to share more than 1 files, which is not supported
|
|
|
console.log("Multi share is current not supported");
|
|
|
return
|
|
|
@@ -3504,8 +3584,6 @@
|
|
|
if (ao_module_virtualDesktop){
|
|
|
parent.initTheme("whiteTheme");
|
|
|
}
|
|
|
-
|
|
|
- $(".rightPad").css("margin-right", "37px");
|
|
|
|
|
|
}else{
|
|
|
//Set to DarkTheme
|
|
|
@@ -4532,10 +4610,10 @@
|
|
|
|
|
|
//Clear current folderlist
|
|
|
$("#folderList").show();
|
|
|
- $("#folderList").html(`<div class="ui basic segment ${currentTheme}">
|
|
|
+ $("#folderList").html(`<div class="ui basic segment">
|
|
|
<div class="ui header">
|
|
|
- <i class="arrow up icon ${currentTheme}"></i> <span class="${currentTheme}">${applocale.getString("func/search/typeToStart", "Type to Start Search")}</span>
|
|
|
- <div class="sub header ${currentTheme}" style="margin-top:12px;">${applocale.getString("func/search/tip1", "Type something in the search bar to start searching.")}<br>
|
|
|
+ <i class="arrow up icon"></i> <span>${applocale.getString("func/search/typeToStart", "Type to Start Search")}</span>
|
|
|
+ <div class="sub header" style="margin-top:12px;">${applocale.getString("func/search/tip1", "Type something in the search bar to start searching.")}<br>
|
|
|
${applocale.getString("func/search/tip2", `Start wildcard matching with "/" (slash) and your wildcard string (e.g. /*.mp3)`)}</div>
|
|
|
</div>
|
|
|
</div>`);
|
|
|
@@ -4610,8 +4688,8 @@
|
|
|
|
|
|
function handleSearch(){
|
|
|
var keyword = $("#searchInput").val();
|
|
|
- $("#folderList").html(`<div class="ui basic segment ${currentTheme}">
|
|
|
- <i class="loading spinner icon ${currentTheme}"></i> <span class="${currentTheme}">Searching</span>
|
|
|
+ $("#folderList").html(`<div class="ui basic segment">
|
|
|
+ <i class="loading spinner icon"></i> <span>Searching</span>
|
|
|
</div>`);
|
|
|
$("#fileList").hide();
|
|
|
$("#fileList").html("");
|
|
|
@@ -4628,10 +4706,10 @@
|
|
|
console.log(data);
|
|
|
if (data.length == 0){
|
|
|
$("#folderList").show();
|
|
|
- $("#folderList").html(`<div class="ui basic segment ${currentTheme}">
|
|
|
- <div class="ui header ${currentTheme}">
|
|
|
- <i class="question icon" ${currentTheme}></i> <span class="${currentTheme}">${applocale.getString("message/noMatchResults","No Matching Results")}</span>
|
|
|
- <div class="sub header ${currentTheme}">${applocale.getString("message/noMatchResultsDesc","The host return no matching results for your keyword")} "${keyword}". <br>${applocale.getString("message/noMatchResultsInst","Check your spelling and your wildcard characters.")}</div>
|
|
|
+ $("#folderList").html(`<div class="ui basic segment">
|
|
|
+ <div class="ui header">
|
|
|
+ <i class="question icon"></i> <span>${applocale.getString("message/noMatchResults","No Matching Results")}</span>
|
|
|
+ <div class="sub header">${applocale.getString("message/noMatchResultsDesc","The host return no matching results for your keyword")} "${keyword}". <br>${applocale.getString("message/noMatchResultsInst","Check your spelling and your wildcard characters.")}</div>
|
|
|
</div>
|
|
|
</div>`);
|
|
|
}else{
|
Toby Chui
