diff --git a/main.go b/main.go index eb0cfa1..6eea0fa 100644 --- a/main.go +++ b/main.go @@ -30,15 +30,14 @@ import ( func main() { // hostUrl := "http://localhost:8080/" router := gin.New() - // router.Use(rateLimit, gin.Recovery()) + router.LoadHTMLGlob("templates/**/*") - - // router.Static("/static", "resources/static") 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() appsStorage := websiteapp.ApplicationsStorage{ Apps: map[string]websiteapp.WebDEApplication{}, @@ -46,6 +45,7 @@ func main() { appsStorage.Apps["personal-properties"] = &persPropsApp system := router.Group("system") { + wde := system.Group("wde") { routewde.Route(wde) @@ -64,12 +64,10 @@ func main() { switch method { case "getmanifest": ctx.JSON(http.StatusOK, app.GetManifest()) - case "gethtml": - ctx.HTML(http.StatusOK, "resources/"+appId+"/"+appId+".tmpl", nil) case "app.js": - ctx.File("resources/applications/" + appId + "/" + appId + ".js") + ctx.File("resources/" + appId + "/" + appId + ".js") case "app.css": - ctx.File("resources/applications/" + appId + "/" + appId + ".css") + ctx.File("resources/" + appId + "/" + appId + ".css") default: ctx.Status(http.StatusBadRequest) } @@ -87,8 +85,7 @@ func main() { }) persPropApp := app.Group("personal-properties") { - - persPropApp.GET("getcontent", func(ctx *gin.Context) { + persPropApp.GET("render", func(ctx *gin.Context) { ctx.HTML(http.StatusOK, "personal-properties/app.tmpl", persPropsApp.Render()) }) } diff --git a/resources/base.css b/resources/base.css index ad1de5d..ec8adc4 100644 --- a/resources/base.css +++ b/resources/base.css @@ -1,10 +1,21 @@ @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{ @@ -70,20 +81,7 @@ body{ white-space: nowrap } -.WindowDragArea{ - pointer-events: none; - /* background-color: antiquewhite; */ - 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 ; */ -} + .ContentFrame{ box-sizing: border-box; @@ -112,12 +110,14 @@ body{ .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; } @@ -154,26 +154,17 @@ body{ .Personal-properties-prop-header{ + font-family: "Virtue"; + letter-spacing: 0.35px; /* width: 50px; */ position:relative; display: inline-block; max-width: 100%; background-color: #DDDDDD; /* left: 12px; */ - right: 30%; - top: -12px; + right: 39%; + top: -9px; 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{ @@ -184,7 +175,7 @@ body{ flex-direction: column; justify-content: center; padding: 0px; - gap: 3px; + gap: 12px; } .Personal-properties-prop-row{ @@ -195,12 +186,18 @@ body{ flex-direction: row; justify-content: center; padding: 0px; - gap: 1px; + gap: 5px; } .Personal-properties-prop-key{ + position: relative; + font-family: "Virtue"; + font-size: 11px; + letter-spacing: 0.35px; text-align: end; - width: 45%; - white-space: nowrap + width: 34%; + white-space: nowrap; + top: -1.5px; + /* font-weight: bold; */ } .Personal-properties-prop-values{ diff --git a/resources/personal-properties/personal-properies.css b/resources/personal-properties/personal-properies.css index 8efa55f..e69de29 100644 --- a/resources/personal-properties/personal-properies.css +++ b/resources/personal-properties/personal-properies.css @@ -1,3 +0,0 @@ -.Pizda{ - background-color: red; -} \ No newline at end of file diff --git a/resources/personal-properties/personal-properties.js b/resources/personal-properties/personal-properties.js index dc50706..ae0891a 100644 --- a/resources/personal-properties/personal-properties.js +++ b/resources/personal-properties/personal-properties.js @@ -1,37 +1,47 @@ class PersonalProperties{ + appId = "personal-properties" /** * @param {HTMLElement} appElem */ constructor(appElem){ - this.appElem = appElem - + this.appElem = appElem } Init(){ - this.appElem.innerHTML = WebDesktopEnvironment.GetBasicWindow() - - let contentFrame = this.appElem.children[0].children[0].children[1] - fetch("http://localhost:8080/application/personal-properties/getcontent") //TODO Move to wde func + 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 .then((response) => response.text()) .then((html) => { - contentFrame.innerHTML = html + let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId) + + newWindow.innerHTML = html + + // document.getElementById("closeWindowButton").onclick = function jsFunc() { + // console.log("keeek") + // } + + let closeButton = newWindow.children[0].children[0].children[0].children[0] + // closeButton.onclick = this.CloseWindow("test") + closeButton.addEventListener('click', function (params) { + WebDesktopEnvironment.CloseWindow(newWindow) + }) }) .catch((error) => { WebDesktopEnvironment.Alert(error); }); - - // var link = document.createElement( "link" ); - // link.href = "http://localhost:8080/system/applications/personal-properties/app.css" - // link.type = "text/css"; - // link.rel = "stylesheet"; - // link.media = "screen,print"; - // document.getElementsByTagName( "head" )[0].appendChild(link); - } + + CloseWindow(id){ + console.log(id+"Close") + } + } -document.onload = function (params) { - console.log("pizda") +function reply_click(){ + console.log("QQQQQQQQQQQQQQQQQQQ") } \ No newline at end of file diff --git a/resources/virtue.ttf b/resources/virtue.ttf new file mode 100644 index 0000000..c0ff54b --- /dev/null +++ b/resources/virtue.ttf @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:700761df65c2aa539cd5991e53e6c5349e53d5d4f7b7473a7a4f6d9e408aec92 +size 37204 diff --git a/resources/wde.js b/resources/wde.js index 8fe89d6..926280f 100644 --- a/resources/wde.js +++ b/resources/wde.js @@ -25,10 +25,7 @@ class WebDesktopEnvironment{ loadApp(appId){ let newApp = document.createElement("application") newApp.setAttribute("id", `application-${appId}`) - newApp.style.display = "inline" //TODO Make multi-window support - newApp.style.position = "absolute" - newApp.style.width = "350px" - newApp.styleheight = "350px" + let appElem = document.getElementById("WindowsLayer").appendChild(newApp) @@ -42,6 +39,35 @@ class WebDesktopEnvironment{ }, false) } + /** + * @param {string} appId + * @param {string} windowName + * @returns {HTMLElement} + */ + static CreateNewWindow(appId, windowName) { + let appElem = document.getElementById(`application-${appId}`) + + let newWindow = document.createElement("window") + newWindow.style.display = "inline" //TODO Make multi-window support + newWindow.style.position = "absolute" + newWindow.style.width = "350px" + newWindow.styleheight = "350px" + 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 /** * @@ -59,6 +85,10 @@ class WebDesktopEnvironment{ return this.basicWindow } + /** + * + * @param {string} alertText + */ static Alert(alertText){ console.log(alertText) } @@ -108,6 +138,7 @@ class WindowsCompositor{ switch (true) { case event.target.className == "WindowFrameTopBar": this.movingElement = event.target.parentElement.parentElement.parentElement + console.log(this.movingElement) break; default: break; diff --git a/resources/wdeUI.css b/resources/wdeUI.css index 2e999ef..81732a1 100644 --- a/resources/wdeUI.css +++ b/resources/wdeUI.css @@ -16,8 +16,47 @@ flex-grow: 0; } +.WindowFrameTopBar{ + + /* background-color: aqua; */ + width: 100%; + height: 13px; + + + + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 5px; + padding: 0px; +} + +.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); } \ No newline at end of file diff --git a/templates/base/index.tmpl b/templates/base/index.tmpl new file mode 100644 index 0000000..e67ee1d --- /dev/null +++ b/templates/base/index.tmpl @@ -0,0 +1,18 @@ + + +
+ + + + + + + + + + + + + diff --git a/templates/personal-properties/app.tmpl b/templates/personal-properties/app.tmpl index fc029ef..75b59cc 100644 --- a/templates/personal-properties/app.tmpl +++ b/templates/personal-properties/app.tmpl @@ -1,7 +1,50 @@ {{ define "personal-properties/app.tmpl" }} -Using posts/index.tmpl
- -{{ end }} \ No newline at end of file +