From 17dbd6249b95d05c4864102665f918d7a02c4d2c Mon Sep 17 00:00:00 2001
From: cyber-dream <gregory_brzezinski@protonmail.com>
Date: Tue, 2 May 2023 13:50:56 +0300
Subject: [PATCH] Add deselection by clicking on black space of tileview

---
 resources/base.css                        |  1 +
 resources/sys/wde/file-view.css           |  9 +++++++--
 resources/sys/wde/file-view.js            | 20 +++++++++++++-------
 templates/wde-widgets/file-tile-view.tmpl |  4 +++-
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/resources/base.css b/resources/base.css
index 5fdb459..d4c0e62 100644
--- a/resources/base.css
+++ b/resources/base.css
@@ -59,6 +59,7 @@ body{
 
 #desktop-layer{
     position: absolute;
+    /* margin: 0px; */
     width: 100%;
     height: 100%;
     background-color: #9999CC;
diff --git a/resources/sys/wde/file-view.css b/resources/sys/wde/file-view.css
index 2b65b45..65d65fb 100644
--- a/resources/sys/wde/file-view.css
+++ b/resources/sys/wde/file-view.css
@@ -1,7 +1,13 @@
 .FileTileView{
     width: 100%;
-    height: auto;
+    height: 100%;
+    
+    /* FIXME Bug, on desktop mode top ~10 pixel are not active, like margin:10px */
+}
 
+.FileTileView .FlexContainer{
+    width: 100%;
+    height: auto;
     /* Auto layout */
     display: flex;
     flex-direction: row;
@@ -18,7 +24,6 @@
     /* overflow-x: hidden; */
     scrollbar-width: none; /* Firefox */
     -ms-overflow-style: none;  /* Internet Explorer 10+ */
-
 }
 
 .FileTileView::-webkit-scrollbar { /* WebKit */
diff --git a/resources/sys/wde/file-view.js b/resources/sys/wde/file-view.js
index 5ef7c1b..80c4989 100644
--- a/resources/sys/wde/file-view.js
+++ b/resources/sys/wde/file-view.js
@@ -10,14 +10,13 @@ class FileView{
         this.parentElem = fileViewElem
 
         fileViewElem.addEventListener('click', (event) => {
-            
-            console.log(event)
+            if (event.target.classList[0] == 'FileTileView')
+            {   
+                this.DeselectAll()
+                return
+            }
             if (event.detail === 1){
-                this.selected.forEach(element => {
-                    // console.log
-                    element.classList.remove("Selected")    
-                });
-                this.selected = []
+                this.DeselectAll()
                 this.selected.push(event.target)
                 event.target.classList.add("Selected")
             } else if (event.detail === 2) {
@@ -26,6 +25,13 @@ class FileView{
         })
     }
 
+    DeselectAll(){
+        this.selected.forEach(element => {
+            element.classList.remove("Selected")    
+        });
+        this.selected = []
+    }
+
     /** Get html of folder by path
     * @param {string} path
     */
diff --git a/templates/wde-widgets/file-tile-view.tmpl b/templates/wde-widgets/file-tile-view.tmpl
index 606eab2..2f77f7b 100644
--- a/templates/wde-widgets/file-tile-view.tmpl
+++ b/templates/wde-widgets/file-tile-view.tmpl
@@ -1,9 +1,11 @@
 {{ define "wde-widgets/file-tile-view.tmpl" }}
+    <div class="FlexContainer NoClick">
         {{ range $fileTile := .Files }}
-            <div fileType="{{ $fileTile.Type }}" class="Tile" name="{{$fileTile.Name}}">
+            <div fileType="{{ $fileTile.Type }}" class="Tile Click" name="{{$fileTile.Name}}">
                 <!-- <div class="Icon NoClick"></div> -->
                 <img class="Icon NoClick" src="{{ $fileTile.Icon }}">
                 <div class="Lable NoClick">{{ $fileTile.Name }}</div>
             </div>  
         {{ end }}
+    </div>
 {{ end }}
\ No newline at end of file