Change Files Aesthetic

This commit is contained in:
Andrew 2022-05-15 12:38:48 -05:00
parent 8e9d88b8f9
commit 984f4cc4d6
3 changed files with 30 additions and 21 deletions

View File

@ -826,8 +826,8 @@ class Helpers:
output += f"""<li class="tree-item" data-path="{dpath}">
\n<div id="{dpath}" data-path="{dpath}" data-name="{filename}" class="tree-caret tree-ctx-item tree-folder">
<span id="{dpath}span" class="files-tree-title" data-path="{dpath}" data-name="{filename}" onclick="getDirView(event)">
<i class="far fa-folder"></i>
<i class="far fa-folder-open"></i>
<i style="color: #8862e0;" class="far fa-folder"></i>
<i style="color: #8862e0;" class="far fa-folder-open"></i>
{filename}
</span>
</div><li>
@ -835,7 +835,7 @@ class Helpers:
else:
if filename != "crafty_managed.txt":
output += f"""<li
class="tree-nested d-block tree-ctx-item tree-file tree-item"
class="d-block tree-ctx-item tree-file tree-item"
data-path="{dpath}"
data-name="{filename}"
onclick="clickOnFile(event)"><span style="margin-right: 6px;">
@ -864,15 +864,15 @@ class Helpers:
output += f"""<li class="tree-item" data-path="{dpath}">
\n<div id="{dpath}" data-path="{dpath}" data-name="{filename}" class="tree-caret tree-ctx-item tree-folder">
<span id="{dpath}span" class="files-tree-title" data-path="{dpath}" data-name="{filename}" onclick="getDirView(event)">
<i class="far fa-folder"></i>
<i class="far fa-folder-open"></i>
<i style="color: #8862e0;" class="far fa-folder"></i>
<i style="color: #8862e0;" class="far fa-folder-open"></i>
{filename}
</span>
</div><li>"""
else:
if filename != "crafty_managed.txt":
output += f"""<li
class="tree-nested d-block tree-ctx-item tree-file tree-item"
class="d-block tree-ctx-item tree-file tree-item"
data-path="{dpath}"
data-name="{filename}"
onclick="clickOnFile(event)"><span style="margin-right: 6px;">
@ -894,8 +894,8 @@ class Helpers:
\n<div id="{dpath}" data-path="{dpath}" data-name="{filename}" class="tree-caret tree-ctx-item tree-folder">
<input type="radio" name="root_path" value="{dpath}">
<span id="{dpath}span" class="files-tree-title" data-path="{dpath}" data-name="{filename}" onclick="getDirView(event)">
<i class="far fa-folder"></i>
<i class="far fa-folder-open"></i>
<i style="color: #8862e0;" class="far fa-folder"></i>
<i style="color: #8862e0;" class="far fa-folder-open"></i>
{filename}
</span>
</input></div><li>
@ -916,8 +916,8 @@ class Helpers:
\n<div id="{dpath}" data-path="{dpath}" data-name="{filename}" class="tree-caret tree-ctx-item tree-folder">
<input type="radio" name="root_path" value="{dpath}">
<span id="{dpath}span" class="files-tree-title" data-path="{dpath}" data-name="{filename}" onclick="getDirView(event)">
<i class="far fa-folder"></i>
<i class="far fa-folder-open"></i>
<i style="color: #8862e0;" class="far fa-folder"></i>
<i style="color: #8862e0;" class="far fa-folder-open"></i>
{filename}
</span>
</input></div><li>"""

View File

@ -134,15 +134,15 @@ class AjaxHandler(BaseHandler):
\n<div id="{dpath}" data-path="{dpath}" data-name="{filename}" class="tree-caret tree-ctx-item tree-folder">
<input type="checkbox" class="checkBoxClass" name="root_path" value="{dpath}" checked>
<span id="{dpath}span" class="files-tree-title" data-path="{dpath}" data-name="{filename}" onclick="getDirView(event)">
<i class="far fa-folder"></i>
<i class="far fa-folder-open"></i>
<i style="color: #8862e0;" class="far fa-folder"></i>
<i style="color: #8862e0;" class="far fa-folder-open"></i>
<strong>{filename}</strong>
</span>
</input></div><li>
\n"""
else:
output += f"""<li
class="tree-nested d-block tree-ctx-item tree-file"
class="d-block tree-ctx-item tree-file"
data-path="{dpath}"
data-name="{filename}"
onclick=""><input type='checkbox' class="checkBoxClass" name='root_path' value="{dpath}" checked><span style="margin-right: 6px;">
@ -154,15 +154,15 @@ class AjaxHandler(BaseHandler):
\n<div id="{dpath}" data-path="{dpath}" data-name="{filename}" class="tree-caret tree-ctx-item tree-folder">
<input type="checkbox" class="checkBoxClass" name="root_path" value="{dpath}">
<span id="{dpath}span" class="files-tree-title" data-path="{dpath}" data-name="{filename}" onclick="getDirView(event)">
<i class="far fa-folder"></i>
<i class="far fa-folder-open"></i>
<i style="color: #8862e0;" class="far fa-folder"></i>
<i style="color: #8862e0;" class="far fa-folder-open"></i>
<strong>{filename}</strong>
</span>
</input></div><li>
\n"""
else:
output += f"""<li
class="tree-nested d-block tree-ctx-item tree-file"
class="d-block tree-ctx-item tree-file"
data-path="{dpath}"
data-name="{filename}"
onclick=""><input type='checkbox' class="checkBoxClass" name='root_path' value="{dpath}">

View File

@ -39,12 +39,15 @@
<noscript>
{{ translate('serverFiles', 'noscript', data['lang']) }}
</noscript>
<div id="files-tree-nav" class="overlay">
<div id="files-tree-nav" class="overlay" style="background-color: #9f9daf !important;">
<!-- Button to close the overlay navigation -->
<!-- Overlay content -->
<div id="files-tree-nav-content" class="overlay-content">
<div id="files-tree-nav-content" class="overlay-content" style="background-color: #9f9daf;">
<h4 id="context-title" style="color:#4b00ff; text-align: center; padding: 3px;">
</h4>
<p style="width: 90%; border-bottom: 2px solid black; margin:0 auto;"></p>
<a onclick="createFileE(event)" href="javascript:void(0)" id="createFile" href="#">{{
translate('serverFiles', 'createFile', data['lang']) }}</a>
<a onclick="createDirE(event)" href="javascript:void(0)" id="createDir" href="#">{{
@ -72,7 +75,7 @@
.overlay {
display: none;
flex-direction: column;
background-color: #fff;
background-color: #9f9daf;
border-radius: 10px;
box-shadow: 0 10px 20px rgb(64 64 64 / 5%);
padding: 10px 0;
@ -97,7 +100,7 @@
.overlay-content {
display: flex;
flex-direction: column;
background-color: #fff;
background-color: #9f9daf;
border-radius: 10px;
box-shadow: 0 10px 20px rgb(64 64 64 / 5%);
padding: 10px 0;
@ -125,7 +128,7 @@
/* When you mouse over the navigation links, change their color */
.overlay a:hover,
.overlay a:focus {
background: #f1f3f7;
background: grey;
color: #4b00ff;
}
@ -445,6 +448,9 @@
e.stopImmediatePropagation();
var ctxmenuPath = e.target.getAttribute('data-path');
var ctxmenuName = e.target.getAttribute('data-name');
document.getElementById('context-title').innerHTML = ctxmenuName;
console.log(ctxmenuName);
if (!ctxmenuPath) {
console.log({ 'event.target': e.target, ctxmenuPath });
return;
@ -926,6 +932,9 @@
$('#deleteDir').toggle(isDir);
$('#upload').toggle(isDir);
document.getElementById('context-title').innerHTML = ctxmenuName;
console.log(ctxmenuName);
var isFile = event.target.classList.contains('tree-file');
$('#deleteFile').toggle(isFile);
$('#downloadFile').toggle(isFile);