From 04552cc3a9e663b64260e80a99f3af8ea2f6c85c Mon Sep 17 00:00:00 2001 From: cyber-dream Date: Sat, 18 Mar 2023 03:34:56 +0300 Subject: [PATCH] personal-properties template --- main.go | 19 +-- resources/base.css | 65 ++++---- .../personal-properies.css | 3 - .../personal-properties.js | 44 +++-- resources/virtue.ttf | 3 + resources/wde.js | 39 ++++- resources/wdeUI.css | 39 +++++ templates/base/index.tmpl | 18 ++ templates/personal-properties/app.tmpl | 55 ++++++- websiteapp/personalprops/personalprops.go | 155 ++++++++++++------ 10 files changed, 315 insertions(+), 125 deletions(-) create mode 100644 resources/virtue.ttf create mode 100644 templates/base/index.tmpl 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" }} -

- {{ .title }} -

-

Using posts/index.tmpl

- -{{ end }} \ No newline at end of file +
+
+
+ +
+
+ Test Title +
+
+ +
+
+
+ +
+
{{ .Name }}
+
{{ .BasicBio }}
+
+
+ {{ range $propIsland := .allprops }} +
+
+ {{$propIsland.Header}}: +
+
+ {{range $prop := $propIsland.Props}} +
+
{{$prop.Key}}:
+
+ {{ range $value := $prop.Values }} +
+ {{ $value }} +
+ {{ end }} +
+
+ {{ end }} +
+
+ + + {{ end }} +
+
+
+ +{{ end }} + + \ No newline at end of file diff --git a/websiteapp/personalprops/personalprops.go b/websiteapp/personalprops/personalprops.go index 5e48121..80e26fb 100644 --- a/websiteapp/personalprops/personalprops.go +++ b/websiteapp/personalprops/personalprops.go @@ -37,61 +37,111 @@ func (p *PersonalPropertiesApp) Render() gin.H { // Title: "Title 2", // Author: "Author 2", // }) - allProps := make([][]PropElement, 0) + allProps := make([]PropIsland, 0) - basicInfo := make([]PropElement, 0) - - basicInfo = append(basicInfo, PropElement{ - Key: "", - Values: []string{"Greg Brzezinski"}, - }) - - basicInfo = append(basicInfo, PropElement{ - Key: "", - Values: []string{"Saint-Petersburg"}, - }) - - // careerkeys := make([]Prop, 0) - careerkeys := []PropElement{ - { - Key: "VR lab assistant", - Values: []string{"February 2019 - March 2020", "Teaching lessons for students in Unreal Engine 4, Unity and Blender editor courses", "Training students for World Skills Russia"}, + // 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", - Values: []string{"March 2020 - June 2020", "Creating 3d assets for VR game"}, - }, - { - Key: "Jr. Techartist", - 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"}, + { + 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 := []PropElement{} - testKeys = append(testKeys, PropElement{ - Key: "Urrtt", - Values: []string{"BakaBaka"}, - }) - - allProps = append(allProps, careerkeys, testKeys, testKeys, testKeys) + eduIsland := PropIsland{ + Header: "Education", + Props: []PropElement{ + { + Key: "Gymnasium 526", + Values: []string{ + "2005-2015", + "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", + Values: []string{ + "2015-2016", + "Extended IT and Physical sciences course", + }, + }, + { + Key: "University", + Values: []string{ + "2017-2019", + "Faculty: Info-communication Networks and Systems", + "Specialty: Information Security", + }, + }, + }, + } + careerProps := PropIsland{ + Header: "Career", + Props: []PropElement{ + { + Key: "VR lab assistant", + Values: []string{"February 2019 - March 2020", "Teaching lessons for students in Unreal Engine 4, Unity and Blender editor courses", "Training students for World Skills Russia"}, + }, + { + Key: "3d artist", + Values: []string{"March 2020 - June 2020", "Creating 3d assets for VR game"}, + }, + { + Key: "Jr. Techartist", + 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, } } @@ -106,6 +156,11 @@ type PropElement struct { Values []string } +type PropIsland struct { + Header string + Props []PropElement +} + // func (p *PersonalPropertiesApp) GetContent(ctx *gin.Context) interface{} { // }