Create focus mode for windows

apps/blogviewer/blogviewer.go

@@ -1,8 +1,9 @@
 package blogviewer
 
 import (
+	"net/http"
+	"personalwebsite/apps"
 	"personalwebsite/webfilesystem"
-	"personalwebsite/websiteapp"
 
 	"github.com/gin-gonic/gin"
 	"go.mongodb.org/mongo-driver/bson/primitive"
@@ -10,20 +11,20 @@ import (
 
 type BlogViewerApplication struct {
 	fs       *webfilesystem.WebFileSystem
-	manifest websiteapp.ApplicationManifest
+	manifest apps.ApplicationManifest
 }
 
 func NewBlogViewerApp(webFs *webfilesystem.WebFileSystem) *BlogViewerApplication {
 	return &BlogViewerApplication{
 		fs: webFs,
-		manifest: websiteapp.ApplicationManifest{
+		manifest: apps.ApplicationManifest{
 			AppId:      "blog-viewer",
 			WindowName: "",
 		},
 	}
 }
 
-func (b *BlogViewerApplication) GetManifest() websiteapp.ApplicationManifest {
+func (b *BlogViewerApplication) GetManifest() apps.ApplicationManifest {
 	return b.manifest
 }
 
@@ -31,6 +32,41 @@ func (b *BlogViewerApplication) GetId() string {
 	return b.manifest.AppId
 }
 
+func (b *BlogViewerApplication) Route(route *gin.RouterGroup) {
+	route.GET("writeMockBlog", func(ctx *gin.Context) {
+		path := ctx.Query("path")
+		if path == "" {
+			ctx.JSON(http.StatusBadRequest, "no path provided")
+			return
+		}
+		b.WriteMock(path)
+		ctx.JSON(http.StatusOK, "OK")
+	})
+
+	route.GET("render", func(ctx *gin.Context) {
+		isMobileParam := ctx.Query("isMobile")
+		path := ctx.Query("path")
+		if path == "" {
+			ctx.JSON(http.StatusBadRequest, "no path provided")
+			return
+		}
+
+		isMobile := isMobileParam == "true"
+		ginH, err := b.Render(path, isMobile)
+		if err != nil {
+			ctx.JSON(http.StatusInternalServerError, "TODO")
+			return
+		}
+
+		if isMobile {
+			ctx.HTML(http.StatusOK, "blog-viewer/mobile-app.tmpl", ginH)
+		} else {
+			ctx.HTML(http.StatusOK, "blog-viewer/app.tmpl", ginH)
+		}
+
+	})
+}
+
 func (b *BlogViewerApplication) WriteMock(path string) {
 	blogFile := webfilesystem.WebFSFile{
 		MongoId: primitive.NewObjectID(),

apps/finder/finder.go

@@ -0,0 +1,67 @@
+package finder
+
+import (
+	"net/http"
+	"personalwebsite/apps"
+	"personalwebsite/webfilesystem"
+
+	"github.com/gin-gonic/gin"
+)
+
+type FinderApplication struct {
+	fs       *webfilesystem.WebFileSystem
+	manifest apps.ApplicationManifest
+}
+
+func NewFinderApplication(webFs *webfilesystem.WebFileSystem) *FinderApplication {
+	return &FinderApplication{
+		fs: webFs,
+		manifest: apps.ApplicationManifest{
+			AppId:      "finder",
+			WindowName: "TODO DELETE", //TODO DELETE
+		},
+	}
+}
+func (f *FinderApplication) GetManifest() apps.ApplicationManifest {
+	return f.manifest
+}
+func (f *FinderApplication) GetId() string {
+	return f.manifest.AppId
+}
+
+func (f *FinderApplication) Render(isMobile bool) gin.H {
+
+	return gin.H{}
+}
+
+func (f *FinderApplication) Routes(routes *gin.RouterGroup) {
+	routes.GET("render", func(ctx *gin.Context) {
+		isMobileParam := ctx.Query("isMobile")
+		isMobile := isMobileParam == "true"
+		admin := true
+		if isMobile {
+			ctx.HTML(http.StatusOK, "finder/mobile-app.tmpl", f.Render(isMobile))
+			return
+		}
+		if admin {
+			ctx.HTML(http.StatusOK, "finder/admin-app.tmpl", f.Render(isMobile))
+			return
+		}
+		ctx.HTML(http.StatusOK, "finder/app.tmpl", f.Render(isMobile))
+
+	})
+	routes.GET("renderMobileDesktop", func(ctx *gin.Context) {
+		ctx.HTML(http.StatusOK, "finder/mobile-desktop.tmpl", gin.H{})
+	})
+	routes.GET("renderDesktop", func(ctx *gin.Context) {
+		path := ctx.Query("path")
+		if path == "" {
+			ctx.JSON(http.StatusBadRequest, "no path provided")
+			return
+		}
+		ctx.HTML(http.StatusOK, "finder/desktop.tmpl", gin.H{})
+	})
+	routes.GET("contextMenu", func(ctx *gin.Context) {
+		ctx.HTML(http.StatusOK, "wde-widgets/context-menu.tmpl", gin.H{})
+	})
+}

apps/finder/finderadmin.go

@@ -0,0 +1,22 @@
+package finder
+
+import (
+	"personalwebsite/apps"
+	"personalwebsite/webfilesystem"
+)
+
+type FinderAdminApp struct {
+	fs       *webfilesystem.WebFileSystem
+	manifest apps.ApplicationManifest
+}
+
+func NewFinderAdminApp(webfs *webfilesystem.WebFileSystem) FinderAdminApp {
+	return FinderAdminApp{
+		fs:       webfs,
+		manifest: apps.ApplicationManifest{},
+	}
+}
+
+func (f *FinderAdminApp) RenderWindow() {
+
+}

apps/img-viewer/imgviewer.go

@@ -1,9 +1,10 @@
 package imgviewer
 
 import (
+	"net/http"
+	websiteapp "personalwebsite/apps"
 	"personalwebsite/libs"
 	"personalwebsite/webfilesystem"
-	"personalwebsite/websiteapp"
 
 	"github.com/gin-gonic/gin"
 )
@@ -24,6 +25,28 @@ func NewImgViewerApp(webFs *webfilesystem.WebFileSystem) ImgViewerApp {
 	return newApp
 }
 
+func (p *ImgViewerApp) Route(route *gin.RouterGroup) {
+	route.GET("render", func(ctx *gin.Context) {
+		isMobileParam := ctx.Query("isMobile")
+		isMobile := isMobileParam == "true"
+		path := ctx.Query("path")
+		if path == "" {
+			ctx.JSON(http.StatusBadRequest, "no path provided")
+			return
+		}
+		ginH, err := p.Render(path, isMobile)
+		if err != nil {
+			ctx.JSON(http.StatusInternalServerError, "TODO")
+			return
+		}
+		if isMobile {
+			ctx.HTML(http.StatusOK, "img-viewer/mobile-app.tmpl", ginH)
+		} else {
+			ctx.HTML(http.StatusOK, "img-viewer/app.tmpl", ginH)
+		}
+	})
+}
+
 func (p *ImgViewerApp) GetManifest() websiteapp.ApplicationManifest {
 	return p.manifest
 }

apps/personalprops/personalprops.go

@@ -2,9 +2,10 @@ package personalprops
 
 import (
 	"errors"
+	"net/http"
+	websiteapp "personalwebsite/apps"
 	"personalwebsite/libs"
 	"personalwebsite/webfilesystem"
-	"personalwebsite/websiteapp"
 
 	"github.com/gin-gonic/gin"
 	"go.mongodb.org/mongo-driver/bson/primitive"
@@ -26,6 +27,22 @@ func NewPersPropsApp(webFs *webfilesystem.WebFileSystem) PersonalPropertiesApp {
 	return newApp
 }
 
+func (p *PersonalPropertiesApp) Route(route *gin.RouterGroup) {
+	route.GET("render", func(ctx *gin.Context) {
+		isMobileParam := ctx.Query("isMobile")
+		isMobile := isMobileParam == "true"
+		ginH, err := p.Render()
+		if err != nil {
+			ctx.JSON(http.StatusInternalServerError, "TODO") //TODO
+		}
+		if isMobile {
+			ctx.HTML(http.StatusOK, "personal-properties/mobile-app.tmpl", ginH)
+		} else {
+			ctx.HTML(http.StatusOK, "personal-properties/app.tmpl", ginH)
+		}
+	})
+}
+
 func (p *PersonalPropertiesApp) GetManifest() websiteapp.ApplicationManifest {
 	return p.manifest
 }

apps/websiteapp.go

@@ -1,4 +1,4 @@
-package websiteapp
+package apps
 
 import (
 	"net/http"

libs/imglib.go

@@ -2,8 +2,10 @@ package libs
 
 import (
 	"errors"
+	"net/http"
 	"personalwebsite/webfilesystem"
 
+	"github.com/gin-gonic/gin"
 	"go.mongodb.org/mongo-driver/bson/primitive"
 )
 
@@ -11,6 +13,12 @@ type ImagLib struct {
 	fs *webfilesystem.WebFileSystem
 }
 
+func NewImgLib(webfs *webfilesystem.WebFileSystem) *ImagLib {
+	return &ImagLib{
+		fs: webfs,
+	}
+}
+
 func ReadImage(img *webfilesystem.WebFSFile) (*Img, error) {
 	data, ok := img.Data.(primitive.D).Map()["srcdata"]
 	if !ok {
@@ -30,6 +38,25 @@ func ReadImage(img *webfilesystem.WebFSFile) (*Img, error) {
 	}, nil
 }
 
+func (l *ImagLib) Route(route *gin.RouterGroup) {
+	route.GET("get", func(ctx *gin.Context) {
+		path := ctx.Query("path")
+		if path == "" {
+			ctx.JSON(http.StatusBadRequest, "TODO") //TODO json error struct
+			return
+		}
+
+		file, err := l.fs.Read(path)
+		if err != nil {
+			ctx.String(http.StatusInternalServerError, "TODO") //TODO
+		}
+		data := file.Data.(primitive.Binary)
+
+		ctx.Data(http.StatusOK, "image/jpeg", data.Data)
+	})
+
+}
+
 func GetBase64Image(img *Base64Img, min string) (string, error) {
 	imgString := ""
 	switch min {

libs/libs.go

@@ -0,0 +1,15 @@
+package libs
+
+import (
+	"personalwebsite/webfilesystem"
+)
+
+type Libs struct {
+	imglib *ImagLib
+}
+
+func NewLibs(webfs *webfilesystem.WebFileSystem) Libs {
+	return Libs{
+		imglib: NewImgLib(webfs),
+	}
+}

main.go

@@ -8,19 +8,19 @@ import (
 	"net/http"
 	"os"
 
+	"personalwebsite/apps"
+	"personalwebsite/apps/blogviewer"
+	"personalwebsite/apps/finder"
+	imgviewer "personalwebsite/apps/img-viewer"
+	"personalwebsite/apps/personalprops"
+	"personalwebsite/libs"
 	"personalwebsite/routewde"
 	"personalwebsite/wde"
 	"personalwebsite/webfilesystem"
-	"personalwebsite/websiteapp"
-	"personalwebsite/websiteapp/blogviewer"
-	"personalwebsite/websiteapp/finder"
-	imgviewer "personalwebsite/websiteapp/img-viewer"
-	"personalwebsite/websiteapp/personalprops"
 
 	"github.com/gin-contrib/location"
 	"github.com/gin-gonic/gin"
 	"github.com/joho/godotenv"
-	"go.mongodb.org/mongo-driver/bson/primitive"
 	"go.mongodb.org/mongo-driver/mongo"
 	"go.mongodb.org/mongo-driver/mongo/options"
 )
@@ -74,8 +74,8 @@ func main() {
 	finderApp := finder.NewFinderApplication(webfs)
 	imgViewerApp := imgviewer.NewImgViewerApp(webfs)
 	blogViewerApp := blogviewer.NewBlogViewerApp(webfs)
-	appsStorage := websiteapp.ApplicationsStorage{
-		Apps: map[string]websiteapp.WebDEApplication{},
+	appsStorage := apps.ApplicationsStorage{
+		Apps: map[string]apps.WebDEApplication{},
 	}
 	appsStorage.Apps["personal-properties"] = &persPropsApp
 	appsStorage.Apps["finder"] = finderApp
@@ -119,21 +119,8 @@ func main() {
 		{
 			imgLibGroup := libsGroup.Group("img")
 			{
-				imgLibGroup.GET("get", func(ctx *gin.Context) {
-					path := ctx.Query("path")
-					if path == "" {
-						ctx.JSON(http.StatusBadRequest, "TODO") //TODO json error struct
-						return
-					}
-
-					file, err := webfs.Read(path)
-					if err != nil {
-						ctx.String(http.StatusInternalServerError, "TODO") //TODO
-					}
-					data := file.Data.(primitive.Binary)
-
-					ctx.Data(http.StatusOK, "image/jpeg", data.Data)
-				})
+				imgLib := libs.NewImgLib(webfs)
+				imgLib.Route(imgLibGroup)
 			}
 		}
 		wdeGroup := system.Group("wde")
@@ -163,193 +150,41 @@ func main() {
 				}
 			})
 		}
-
-		websiteapp.Route(apps.Group("/storage"), &appsStorage)
 	}
 
 	fs := router.Group("fs")
 	{
-		fs.GET("writeFile", func(ctx *gin.Context) {
-			parentPath := ctx.Query("parentPath")
-			if parentPath == "" {
-				ctx.JSON(http.StatusBadRequest, "TODO") //TODO json error struct
-				return
-			}
-			file := webfilesystem.WebFSFile{
-				MongoId: primitive.NewObjectID(),
-				Name:    "pp",
-				Type:    "test",
-				Data:    nil,
-			}
-			err := webfs.CreateFile(&file, parentPath)
-			if err != nil {
-				ctx.JSON(http.StatusInternalServerError, "TODO") //TODO json error struct
-				return
-			}
-
-			ctx.JSON(http.StatusOK, "OK")
-		})
-		fs.GET("createDir", func(ctx *gin.Context) {
-			path := ctx.Query("path")
-			if path == "" {
-				ctx.JSON(http.StatusBadRequest, "TODO") //TODO json error struct
-				return
-			}
-
-			err := webfs.CreateDirectory(path)
-			if err != nil {
-				ctx.JSON(http.StatusInternalServerError, "TODO") //TODO json error struct
-				return
-			}
-
-			ctx.JSON(http.StatusOK, "OK")
-		})
-
-		fs.GET("list", func(ctx *gin.Context) {
-			path := ctx.Query("path")
-			if path == "" {
-				ctx.JSON(http.StatusBadRequest, "TODO") //TODO json error struct
-				return
-			}
-
-			files, err := webfs.List(path)
-			if err != nil {
-				ctx.JSON(http.StatusInternalServerError, "TODO") //TODO json error struct
-				return
-			}
-
-			ctx.JSON(http.StatusOK, &files)
-		})
-
-		fs.GET("read", func(ctx *gin.Context) {
-			path := ctx.Query("path")
-			if path == "" {
-				ctx.JSON(http.StatusBadRequest, "TODO") //TODO json error struct
-				return
-			}
-
-			file, err := webfs.Read(path)
-			if err != nil {
-				ctx.JSON(http.StatusInternalServerError, "TODO") //TODO json error struct
-				return
-			}
-
-			ctx.JSON(http.StatusOK, &file)
-		})
+		webfs.Route(fs)
 	}
 	app := router.Group("application")
 	{
 		persPropApp := app.Group("personal-properties")
 		{
-			persPropApp.GET("render", func(ctx *gin.Context) {
-				isMobileParam := ctx.Query("isMobile")
-				isMobile := isMobileParam == "true"
-				ginH, err := persPropsApp.Render()
-				if err != nil {
-					ctx.JSON(http.StatusInternalServerError, "TODO") //TODO
-				}
-				if isMobile {
-					ctx.HTML(http.StatusOK, "personal-properties/mobile-app.tmpl", ginH)
-				} else {
-					ctx.HTML(http.StatusOK, "personal-properties/app.tmpl", ginH)
-				}
-			})
+			persPropsApp.Route(persPropApp)
 		}
 		finderAppRoute := app.Group("finder")
 		{
-			finderAppRoute.GET("render", func(ctx *gin.Context) {
-				isMobileParam := ctx.Query("isMobile")
-				isMobile := isMobileParam == "true"
-				if isMobile {
-					ctx.HTML(http.StatusOK, "finder/mobile-app.tmpl", finderApp.Render(isMobile))
-				} else {
-					ctx.HTML(http.StatusOK, "finder/app.tmpl", finderApp.Render(isMobile))
-				}
-
-			})
-			finderAppRoute.GET("renderMobileDesktop", func(ctx *gin.Context) {
-				ctx.HTML(http.StatusOK, "finder/mobile-desktop.tmpl", gin.H{})
-			})
-			finderAppRoute.GET("renderDesktop", func(ctx *gin.Context) {
-				path := ctx.Query("path")
-				if path == "" {
-					ctx.JSON(http.StatusBadRequest, "no path provided")
-					return
-				}
-				ctx.HTML(http.StatusOK, "finder/desktop.tmpl", gin.H{})
-			})
+			finderApp.Routes(finderAppRoute)
 		}
 		imgViewerRoute := app.Group("img-viewer")
 		{
-			imgViewerRoute.GET("render", func(ctx *gin.Context) {
-				isMobileParam := ctx.Query("isMobile")
-				isMobile := isMobileParam == "true"
-				path := ctx.Query("path")
-				if path == "" {
-					ctx.JSON(http.StatusBadRequest, "no path provided")
-					return
-				}
-				ginH, err := imgViewerApp.Render(path, isMobile)
-				if err != nil {
-					ctx.JSON(http.StatusInternalServerError, "TODO")
-					return
-				}
-				if isMobile {
-					ctx.HTML(http.StatusOK, "img-viewer/mobile-app.tmpl", ginH)
-				} else {
-					ctx.HTML(http.StatusOK, "img-viewer/app.tmpl", ginH)
-				}
-
-			})
+			imgViewerApp.Route(imgViewerRoute)
 		}
 		blogViewerRoute := app.Group("blog-viewer")
 		{
-			blogViewerRoute.GET("writeMockBlog", func(ctx *gin.Context) {
-				path := ctx.Query("path")
-				if path == "" {
-					ctx.JSON(http.StatusBadRequest, "no path provided")
-					return
-				}
-				blogViewerApp.WriteMock(path)
-				ctx.JSON(http.StatusOK, "OK")
-			})
-
-			blogViewerRoute.GET("render", func(ctx *gin.Context) {
-				isMobileParam := ctx.Query("isMobile")
-				path := ctx.Query("path")
-				if path == "" {
-					ctx.JSON(http.StatusBadRequest, "no path provided")
-					return
+			blogViewerApp.Route(blogViewerRoute)
 		}
 
-				isMobile := isMobileParam == "true"
-				ginH, err := blogViewerApp.Render(path, isMobile)
+		err = router.Run(":8080")
 		if err != nil {
-					ctx.JSON(http.StatusInternalServerError, "TODO")
-					return
-				}
-
-				if isMobile {
-					ctx.HTML(http.StatusOK, "blog-viewer/mobile-app.tmpl", ginH)
-				} else {
-					ctx.HTML(http.StatusOK, "blog-viewer/app.tmpl", ginH)
-				}
-
-			})
-		}
-	}
-	router.GET("/test", func(ctx *gin.Context) {
-		ctx.HTML(200, "kek/kek.tmpl", gin.H{})
-	})
-
-	if err := router.Run(":8080"); err != nil {
 			log.Panicf("error: %s", err)
 		}
+	}
 }
 
-func index(c *gin.Context) {
-	c.HTML(http.StatusOK, "base.html", nil)
-}
+// func index(c *gin.Context) {
+// 	c.HTML(http.StatusOK, "base.html", nil)
+// }
 
 func FindEnv(parameter string) (string, error) {
 	path, exists := os.LookupEnv(parameter)

resources/sys/finder/finder.css

@@ -0,0 +1,39 @@
+.FinderContent {
+    width: 100%;
+    height: 100%;
+
+    /* Auto layout */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 0px;
+}
+
+.FinderContent .ToolBar{
+    width: 100%;
+    height: 20px;
+    border-bottom: 1px solid #555555;
+    background-color: #EEEEEE;
+}
+
+.Focused .FinderContent .ToolBar{
+    border-bottom: 1px solid #000000;
+    background-color: #DDDDDD;
+}
+
+
+
+.FinderContent .FinderFileView{
+    width: 100%;
+    height: 100%;
+
+    background-color: #FFFFFF;
+
+    /* Auto layout */
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 0px;
+}

resources/sys/finder/finder.js

@@ -3,6 +3,7 @@ class Finder{
     fileView = undefined
     path = "/"
     homePath = "/home/user"
+    windowElement
     // previousPath = "/"
     pathHistory = [] //FIXME Fixed length
     constructor(){
@@ -28,9 +29,9 @@ class Finder{
             let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, 500, 350 )    
             newWindow.innerHTML = html
             
-            this.fileView = new FileView(newWindow.querySelector(".FileTileView"), (event) =>{
-                this.Open(event, false)
-            })
+            this.fileView = new FileView(newWindow.querySelector(".FileTileView"),
+                (event) =>{ this.Open(event, false) },
+                (event) =>{ this.RightClick(event) })
             this.OpenDir(this.path)
             
             newWindow.querySelector("#BackButton").addEventListener('click', () =>{
@@ -41,6 +42,8 @@ class Finder{
                 this.OpenDir(this.homePath)
             })
 
+            this.windowElement = newWindow
+
             if (!WebDesktopEnvironment.isMobile){
                 // let scrollBar = new WdeScrollBar(newWindow.children[1].children[1], newWindow.children[1].children[0])// TODO to querry selector
                 // console.log(newWindow.querySelector("#closeWindowButton"))
@@ -139,6 +142,55 @@ class Finder{
         }
     }
     
+    RightClick(event){
+        // console.log(event)
+        // console.log()
+        if (event.target.className="FileTileView" ||event.target.getAttribute('filetype') != ""){
+            this.CreateContextMenu(event.target, [event.clientY, event.clientX])
+        }
+    }
+
+    CreateContextMenu(target, pos){
+        fetch(`${window.location.origin}/application/${this.appId}/contextMenu?` + new URLSearchParams({
+            kek: "kek"
+        })) 
+        .then((response) => response.text())
+        .then((html) => {
+            let overlay = document.createElement("div") //TODO Move to WDE.CreateOverlay()
+            overlay.setAttribute('id', 'finder-context-menu-overlay')
+            overlay.style.position = 'absolute'
+            overlay.style.width = "100%"
+            overlay.style.height = "100%"
+            let menu = document.createElement("div")
+            menu.setAttribute('class', 'ContextMenu  WindowFrameShadow')
+            menu.style.position = 'absolute';
+            // menu.style.backgroundColor = '#000000';
+            menu.style.top = pos[0] + "px";
+            menu.style.left = pos[1] + "px";
+            
+            menu.innerHTML = html
+            
+            overlay.appendChild(menu)
+            document.body.appendChild(overlay)
+
+            overlay.addEventListener('click',(event) => {
+                if (event.target.className == "Row"){ //TODO add uuid id to rows to more accurate checks??
+                    // console.log("aaaa")
+                }
+                overlay.remove()
+            })
+            overlay.addEventListener('contextmenu', (event) => {
+                event.preventDefault();
+                overlay.remove()
+            })
+        })
+        .catch((error) => {
+            WebDesktopEnvironment.Alert(error);
+        })
+
+        
+    }
+
     // /**
     // * @param {path} string
     // */

resources/sys/wde/basic-widgets.css

@@ -0,0 +1,60 @@
+.ContentBorder { /*TODO Delete, deprecated*/
+    width: 100%;
+    height: 100%;
+    /* background-color: #DDDDDD;
+    border: 1px solid #000000; */
+    
+    overflow: hidden;
+    overflow-x: hidden;
+}
+
+.ContextMenu {
+    position: absolute;
+    width: auto;
+    height: auto;
+
+    background-color: #DDDDDD;
+
+    border: 1px solid #000000;
+}
+
+.ContextMenu .Content{
+    position: relative;
+    width: auto;
+    height: auto;
+    
+
+    /* Auto layout */
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    /* padding: 4px;
+    padding-top: 2px;
+    padding-right: 6px;
+    gap: 4px; */
+}
+
+.ContextMenu .Row {
+    width: 100%;
+    height: 16px;
+
+}
+
+.ContextMenu .SectionBreaker {
+    
+    /* background-color: rebeccapurple; */
+
+}
+
+.ContextMenu .Row:hover{
+    background-color: #333399;
+    color: #FFFFFF;
+}
+
+.ContextMenu .Row .Lable{
+    margin-left: 20px;
+    margin-right: 12px;
+    font-family: "Virtue";
+    
+    white-space: nowrap;
+}

resources/sys/wde/file-view.css

@@ -2,6 +2,8 @@
     width: 100%;
     height: 100%;
 
+    
+    
     /* FIXME Bug, on desktop mode top ~10 pixel are not active, like margin:10px */
 }
 

resources/sys/wde/file-view.js

@@ -4,8 +4,9 @@ class FileView{
     /**
     * @param {HTMLElement} fileViewElem
     * @param {Function} doubleClickCallback
+    * @param {Function} rightClickCallback
     */
-    constructor(fileViewElem, doubleClickCallback){
+    constructor(fileViewElem, doubleClickCallback, rightClickCallback){
         //TODO check all params
         this.parentElem = fileViewElem
 
@@ -23,6 +24,11 @@ class FileView{
                 doubleClickCallback(event)
             }
         })
+
+        fileViewElem.addEventListener('contextmenu', (event) => {
+            event.preventDefault();
+            rightClickCallback(event)
+        })
     }
 
     DeselectAll(){

resources/sys/wde/wde-scrollbar.css

@@ -16,7 +16,7 @@
 .ScrollbarPlace{
     overflow: hidden;
 
-    border-left: 1px solid #000000;
+    border-left: 1px solid #555555;
     width: 14px;
     height: 100%;
 
@@ -25,8 +25,8 @@
     width: 14px;
     height: 100%;
 
-    background-color: #AAAAAA;
-    box-shadow: inset -1px 0px 0px rgba(255, 255, 255, 0.29), inset -2px 0px 0px rgba(255, 255, 255, 0.19), inset 1px 1px 0px rgba(0, 0, 0, 0.14), inset 2px 2px 0px rgba(0, 0, 0, 0.19);
+    background-color: #EEEEEE;
+    
     
     /* Inside auto layout */
     flex: none;
@@ -35,16 +35,32 @@
     flex-grow: 1;
 }
 
+.Focused .ScrollbarPlace{
+    border-left: 1px solid #000000;
+    background-color: #AAAAAA;
+    box-shadow: inset -1px 0px 0px rgba(255, 255, 255, 0.29),
+                inset -2px 0px 0px rgba(255, 255, 255, 0.19),
+                inset 1px 1px 0px rgba(0, 0, 0, 0.14), 
+                inset 2px 2px 0px rgba(0, 0, 0, 0.19);
+}
 
 .ScrollBarScrollElement{
     position: relative;
-
+    visibility: hidden;
     width: 14px;
     height: 31px;
+    
     background: #9999FF;
     
-    box-shadow: 0px -1px 0px #000000, 0px 1px 0px #000000, 0px 2px 0px rgba(0, 0, 0, 0.13), 0px 3px 0px rgba(0, 0, 0, 0.19), inset 0px 1px 0px rgba(255, 255, 255, 0.5), inset 1px 0px 0px rgba(255, 255, 255, 0.5), inset -1px -1px 0px rgba(102, 102, 204, 0.91);
+    box-shadow: 0px -1px 0px #000000,
+                0px 1px 0px #000000,
+                0px 2px 0px rgba(0, 0, 0, 0.13),
+                0px 3px 0px rgba(0, 0, 0, 0.19),
+                inset 0px 1px 0px rgba(255, 255, 255, 0.5),
+                inset 1px 0px 0px rgba(255, 255, 255, 0.5),
+                inset -1px -1px 0px rgba(102, 102, 204, 0.91);
 
+    /* Auto layout */
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -53,6 +69,10 @@
     padding: 0px;
 }
 
+.Focused .ScrollBarScrollElement{
+    visibility: visible;
+}
+
 .ScrollBarScrollElementDrag{
     pointer-events: none;
     /* background-color: #0A4C95; */

resources/wde.js

@@ -4,7 +4,7 @@ document.addEventListener('DOMContentLoaded', function() {
     // console.log(window.screen.width)
     wde = new WebDesktopEnvironment
     if (!WebDesktopEnvironment.isMobile){
-        // WebDesktopEnvironment.Open("finder", ["/home/user"])
+        WebDesktopEnvironment.Open("finder", ["/home/user"])
         // WebDesktopEnvironment.Open("blog-viewer", ["/home/user/blog/test-1.blog"])
         // WebDesktopEnvironment.Open("personal-properties", ["kek"])
     } else {
@@ -143,13 +143,14 @@ class WebDesktopEnvironment{
             document.body.querySelector('#windows-layer').appendChild(newWindow)
             return newWindow
         } else {
-            newWindow.setAttribute("class", "WindowFrame")
+            newWindow.setAttribute("class", "WindowFrame ConvexElement")
             newWindow.setAttribute("windowId", "SuperUniqUUID") //TODO:
 
             newWindow.style.width = width.toString() + "px"
             newWindow.style.height = height.toString() + "px"
 
             document.body.querySelector('#windows-layer').appendChild(newWindow)
+            WindowsCompositor.bringWindowToFront(newWindow)
             return newWindow
         }
     }
@@ -249,11 +250,7 @@ class WindowsCompositor{
             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.classList.contains("DragArea")){
                     let xPosInit = event.offsetX
                     let yPosInit = event.offsetY
                     let dragWindow = function(event){
@@ -268,7 +265,7 @@ class WindowsCompositor{
                     addEventListener('mousemove', dragWindow)
                     addEventListener('mouseup', stopDrag)
                 }
-
+            }
             WindowsCompositor.windowsLayer.addEventListener('mousedown', startDrag)
         }
     }
@@ -277,7 +274,10 @@ class WindowsCompositor{
      * @param {HTMLElement} window
     */
     static bringWindowToFront(window){ //FIXME
-        if (window != WindowsCompositor.windowsLayer.lastChild ){
+        if (!window.classList.contains("Focused")){
+                let previousWindow = WindowsCompositor.windowsLayer.lastChild
+                previousWindow.classList.remove("Focused")
+                window.classList.add("Focused")
                 WindowsCompositor.windowsLayer.insertBefore(WindowsCompositor.windowsLayer.lastChild, window)
         }
     }

resources/wdeUI.css

@@ -1,4 +1,4 @@
-.WindowFrame{
+.WindowFrame {
     /* Auto layout */
     display: flex;
     flex-direction: column;
@@ -10,9 +10,9 @@
 
     position: absolute;
 
-    background: #CCCCCC;
-    border: 1px solid #000000;
-    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25), inset -1px -1px 0px rgba(0, 0, 0, 0.27), inset 1px 1px 0px #FFFFFF;
+    background: #DDDDDD;
+    border: 1px solid #555555;
+    
 
     /* Inside auto layout */
     flex: none;
@@ -21,36 +21,55 @@
     flex-grow: 1;
 }
 
-.ContentBorder {
-    width: 100%;
-    height: 100%;
-    background-color: #DDDDDD;
+/* TODO Add shadows to windows */
+.WindowFrame.Focused{
     border: 1px solid #000000;
-
-    box-shadow:   -1px -1px 0px rgba(0, 0, 0, 0.25),
-                1px 1px 0px #FFFFFF,
-                inset -1px -1px 0px rgba(0, 0, 0, 0.27),
-                inset 1px 1px 0px #FFFFFF;
-
-    overflow: hidden;
-    overflow-x: hidden;
-
-    /* Auto layout */
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: flex-start;
-    padding: 0px;
+    background-color: #CCCCCC;
 }
 
-.WindowFrame .TitleBar{
+.WindowFrameShadow {
+    box-shadow: 2px 2px 0px #555555;
+}
+
+.Focused .WindowFrameShadow {
+    box-shadow: 2px 2px 0px #000000;
+}
+
+.Focused .ConvexElement {
+    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25),
+                inset -1px -1px 0px rgba(0, 0, 0, 0.27),
+                inset 1px 1px 0px #FFFFFF;
+}
+
+.AdjectiveElement {
+    border: 1px solid #555555;
+}
+
+.Focused .AdjectiveElement {
+    border: 1px solid #000000;
+    box-shadow: -1px -1px 0px rgba(0, 0, 0, 0.25),
+                1px 1px 0px #FFFFFF;
+                /* inset -1px -1px 0px rgba(0, 0, 0, 0.27), */
+                /* inset 1px 1px 0px #FFFFFF;*/
+}
+
+.AdjectiveHorizontalLine {
+    border-top: 1px solid rgba(0, 0, 0, 0.25);
+    border-bottom: 1px solid #FFFFFF;
+    width: 100%;
+    height: 0px;
+}
+
+
+
+.WindowFrame .TitleBar {
     width: 100%;
     height: 13px;
 
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: space-between;
+    justify-content: center;
     gap: 5px;
     padding: 0px;
 
@@ -62,12 +81,11 @@
     flex-grow: 0;
 }
 
-
-.WindowFrame .TitleBar .Lable{
+.WindowFrame .TitleBar .Lable {
     position: relative;
-    top:1px;
+    top: 1px;
     /* font-size: 13px; */
-
+    color:#777777;
     pointer-events: none;
     white-space: nowrap;
 
@@ -75,13 +93,18 @@
     letter-spacing: 0.35px;
 }
 
+.WindowFrame.Focused .TitleBar .Lable {
+    color:#000000;
+}
 
-.WindowFrame .TitleBar .Button{
+
+.WindowFrame .TitleBar .Button {
     width: 11px;
     height: 11px;
     padding: 0%;
     position: relative;
     top: 1px;
+    visibility: hidden;
     
     background: linear-gradient(135deg, #999999 18.18%, #FFFFFF 81.82%);
     border: 1px solid #222222;
@@ -89,24 +112,28 @@
         -0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25),
         inset 1px 1px 0px rgba(255, 255, 255, 0.5),
         inset -1px -1px 0px rgba(0, 0, 0, 0.27);
-    
     /* Inside auto layout */
     flex: none;
     order: 0;
     flex-grow: 0;
 }
 
+.WindowFrame.Focused .TitleBar .Button {
+    visibility: visible;
+}
+
 .WindowFrame .TitleBar .Button:active {
-    background-color: rgba(0, 0, 0, 0.4); /* Green */
+    background-color: rgba(0, 0, 0, 0.4);
+    /* Green */
     box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF,
         -0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25);
 }
 
-.WindowFrame .TitleBar .VisualDragArea{
+.Focused .VisualDragArea {
     pointer-events: none;
     width: 100%;
     height: 11px;
-    background: linear-gradient(transparent 0%,white 0%, white 50%, transparent 50%);
+    background: linear-gradient(transparent 0%, white 0%, white 50%, transparent 50%);
     background-size: 2px 2px;
     filter: drop-shadow(1px 1px 0px #777777);
 }
@@ -133,7 +160,7 @@
     padding: 0px;
 }
 
-.MobileApplicationWindow{
+.MobileApplicationWindow {
     width: 100%;
     height: 100%;
     /* Auto layout */
@@ -147,10 +174,10 @@
     left: 0px;
 }
 
-.MobileWindowFrameBottomBar{
+.MobileWindowFrameBottomBar {
     width: 100%;
     height: 20px;
-/* 
+    /* 
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -165,7 +192,7 @@
     flex-grow: 0;
 }
 
-.MobileWindowFrameBottomBarButton{
+.MobileWindowFrameBottomBarButton {
     min-width: 11px;
     width: auto;
     height: 15px;
@@ -186,11 +213,11 @@
     flex-grow: 0;
 }
 
-.MobileWindowFrameBottomBar .MobileLable{
+.MobileWindowFrameBottomBar .MobileLable {
     position: absolute;
     /* top:1px; */
     /* font-size: 13px; */
-    left:50%;
+    left: 50%;
     pointer-events: none;
     white-space: nowrap;
 
@@ -198,4 +225,3 @@
     letter-spacing: 0.35px;
 
 }
-

templates/base/index.tmpl

@@ -4,10 +4,13 @@
     <head>
         <link rel="stylesheet" type="text/css" href="res/base.css">
         <link rel="stylesheet" type="text/css" href="res/wdeUI.css">
+        <link rel="stylesheet" type="text/css" href="res/sys/wde/basic-widgets.css">
         <link rel="stylesheet" type="text/css" href="res/sys/wde/wde-scrollbar.css">
+        <link rel="stylesheet" type="text/css" href="res/sys/wde/basic-widgets.css">
         <link rel="stylesheet" type="text/css" href="res/sys/wde/file-view.css">
         <link rel="stylesheet" type="text/css" href="res/mobile-wdeUI.css">
         <link rel="stylesheet" href="/res/sys/wde/simple-scrollbar.css">
+        <link rel="stylesheet" type="text/css" href="res/sys/finder/finder.css">
         <link rel="stylesheet" href="/res/sys/personal-properties/personal-properies.css">
         <link rel="stylesheet" href="/res/sys/img-viewer/img-viewer.css">
         <link rel="stylesheet" href="/res/sys/blog-viewer/blog-viewer.css">

templates/finder/admin-app.tmpl

@@ -0,0 +1,28 @@
+{{ define "finder/admin-app.tmpl" }}
+    <div class="TitleBar DragArea">
+        <button id="closeWindowButton" class="Button" title="Close Window"></button>
+        
+            <div id="Drag" class="VisualDragArea"></div>
+            <div class="Lable">
+                Admin Finder
+            </div>
+            <div id="Drag" class="VisualDragArea"></div>
+        
+    </div>
+    <div id="ContentBorder" class="ContentBorder AdjectiveElement">
+        <div class="FinderContent">
+            <div class="ToolBar ConvexElement">
+                <button id="BackButton">Back</button>
+                <button id="HomeButton">Home</button>
+            </div>
+            <div class="FinderFileView">
+                <div class="FileTileView">
+
+                </div>
+                {{template "wde-widgets/scrollbar.tmpl" .}}
+            </div>
+        </div>
+    </div>
+{{ end }}
+
+				

templates/finder/app.tmpl

@@ -1,17 +1,19 @@
 {{ define "finder/app.tmpl" }}
     <div class="TitleBar DragArea">
         <button id="closeWindowButton" class="Button" title="Close Window"></button>
+        <div class="TitleBarTest">
             <div id="Drag" class="VisualDragArea"></div>
             <div class="Lable">
                 Files
             </div>
             <div id="Drag" class="VisualDragArea"></div>
         </div>
+    </div>
     <div class="ToolBar">
         <button id="BackButton">Back</button>
         <button id="HomeButton">Home</button>
     </div>
-    <div class="ContentBorder">
+    <div class="ContentBorder ConvexElement">
         <div class="FileTileView">
 
         </div>

templates/wde-widgets/context-menu.tmpl

@@ -0,0 +1,28 @@
+{{ define "wde-widgets/context-menu.tmpl" }}
+    <!-- <div class="ContextMenu  WindowFrameShadow"> -->
+        <div class="MenuContent ConvexElement">
+            <div class="Row">
+                <div class="Lable NoClick">Open</div>
+            </div>
+            <div class="Row" actionType="" action="">
+                <div class="Lable NoClick">Test</div>
+            </div>
+            <div class="AdjectiveHorizontalLine"></div>
+            <div class="Row">
+                <div class="Lable NoClick">Lol kek</div>
+            </div>
+            <div class="Row">
+                <div class="Lable NoClick">Delete this file</div>
+            </div>
+            <div class="Row">
+                <div class="Lable NoClick">Save to computer</div>
+            </div>
+            <div class="Row">
+                <div class="Lable NoClick">Pizda</div>
+            </div>
+            <div class="Row">
+                <div class="Lable NoClick">Azaza</div>
+            </div>
+        </div>
+    <!-- </div> -->
+{{ end }}

wde/wde.go

@@ -32,6 +32,17 @@ func (w *WDE) Render(path string) (gin.H, error) {
 	}, nil
 }
 
+func (w *WDE) RenderContextMenu() (gin.H, error) {
+	// list, err := w.fs.List(path)
+	// if err != nil {
+	// 	return nil, err
+	// }
+	return gin.H{
+		"Name": "Greg Brzezinski",
+		// "Files": list,
+	}, nil
+}
+
 func (w *WDE) RenderFileTileView(directory string, host string) (gin.H, error) {
 	list, err := w.fs.List(directory)
 	if err != nil {

webfilesystem/webfilesystem.go

@@ -3,8 +3,10 @@ package webfilesystem
 import (
 	"context"
 	"errors"
+	"net/http"
 	"strings"
 
+	"github.com/gin-gonic/gin"
 	"github.com/mitchellh/mapstructure"
 	"go.mongodb.org/mongo-driver/bson"
 	"go.mongodb.org/mongo-driver/bson/primitive"
@@ -172,6 +174,76 @@ func (fs *WebFileSystem) GetParentPath(path string) string {
 	return parentPath
 }
 
+func (fs *WebFileSystem) Route(route *gin.RouterGroup) {
+	route.GET("writeFile", func(ctx *gin.Context) {
+		parentPath := ctx.Query("parentPath")
+		if parentPath == "" {
+			ctx.JSON(http.StatusBadRequest, "TODO") //TODO json error struct
+			return
+		}
+		file := WebFSFile{
+			MongoId: primitive.NewObjectID(),
+			Name:    "pp",
+			Type:    "test",
+			Data:    nil,
+		}
+		err := fs.CreateFile(&file, parentPath)
+		if err != nil {
+			ctx.JSON(http.StatusInternalServerError, "TODO") //TODO json error struct
+			return
+		}
+
+		ctx.JSON(http.StatusOK, "OK")
+	})
+	route.GET("createDir", func(ctx *gin.Context) {
+		path := ctx.Query("path")
+		if path == "" {
+			ctx.JSON(http.StatusBadRequest, "TODO") //TODO json error struct
+			return
+		}
+
+		err := fs.CreateDirectory(path)
+		if err != nil {
+			ctx.JSON(http.StatusInternalServerError, "TODO") //TODO json error struct
+			return
+		}
+
+		ctx.JSON(http.StatusOK, "OK")
+	})
+
+	route.GET("list", func(ctx *gin.Context) {
+		path := ctx.Query("path")
+		if path == "" {
+			ctx.JSON(http.StatusBadRequest, "TODO") //TODO json error struct
+			return
+		}
+
+		files, err := fs.List(path)
+		if err != nil {
+			ctx.JSON(http.StatusInternalServerError, "TODO") //TODO json error struct
+			return
+		}
+
+		ctx.JSON(http.StatusOK, &files)
+	})
+
+	route.GET("read", func(ctx *gin.Context) {
+		path := ctx.Query("path")
+		if path == "" {
+			ctx.JSON(http.StatusBadRequest, "TODO") //TODO json error struct
+			return
+		}
+
+		file, err := fs.Read(path)
+		if err != nil {
+			ctx.JSON(http.StatusInternalServerError, "TODO") //TODO json error struct
+			return
+		}
+
+		ctx.JSON(http.StatusOK, &file)
+	})
+}
+
 type WebFSFile struct {
 	MongoId primitive.ObjectID `bson:"_id"  json:"-"`
 	Name    string             `bson:"name" json:"name"`

websiteapp/finder/finder.go

@@ -1,34 +0,0 @@
-package finder
-
-import (
-	"personalwebsite/webfilesystem"
-	"personalwebsite/websiteapp"
-
-	"github.com/gin-gonic/gin"
-)
-
-type FinderApplication struct {
-	fs       *webfilesystem.WebFileSystem
-	manifest websiteapp.ApplicationManifest
-}
-
-func NewFinderApplication(webFs *webfilesystem.WebFileSystem) *FinderApplication {
-	return &FinderApplication{
-		fs: webFs,
-		manifest: websiteapp.ApplicationManifest{
-			AppId:      "finder",
-			WindowName: "TODO DELETE", //TODO DELETE
-		},
-	}
-}
-func (f *FinderApplication) GetManifest() websiteapp.ApplicationManifest {
-	return f.manifest
-}
-func (f *FinderApplication) GetId() string {
-	return f.manifest.AppId
-}
-
-func (f *FinderApplication) Render(isMobile bool) gin.H {
-
-	return gin.H{}
-}