Merge branch 'templates-integration'
This commit is contained in:
commit
56d2804626
|
|
@ -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})
|
||||
// })
|
||||
}
|
||||
48
main.go
48
main.go
|
|
@ -3,33 +3,51 @@ package main
|
|||
import (
|
||||
"log"
|
||||
"net/http"
|
||||
personalpropsroute "personalwebsite/approutes/personalPropsRoute"
|
||||
"personalwebsite/routewde"
|
||||
"personalwebsite/websiteapp"
|
||||
"personalwebsite/websiteapp/finder"
|
||||
"personalwebsite/websiteapp/personalprops"
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
)
|
||||
|
||||
// func main() {
|
||||
// router := gin.Default()
|
||||
// router.LoadHTMLGlob("templates/**/*")
|
||||
// router.GET("/posts/index", func(c *gin.Context) {
|
||||
// c.HTML(http.StatusOK, "posts/index.tmpl", gin.H{
|
||||
// "title": "Posts",
|
||||
// })
|
||||
// })
|
||||
// router.GET("/users/index", func(c *gin.Context) {
|
||||
// c.HTML(http.StatusOK, "users/index.tmpl", gin.H{
|
||||
// "title": "Users",
|
||||
// })
|
||||
// })
|
||||
// router.Run(":8080")
|
||||
// }
|
||||
|
||||
func main() {
|
||||
// hostUrl := "http://192.168.88.10:8080/"
|
||||
// hostUrl := "http://localhost:8080/"
|
||||
router := gin.New()
|
||||
// router.Use(rateLimit, gin.Recovery())
|
||||
router.LoadHTMLGlob("resources/*.html")
|
||||
|
||||
// router.Static("/static", "resources/static")
|
||||
router.LoadHTMLGlob("templates/**/*")
|
||||
router.Static("/res", "resources")
|
||||
router.GET("/", index)
|
||||
router.GET("/getmockapp", func(ctx *gin.Context) {
|
||||
|
||||
router.GET("/", func(ctx *gin.Context) {
|
||||
ctx.HTML(http.StatusOK, "index.tmpl", gin.H{})
|
||||
})
|
||||
|
||||
persPropsApp := personalprops.NewPersPropsApp()
|
||||
finderApp := finder.FinerApplication{}
|
||||
appsStorage := websiteapp.ApplicationsStorage{
|
||||
Apps: map[string]websiteapp.WebDEApplication{},
|
||||
}
|
||||
appsStorage.Apps["personal-properties"] = &persPropsApp
|
||||
appsStorage.Apps["finder"] = &finderApp
|
||||
system := router.Group("system")
|
||||
{
|
||||
|
||||
wde := system.Group("wde")
|
||||
{
|
||||
routewde.Route(wde)
|
||||
|
|
@ -48,12 +66,10 @@ func main() {
|
|||
switch method {
|
||||
case "getmanifest":
|
||||
ctx.JSON(http.StatusOK, app.GetManifest())
|
||||
case "gethtml":
|
||||
ctx.HTML(http.StatusOK, appId+".html", nil)
|
||||
case "app.js":
|
||||
ctx.File("resources/applications/" + appId + "/" + appId + ".js")
|
||||
ctx.File("resources/sys/" + appId + "/" + appId + ".js")
|
||||
case "app.css":
|
||||
ctx.File("resources/applications/" + appId + "/" + appId + ".css")
|
||||
ctx.File("resources/sys/" + appId + "/" + appId + ".css")
|
||||
default:
|
||||
ctx.Status(http.StatusBadRequest)
|
||||
}
|
||||
|
|
@ -61,7 +77,7 @@ func main() {
|
|||
}
|
||||
|
||||
websiteapp.Route(apps.Group("/storage"), &appsStorage)
|
||||
personalpropsroute.Route(apps.Group("/personalproperties"))
|
||||
// personalpropsroute.Route(apps.Group("/personalproperties"))
|
||||
}
|
||||
|
||||
app := router.Group("application")
|
||||
|
|
@ -71,13 +87,15 @@ func main() {
|
|||
})
|
||||
persPropApp := app.Group("personal-properties")
|
||||
{
|
||||
|
||||
persPropApp.GET("getcontent", func(ctx *gin.Context) {
|
||||
ctx.HTML(http.StatusOK, "personal-properties.html", persPropsApp.Render())
|
||||
persPropApp.GET("render", func(ctx *gin.Context) {
|
||||
ctx.HTML(http.StatusOK, "personal-properties/app.tmpl", persPropsApp.Render())
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
router.GET("/test", func(ctx *gin.Context) {
|
||||
ctx.HTML(200, "kek/kek.tmpl", gin.H{})
|
||||
})
|
||||
// router.GET("/room/:roomid", roomGET)
|
||||
// router.POST("/room-post/:roomid", roomPOST)
|
||||
// router.GET("/stream/:roomid", streamRoom)
|
||||
|
|
|
|||
|
|
@ -1,10 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Website</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<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>
|
||||
<body>
|
||||
<div id="container">
|
||||
<p>↓Scrollable!↓</p>
|
||||
<p>↓Scrollable!↓</p>
|
||||
<p>↓Scrollable!↓</p>
|
||||
<p>↓Scrollable!↓</p>
|
||||
<p>↓Scrollable!↓</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.Pizda{
|
||||
background-color: red;
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
|
||||
|
||||
class PersonalProperties{
|
||||
/**
|
||||
* @param {HTMLElement} appElem
|
||||
*/
|
||||
constructor(appElem){
|
||||
this.appElem = appElem
|
||||
|
||||
}
|
||||
|
||||
Init(){
|
||||
this.appElem.innerHTML = WebDesktopEnvironment.GetBasicWindow()
|
||||
|
||||
let contentFrame = this.appElem.children[0].children[0].children[1]
|
||||
fetch("http://192.168.88.10:8080/application/personal-properties/getcontent") //TODO Move to wde func
|
||||
.then((response) => response.text())
|
||||
.then((html) => {
|
||||
contentFrame.innerHTML = html
|
||||
})
|
||||
.catch((error) => {
|
||||
WebDesktopEnvironment.Alert(error);
|
||||
});
|
||||
|
||||
// var link = document.createElement( "link" );
|
||||
// link.href = "http://192.168.88.10:8080/system/applications/personal-properties/app.css"
|
||||
// link.type = "text/css";
|
||||
// link.rel = "stylesheet";
|
||||
// link.media = "screen,print";
|
||||
// document.getElementsByTagName( "head" )[0].appendChild(link);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
document.onload = function (params) {
|
||||
console.log("pizda")
|
||||
}
|
||||
|
|
@ -1,15 +1,31 @@
|
|||
@font-face{
|
||||
font-family: "Ubuntu-LI";
|
||||
src:url("./GnuUnifontFull-Pm9P.ttf")
|
||||
font-family: "Virtue";
|
||||
src:url("./virtue.ttf");
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: "Virtue";
|
||||
src:url("./virtue.ttf")
|
||||
}
|
||||
|
||||
|
||||
*{
|
||||
font-family:"Ubuntu-LI";
|
||||
font-family: Verdana, Geneva, sans-serif;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
font-weight:initial;
|
||||
}
|
||||
|
||||
body{
|
||||
margin: 0px;
|
||||
/* 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 {
|
||||
|
|
@ -22,17 +38,7 @@ body{
|
|||
#WindowsLayer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
.Application{
|
||||
position: absolute;
|
||||
/* background-color: antiquewhite; */
|
||||
stroke: #000000;
|
||||
stroke-width: 1px;
|
||||
stroke-linecap: butt;
|
||||
stroke-dasharray: 0;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.Frame{
|
||||
|
|
@ -66,38 +72,72 @@ body{
|
|||
|
||||
|
||||
.WindowFrameTitle{
|
||||
pointer-events: none;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.WindowDragArea{
|
||||
/* background-color: antiquewhite; */
|
||||
.VisualFrame{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* background: repeating-linear-gradient(
|
||||
to bottom,
|
||||
rgb(255, 255, 255) 0px,
|
||||
rgb(255, 255, 255) 1px,
|
||||
#ffffff00 2px,
|
||||
#ffffff00 3px
|
||||
); */
|
||||
/* box-shadow: 1px 1px ; */
|
||||
position: relative;
|
||||
/* overflow: scroll; */
|
||||
/* overflow-x: hidden; */
|
||||
|
||||
|
||||
/* Inside auto layout */
|
||||
|
||||
flex: none;
|
||||
order: 1;
|
||||
align-self: stretch;
|
||||
flex-grow: 1;
|
||||
|
||||
background: #DDDDDD;
|
||||
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;
|
||||
|
||||
/* Auto layout */
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
align-items: flex-start;
|
||||
gap: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.ContentFrame{
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
/* background-color: aquamarine; */
|
||||
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
gap:10px;
|
||||
padding-bottom: 0px;
|
||||
gap:16px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.Old {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
gap:16px;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: auto;
|
||||
|
||||
background: #DDDDDD;
|
||||
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;
|
||||
|
||||
|
||||
|
||||
/* Inside auto layout */
|
||||
|
|
@ -105,100 +145,6 @@ body{
|
|||
order: 0;
|
||||
align-self: stretch;
|
||||
flex-grow: 1;
|
||||
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.Personal-properties-bio{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0px;
|
||||
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;
|
||||
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0px;
|
||||
gap:1px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.Personal-properties-prop-header{
|
||||
/* width: 50px; */
|
||||
position:relative;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
background-color: #DDDDDD;
|
||||
left: 12px;
|
||||
top: -10px;
|
||||
margin-left: 2px;
|
||||
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
gap:10px;
|
||||
|
||||
/* padding: 10px; */
|
||||
/* border: 1px solid #888888; */
|
||||
/* box-shadow: 1px 1px 0px #FFFFFF, inset 2px 2px 0px #FFFFFF; */
|
||||
}
|
||||
|
||||
.Personal-properties-prop-content{
|
||||
width: 100%;
|
||||
/* top: 0px; */
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0px;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.Personal-properties-prop-row{
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding: 0px;
|
||||
gap: 1px;
|
||||
}
|
||||
.Personal-properties-prop-key{
|
||||
text-align: end;
|
||||
width: 45%;
|
||||
white-space: nowrap
|
||||
/* font-weight: bold; */
|
||||
}
|
||||
.Personal-properties-prop-prop{
|
||||
width: 55%;
|
||||
|
||||
}
|
||||
|
|
@ -8,11 +8,20 @@
|
|||
|
||||
{{ 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-prop">{{ .Prop }}</div>
|
||||
<div class="Personal-properties-prop-values">
|
||||
{{ range $value := .Values }}
|
||||
<div class="Personal-properties-prop-value">
|
||||
{{ $value }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
|
|
|||
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%; */
|
||||
|
||||
}
|
||||
55
resources/sys/personal-properties/personal-properties.js
Normal file
55
resources/sys/personal-properties/personal-properties.js
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
// const simpleScrollbar = require("../wde/simple-scrollbar");
|
||||
|
||||
|
||||
class PersonalProperties{
|
||||
appId = "personal-properties"
|
||||
/**
|
||||
* @param {HTMLElement} appElem
|
||||
*/
|
||||
constructor(appElem){
|
||||
this.appElem = appElem
|
||||
}
|
||||
|
||||
Init(){
|
||||
console.log("Init")
|
||||
fetch("http://localhost:8080/application/personal-properties/render") //TODO Move to wde func
|
||||
.then((response) => response.text())
|
||||
.then((html) => {
|
||||
//TODO Get ~70% of user screen height
|
||||
let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, "Personal Properties", 300, 500)
|
||||
|
||||
newWindow.innerHTML = html
|
||||
|
||||
let closeButton = newWindow.children[0].children[0]
|
||||
let scrollDiv = newWindow.children[1]
|
||||
// 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) {
|
||||
WebDesktopEnvironment.CloseWindow(newWindow)
|
||||
})
|
||||
})
|
||||
.catch((error) => {
|
||||
WebDesktopEnvironment.Alert(error);
|
||||
});
|
||||
}
|
||||
|
||||
CloseWindow(id){
|
||||
console.log(id+"Close")
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function reply_click(){
|
||||
console.log("QQQQQQQQQQQQQQQQQQQ")
|
||||
}
|
||||
56
resources/sys/wde/simple-scrollbar.css
Normal file
56
resources/sys/wde/simple-scrollbar.css
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
.ss-wrapper {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ss-content {
|
||||
height: 100%;
|
||||
width: calc(100% + 18px);
|
||||
padding: 0 0 0 0;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ss-content.rtl {
|
||||
width: calc(100% + 18px);
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.ss-scroll {
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
width: 14px;
|
||||
height: 31px;
|
||||
/* border-radius: 4px; */
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
/* opacity: 0; */
|
||||
/* transition: opacity 0.25s linear; */
|
||||
background: #9999FF;
|
||||
box-shadow: 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);
|
||||
}
|
||||
|
||||
.ss-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ss-container:hover .ss-scroll,
|
||||
.ss-container:active .ss-scroll {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ss-grabbed {
|
||||
-o-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
165
resources/sys/wde/simple-scrollbar.js
Normal file
165
resources/sys/wde/simple-scrollbar.js
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
;(function(root, factory) {
|
||||
if (typeof exports === 'object') {
|
||||
module.exports = factory(window, document)
|
||||
} else {
|
||||
root.SimpleScrollbar = factory(window, document)
|
||||
}
|
||||
})(this, function(w, d) {
|
||||
var raf = w.requestAnimationFrame || w.setImmediate || function(c) { return setTimeout(c, 0); };
|
||||
|
||||
function initEl(el) {
|
||||
Object.defineProperty(el, 'data-simple-scrollbar', { value: new SimpleScrollbar(el), configurable: true });
|
||||
}
|
||||
|
||||
function unbindEl(el) {
|
||||
if (!Object.prototype.hasOwnProperty.call(el, 'data-simple-scrollbar')) return;
|
||||
el['data-simple-scrollbar'].unBind();
|
||||
//Remove the elements property
|
||||
delete el['data-simple-scrollbar'];
|
||||
}
|
||||
|
||||
// Mouse drag handler
|
||||
function dragDealer(el, context) {
|
||||
var lastPageY;
|
||||
|
||||
el.addEventListener('mousedown', function(e) {
|
||||
lastPageY = e.pageY;
|
||||
el.classList.add('ss-grabbed');
|
||||
d.body.classList.add('ss-grabbed');
|
||||
|
||||
d.addEventListener('mousemove', drag);
|
||||
d.addEventListener('mouseup', stop);
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
function drag(e) {
|
||||
var delta = e.pageY - lastPageY;
|
||||
lastPageY = e.pageY;
|
||||
|
||||
raf(function() {
|
||||
context.el.scrollTop += delta / context.scrollRatio;
|
||||
});
|
||||
}
|
||||
|
||||
function stop() {
|
||||
el.classList.remove('ss-grabbed');
|
||||
d.body.classList.remove('ss-grabbed');
|
||||
d.removeEventListener('mousemove', drag);
|
||||
d.removeEventListener('mouseup', stop);
|
||||
}
|
||||
}
|
||||
|
||||
// Constructor
|
||||
function ss(el) {
|
||||
this.target = el;
|
||||
this.content = el.firstElementChild;
|
||||
|
||||
this.direction = w.getComputedStyle(this.target).direction;
|
||||
|
||||
this.bar = '<div class="ss-scroll">';
|
||||
//Create a reference to the function binding to remove the event listeners
|
||||
this.mB = this.moveBar.bind(this);
|
||||
|
||||
this.wrapper = d.createElement('div');
|
||||
this.wrapper.setAttribute('class', 'ss-wrapper');
|
||||
|
||||
this.el = d.createElement('div');
|
||||
this.el.setAttribute('class', 'ss-content');
|
||||
|
||||
if (this.direction === 'rtl') {
|
||||
this.el.classList.add('rtl');
|
||||
}
|
||||
|
||||
this.wrapper.appendChild(this.el);
|
||||
|
||||
while (this.target.firstChild) {
|
||||
this.el.appendChild(this.target.firstChild);
|
||||
}
|
||||
this.target.appendChild(this.wrapper);
|
||||
|
||||
this.target.insertAdjacentHTML('beforeend', this.bar);
|
||||
this.bar = this.target.lastChild;
|
||||
|
||||
dragDealer(this.bar, this);
|
||||
this.moveBar();
|
||||
|
||||
w.addEventListener('resize', this.mB);
|
||||
this.el.addEventListener('scroll', this.mB);
|
||||
this.el.addEventListener('mouseenter', this.mB);
|
||||
|
||||
this.target.classList.add('ss-container');
|
||||
|
||||
var css = w.getComputedStyle(el);
|
||||
if (css['height'] === '0px' && css['max-height'] !== '0px') {
|
||||
el.style.height = css['max-height'];
|
||||
}
|
||||
|
||||
this.unBind = function() {
|
||||
//Remove event listeners
|
||||
w.removeEventListener('resize', this.mB);
|
||||
this.el.removeEventListener('scroll', this.mB);
|
||||
this.el.removeEventListener('mouseenter', this.mB);
|
||||
|
||||
this.target.classList.remove('ss-container');
|
||||
|
||||
//Unwrap the initial content and remove remaining wrappers
|
||||
this.target.insertBefore(this.content, this.wrapper);
|
||||
this.target.removeChild(this.wrapper);
|
||||
|
||||
//Remove the bar including its drag-dealer event listener
|
||||
this.target.removeChild(this.bar);
|
||||
this.bar = null; //make way for the garbage collector
|
||||
}
|
||||
}
|
||||
|
||||
ss.prototype = {
|
||||
moveBar: function(e) {
|
||||
var totalHeight = this.el.scrollHeight,
|
||||
ownHeight = this.el.clientHeight,
|
||||
_this = this;
|
||||
|
||||
this.scrollRatio = ownHeight / totalHeight;
|
||||
|
||||
var isRtl = _this.direction === 'rtl';
|
||||
var right = isRtl ?
|
||||
(_this.target.clientWidth - _this.bar.clientWidth + 18) :
|
||||
(_this.target.clientWidth - _this.bar.clientWidth) * -1;
|
||||
|
||||
raf(function() {
|
||||
// Hide scrollbar if no scrolling is possible
|
||||
if(_this.scrollRatio >= 1) {
|
||||
_this.bar.classList.add('ss-hidden')
|
||||
} else {
|
||||
_this.bar.classList.remove('ss-hidden')
|
||||
_this.bar.style.cssText = 'height:' + Math.max(_this.scrollRatio * 100, 10) + '%; top:' + (_this.el.scrollTop / totalHeight ) * 100 + '%;right:' + right + 'px;';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function initAll() {
|
||||
var nodes = d.querySelectorAll('*[ss-container]');
|
||||
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
initEl(nodes[i]);
|
||||
}
|
||||
}
|
||||
|
||||
function unbindAll() {
|
||||
var nodes = d.querySelectorAll('.ss-container');
|
||||
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
unbindEl(nodes[i]);
|
||||
}
|
||||
}
|
||||
|
||||
d.addEventListener('DOMContentLoaded', initAll);
|
||||
ss.initEl = initEl;
|
||||
ss.initAll = initAll;
|
||||
ss.unbindEl = unbindEl;
|
||||
ss.unbindAll = unbindAll;
|
||||
|
||||
var SimpleScrollbar = ss;
|
||||
return SimpleScrollbar;
|
||||
});
|
||||
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")
|
||||
// }
|
||||
}
|
||||
BIN
resources/virtue.ttf
(Stored with Git LFS)
Normal file
BIN
resources/virtue.ttf
(Stored with Git LFS)
Normal file
Binary file not shown.
|
|
@ -1,19 +1,18 @@
|
|||
document.addEventListener('DOMContentLoaded', function() {
|
||||
wde = new WebDesktopEnvironment
|
||||
|
||||
}, false);
|
||||
|
||||
class WebDesktopEnvironment{
|
||||
|
||||
constructor(){
|
||||
this.wc = new WindowsCompositor
|
||||
|
||||
//Get basic window ready frame
|
||||
fetch("http://192.168.88.10:8080/system/wde/getbasicwindow") //TODO Move to wde func
|
||||
fetch("http://localhost:8080/system/wde/getbasicwindow") //TODO Move to wde func
|
||||
.then((response) => response.text())
|
||||
.then((html) => {
|
||||
WebDesktopEnvironment.SetBasicWindow(html)
|
||||
let app = this.loadApp("personal-properties")
|
||||
// let finder = this.loadApp("finder")
|
||||
})
|
||||
.catch((error) => {
|
||||
WebDesktopEnvironment.Alert(error);
|
||||
|
|
@ -27,10 +26,12 @@ class WebDesktopEnvironment{
|
|||
loadApp(appId){
|
||||
let newApp = document.createElement("application")
|
||||
newApp.setAttribute("id", `application-${appId}`)
|
||||
|
||||
let appElem = document.getElementById("WindowsLayer").appendChild(newApp)
|
||||
|
||||
|
||||
let script = document.createElement("script")
|
||||
script.setAttribute("src", "http://192.168.88.10:8080/system/applications/personal-properties/app.js")
|
||||
script.setAttribute("src", `http://localhost:8080/system/applications/${appId}/app.js`)
|
||||
script.setAttribute("async", "false")
|
||||
appElem.appendChild(script)
|
||||
script.addEventListener("load", function () {
|
||||
|
|
@ -39,16 +40,44 @@ class WebDesktopEnvironment{
|
|||
}, false)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} appId
|
||||
* @param {string} windowName
|
||||
* @param {number} width
|
||||
* @param {number} height
|
||||
* @returns {HTMLElement}
|
||||
*/
|
||||
static CreateNewWindow(appId, windowName, width, height) {
|
||||
let appElem = document.getElementById(`application-${appId}`)
|
||||
let newWindow = document.createElement("div")
|
||||
newWindow.setAttribute("class", "StandartApplicationWindow")
|
||||
newWindow.style.position = "absolute"
|
||||
newWindow.style.width = width.toString() + "px"
|
||||
newWindow.style.height = height.toString() + "px"
|
||||
return appElem.appendChild(newWindow)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} window
|
||||
*/
|
||||
static CloseWindow(window) {
|
||||
let app = window.parentElement
|
||||
window.remove()
|
||||
// console.log(app.childElementCount)
|
||||
if (app.childElementCount < 2){
|
||||
console.log(app)
|
||||
app.remove()
|
||||
}
|
||||
}
|
||||
|
||||
static basicWindow
|
||||
/**
|
||||
*
|
||||
* @param {string} html
|
||||
*/
|
||||
static SetBasicWindow(html){
|
||||
this.basicWindow = html
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @returns {string}
|
||||
*/
|
||||
static GetBasicWindow(){
|
||||
|
|
@ -56,6 +85,10 @@ class WebDesktopEnvironment{
|
|||
return this.basicWindow
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {string} alertText
|
||||
*/
|
||||
static Alert(alertText){
|
||||
console.log(alertText)
|
||||
}
|
||||
|
|
@ -93,7 +126,6 @@ class WindowsCompositor{
|
|||
} else {
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -101,9 +133,11 @@ class WindowsCompositor{
|
|||
* @param {MouseEvent} event
|
||||
*/
|
||||
catchClick(event){
|
||||
|
||||
switch (true) {
|
||||
case event.target.className == "TestWindowHeader":
|
||||
this.movingElement = event.target.parentElement.parentElement.parentElement
|
||||
case event.target.className == "WindowFrameTopBar":
|
||||
this.movingElement = event.target.parentElement
|
||||
// console.log(this.movingElement)
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
|
|
@ -115,9 +149,10 @@ class WindowsCompositor{
|
|||
* @param {number} posX
|
||||
* @param {number} posY
|
||||
*/
|
||||
dragElement(element, posX, posY) {
|
||||
element.style.left = posX + "px";
|
||||
element.style.top = posY + "px";
|
||||
dragElement(element, posX, posY) { //TODO
|
||||
console.log()
|
||||
element.style.left = (posX - element.clientWidth*0.5)+ "px";
|
||||
element.style.top = (posY - element.children[0].clientHeight*0.5) + "px";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,24 +1,213 @@
|
|||
.WindowFrameTopBarButton{
|
||||
.StandartApplicationWindow{
|
||||
/* Auto layout */
|
||||
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;
|
||||
|
||||
border: 1px solid #000000;
|
||||
box-shadow: 1px 1px 0px #000,
|
||||
inset -1px -1px 0px rgba(0, 0, 0, 0.27),
|
||||
inset 1px 1px 0px #FFFFFF;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 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-x: hidden;
|
||||
|
||||
/* Auto layout */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.WindowFrameTopBarButton{
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
padding: 0%;
|
||||
|
||||
background: #D9D9D9;
|
||||
background: linear-gradient(135deg, #999999 18.18%, #FFFFFF 81.82%);
|
||||
border: 1px solid #222222;
|
||||
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,
|
||||
inset -1px -1px 0px rgba(0, 0, 0, 0.25);
|
||||
|
||||
inset 1px 1px 0px rgba(255, 255, 255, 0.5),
|
||||
inset -1px -1px 0px rgba(0, 0, 0, 0.27);
|
||||
|
||||
/* Inside auto layout */
|
||||
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.WindowFrameTopBar{
|
||||
width: 100%;
|
||||
height: 13px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 5px;
|
||||
padding: 0px;
|
||||
|
||||
/* Inside auto layout */
|
||||
flex: none;
|
||||
order: 0;
|
||||
align-self: stretch;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.WindowFrameTopBar .WindowFrameTitle{
|
||||
position: relative;
|
||||
top:1px;
|
||||
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
|
||||
font-family: "Virtue";
|
||||
letter-spacing: 0.35px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.WindowFrameTopBarButton:active {
|
||||
background-color: rgba(0, 0, 0, 0.4); /* Green */
|
||||
box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF,
|
||||
-0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
|
||||
.WindowDragArea{
|
||||
pointer-events: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(transparent 0%,white 0%, white 50%, transparent 50%);
|
||||
background-size: 2px 2px;
|
||||
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);
|
||||
}
|
||||
22
templates/base/index.tmpl
Normal file
22
templates/base/index.tmpl
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<title>Greg Brzezinski</title>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="res/base.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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->
|
||||
<!-- <script src="res/decorat.js"></script> -->
|
||||
<!-- TODO Load with app -->
|
||||
<!-- <script src="res/personal-properties.js"></script> -->
|
||||
</head>
|
||||
<body>
|
||||
<div id="WindowsLayer"></div>
|
||||
<!-- <div id="TestWindow" style="width: 100px; height: 100px; background-color: darkkhaki; position: absolute;" >
|
||||
<div id="TestWindowHeader" class="WindowDragArea" style="width: 100%;height: 15px; background-color: cornflowerblue;">
|
||||
</div> -->
|
||||
</body>
|
||||
</html>
|
||||
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 }}
|
||||
|
||||
|
||||
113
templates/personal-properties/app.tmpl
Normal file
113
templates/personal-properties/app.tmpl
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
{{ define "personal-properties/app.tmpl" }}
|
||||
<!-- <div id="WindowBorder" class="PersonalPropertiesFrame"> -->
|
||||
<div id="TestWindowHeader" class="WindowFrameTopBar">
|
||||
<button id="closeWindowButton" class="WindowFrameTopBarButton" title="Close Window"></button>
|
||||
<div id="Drag" class="WindowDragArea"></div>
|
||||
<div class="WindowFrameTitle">
|
||||
About me
|
||||
</div>
|
||||
<div id="Drag" class="WindowDragArea"></div>
|
||||
</div>
|
||||
<!-- <div class="ContentBorder"></div> -->
|
||||
<div class="ContentBorder">
|
||||
<div class="ScrollContent">
|
||||
<div class="PropertiesList">
|
||||
<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>
|
||||
{{ 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>
|
||||
{{ 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 class="ScrollbarPlace">
|
||||
<div class="ScrollBarScrollElement">
|
||||
<div class="ScrollBarScrollElementDrag">
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
|
||||
{{ end }}
|
||||
|
||||
|
||||
7
templates/posts/index.tmpl
Normal file
7
templates/posts/index.tmpl
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{{ define "posts/index.tmpl" }}
|
||||
<html><h1>
|
||||
{{ .title }}
|
||||
</h1>
|
||||
<p>Using posts/index.tmpl</p>
|
||||
</html>
|
||||
{{ end }}
|
||||
7
templates/users/index.tmpl
Normal file
7
templates/users/index.tmpl
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{{ define "users/index.tmpl" }}
|
||||
<html><h1>
|
||||
{{ .title }}
|
||||
</h1>
|
||||
<p>Using users/index.tmpl</p>
|
||||
</html>
|
||||
{{ end }}
|
||||
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{}
|
||||
}
|
||||
|
|
@ -37,57 +37,105 @@ func (p *PersonalPropertiesApp) Render() gin.H {
|
|||
// Title: "Title 2",
|
||||
// Author: "Author 2",
|
||||
// })
|
||||
allProps := make([][]Prop, 0)
|
||||
allProps := make([]PropIsland, 0)
|
||||
|
||||
basicInfo := make([]Prop, 0)
|
||||
|
||||
basicInfo = append(basicInfo, Prop{
|
||||
Key: "",
|
||||
Prop: "Greg Brzezinski",
|
||||
})
|
||||
|
||||
basicInfo = append(basicInfo, Prop{
|
||||
Key: "",
|
||||
Prop: "Saint-Petersburg",
|
||||
})
|
||||
|
||||
// careerkeys := make([]Prop, 0)
|
||||
careerkeys := []Prop{
|
||||
{
|
||||
Key: "VR lab assistant",
|
||||
Prop: "111",
|
||||
// careerProps := make([]Prop, 0)
|
||||
expertiseIsland := PropIsland{
|
||||
Header: "Area Of Expertise",
|
||||
Props: []PropElement{{
|
||||
Key: "Programming",
|
||||
Values: []string{
|
||||
"Creating tools and plugins for artists",
|
||||
"Editor and basic gameplay scripting",
|
||||
},
|
||||
},
|
||||
{
|
||||
Key: "3d artist",
|
||||
Prop: "qweqwe",
|
||||
},
|
||||
{
|
||||
Key: "Jr. Techartist",
|
||||
Prop: "qweqwaaae",
|
||||
{
|
||||
Key: "Game Art",
|
||||
Values: []string{
|
||||
"Professional modeling",
|
||||
"Complete knowledge in CG render theory",
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
// careerkeys = append(careerkeys, Prop{
|
||||
// Key: "VR lab assistant ",
|
||||
// Prop: "ALSK jlkJls kdfgjasdp jk sdf",
|
||||
// })
|
||||
// careerkeys = append(careerkeys, Prop{
|
||||
// Key: "3d artist",
|
||||
// Prop: "qweqwe",
|
||||
// })
|
||||
// careerkeys = append(careerkeys, Prop{})
|
||||
testKeys := []Prop{}
|
||||
testKeys = append(testKeys, Prop{
|
||||
Key: "Urrtt",
|
||||
Prop: "BakaBaka",
|
||||
})
|
||||
|
||||
allProps = append(allProps, careerkeys, testKeys, testKeys, testKeys)
|
||||
eduIsland := PropIsland{
|
||||
Header: "Education",
|
||||
Props: []PropElement{
|
||||
{
|
||||
Key: "Gymnasium 526",
|
||||
KeyComments: []string{"2005-2015"},
|
||||
Values: []string{"Extended natural sciences course", "Additional C++, media production and computer graphics courses", "Winner of conference “The future of a strong Russia is in high technology” in programming section"},
|
||||
},
|
||||
{
|
||||
Key: "Lyceum 281",
|
||||
KeyComments: []string{"2015-2016"},
|
||||
Values: []string{"Extended IT and Physical sciences course"},
|
||||
},
|
||||
{
|
||||
Key: "University",
|
||||
KeyComments: []string{"2017-2019"},
|
||||
Values: []string{"Faculty: Info-communication Networks and Systems", "Specialty: Information Security"},
|
||||
},
|
||||
},
|
||||
}
|
||||
careerProps := PropIsland{
|
||||
Header: "Career",
|
||||
Props: []PropElement{
|
||||
{
|
||||
Key: "VR lab assistant",
|
||||
KeyComments: []string{"Academy of Digital Technologies", "2019-2020"},
|
||||
Values: []string{"Teaching lessons for students in Unreal Engine 4, Unity and Blender editor courses", "Training students for World Skills Russia"},
|
||||
},
|
||||
{
|
||||
Key: "3d artist",
|
||||
KeyComments: []string{"Space Time VR", "2020-2020"},
|
||||
Values: []string{"Creating 3d assets for VR game"},
|
||||
},
|
||||
{
|
||||
Key: "Jr. Techartist",
|
||||
KeyComments: []string{"MP Games"},
|
||||
Values: []string{"Game content integration and production", "Shader coding", "Optimization asset production in artists pipeline"},
|
||||
},
|
||||
{
|
||||
Key: "Techartist",
|
||||
Values: []string{"Game content optimization and production", "Profiling and debugging render pipeline", "Creating in-house tools for pipeline software", "Working process pipeline integration and maintenance", "Linux servers administration"},
|
||||
},
|
||||
},
|
||||
}
|
||||
volunteerProps := PropIsland{
|
||||
Header: "Volunteer Experience",
|
||||
Props: []PropElement{
|
||||
{
|
||||
Key: "Metrostroi Mod",
|
||||
Values: []string{
|
||||
"Help unite fragmented community on one social platform",
|
||||
"Worked on social elements of official site, create ranking",
|
||||
"Took a part on creating ranking system for players",
|
||||
"Creating models and maps for Steam Workshop"},
|
||||
},
|
||||
{
|
||||
Key: "Age of Silence",
|
||||
Values: []string{
|
||||
"Start as tech-artist, create naming system in big ue4 project",
|
||||
"Promoted to chief of 3d Department",
|
||||
"Project win Unreal Day 2019",
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
// testKeys := PropIsland{
|
||||
// Header: "Test",
|
||||
// Props: []PropElement{{
|
||||
// Key: "Urtt",
|
||||
// Values: []string{"BakaBaka"},
|
||||
// }},
|
||||
// }
|
||||
allProps = append(allProps, expertiseIsland, careerProps, eduIsland, volunteerProps)
|
||||
return gin.H{
|
||||
"Name": "Greg Brzezinski",
|
||||
"BasicBio": "Born 27.09.1998 at Saint-Petersburg",
|
||||
"BasicInfo": basicInfo,
|
||||
// "books": books,
|
||||
"career": careerkeys,
|
||||
"Name": "Greg Brzezinski",
|
||||
"BasicBio": "Born 27.09.1998 at Saint-Petersburg",
|
||||
// "BasicInfo": basicInfo,
|
||||
// "career": careerProps,
|
||||
"allprops": allProps,
|
||||
}
|
||||
}
|
||||
|
|
@ -97,9 +145,15 @@ type Book struct {
|
|||
Author string
|
||||
}
|
||||
|
||||
type Prop struct {
|
||||
Key string
|
||||
Prop string
|
||||
type PropElement struct {
|
||||
Key string
|
||||
KeyComments []string
|
||||
Values []string
|
||||
}
|
||||
|
||||
type PropIsland struct {
|
||||
Header string
|
||||
Props []PropElement
|
||||
}
|
||||
|
||||
// func (p *PersonalPropertiesApp) GetContent(ctx *gin.Context) interface{} {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user