working scrollbar
This commit is contained in:
parent
ee9f18a134
commit
edd4a86796
@ -1,13 +0,0 @@
|
|||||||
package personalpropsroute
|
|
||||||
|
|
||||||
import (
|
|
||||||
"github.com/gin-gonic/gin"
|
|
||||||
)
|
|
||||||
|
|
||||||
func Route(route *gin.RouterGroup) {
|
|
||||||
|
|
||||||
// route.GET("/test", func(ctx *gin.Context) {
|
|
||||||
// test := persPropsApp.Render()
|
|
||||||
// ctx.HTML(http.StatusOK, "personal-properties.html", gin.H{"books": test})
|
|
||||||
// })
|
|
||||||
}
|
|
||||||
10
main.go
10
main.go
@ -3,9 +3,9 @@ package main
|
|||||||
import (
|
import (
|
||||||
"log"
|
"log"
|
||||||
"net/http"
|
"net/http"
|
||||||
personalpropsroute "personalwebsite/approutes/personalPropsRoute"
|
|
||||||
"personalwebsite/routewde"
|
"personalwebsite/routewde"
|
||||||
"personalwebsite/websiteapp"
|
"personalwebsite/websiteapp"
|
||||||
|
"personalwebsite/websiteapp/finder"
|
||||||
"personalwebsite/websiteapp/personalprops"
|
"personalwebsite/websiteapp/personalprops"
|
||||||
|
|
||||||
"github.com/gin-gonic/gin"
|
"github.com/gin-gonic/gin"
|
||||||
@ -39,10 +39,12 @@ func main() {
|
|||||||
})
|
})
|
||||||
|
|
||||||
persPropsApp := personalprops.NewPersPropsApp()
|
persPropsApp := personalprops.NewPersPropsApp()
|
||||||
|
finderApp := finder.FinerApplication{}
|
||||||
appsStorage := websiteapp.ApplicationsStorage{
|
appsStorage := websiteapp.ApplicationsStorage{
|
||||||
Apps: map[string]websiteapp.WebDEApplication{},
|
Apps: map[string]websiteapp.WebDEApplication{},
|
||||||
}
|
}
|
||||||
appsStorage.Apps["personal-properties"] = &persPropsApp
|
appsStorage.Apps["personal-properties"] = &persPropsApp
|
||||||
|
appsStorage.Apps["finder"] = &finderApp
|
||||||
system := router.Group("system")
|
system := router.Group("system")
|
||||||
{
|
{
|
||||||
|
|
||||||
@ -65,9 +67,9 @@ func main() {
|
|||||||
case "getmanifest":
|
case "getmanifest":
|
||||||
ctx.JSON(http.StatusOK, app.GetManifest())
|
ctx.JSON(http.StatusOK, app.GetManifest())
|
||||||
case "app.js":
|
case "app.js":
|
||||||
ctx.File("resources/" + appId + "/" + appId + ".js")
|
ctx.File("resources/sys/" + appId + "/" + appId + ".js")
|
||||||
case "app.css":
|
case "app.css":
|
||||||
ctx.File("resources/" + appId + "/" + appId + ".css")
|
ctx.File("resources/sys/" + appId + "/" + appId + ".css")
|
||||||
default:
|
default:
|
||||||
ctx.Status(http.StatusBadRequest)
|
ctx.Status(http.StatusBadRequest)
|
||||||
}
|
}
|
||||||
@ -75,7 +77,7 @@ func main() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
websiteapp.Route(apps.Group("/storage"), &appsStorage)
|
websiteapp.Route(apps.Group("/storage"), &appsStorage)
|
||||||
personalpropsroute.Route(apps.Group("/personalproperties"))
|
// personalpropsroute.Route(apps.Group("/personalproperties"))
|
||||||
}
|
}
|
||||||
|
|
||||||
app := router.Group("application")
|
app := router.Group("application")
|
||||||
|
|||||||
@ -1,10 +1,35 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" dir="ltr">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Website</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta name="theme-color" content="#000000">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../../packages/simplebar/dist/simplebar.min.css">
|
||||||
|
|
||||||
|
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
|
||||||
|
<script src="../../packages/simplebar/dist/simplebar.min.js"></script>
|
||||||
|
<script>
|
||||||
|
$(document).ready(function() {
|
||||||
|
new SimpleBar($('#container')[0]);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#container {
|
||||||
|
background-color: lightgray;
|
||||||
|
max-height: 70px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div id="container">
|
||||||
|
<p>↓Scrollable!↓</p>
|
||||||
|
<p>↓Scrollable!↓</p>
|
||||||
|
<p>↓Scrollable!↓</p>
|
||||||
|
<p>↓Scrollable!↓</p>
|
||||||
|
<p>↓Scrollable!↓</p>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -1,8 +1,6 @@
|
|||||||
@font-face{
|
@font-face{
|
||||||
font-family: "Virtue";
|
font-family: "Virtue";
|
||||||
src:url("./virtue.ttf");
|
src:url("./virtue.ttf");
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face{
|
@font-face{
|
||||||
@ -21,6 +19,13 @@
|
|||||||
body{
|
body{
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
/* font: normal 14px Summer Pixel 22, "res/SummerPixel22Regular.ttf"; */
|
/* font: normal 14px Summer Pixel 22, "res/SummerPixel22Regular.ttf"; */
|
||||||
|
-webkit-touch-callout: none; /* iOS Safari */
|
||||||
|
-webkit-user-select: none; /* Safari */
|
||||||
|
-khtml-user-select: none; /* Konqueror HTML */
|
||||||
|
-moz-user-select: none; /* Old versions of Firefox */
|
||||||
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||||
|
user-select: none; /* Non-prefixed version, currently
|
||||||
|
supported by Chrome, Edge, Opera and Firefox */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* @font-face {
|
/* @font-face {
|
||||||
@ -74,15 +79,51 @@ body{
|
|||||||
.VisualFrame{
|
.VisualFrame{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: scroll;
|
position: relative;
|
||||||
overflow-x: hidden;
|
/* overflow: scroll; */
|
||||||
|
/* overflow-x: hidden; */
|
||||||
|
|
||||||
|
|
||||||
|
/* Inside auto layout */
|
||||||
|
|
||||||
|
flex: none;
|
||||||
|
order: 1;
|
||||||
|
align-self: stretch;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
background: #DDDDDD;
|
background: #DDDDDD;
|
||||||
border: 1px solid #000000;
|
border: 1px solid #000000;
|
||||||
box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF, -0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25), inset 1px 1px 0px #FFFFFF;
|
box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF, -0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25), inset 1px 1px 0px #FFFFFF;
|
||||||
|
|
||||||
|
/* Auto layout */
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: start;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 0px;
|
||||||
|
padding: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ContentFrame{
|
.ContentFrame{
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
/* background-color: aquamarine; */
|
||||||
|
|
||||||
|
/* Auto layout */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px;
|
||||||
|
padding-bottom: 0px;
|
||||||
|
gap:16px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.Old {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
@ -93,7 +134,7 @@ body{
|
|||||||
padding: 12px;
|
padding: 12px;
|
||||||
gap:16px;
|
gap:16px;
|
||||||
|
|
||||||
width: auto;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
||||||
|
|
||||||
@ -105,121 +146,5 @@ body{
|
|||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
|
||||||
/* overflow: scroll; */
|
overflow: scroll;
|
||||||
}
|
|
||||||
|
|
||||||
.Personal-properties-bio{
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
/* margin-right: -20px; */
|
|
||||||
|
|
||||||
/* Auto layout */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0px;
|
|
||||||
margin-right: 20;
|
|
||||||
gap:15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.Personal-properties-textbio{
|
|
||||||
/* width: 100%;
|
|
||||||
height: auto; */
|
|
||||||
|
|
||||||
/* Auto layout */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: left;
|
|
||||||
padding: 0px;
|
|
||||||
gap:1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.Personal-properties-prop{
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
border: 1px solid #888888;
|
|
||||||
box-shadow: 1px 1px 0px #FFFFFF, inset 1px 1px 0px #FFFFFF;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
|
|
||||||
/* Auto layout */
|
|
||||||
/* display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0px;
|
|
||||||
gap:1px; */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.Personal-properties-prop-title{
|
|
||||||
font-family: "Virtue";
|
|
||||||
letter-spacing: 0.35px;
|
|
||||||
position:relative;
|
|
||||||
display: inline-block;
|
|
||||||
max-width: 100%;
|
|
||||||
background-color: #DDDDDD;
|
|
||||||
left: 12px;
|
|
||||||
top: -9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Personal-properties-prop-content{
|
|
||||||
width: 100%;
|
|
||||||
/* top: 0px; */
|
|
||||||
/* Auto layout */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0px;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Personal-properties-prop-row{
|
|
||||||
margin-left: 12px;
|
|
||||||
margin-right: 12px;
|
|
||||||
/* Auto layout */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0px;
|
|
||||||
gap: 5px;
|
|
||||||
}
|
|
||||||
.Personal-properties-prop-key{
|
|
||||||
position: relative;
|
|
||||||
font-family: "Virtue";
|
|
||||||
font-size: 11px;
|
|
||||||
letter-spacing: 0.35px;
|
|
||||||
text-align: end;
|
|
||||||
width: 34%;
|
|
||||||
white-space: nowrap;
|
|
||||||
top: -1.5px;
|
|
||||||
|
|
||||||
/* font-weight: bold; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.Personal-properties-prop-key-comments{
|
|
||||||
/* color: rgb(129, 129, 129); TODO*/
|
|
||||||
color: #646464;
|
|
||||||
font-size: 9px;
|
|
||||||
font-style: italic;
|
|
||||||
text-align: end;
|
|
||||||
white-space:normal;
|
|
||||||
/* filter: drop-shadow(-.5px -.5px 0px #616161); */
|
|
||||||
}
|
|
||||||
.Personal-properties-prop-values{
|
|
||||||
width: 55%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: left;
|
|
||||||
padding: 0px;
|
|
||||||
gap: 5px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.Personal-properties-prop-value{
|
|
||||||
/* width: 55%; */
|
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1 +0,0 @@
|
|||||||
<div id="PIZDA">PIIIIIIZDA</div>
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
<div class="Personal-properties-bio">
|
|
||||||
RIGHT FILE!!!!
|
|
||||||
<img src="res/img/default-avatar-photo-placeholder-profile-picture-vector.jpg" style="width: 48px;height: 48px;">
|
|
||||||
<div class="Personal-properties-textbio">
|
|
||||||
<div>{{ .Name }}</div>
|
|
||||||
<div>{{ .BasicBio }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{ range $props := .allprops }}
|
|
||||||
<div id="prop" class="Personal-properties-prop">
|
|
||||||
<div class="Personal-properties-prop-header">
|
|
||||||
Test Title:
|
|
||||||
</div>
|
|
||||||
<div class="Personal-properties-prop-content">
|
|
||||||
{{range $prop := $props}}
|
|
||||||
<div class="Personal-properties-prop-row">
|
|
||||||
<div class="Personal-properties-prop-key">{{.Key}}:</div>
|
|
||||||
<div class="Personal-properties-prop-values">
|
|
||||||
{{ range $value := .Values }}
|
|
||||||
<div class="Personal-properties-prop-value">
|
|
||||||
{{ $value }}
|
|
||||||
</div>
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{{ end }}
|
|
||||||
40
resources/sys/apps/finder/app.js
Normal file
40
resources/sys/apps/finder/app.js
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
|
||||||
|
|
||||||
|
class Finder{
|
||||||
|
appId = "finder"
|
||||||
|
/**
|
||||||
|
* @param {HTMLElement} appElem
|
||||||
|
*/
|
||||||
|
constructor(appElem){
|
||||||
|
this.appElem = appElem
|
||||||
|
}
|
||||||
|
|
||||||
|
Init(){
|
||||||
|
console.log("Init")
|
||||||
|
fetch(`http://localhost:8080/application/${this.appId}/render`) //TODO Move to wde func
|
||||||
|
.then((response) => response.text())
|
||||||
|
.then((html) => {
|
||||||
|
let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, "Finder", 600, 500)
|
||||||
|
|
||||||
|
newWindow.innerHTML = html
|
||||||
|
|
||||||
|
let closeButton = newWindow.children[0].children[0]
|
||||||
|
|
||||||
|
closeButton.addEventListener('click', function (params) {
|
||||||
|
WebDesktopEnvironment.CloseWindow(newWindow)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
WebDesktopEnvironment.Alert(error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
CloseWindow(id){
|
||||||
|
console.log(id+"Close")
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function reply_click(){
|
||||||
|
console.log("QQQQQQQQQQQQQQQQQQQ")
|
||||||
|
}
|
||||||
166
resources/sys/personal-properties/personal-properies.css
Normal file
166
resources/sys/personal-properties/personal-properies.css
Normal file
@ -0,0 +1,166 @@
|
|||||||
|
.ScrollContent {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: scroll;
|
||||||
|
overflow-x: hidden;
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
||||||
|
|
||||||
|
/* Auto layout */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ScrollContent::-webkit-scrollbar { /* WebKit */
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.PropertiesList{
|
||||||
|
/* width: 100%;
|
||||||
|
height: auto; */
|
||||||
|
|
||||||
|
/* Inside auto layout */
|
||||||
|
order: 0;
|
||||||
|
align-self: flex-start;
|
||||||
|
flex-grow: 0;
|
||||||
|
|
||||||
|
/* Auto layout */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 12px;
|
||||||
|
gap:16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.Personal-properties-bio{
|
||||||
|
/* width: 100%;
|
||||||
|
height: auto; */
|
||||||
|
/* margin-right: -20px; */
|
||||||
|
|
||||||
|
/* Inside auto layout */
|
||||||
|
flex: none;
|
||||||
|
order: 0;
|
||||||
|
align-self: stretch;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
/* Auto layout */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0px;
|
||||||
|
margin-right: 20;
|
||||||
|
gap:15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.Personal-properties-textbio{
|
||||||
|
/* width: 100%;
|
||||||
|
height: auto; */
|
||||||
|
|
||||||
|
/* Inside auto layout */
|
||||||
|
flex: none;
|
||||||
|
order: 0;
|
||||||
|
align-self: stretch;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
/* Auto layout */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: left;
|
||||||
|
padding: 0px;
|
||||||
|
gap:1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.Personal-properties-prop{
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border: 1px solid #888888;
|
||||||
|
box-shadow: 1px 1px 0px #FFFFFF, inset 1px 1px 0px #FFFFFF;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
|
||||||
|
/* Auto layout */
|
||||||
|
/* display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0px;
|
||||||
|
gap:1px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.Personal-properties-prop-title{
|
||||||
|
font-family: "Virtue";
|
||||||
|
letter-spacing: 0.35px;
|
||||||
|
position:relative;
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 100%;
|
||||||
|
background-color: #DDDDDD;
|
||||||
|
left: 12px;
|
||||||
|
top: -9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Personal-properties-prop-content{
|
||||||
|
width: 100%;
|
||||||
|
/* top: 0px; */
|
||||||
|
/* Auto layout */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0px;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Personal-properties-prop-row{
|
||||||
|
margin-left: 12px;
|
||||||
|
margin-right: 12px;
|
||||||
|
/* Auto layout */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0px;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
.Personal-properties-prop-key{
|
||||||
|
position: relative;
|
||||||
|
font-family: "Virtue";
|
||||||
|
font-size: 11px;
|
||||||
|
letter-spacing: 0.35px;
|
||||||
|
text-align: end;
|
||||||
|
width: 34%;
|
||||||
|
white-space: nowrap;
|
||||||
|
top: -1.5px;
|
||||||
|
|
||||||
|
/* font-weight: bold; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.Personal-properties-prop-key-comments{
|
||||||
|
/* color: rgb(129, 129, 129); TODO*/
|
||||||
|
color: #646464;
|
||||||
|
font-size: 9px;
|
||||||
|
font-style: italic;
|
||||||
|
text-align: end;
|
||||||
|
white-space:normal;
|
||||||
|
/* filter: drop-shadow(-.5px -.5px 0px #616161); */
|
||||||
|
}
|
||||||
|
.Personal-properties-prop-values{
|
||||||
|
width: 55%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: left;
|
||||||
|
padding: 0px;
|
||||||
|
gap: 5px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.Personal-properties-prop-value{
|
||||||
|
/* width: 55%; */
|
||||||
|
|
||||||
|
}
|
||||||
@ -1,3 +1,4 @@
|
|||||||
|
// const simpleScrollbar = require("../wde/simple-scrollbar");
|
||||||
|
|
||||||
|
|
||||||
class PersonalProperties{
|
class PersonalProperties{
|
||||||
@ -11,24 +12,29 @@ class PersonalProperties{
|
|||||||
|
|
||||||
Init(){
|
Init(){
|
||||||
console.log("Init")
|
console.log("Init")
|
||||||
// this.appElem.innerHTML = WebDesktopEnvironment.GetBasicWindow()
|
|
||||||
// console.log(this.appElem)
|
|
||||||
// let contentFrame = this.appElem.children[0].children[0].children[1]
|
|
||||||
fetch("http://localhost:8080/application/personal-properties/render") //TODO Move to wde func
|
fetch("http://localhost:8080/application/personal-properties/render") //TODO Move to wde func
|
||||||
.then((response) => response.text())
|
.then((response) => response.text())
|
||||||
.then((html) => {
|
.then((html) => {
|
||||||
let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, "Personal Properties", 350, 750) //TODO Get ~70% of user screen height
|
//TODO Get ~70% of user screen height
|
||||||
|
let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, "Personal Properties", 300, 500)
|
||||||
|
|
||||||
newWindow.innerHTML = html
|
newWindow.innerHTML = html
|
||||||
|
|
||||||
// document.getElementById("closeWindowButton").onclick = function jsFunc() {
|
|
||||||
// console.log("keeek")
|
|
||||||
// }
|
|
||||||
|
|
||||||
// console.log(newWindow.children[0].children[0])
|
|
||||||
let closeButton = newWindow.children[0].children[0]
|
let closeButton = newWindow.children[0].children[0]
|
||||||
// console.log(closeButton)
|
let scrollDiv = newWindow.children[1]
|
||||||
// // closeButton.onclick = this.CloseWindow("test")
|
// console.log(scrollDiv)
|
||||||
|
let scrollBar = new WdeScrollBar(scrollDiv.children[1].children[0])
|
||||||
|
console.log(scrollBar)
|
||||||
|
|
||||||
|
// scrollBar.BindHandler(scrollDiv.children[1].children[0])
|
||||||
|
// scrollBar.BindHandler(scrollDiv.children[1].children[0])
|
||||||
|
|
||||||
|
// SimpleScrollbar.initEl(scrollDiv)
|
||||||
|
|
||||||
|
// console.log("SimpleBar" + SimpleScrollbar)
|
||||||
|
|
||||||
|
// SimpleScrollbar.initAll();
|
||||||
|
|
||||||
closeButton.addEventListener('click', function (params) {
|
closeButton.addEventListener('click', function (params) {
|
||||||
WebDesktopEnvironment.CloseWindow(newWindow)
|
WebDesktopEnvironment.CloseWindow(newWindow)
|
||||||
})
|
})
|
||||||
83
resources/sys/wde/wde-scrollbar.js
Normal file
83
resources/sys/wde/wde-scrollbar.js
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
class WdeScrollBar{
|
||||||
|
// max = 0
|
||||||
|
// isDragged = false
|
||||||
|
/**
|
||||||
|
* @param {HTMLElement} handler
|
||||||
|
*/
|
||||||
|
constructor(handler){
|
||||||
|
console.log( handler.clientHeight)
|
||||||
|
let max = handler.parentElement.clientHeight - handler.clientHeight
|
||||||
|
let yOffset = null
|
||||||
|
let yPosInit = 0
|
||||||
|
handler.addEventListener('mousedown', (event) => {
|
||||||
|
// yOffset = event.offsetY
|
||||||
|
yPosInit = event.clientY - Number(handler.style.top.replace('px','' ))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// console.log()
|
||||||
|
document.addEventListener('mousemove', drag);
|
||||||
|
document.addEventListener('mouseup', stop)
|
||||||
|
//TODO Document dissallow select
|
||||||
|
})
|
||||||
|
|
||||||
|
function drag() {
|
||||||
|
|
||||||
|
console.log(event.clientY - yPosInit, Number(handler.style.top.replace('px','' )))
|
||||||
|
|
||||||
|
let pos = event.clientY - yPosInit
|
||||||
|
let clampPos = Math.min(Math.max(pos, 0), max)
|
||||||
|
handler.style.top = clampPos + "px";
|
||||||
|
|
||||||
|
|
||||||
|
// let yPos = Number(handler.style.top.replace('px', 0))
|
||||||
|
// console.log(event)
|
||||||
|
// console.log(yOffset)
|
||||||
|
// console.log(event.movementY)
|
||||||
|
|
||||||
|
// let pos = event.clientY - handler.clientHeight
|
||||||
|
|
||||||
|
|
||||||
|
// console.log(pos)
|
||||||
|
// let pos2 = yPos + event.movementY
|
||||||
|
// console.log(event.clientY - yPosInit)
|
||||||
|
// console.log(event.offsetY)
|
||||||
|
// yPos += event.yOffset
|
||||||
|
// handler.style.top = event.clientY - yPosInit + 'px'
|
||||||
|
// console.log(handler.Y)
|
||||||
|
// let pos = yPosInit - event.clientY
|
||||||
|
// let newPos = Math.min(Math.max(pos, 0), max)
|
||||||
|
// console.log(handler.style.top , event.offsetY)
|
||||||
|
// handler.style.top = event.clientY+ "px";
|
||||||
|
}
|
||||||
|
|
||||||
|
function stop() {
|
||||||
|
console.log("stop")
|
||||||
|
document.removeEventListener('mousemove', drag);
|
||||||
|
document.removeEventListener('mouseup', stop)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// /**
|
||||||
|
// * @param {HTMLElement} element
|
||||||
|
// */
|
||||||
|
// BindHandler(element) {
|
||||||
|
// element.addEventListener('mousedown', (event) => {
|
||||||
|
// this.isDragged =
|
||||||
|
// element.addEventListener('mouseup', this.stop);
|
||||||
|
// });
|
||||||
|
// element.removeEventListener
|
||||||
|
// }
|
||||||
|
|
||||||
|
// drag(){
|
||||||
|
|
||||||
|
// }
|
||||||
|
// stop(doc){
|
||||||
|
// console.log("stop")
|
||||||
|
// doc.removeEventListener('mouseup', (event) => {
|
||||||
|
// this.stop(document)
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// MoveHandler(param) {
|
||||||
|
// console.log("Move")
|
||||||
|
// }
|
||||||
|
}
|
||||||
@ -12,6 +12,7 @@ class WebDesktopEnvironment{
|
|||||||
.then((html) => {
|
.then((html) => {
|
||||||
WebDesktopEnvironment.SetBasicWindow(html)
|
WebDesktopEnvironment.SetBasicWindow(html)
|
||||||
let app = this.loadApp("personal-properties")
|
let app = this.loadApp("personal-properties")
|
||||||
|
// let finder = this.loadApp("finder")
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
WebDesktopEnvironment.Alert(error);
|
WebDesktopEnvironment.Alert(error);
|
||||||
@ -30,7 +31,7 @@ class WebDesktopEnvironment{
|
|||||||
|
|
||||||
|
|
||||||
let script = document.createElement("script")
|
let script = document.createElement("script")
|
||||||
script.setAttribute("src", "http://localhost:8080/system/applications/personal-properties/app.js")
|
script.setAttribute("src", `http://localhost:8080/system/applications/${appId}/app.js`)
|
||||||
script.setAttribute("async", "false")
|
script.setAttribute("async", "false")
|
||||||
appElem.appendChild(script)
|
appElem.appendChild(script)
|
||||||
script.addEventListener("load", function () {
|
script.addEventListener("load", function () {
|
||||||
@ -71,14 +72,12 @@ class WebDesktopEnvironment{
|
|||||||
|
|
||||||
static basicWindow
|
static basicWindow
|
||||||
/**
|
/**
|
||||||
*
|
|
||||||
* @param {string} html
|
* @param {string} html
|
||||||
*/
|
*/
|
||||||
static SetBasicWindow(html){
|
static SetBasicWindow(html){
|
||||||
this.basicWindow = html
|
this.basicWindow = html
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
*
|
|
||||||
* @returns {string}
|
* @returns {string}
|
||||||
*/
|
*/
|
||||||
static GetBasicWindow(){
|
static GetBasicWindow(){
|
||||||
@ -127,7 +126,6 @@ class WindowsCompositor{
|
|||||||
} else {
|
} else {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,25 @@
|
|||||||
.StandartApplicationWindow{
|
.StandartApplicationWindow{
|
||||||
width: 100%;
|
/* Auto layout */
|
||||||
min-height: 200px;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 4px;
|
||||||
|
padding-right: 6px;
|
||||||
|
gap: 4px;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
background: #CCCCCC;
|
||||||
|
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;
|
||||||
|
|
||||||
|
/* Inside auto layout */
|
||||||
|
flex: none;
|
||||||
|
order: 1;
|
||||||
|
align-self: stretch;
|
||||||
|
flex-grow: 1;
|
||||||
|
/* width: 100%;
|
||||||
|
|
||||||
|
|
||||||
background-color: #CCCCCC;
|
background-color: #CCCCCC;
|
||||||
|
|
||||||
@ -13,10 +32,32 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
/* padding-bottom: 50px; */
|
|
||||||
gap:4px;
|
gap:4px;
|
||||||
|
|
||||||
|
overflow: hidden; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.ContentBorder {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #DDDDDD;
|
||||||
|
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;
|
||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
/* Auto layout */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WindowFrameTopBarButton{
|
.WindowFrameTopBarButton{
|
||||||
@ -47,6 +88,12 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
|
|
||||||
|
/* Inside auto layout */
|
||||||
|
flex: none;
|
||||||
|
order: 0;
|
||||||
|
align-self: stretch;
|
||||||
|
flex-grow: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.WindowFrameTopBar .WindowFrameTitle{
|
.WindowFrameTopBar .WindowFrameTitle{
|
||||||
@ -77,3 +124,90 @@
|
|||||||
background-size: 2px 2px;
|
background-size: 2px 2px;
|
||||||
filter: drop-shadow(1px 1px 0px #777777);
|
filter: drop-shadow(1px 1px 0px #777777);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.scroller {
|
||||||
|
overflow-y: scroll;
|
||||||
|
scrollbar-color: #0A4C95 #C2D2E4;
|
||||||
|
border-radius: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll_content {
|
||||||
|
position: relative;
|
||||||
|
width: 400px;
|
||||||
|
height: 414px;
|
||||||
|
top: -17px;
|
||||||
|
padding: 20px 10px 20px 10px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ScrollbarPlace{
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
border-left: 1px solid #000000;
|
||||||
|
width: 14px;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
bottom: 0px;
|
||||||
|
right: 0px;
|
||||||
|
width: 14px;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
background-color: #AAAAAA;
|
||||||
|
box-shadow: inset -1px 0px 0px rgba(255, 255, 255, 0.29), inset -2px 0px 0px rgba(255, 255, 255, 0.19), inset 1px 1px 0px rgba(0, 0, 0, 0.14), inset 2px 2px 0px rgba(0, 0, 0, 0.19);
|
||||||
|
|
||||||
|
/* Inside auto layout */
|
||||||
|
flex: none;
|
||||||
|
order: 0;
|
||||||
|
align-self: stretch;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.ScrollBarScrollElement{
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
width: 14px;
|
||||||
|
height: 31px;
|
||||||
|
background: #9999FF;
|
||||||
|
|
||||||
|
box-shadow: 0px -1px 0px #000000, 0px 1px 0px #000000, 0px 2px 0px rgba(0, 0, 0, 0.13), 0px 3px 0px rgba(0, 0, 0, 0.19), inset 0px 1px 0px rgba(255, 255, 255, 0.5), inset 1px 0px 0px rgba(255, 255, 255, 0.5), inset -1px -1px 0px rgba(102, 102, 204, 0.91);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
gap: 5px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ScrollBarScrollElementDrag{
|
||||||
|
pointer-events: none;
|
||||||
|
/* background-color: #0A4C95; */
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
margin-left: -1px;
|
||||||
|
|
||||||
|
background: linear-gradient(transparent 0%,#CCCCFF 0%, #CCCCFF 50%, transparent 50%);
|
||||||
|
background-size: 2px 2px;
|
||||||
|
|
||||||
|
/* TODO white pixels in rows start */
|
||||||
|
filter: drop-shadow(1px 1px 0px #333399);
|
||||||
|
}
|
||||||
@ -4,6 +4,9 @@
|
|||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" type="text/css" href="res/base.css">
|
<link rel="stylesheet" type="text/css" href="res/base.css">
|
||||||
<link rel="stylesheet" type="text/css" href="res/wdeUI.css">
|
<link rel="stylesheet" type="text/css" href="res/wdeUI.css">
|
||||||
|
<link rel="stylesheet" href="/res/sys/wde/simple-scrollbar.css">
|
||||||
|
<link rel="stylesheet" href="/res/sys/personal-properties/personal-properies.css">
|
||||||
|
<script src="/res/sys/wde/wde-scrollbar.js"></script>
|
||||||
<script src="res/wde.js"></script>
|
<script src="res/wde.js"></script>
|
||||||
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->
|
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->
|
||||||
<!-- <script src="res/decorat.js"></script> -->
|
<!-- <script src="res/decorat.js"></script> -->
|
||||||
|
|||||||
5
templates/finder/app.tmpl
Normal file
5
templates/finder/app.tmpl
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
{{ define "finder/app.tmpl" }}
|
||||||
|
Test Finder
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
@ -7,16 +7,66 @@
|
|||||||
About me
|
About me
|
||||||
</div>
|
</div>
|
||||||
<div id="Drag" class="WindowDragArea"></div>
|
<div id="Drag" class="WindowDragArea"></div>
|
||||||
<!-- <button class="WindowFrameTopBarButton" ></button> -->
|
|
||||||
</div>
|
</div>
|
||||||
<div class="VisualFrame">
|
<!-- <div class="ContentBorder"></div> -->
|
||||||
<div id="ContentFrame" class="ContentFrame">
|
<div class="ContentBorder">
|
||||||
|
<div class="ScrollContent">
|
||||||
|
<div class="PropertiesList">
|
||||||
<div class="Personal-properties-bio">
|
<div class="Personal-properties-bio">
|
||||||
<img src="res/img/default-avatar-photo-placeholder-profile-picture-vector.jpg" alt="My Photo" style="width: 48px;height: 48px;">
|
<img src="res/img/default-avatar-photo-placeholder-profile-picture-vector.jpg" alt="My Photo" style="width: 48px;height: 48px;">
|
||||||
<div class="Personal-properties-textbio">
|
<div class="Personal-properties-textbio">
|
||||||
<div>{{ .Name }}</div>
|
<div>{{ .Name }}</div>
|
||||||
<div>{{ .BasicBio }}</div>
|
<div>{{ .BasicBio }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
{{ range $propIsland := .allprops }}
|
||||||
|
<div id="prop" class="Personal-properties-prop">
|
||||||
|
<div class="Personal-properties-prop-title">
|
||||||
|
{{$propIsland.Header}}:
|
||||||
|
</div>
|
||||||
|
<div class="Personal-properties-prop-content">
|
||||||
|
{{range $prop := $propIsland.Props}}
|
||||||
|
<div class="Personal-properties-prop-row">
|
||||||
|
<div class="Personal-properties-prop-key">
|
||||||
|
{{$prop.Key}}:
|
||||||
|
{{ range $value := $prop.KeyComments }}
|
||||||
|
<div class="Personal-properties-prop-key-comments">
|
||||||
|
{{ $value }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
<div class="Personal-properties-prop-values">
|
||||||
|
{{ range $value := $prop.Values }}
|
||||||
|
<div class="Personal-properties-prop-value">
|
||||||
|
{{ $value }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ScrollbarPlace">
|
||||||
|
<div class="ScrollBarScrollElement">
|
||||||
|
<div class="ScrollBarScrollElementDrag">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div class="TestContent" style="width: 100%; height: auto; background-color: aquamarine;">AAAAAAAAAAAAAA</div>
|
||||||
|
<div id="ContentFrame " class="ContentFrame">
|
||||||
|
<div class="Personal-properties-bio">
|
||||||
|
<img src="res/img/default-avatar-photo-placeholder-profile-picture-vector.jpg" alt="My Photo" style="width: 48px;height: 48px;">
|
||||||
|
<div class="Personal-properties-textbio">
|
||||||
|
<div>{{ .Name }}</div>
|
||||||
|
<div>{{ .BasicBio }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="Test content" style="width: 100%; height: 1000px; background-color: aqua;">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
{{ range $propIsland := .allprops }}
|
{{ range $propIsland := .allprops }}
|
||||||
<div id="prop" class="Personal-properties-prop">
|
<div id="prop" class="Personal-properties-prop">
|
||||||
@ -49,7 +99,12 @@
|
|||||||
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="ScrollbarPlace">
|
||||||
|
<div class="ScrollBarScrollElement">
|
||||||
|
<div class="ScrollBarScrollElementDrag">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
<!-- </div> -->
|
<!-- </div> -->
|
||||||
|
|
||||||
|
|||||||
22
websiteapp/finder/finder.go
Normal file
22
websiteapp/finder/finder.go
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
package finder
|
||||||
|
|
||||||
|
import (
|
||||||
|
"personalwebsite/websiteapp"
|
||||||
|
|
||||||
|
"github.com/gin-gonic/gin"
|
||||||
|
)
|
||||||
|
|
||||||
|
type FinerApplication struct {
|
||||||
|
manifest websiteapp.ApplicationManifest
|
||||||
|
}
|
||||||
|
|
||||||
|
func (f *FinerApplication) GetManifest() websiteapp.ApplicationManifest {
|
||||||
|
return f.manifest
|
||||||
|
}
|
||||||
|
func (f *FinerApplication) GetId() string {
|
||||||
|
return f.manifest.AppId
|
||||||
|
}
|
||||||
|
|
||||||
|
func (f *FinerApplication) Render() gin.H {
|
||||||
|
return gin.H{}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user