Add icons to file tree

This commit is contained in:
LukasDoesDev 2021-01-23 00:46:33 +02:00
parent 521eac3a83
commit 1bf3b381ac
2 changed files with 23 additions and 10 deletions

View File

@ -476,7 +476,11 @@ class Helpers:
if os.path.isdir(rel):
output += \
"""<li class="tree-item" data-path="{}">
\n<div data-path="{}" data-name="{}" class="tree-caret tree-ctx-item tree-folder">{}</div>
\n<div data-path="{}" data-name="{}" class="tree-caret tree-ctx-item tree-folder">
<i class="far fa-folder"></i>
<i class="far fa-folder-open"></i>
{}
</div>
\n<ul class="tree-nested">"""\
.format(os.path.join(folder, filename), os.path.join(folder, filename), filename, filename)
@ -487,7 +491,7 @@ class Helpers:
class="tree-item tree-ctx-item tree-file"
data-path="{}"
data-name="{}"
onclick="clickOnFile(event)">{}</li>""".format(os.path.join(folder, filename), filename, filename)
onclick="clickOnFile(event)"><span style="margin-right: 6px;"><i class="far fa-file"></i></span>{}</li>""".format(os.path.join(folder, filename), filename, filename)
return output
@staticmethod

View File

@ -140,7 +140,11 @@
</style>
<ul class="tree-view">
<li>
<div class="tree-caret tree-ctx-item files-tree-title">Files</div>
<div class="tree-caret tree-ctx-item files-tree-title">
<i class="far fa-folder"></i>
<i class="far fa-folder-open"></i>
Files
</div>
<ul class="tree-nested" id="files-tree">
<li>Error while getting files</li>
@ -150,10 +154,12 @@
</div>
<style>
/* Remove default bullets */
.tree-view {
.tree-view,
.tree-nested {
list-style-type: none;
margin: 0;
padding: 0;
margin-left: 10px;
}
/* Style the caret/arrow */
@ -163,16 +169,19 @@
}
/* Create the caret/arrow with a unicode, and style it */
.tree-caret::before {
content: "\25B6";
color: white;
.tree-caret .fa-folder {
display: inline-block;
margin-right: 6px;
}
.tree-caret .fa-folder-open {
display: none;
}
/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.tree-caret-down::before {
transform: rotate(90deg);
.tree-caret-down .fa-folder {
display: none;
}
.tree-caret-down .fa-folder-open {
display: inline-block;
}
/* Hide the nested list */