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):
|
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
|
||||||
|
@ -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 */
|
||||||
|
Loading…
Reference in New Issue
Block a user