fixes in wde and persProperties
This commit is contained in:
parent
04552cc3a9
commit
c9fbbf09e2
@ -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;
|
||||
|
||||
@ -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)
|
||||
})
|
||||
|
||||
@ -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";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<!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">
|
||||
|
||||
@ -1,49 +1,57 @@
|
||||
{{ define "personal-properties/app.tmpl" }}
|
||||
<div id="RootWidget" class="Application" style="width: 350px;height: 450px;" >
|
||||
<div id="WindowBorder" class="Frame">
|
||||
<!-- <div id="WindowBorder" class="PersonalPropertiesFrame"> -->
|
||||
<div id="TestWindowHeader" class="WindowFrameTopBar">
|
||||
<button id="closeWindowButton" class="WindowFrameTopBarButton" ></button>
|
||||
<button id="closeWindowButton" class="WindowFrameTopBarButton" title="Close Window"></button>
|
||||
<div id="Drag" class="WindowDragArea"></div>
|
||||
<div class="WindowFrameTitle">
|
||||
Test Title
|
||||
About me
|
||||
</div>
|
||||
<div id="Drag" class="WindowDragArea"></div>
|
||||
<!-- <button class="WindowFrameTopBarButton" ></button> -->
|
||||
</div>
|
||||
<div id="ContentFrame" class="ContentFrame">
|
||||
<div class="Personal-properties-bio">
|
||||
<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 $propIsland := .allprops }}
|
||||
<div id="prop" class="Personal-properties-prop">
|
||||
<div class="Personal-properties-prop-header">
|
||||
{{$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}}:</div>
|
||||
<div class="Personal-properties-prop-values">
|
||||
{{ range $value := $prop.Values }}
|
||||
<div class="Personal-properties-prop-value">
|
||||
{{ $value }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="VisualFrame">
|
||||
<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>
|
||||
{{ end }}
|
||||
</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>
|
||||
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
|
||||
{{ end }}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user