uprava vzhledu dir tree

css/style.css

@@ -23,26 +23,33 @@ ul:nth-child(1) {
 }
 
 li:hover {
-  background-color: blue;
+  background-color: rgb(0, 0, 130);
+  color: white;
+}
+
+li {
+  cursor: pointer;
+  user-select: none;
 }
 
 li::before {
   content: "";
-  margin-right: 5pt;
-  width: 1em;
-  height: 1em;
+  color: black;
   display: inline-block;
 }
-li[style]::before {
-  content: "";
-  display: inline-block;
-  background-image: url("../img/arrow-down.svg");
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-  width: 0.7em;
-  height: 0.7em;
-  margin-right: 3pt;
+
+.caret-down::before {
+  transform: rotate(90deg);  
+}
+.nested {
+  display: none;
+}
+.active {
+  display: block;
+}
+.caret::before {
+  content: "\25B6";
+  margin-right: 6px;
 }
 
 .container {
@@ -64,12 +71,16 @@ aside {
   height: 100%;
   grid-area: aside;
   overflow-y: scroll;
-  margin-right: 2px solid #ccc;
+  margin-right: 2px solid #c3c3c3;
 }
 
 footer {
-  border-top: 2px solid #ccc;
+  border-top: 2px solid #c3c3c3;
   grid-area: footer;
   text-align: right;
   padding: 0.3em 2em;
 }
+
+sub {
+  display: block;
+}

index.php

@@ -30,7 +30,7 @@
         </section>
 
         <footer>
-            CoMato © 2020 David Zálešák <br><sub>Seminární práce do předmětu tvorba www aplikací</sub>
+            CoMato © 2020 David Zálešák<sub>Seminární práce do předmětu tvorba www aplikací</sub>
         </footer>
     </div>
 

js/controller.js

@@ -32,6 +32,7 @@ class Controller {
       function (value) {
         view.removeDirTree();
         view.drawDirTree(value);
+        view.dirTreeToggler();
       },
       function (error) {}
     );

js/view.js

@@ -6,11 +6,12 @@ class View {
     var tag = document.createElement("li");
     var text = document.createTextNode(dirtree[0]);
     tag.appendChild(text);
-    tag.style.fontWeight = "bold";
+    tag.classList.add("caret");
 
     ulToAdd.appendChild(tag);
     if (dirtree.length > 1) {
       var newul = document.createElement("ul");
+      newul.classList.add("nested");
 
       tag.parentElement.appendChild(newul);
       for (let i = 1; i < dirtree.length; i++) {
@@ -33,4 +34,23 @@ class View {
     }
     this.hloubka = 1;
   }
+
+  dirTreeToggler() {
+    var toggler = document.getElementsByClassName("caret");
+    var i;
+
+    function addClass() {
+      this.nextSibling.classList.toggle("active");
+      this.classList.toggle("caret-down");
+    }
+
+    for (i = 0; i < toggler.length; i++) {
+      toggler[i].addEventListener("click", addClass);
+    }
+    toggler[0].classList.add("caret-down");
+    if (toggler[0].nextSibling) {
+      toggler[0].nextSibling.classList.add("active");
+    }
+    toggler[0].removeEventListener("click", addClass);
+  }
 }