Improve contex menu in finder, small fixes
This commit is contained in:
parent
4382b57e9e
commit
bea6859457
@ -3,6 +3,7 @@ package finder
|
||||
import (
|
||||
"net/http"
|
||||
"personalwebsite/apps"
|
||||
"personalwebsite/wde"
|
||||
"personalwebsite/webfilesystem"
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
@ -34,6 +35,54 @@ func (f *FinderApplication) Render(isMobile bool) gin.H {
|
||||
return gin.H{}
|
||||
}
|
||||
|
||||
func (f *FinderApplication) RenderContextMenu(context string, data string) gin.H {
|
||||
islands := [][]wde.ContexMenuRow{}
|
||||
switch context {
|
||||
case "FileTileView":
|
||||
islands = [][]wde.ContexMenuRow{
|
||||
{
|
||||
{
|
||||
Label: "New Directory",
|
||||
Action: []string{},
|
||||
},
|
||||
},
|
||||
}
|
||||
case "directory":
|
||||
islands = [][]wde.ContexMenuRow{
|
||||
{
|
||||
{Label: "Test"},
|
||||
{Label: "Delete"},
|
||||
},
|
||||
{
|
||||
{
|
||||
Label: "Get Info",
|
||||
Action: []string{"openApp", "properties"},
|
||||
},
|
||||
},
|
||||
}
|
||||
default:
|
||||
islands = [][]wde.ContexMenuRow{
|
||||
{
|
||||
{
|
||||
Label: "temp Menu 1",
|
||||
},
|
||||
{
|
||||
Label: "temp Menu 2",
|
||||
},
|
||||
{
|
||||
Label: "temp Menu 3",
|
||||
},
|
||||
{
|
||||
Label: "temp Menu 4",
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
return gin.H{
|
||||
"Islands": islands,
|
||||
}
|
||||
}
|
||||
|
||||
func (f *FinderApplication) Routes(routes *gin.RouterGroup) {
|
||||
routes.GET("render", func(ctx *gin.Context) {
|
||||
isMobileParam := ctx.Query("isMobile")
|
||||
@ -61,7 +110,11 @@ 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{})
|
||||
context := ctx.Query("context")
|
||||
data := ctx.Query("data")
|
||||
ginH := f.RenderContextMenu(context, data)
|
||||
ctx.HTML(http.StatusOK, "wde-widgets/context-menu.tmpl", ginH)
|
||||
})
|
||||
}
|
||||
|
||||
@ -145,14 +145,19 @@ 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])
|
||||
}
|
||||
this.CreateContextMenu(event.target, [event.clientY, event.clientX])
|
||||
}
|
||||
|
||||
CreateContextMenu(target, pos){
|
||||
let context
|
||||
if (target.classList.contains("FileTileView"))
|
||||
{
|
||||
context = "FileTileView"
|
||||
|
||||
}
|
||||
fetch(`${window.location.origin}/application/${this.appId}/contextMenu?` + new URLSearchParams({
|
||||
kek: "kek"
|
||||
context: context
|
||||
|
||||
}))
|
||||
.then((response) => response.text())
|
||||
.then((html) => {
|
||||
@ -161,21 +166,22 @@ class Finder{
|
||||
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
|
||||
menu.children[0].lastElementChild.remove() //FIXME Can't ommit rendering of horLine in end of menu on backend
|
||||
|
||||
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")
|
||||
if (event.target.classList.contains("Row")){ //TODO add uuid id to rows to more accurate checks??
|
||||
//TODO
|
||||
}
|
||||
overlay.remove()
|
||||
})
|
||||
@ -186,24 +192,6 @@ class Finder{
|
||||
})
|
||||
.catch((error) => {
|
||||
WebDesktopEnvironment.Alert(error);
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
// /**
|
||||
// * @param {path} string
|
||||
// */
|
||||
// renderFileView(path){
|
||||
// fetch(`${window.location.origin}/fs/list?` + new URLSearchParams({
|
||||
// path: path,
|
||||
// }))
|
||||
// .then((response) => response.text())
|
||||
// .then((html) => {
|
||||
// this.fileView.innerHTML = html
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// WebDesktopEnvironment.Alert(error);
|
||||
// })
|
||||
// }
|
||||
}
|
||||
|
||||
@ -18,8 +18,7 @@ class FileView{
|
||||
}
|
||||
if (event.detail === 1){
|
||||
this.DeselectAll()
|
||||
this.selected.push(event.target)
|
||||
event.target.classList.add("Selected")
|
||||
this.Select([event.target])
|
||||
} else if (event.detail === 2) {
|
||||
doubleClickCallback(event)
|
||||
}
|
||||
@ -27,10 +26,25 @@ class FileView{
|
||||
|
||||
fileViewElem.addEventListener('contextmenu', (event) => {
|
||||
event.preventDefault();
|
||||
if (event.target.classList.contains("Tile")){
|
||||
this.DeselectAll()
|
||||
this.Select([event.target])
|
||||
}
|
||||
this.Select([event.target])
|
||||
rightClickCallback(event)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {[]Element} elements
|
||||
*/
|
||||
Select(elements){
|
||||
elements.forEach(element => {
|
||||
this.selected.push(element)
|
||||
element.classList.add("Selected")
|
||||
});
|
||||
}
|
||||
|
||||
DeselectAll(){
|
||||
this.selected.forEach(element => {
|
||||
element.classList.remove("Selected")
|
||||
|
||||
@ -4,8 +4,8 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
// console.log(window.screen.width)
|
||||
wde = new WebDesktopEnvironment
|
||||
if (!WebDesktopEnvironment.isMobile){
|
||||
// WebDesktopEnvironment.Open("finder", ["/home/user"])
|
||||
WebDesktopEnvironment.Open("blog-viewer", ["/home/user/blog/test-1.blog"])
|
||||
WebDesktopEnvironment.Open("finder", ["/home/user"])
|
||||
// WebDesktopEnvironment.Open("blog-viewer", ["/home/user/blog/test-1.blog"])
|
||||
// WebDesktopEnvironment.Open("personal-properties", ["kek"])
|
||||
} else {
|
||||
WebDesktopEnvironment.Open("blog-viewer", ["/home/user/blog/test-1.blog"])
|
||||
|
||||
@ -60,6 +60,10 @@
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.AdjectiveHorizontalLine:last-child {
|
||||
height: 0%;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
.WindowFrame .TitleBar {
|
||||
|
||||
@ -1,28 +1,12 @@
|
||||
{{ 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>
|
||||
{{ range $island := .Islands }}
|
||||
{{ range $row := $island }}
|
||||
<div class="Row">
|
||||
<div class="Lable NoClick" action="{{$row.Action}}">{{ $row.Label }}</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="AdjectiveHorizontalLine"></div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
{{ end }}
|
||||
10
wde/contextmenu.go
Normal file
10
wde/contextmenu.go
Normal file
@ -0,0 +1,10 @@
|
||||
package wde
|
||||
|
||||
type ContexMenuIsland struct {
|
||||
Rows []ContexMenuRow
|
||||
}
|
||||
|
||||
type ContexMenuRow struct {
|
||||
Label string
|
||||
Action []string
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user