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): if os.path.isdir(rel):
output += \ output += \
"""<li class="tree-item" data-path="{}"> """<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">"""\ \n<ul class="tree-nested">"""\
.format(os.path.join(folder, filename), os.path.join(folder, filename), filename, filename) .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" class="tree-item tree-ctx-item tree-file"
data-path="{}" data-path="{}"
data-name="{}" 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 return output
@staticmethod @staticmethod

View File

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