From c9fbbf09e265b8fb6905c1000d780804b81905e9 Mon Sep 17 00:00:00 2001 From: cyber-dream Date: Sat, 18 Mar 2023 05:16:32 +0300 Subject: [PATCH] fixes in wde and persProperties --- resources/base.css | 57 ++++++++------ .../personal-properties.js | 8 +- resources/wde.js | 24 +++--- resources/wdeUI.css | 27 +++++-- templates/base/index.tmpl | 1 + templates/personal-properties/app.tmpl | 76 ++++++++++--------- websiteapp/personalprops/personalprops.go | 49 ++++++------ 7 files changed, 138 insertions(+), 104 deletions(-) diff --git a/resources/base.css b/resources/base.css index ec8adc4..b7ac7a0 100644 --- a/resources/base.css +++ b/resources/base.css @@ -33,17 +33,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{ @@ -81,10 +71,21 @@ body{ white-space: nowrap } +.VisualFrame{ + width: 100%; + height: 100%; + overflow: scroll; + overflow-x: hidden; + + 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; +} .ContentFrame{ box-sizing: border-box; - + position: relative; + padding: 10px; /* Auto layout */ display: flex; flex-direction: column; @@ -92,12 +93,10 @@ body{ padding: 12px; gap:16px; - width: 100%; - height: 100%; + width: auto; + 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,6 +104,8 @@ body{ order: 0; align-self: stretch; flex-grow: 1; + + /* overflow: scroll; */ } .Personal-properties-bio{ @@ -141,30 +142,28 @@ body{ height: auto; border: 1px solid #888888; box-shadow: 1px 1px 0px #FFFFFF, inset 1px 1px 0px #FFFFFF; + padding-bottom: 10px; /* Auto layout */ - display: flex; + /* display: flex; flex-direction: column; align-items: center; padding: 0px; - gap:1px; + gap:1px; */ } -.Personal-properties-prop-header{ +.Personal-properties-prop-title{ font-family: "Virtue"; letter-spacing: 0.35px; - /* width: 50px; */ position:relative; display: inline-block; max-width: 100%; background-color: #DDDDDD; - /* left: 12px; */ - right: 39%; + left: 12px; top: -9px; - margin-left: 2px; } .Personal-properties-prop-content{ @@ -200,6 +199,16 @@ body{ /* 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; diff --git a/resources/personal-properties/personal-properties.js b/resources/personal-properties/personal-properties.js index ae0891a..4f86d82 100644 --- a/resources/personal-properties/personal-properties.js +++ b/resources/personal-properties/personal-properties.js @@ -17,7 +17,7 @@ class PersonalProperties{ fetch("http://localhost:8080/application/personal-properties/render") //TODO Move to wde func .then((response) => response.text()) .then((html) => { - let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId) + let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, "Personal Properties", 350, 750) //TODO Get ~70% of user screen height newWindow.innerHTML = html @@ -25,8 +25,10 @@ class PersonalProperties{ // console.log("keeek") // } - let closeButton = newWindow.children[0].children[0].children[0].children[0] - // closeButton.onclick = this.CloseWindow("test") + // console.log(newWindow.children[0].children[0]) + let closeButton = newWindow.children[0].children[0] + // console.log(closeButton) + // // closeButton.onclick = this.CloseWindow("test") closeButton.addEventListener('click', function (params) { WebDesktopEnvironment.CloseWindow(newWindow) }) diff --git a/resources/wde.js b/resources/wde.js index 926280f..5489367 100644 --- a/resources/wde.js +++ b/resources/wde.js @@ -42,16 +42,17 @@ class WebDesktopEnvironment{ /** * @param {string} appId * @param {string} windowName + * @param {number} width + * @param {number} height * @returns {HTMLElement} */ - static CreateNewWindow(appId, windowName) { + static CreateNewWindow(appId, windowName, width, height) { let appElem = document.getElementById(`application-${appId}`) - - let newWindow = document.createElement("window") - newWindow.style.display = "inline" //TODO Make multi-window support + let newWindow = document.createElement("div") + newWindow.setAttribute("class", "StandartApplicationWindow") newWindow.style.position = "absolute" - newWindow.style.width = "350px" - newWindow.styleheight = "350px" + newWindow.style.width = width.toString() + "px" + newWindow.style.height = height.toString() + "px" return appElem.appendChild(newWindow) } @@ -137,8 +138,8 @@ class WindowsCompositor{ switch (true) { case event.target.className == "WindowFrameTopBar": - this.movingElement = event.target.parentElement.parentElement.parentElement - console.log(this.movingElement) + this.movingElement = event.target.parentElement + // console.log(this.movingElement) break; default: break; @@ -150,9 +151,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"; } } diff --git a/resources/wdeUI.css b/resources/wdeUI.css index 81732a1..f9f8fe1 100644 --- a/resources/wdeUI.css +++ b/resources/wdeUI.css @@ -1,3 +1,24 @@ +.StandartApplicationWindow{ + width: 100%; + min-height: 200px; + + 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; + /* padding-bottom: 50px; */ + gap:4px; + + overflow: hidden; +} + .WindowFrameTopBarButton{ width: 11px; height: 11px; @@ -9,7 +30,7 @@ -0.5px -0.5px 0px 0.5px 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; @@ -17,13 +38,9 @@ } .WindowFrameTopBar{ - - /* background-color: aqua; */ width: 100%; height: 13px; - - display: flex; flex-direction: row; align-items: center; diff --git a/templates/base/index.tmpl b/templates/base/index.tmpl index e67ee1d..d8c90a9 100644 --- a/templates/base/index.tmpl +++ b/templates/base/index.tmpl @@ -1,5 +1,6 @@ + Greg Brzezinski diff --git a/templates/personal-properties/app.tmpl b/templates/personal-properties/app.tmpl index 75b59cc..b3a8696 100644 --- a/templates/personal-properties/app.tmpl +++ b/templates/personal-properties/app.tmpl @@ -1,49 +1,57 @@ {{ define "personal-properties/app.tmpl" }} -
-
+
- +
- Test Title + About me
-
-
- -
-
{{ .Name }}
-
{{ .BasicBio }}
-
-
- {{ range $propIsland := .allprops }} -
-
- {{$propIsland.Header}}: -
-
- {{range $prop := $propIsland.Props}} -
-
{{$prop.Key}}:
-
- {{ range $value := $prop.Values }} -
- {{ $value }} -
- {{ end }} -
+
+
+
+ My Photo +
+
{{ .Name }}
+
{{ .BasicBio }}
- {{ end }}
-
+ {{ range $propIsland := .allprops }} +
+
+ {{$propIsland.Header}}: +
+
+ {{range $prop := $propIsland.Props}} +
+
+ {{$prop.Key}}: + {{ range $value := $prop.KeyComments }} +
+ {{ $value }} +
+ {{ end }} +
+
+ {{ range $value := $prop.Values }} +
+ {{ $value }} +
+ {{ end }} +
+
+ {{ end }} +
+
+ + {{ end }} +
- {{ end }} -
-
-
+
+ {{ end }} diff --git a/websiteapp/personalprops/personalprops.go b/websiteapp/personalprops/personalprops.go index 80e26fb..25aea9b 100644 --- a/websiteapp/personalprops/personalprops.go +++ b/websiteapp/personalprops/personalprops.go @@ -62,28 +62,19 @@ func (p *PersonalPropertiesApp) Render() gin.H { 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: "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", - Values: []string{ - "2015-2016", - "Extended IT and Physical sciences course", - }, + Key: "Lyceum 281", + KeyComments: []string{"2015-2016"}, + Values: []string{"Extended IT and Physical sciences course"}, }, { - Key: "University", - Values: []string{ - "2017-2019", - "Faculty: Info-communication Networks and Systems", - "Specialty: Information Security", - }, + Key: "University", + KeyComments: []string{"2017-2019"}, + Values: []string{"Faculty: Info-communication Networks and Systems", "Specialty: Information Security"}, }, }, } @@ -91,16 +82,19 @@ func (p *PersonalPropertiesApp) Render() gin.H { 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: "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", - Values: []string{"March 2020 - June 2020", "Creating 3d assets for VR game"}, + Key: "3d artist", + KeyComments: []string{"Space Time VR", "2020-2020"}, + Values: []string{"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: "Jr. Techartist", + KeyComments: []string{"MP Games"}, + Values: []string{"Game content integration and production", "Shader coding", "Optimization asset production in artists pipeline"}, }, { Key: "Techartist", @@ -116,7 +110,7 @@ func (p *PersonalPropertiesApp) Render() gin.H { 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", + "Took a part on creating ranking system for players", "Creating models and maps for Steam Workshop"}, }, { @@ -152,8 +146,9 @@ type Book struct { } type PropElement struct { - Key string - Values []string + Key string + KeyComments []string + Values []string } type PropIsland struct {