cyber-dream/personal-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add context menu

Browse Source
This commit is contained in:
cyber-dream 2023-05-04 03:38:24 +03:00
parent 809b7aa901
commit e1635f5e27
8 changed files with 185 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/finder/finder.go
View File

@ -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{})
})
}

58
resources/sys/finder/finder.js
View File

@ -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

63
resources/sys/wde/basic-widgets.css
View File

@ -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;
}

8
resources/sys/wde/file-view.js
View File

@ -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(){

35
resources/wdeUI.css
View File

@ -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;

2
templates/finder/admin-app.tmpl
View File

@ -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>

28
templates/wde-widgets/context-menu.tmpl Normal file
View File

@ -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 }}

11
wde/wde.go
View File

@ -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 {