From e1635f5e27afc73d77903f73f06233de981244d5 Mon Sep 17 00:00:00 2001 From: cyber-dream Date: Thu, 4 May 2023 03:38:24 +0300 Subject: [PATCH] Add context menu --- apps/finder/finder.go | 3 ++ resources/sys/finder/finder.js | 58 +++++++++++++++++++++-- resources/sys/wde/basic-widgets.css | 63 +++++++++++++++++++++---- resources/sys/wde/file-view.js | 8 +++- resources/wdeUI.css | 35 ++++++++++---- templates/finder/admin-app.tmpl | 2 +- templates/wde-widgets/context-menu.tmpl | 28 +++++++++++ wde/wde.go | 11 +++++ 8 files changed, 185 insertions(+), 23 deletions(-) create mode 100644 templates/wde-widgets/context-menu.tmpl diff --git a/apps/finder/finder.go b/apps/finder/finder.go index 674f5a1..7ddd076 100644 --- a/apps/finder/finder.go +++ b/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{}) + }) } diff --git a/resources/sys/finder/finder.js b/resources/sys/finder/finder.js index 5f836eb..b0445e4 100644 --- a/resources/sys/finder/finder.js +++ b/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")) @@ -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 diff --git a/resources/sys/wde/basic-widgets.css b/resources/sys/wde/basic-widgets.css index 2e8bf57..9fe177d 100644 --- a/resources/sys/wde/basic-widgets.css +++ b/resources/sys/wde/basic-widgets.css @@ -1,15 +1,58 @@ -.ConvexElement { - background: #CCCCCC; +.ContentBorder { /*TODO Delete */ + width: 100%; + height: 100%; + /* background-color: #DDDDDD; + 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; + overflow: hidden; + overflow-x: hidden; } -.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), */ - /* inset 1px 1px 0px #FFFFFF;*/ +} + +.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; } \ No newline at end of file diff --git a/resources/sys/wde/file-view.js b/resources/sys/wde/file-view.js index 80c4989..646e1b6 100644 --- a/resources/sys/wde/file-view.js +++ b/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(){ diff --git a/resources/wdeUI.css b/resources/wdeUI.css index f3ff166..8cf3e99 100644 --- a/resources/wdeUI.css +++ b/resources/wdeUI.css @@ -19,16 +19,35 @@ flex-grow: 1; } -.ContentBorder { - width: 100%; - height: 100%; - /* background-color: #DDDDDD; - border: 1px solid #000000; */ - - overflow: hidden; - overflow-x: hidden; +.WindowFrameShadow { + box-shadow: 2px 2px 0px #000000; } +.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; diff --git a/templates/finder/admin-app.tmpl b/templates/finder/admin-app.tmpl index 8021238..c9a949c 100644 --- a/templates/finder/admin-app.tmpl +++ b/templates/finder/admin-app.tmpl @@ -7,7 +7,7 @@
-
+
diff --git a/templates/wde-widgets/context-menu.tmpl b/templates/wde-widgets/context-menu.tmpl new file mode 100644 index 0000000..24aa755 --- /dev/null +++ b/templates/wde-widgets/context-menu.tmpl @@ -0,0 +1,28 @@ +{{ define "wde-widgets/context-menu.tmpl" }} + +
+
+
Open
+
+
+
Test
+
+
+
+
Lol kek
+
+
+
Delete this file
+
+
+
Save to computer
+
+
+
Pizda
+
+
+
Azaza
+
+
+ +{{ end }} \ No newline at end of file diff --git a/wde/wde.go b/wde/wde.go index 216209d..3d3825f 100644 --- a/wde/wde.go +++ b/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 {