mirror of
https://gitlab.com/crafty-controller/crafty-4.git
synced 2024-08-30 18:23:09 +00:00
Add icons to file tree
This commit is contained in:
parent
521eac3a83
commit
1bf3b381ac
@ -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
|
||||
|
@ -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 */
|
||||
|
Loading…
Reference in New Issue
Block a user