Add context menu
This commit is contained in:
parent
809b7aa901
commit
e1635f5e27
|
|
@ -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{})
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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(){
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
28
templates/wde-widgets/context-menu.tmpl
Normal 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
11
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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user