resources/base.css

@@ -59,7 +59,6 @@ body{
 
 #desktop-layer{
     position: absolute;
-    /* margin: 0px; */
     width: 100%;
     height: 100%;
     background-color: #9999CC;

resources/sys/wde/file-view.css

@@ -1,13 +1,7 @@
 .FileTileView{
-    width: 100%;
-    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;
@@ -24,6 +18,7 @@
     /* overflow-x: hidden; */
     scrollbar-width: none; /* Firefox */
     -ms-overflow-style: none;  /* Internet Explorer 10+ */
+
 }
 
 .FileTileView::-webkit-scrollbar { /* WebKit */

resources/sys/wde/file-view.js

@@ -10,13 +10,14 @@ class FileView{
         this.parentElem = fileViewElem
 
         fileViewElem.addEventListener('click', (event) => {
-            if (event.target.classList[0] == 'FileTileView')
-            {   
-                this.DeselectAll()
-                return
-            }
+            
+            console.log(event)
             if (event.detail === 1){
-                this.DeselectAll()
+                this.selected.forEach(element => {
+                    // console.log
+                    element.classList.remove("Selected")    
+                });
+                this.selected = []
                 this.selected.push(event.target)
                 event.target.classList.add("Selected")
             } else if (event.detail === 2) {
@@ -25,13 +26,6 @@ class FileView{
         })
     }
 
-    DeselectAll(){
-        this.selected.forEach(element => {
-            element.classList.remove("Selected")    
-        });
-        this.selected = []
-    }
-
     /** Get html of folder by path
     * @param {string} path
     */

resources/wde.js

@@ -210,25 +210,29 @@ var getJSON = function(url, callback) {
 };
 
 class WindowsCompositor{
-    static windowsLayer
+    windowLayer = undefined
+    movingElement = null
 
+    //TODO refactor this to dynamic add/remove listeners
     constructor(){
         this.windowLayer = document.body.querySelector('#windows-layer')
-        WindowsCompositor.windowsLayer = document.body.querySelector('#windows-layer')
         if (!WebDesktopEnvironment.isMobile) {
             let startDrag = function(event) {
-                let window = event.target.closest('.WindowFrame')
-                WindowsCompositor.bringWindowToFront(window)
                 let targetClasses = event.target.className.split(' ')
                 if (targetClasses[targetClasses.length - 1] != 'DragArea'){
                     return
                 }
-                
+                // if (event.target.event.target.className != "DragArea"){}
                 let xPosInit = event.offsetX
                 let yPosInit = event.offsetY
+                let window = event.target.closest('.WindowFrame')
                 let dragWindow = function(event){
+                    // console.log(window)
+                    // console.log(event.clientX)
+                    // console.log(event.clientX - xPosInit, event.clientY - yPosInit)
                     window.style.left = `${event.clientX - xPosInit}px`
                     window.style.top = `${event.clientY - yPosInit}px`
+                    // WindowsCompositor.dragElement(window,event.clientX - xPosInit, event.clientY - yPosInit)
                 }
                 let stopDrag = function(){
                     removeEventListener('mousemove', dragWindow)
@@ -237,19 +241,18 @@ class WindowsCompositor{
 
                 addEventListener('mousemove', dragWindow)
                 addEventListener('mouseup', stopDrag)
+                // console.log(event)
             }
 
-            WindowsCompositor.windowsLayer.addEventListener('mousedown', startDrag)
+            this.windowLayer.addEventListener('mousedown', startDrag)
         }
     }
     
     /**
      * @param {HTMLElement} window
     */
-    static bringWindowToFront(window){ //FIXME
-        if (window != WindowsCompositor.windowsLayer.lastChild ){
-            WindowsCompositor.windowsLayer.insertBefore(WindowsCompositor.windowsLayer.lastChild, window)
-        }
+   bringWindowToFront(window){ //FIXME
+        this.windowLayer.insertBefore(this.windowLayer.lastChild, window)
     }
 
 

templates/wde-widgets/file-tile-view.tmpl

@@ -1,11 +1,9 @@
 {{ define "wde-widgets/file-tile-view.tmpl" }}
-    <div class="FlexContainer NoClick">
         {{ range $fileTile := .Files }}
-            <div fileType="{{ $fileTile.Type }}" class="Tile Click" name="{{$fileTile.Name}}">
+            <div fileType="{{ $fileTile.Type }}" class="Tile" 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 }}