Add context menu

apps/finder/finder.go

@@ -61,4 +61,7 @@ func (f *FinderApplication) Routes(routes *gin.RouterGroup) {
 		}
 		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{})
+	})
 }

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.fileView = new FileView(newWindow.querySelector(".FileTileView"),
-                this.Open(event, false)
+                (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"))
@@ -138,6 +141,55 @@ class Finder{
                 break;
         }
     }
+    
+    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

@@ -1,15 +1,58 @@
-.ConvexElement {
+.ContentBorder { /*TODO Delete */
-    background: #CCCCCC;
+    width: 100%;
+    height: 100%;
+    /* background-color: #DDDDDD;
+    border: 1px solid #000000; */
     
-    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25),
+    overflow: hidden;
-                inset -1px -1px 0px rgba(0, 0, 0, 0.27),
+    overflow-x: hidden;
-                inset 1px 1px 0px #FFFFFF;
 }
 
-.AdjectiveElement {
+.ContextMenu {
+    position: absolute;
+    width: auto;
+    height: auto;
+
     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), */
+.ContextMenu .Content{
-                /* inset 1px 1px 0px #FFFFFF;*/
+    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.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/wdeUI.css

@@ -19,16 +19,35 @@
     flex-grow: 1;
 }
 
-.ContentBorder {
+.WindowFrameShadow {
-    width: 100%;
+    box-shadow: 2px 2px 0px #000000;
-    height: 100%;
-    /* background-color: #DDDDDD;
-    border: 1px solid #000000; */
-
-    overflow: hidden;
-    overflow-x: hidden;
 }
 
+.ConvexElement {
+    background: #CCCCCC;
+    
+    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 #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;

templates/finder/admin-app.tmpl

@@ -7,7 +7,7 @@
         </div>
         <div id="Drag" class="VisualDragArea"></div>
     </div>
-    <div class="ContentBorder AdjectiveElement">
+    <div id="ContentBorder" class="ContentBorder AdjectiveElement">
         <div class="FinderContent">
             <div class="ToolBar ConvexElement">
                 <button id="BackButton">Back</button>

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 {