From fd966fc017ee2e167fbf3ba30f9456bd4395d1ac Mon Sep 17 00:00:00 2001 From: Gregory Brzezinski Date: Fri, 17 Mar 2023 19:13:41 +0300 Subject: [PATCH 1/5] init --- main.go | 27 +++++++++-- resources/base.css | 29 ++++++++--- resources/kek/kek.tmpl | 1 + resources/personal-properties.html | 11 ++++- .../personal-properies.css | 0 .../personal-properties.js | 4 +- .../personal-properties.tmpl | 30 ++++++++++++ resources/wde.js | 14 ++++-- resources/wdeUI.css | 9 ++-- templates/personal-properties/app.tmpl | 7 +++ templates/posts/index.tmpl | 7 +++ templates/users/index.tmpl | 7 +++ websiteapp/personalprops/personalprops.go | 48 ++++++++++--------- 13 files changed, 148 insertions(+), 46 deletions(-) create mode 100644 resources/kek/kek.tmpl rename resources/{applications => }/personal-properties/personal-properies.css (100%) rename resources/{applications => }/personal-properties/personal-properties.js (80%) create mode 100644 resources/personal-properties/personal-properties.tmpl create mode 100644 templates/personal-properties/app.tmpl create mode 100644 templates/posts/index.tmpl create mode 100644 templates/users/index.tmpl diff --git a/main.go b/main.go index 30f8f82..eb0cfa1 100644 --- a/main.go +++ b/main.go @@ -11,11 +11,27 @@ import ( "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.LoadHTMLGlob("templates/**/*") // router.Static("/static", "resources/static") router.Static("/res", "resources") @@ -49,7 +65,7 @@ func main() { case "getmanifest": ctx.JSON(http.StatusOK, app.GetManifest()) case "gethtml": - ctx.HTML(http.StatusOK, appId+".html", nil) + ctx.HTML(http.StatusOK, "resources/"+appId+"/"+appId+".tmpl", nil) case "app.js": ctx.File("resources/applications/" + appId + "/" + appId + ".js") case "app.css": @@ -73,11 +89,14 @@ func main() { { persPropApp.GET("getcontent", func(ctx *gin.Context) { - ctx.HTML(http.StatusOK, "personal-properties.html", persPropsApp.Render()) + 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) diff --git a/resources/base.css b/resources/base.css index bb02687..ad1de5d 100644 --- a/resources/base.css +++ b/resources/base.css @@ -66,10 +66,12 @@ body{ .WindowFrameTitle{ + pointer-events: none; white-space: nowrap } .WindowDragArea{ + pointer-events: none; /* background-color: antiquewhite; */ width: 100%; height: 100%; @@ -90,14 +92,14 @@ body{ flex-direction: column; align-items: center; padding: 12px; - gap:10px; + gap:16px; width: 100%; height: 100%; 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; + 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 */ @@ -119,6 +121,8 @@ body{ gap:15px; } + + .Personal-properties-textbio{ /* width: 100%; height: auto; */ @@ -155,16 +159,17 @@ body{ display: inline-block; max-width: 100%; background-color: #DDDDDD; - left: 12px; - top: -10px; + /* left: 12px; */ + right: 30%; + top: -12px; margin-left: 2px; /* Auto layout */ - display: flex; + /* display: flex; flex-direction: column; align-items: center; padding: 12px; - gap:10px; + gap:10px; */ /* padding: 10px; */ /* border: 1px solid #888888; */ @@ -198,7 +203,17 @@ body{ white-space: nowrap /* font-weight: bold; */ } -.Personal-properties-prop-prop{ +.Personal-properties-prop-values{ width: 55%; + display: flex; + flex-direction: column; + justify-content: left; + padding: 0px; + gap: 5px; + +} + +.Personal-properties-prop-value{ + /* width: 55%; */ } \ No newline at end of file diff --git a/resources/kek/kek.tmpl b/resources/kek/kek.tmpl new file mode 100644 index 0000000..d5f836a --- /dev/null +++ b/resources/kek/kek.tmpl @@ -0,0 +1 @@ +
PIIIIIIZDA
\ No newline at end of file diff --git a/resources/personal-properties.html b/resources/personal-properties.html index 138a686..308119c 100644 --- a/resources/personal-properties.html +++ b/resources/personal-properties.html @@ -8,11 +8,20 @@ {{ range $props := .allprops }}
+
+ Test Title: +
{{range $prop := $props}}
{{.Key}}:
-
{{ .Prop }}
+
+ {{ range $value := .Values }} +
+ {{ $value }} +
+ {{ end }} +
{{ end }}
diff --git a/resources/applications/personal-properties/personal-properies.css b/resources/personal-properties/personal-properies.css similarity index 100% rename from resources/applications/personal-properties/personal-properies.css rename to resources/personal-properties/personal-properies.css diff --git a/resources/applications/personal-properties/personal-properties.js b/resources/personal-properties/personal-properties.js similarity index 80% rename from resources/applications/personal-properties/personal-properties.js rename to resources/personal-properties/personal-properties.js index 720c2ff..dc50706 100644 --- a/resources/applications/personal-properties/personal-properties.js +++ b/resources/personal-properties/personal-properties.js @@ -13,7 +13,7 @@ class PersonalProperties{ 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 + fetch("http://localhost:8080/application/personal-properties/getcontent") //TODO Move to wde func .then((response) => response.text()) .then((html) => { contentFrame.innerHTML = html @@ -23,7 +23,7 @@ class PersonalProperties{ }); // var link = document.createElement( "link" ); - // link.href = "http://192.168.88.10:8080/system/applications/personal-properties/app.css" + // link.href = "http://localhost:8080/system/applications/personal-properties/app.css" // link.type = "text/css"; // link.rel = "stylesheet"; // link.media = "screen,print"; diff --git a/resources/personal-properties/personal-properties.tmpl b/resources/personal-properties/personal-properties.tmpl new file mode 100644 index 0000000..1f0ce1e --- /dev/null +++ b/resources/personal-properties/personal-properties.tmpl @@ -0,0 +1,30 @@ +
+ RIGHT FILE!!!! + +
+
{{ .Name }}
+
{{ .BasicBio }}
+
+
+ +{{ range $props := .allprops }} +
+
+ Test Title: +
+
+ {{range $prop := $props}} +
+
{{.Key}}:
+
+ {{ range $value := .Values }} +
+ {{ $value }} +
+ {{ end }} +
+
+ {{ end }} +
+
+{{ end }} diff --git a/resources/wde.js b/resources/wde.js index a4844e5..8fe89d6 100644 --- a/resources/wde.js +++ b/resources/wde.js @@ -1,15 +1,13 @@ 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) @@ -27,10 +25,15 @@ 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) + 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/personal-properties/app.js") script.setAttribute("async", "false") appElem.appendChild(script) script.addEventListener("load", function () { @@ -101,8 +104,9 @@ class WindowsCompositor{ * @param {MouseEvent} event */ catchClick(event){ + switch (true) { - case event.target.className == "TestWindowHeader": + case event.target.className == "WindowFrameTopBar": this.movingElement = event.target.parentElement.parentElement.parentElement break; default: diff --git a/resources/wdeUI.css b/resources/wdeUI.css index 924f12a..2e999ef 100644 --- a/resources/wdeUI.css +++ b/resources/wdeUI.css @@ -1,17 +1,16 @@ -.WindowFrameTopBarButton{ +.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; diff --git a/templates/personal-properties/app.tmpl b/templates/personal-properties/app.tmpl new file mode 100644 index 0000000..fc029ef --- /dev/null +++ b/templates/personal-properties/app.tmpl @@ -0,0 +1,7 @@ +{{ define "personal-properties/app.tmpl" }} +

+ {{ .title }} +

+

Using posts/index.tmpl

+ +{{ end }} \ No newline at end of file diff --git a/templates/posts/index.tmpl b/templates/posts/index.tmpl new file mode 100644 index 0000000..88f493d --- /dev/null +++ b/templates/posts/index.tmpl @@ -0,0 +1,7 @@ +{{ define "posts/index.tmpl" }} +

+ {{ .title }} +

+

Using posts/index.tmpl

+ +{{ end }} \ No newline at end of file diff --git a/templates/users/index.tmpl b/templates/users/index.tmpl new file mode 100644 index 0000000..1d76b6e --- /dev/null +++ b/templates/users/index.tmpl @@ -0,0 +1,7 @@ +{{ define "users/index.tmpl" }} +

+ {{ .title }} +

+

Using users/index.tmpl

+ +{{ end }} \ No newline at end of file diff --git a/websiteapp/personalprops/personalprops.go b/websiteapp/personalprops/personalprops.go index f17d72a..5e48121 100644 --- a/websiteapp/personalprops/personalprops.go +++ b/websiteapp/personalprops/personalprops.go @@ -37,33 +37,37 @@ func (p *PersonalPropertiesApp) Render() gin.H { // Title: "Title 2", // Author: "Author 2", // }) - allProps := make([][]Prop, 0) + allProps := make([][]PropElement, 0) - basicInfo := make([]Prop, 0) + basicInfo := make([]PropElement, 0) - basicInfo = append(basicInfo, Prop{ - Key: "", - Prop: "Greg Brzezinski", + basicInfo = append(basicInfo, PropElement{ + Key: "", + Values: []string{"Greg Brzezinski"}, }) - basicInfo = append(basicInfo, Prop{ - Key: "", - Prop: "Saint-Petersburg", + basicInfo = append(basicInfo, PropElement{ + Key: "", + Values: []string{"Saint-Petersburg"}, }) // careerkeys := make([]Prop, 0) - careerkeys := []Prop{ + careerkeys := []PropElement{ { - Key: "VR lab assistant", - Prop: "111", + 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", - Prop: "qweqwe", + Key: "3d artist", + Values: []string{"March 2020 - June 2020", "Creating 3d assets for VR game"}, }, { - Key: "Jr. Techartist", - Prop: "qweqwaaae", + 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"}, }, } // careerkeys = append(careerkeys, Prop{ @@ -75,10 +79,10 @@ func (p *PersonalPropertiesApp) Render() gin.H { // Prop: "qweqwe", // }) // careerkeys = append(careerkeys, Prop{}) - testKeys := []Prop{} - testKeys = append(testKeys, Prop{ - Key: "Urrtt", - Prop: "BakaBaka", + testKeys := []PropElement{} + testKeys = append(testKeys, PropElement{ + Key: "Urrtt", + Values: []string{"BakaBaka"}, }) allProps = append(allProps, careerkeys, testKeys, testKeys, testKeys) @@ -97,9 +101,9 @@ type Book struct { Author string } -type Prop struct { - Key string - Prop string +type PropElement struct { + Key string + Values []string } // func (p *PersonalPropertiesApp) GetContent(ctx *gin.Context) interface{} { From 04552cc3a9e663b64260e80a99f3af8ea2f6c85c Mon Sep 17 00:00:00 2001 From: cyber-dream Date: Sat, 18 Mar 2023 03:34:56 +0300 Subject: [PATCH 2/5] 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{} { // } From c9fbbf09e265b8fb6905c1000d780804b81905e9 Mon Sep 17 00:00:00 2001 From: cyber-dream Date: Sat, 18 Mar 2023 05:16:32 +0300 Subject: [PATCH 3/5] 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 { From ee9f18a1347a6e3a628c69ef63ec65e557389861 Mon Sep 17 00:00:00 2001 From: cyber-dream Date: Sun, 19 Mar 2023 01:47:29 +0300 Subject: [PATCH 4/5] add simple scrollbar lib --- resources/sys/wde/simple-scrollbar.css | 56 +++++++++ resources/sys/wde/simple-scrollbar.js | 165 +++++++++++++++++++++++++ 2 files changed, 221 insertions(+) create mode 100644 resources/sys/wde/simple-scrollbar.css create mode 100644 resources/sys/wde/simple-scrollbar.js diff --git a/resources/sys/wde/simple-scrollbar.css b/resources/sys/wde/simple-scrollbar.css new file mode 100644 index 0000000..718e25e --- /dev/null +++ b/resources/sys/wde/simple-scrollbar.css @@ -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; +} diff --git a/resources/sys/wde/simple-scrollbar.js b/resources/sys/wde/simple-scrollbar.js new file mode 100644 index 0000000..2ff768f --- /dev/null +++ b/resources/sys/wde/simple-scrollbar.js @@ -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 = '
'; + //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; +}); \ No newline at end of file From edd4a86796dc6f2a3c101e2fe5da2ef837c19b6c Mon Sep 17 00:00:00 2001 From: cyber-dream Date: Mon, 20 Mar 2023 14:20:37 +0300 Subject: [PATCH 5/5] working scrollbar --- .../personalPropsRoute/personalPropsRoute.go | 13 -- main.go | 10 +- {resources => pure-html}/base.html | 0 {resources => pure-html}/basic-window.html | 0 pure-html/index.html | 41 ++++- resources/base.css | 169 +++++------------- resources/kek/kek.tmpl | 1 - .../personal-properies.css | 0 .../personal-properties.tmpl | 30 ---- resources/sys/apps/finder/app.js | 40 +++++ .../personal-properies.css | 166 +++++++++++++++++ .../personal-properties.js | 28 +-- resources/sys/wde/wde-scrollbar.js | 83 +++++++++ resources/wde.js | 8 +- resources/wdeUI.css | 140 ++++++++++++++- templates/base/index.tmpl | 3 + templates/finder/app.tmpl | 5 + templates/personal-properties/app.tmpl | 65 ++++++- websiteapp/finder/finder.go | 22 +++ 19 files changed, 622 insertions(+), 202 deletions(-) delete mode 100644 approutes/personalPropsRoute/personalPropsRoute.go rename {resources => pure-html}/base.html (100%) rename {resources => pure-html}/basic-window.html (100%) delete mode 100644 resources/kek/kek.tmpl delete mode 100644 resources/personal-properties/personal-properies.css delete mode 100644 resources/personal-properties/personal-properties.tmpl create mode 100644 resources/sys/apps/finder/app.js create mode 100644 resources/sys/personal-properties/personal-properies.css rename resources/{ => sys}/personal-properties/personal-properties.js (58%) create mode 100644 resources/sys/wde/wde-scrollbar.js create mode 100644 templates/finder/app.tmpl create mode 100644 websiteapp/finder/finder.go diff --git a/approutes/personalPropsRoute/personalPropsRoute.go b/approutes/personalPropsRoute/personalPropsRoute.go deleted file mode 100644 index 38d3ab5..0000000 --- a/approutes/personalPropsRoute/personalPropsRoute.go +++ /dev/null @@ -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}) - // }) -} diff --git a/main.go b/main.go index 6eea0fa..c6eabc3 100644 --- a/main.go +++ b/main.go @@ -3,9 +3,9 @@ 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" @@ -39,10 +39,12 @@ func main() { }) 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") { @@ -65,9 +67,9 @@ func main() { case "getmanifest": ctx.JSON(http.StatusOK, app.GetManifest()) case "app.js": - ctx.File("resources/" + appId + "/" + appId + ".js") + ctx.File("resources/sys/" + appId + "/" + appId + ".js") case "app.css": - ctx.File("resources/" + appId + "/" + appId + ".css") + ctx.File("resources/sys/" + appId + "/" + appId + ".css") default: ctx.Status(http.StatusBadRequest) } @@ -75,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") diff --git a/resources/base.html b/pure-html/base.html similarity index 100% rename from resources/base.html rename to pure-html/base.html diff --git a/resources/basic-window.html b/pure-html/basic-window.html similarity index 100% rename from resources/basic-window.html rename to pure-html/basic-window.html diff --git a/pure-html/index.html b/pure-html/index.html index db576d8..3c5701f 100644 --- a/pure-html/index.html +++ b/pure-html/index.html @@ -1,10 +1,35 @@ - - + + - Website - - - - - + + + + + + + + + + + + +
+

↓Scrollable!↓

+

↓Scrollable!↓

+

↓Scrollable!↓

+

↓Scrollable!↓

+

↓Scrollable!↓

+
+ + \ No newline at end of file diff --git a/resources/base.css b/resources/base.css index b7ac7a0..a186625 100644 --- a/resources/base.css +++ b/resources/base.css @@ -1,8 +1,6 @@ @font-face{ font-family: "Virtue"; src:url("./virtue.ttf"); - - } @font-face{ @@ -21,6 +19,13 @@ 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 { @@ -74,15 +79,51 @@ body{ .VisualFrame{ width: 100%; height: 100%; - overflow: scroll; - overflow-x: hidden; + 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{ + width: 100%; + height: auto; + /* background-color: aquamarine; */ + + /* Auto layout */ + display: flex; + flex-direction: column; + align-items: center; + padding: 12px; + padding-bottom: 0px; + gap:16px; + +} + + + +.Old { box-sizing: border-box; position: relative; padding: 10px; @@ -93,7 +134,7 @@ body{ padding: 12px; gap:16px; - width: auto; + width: 100%; height: auto; @@ -105,121 +146,5 @@ body{ align-self: stretch; flex-grow: 1; - /* overflow: scroll; */ + overflow: scroll; } - -.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; -} - - - -.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; - 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%; */ - -} \ No newline at end of file diff --git a/resources/kek/kek.tmpl b/resources/kek/kek.tmpl deleted file mode 100644 index d5f836a..0000000 --- a/resources/kek/kek.tmpl +++ /dev/null @@ -1 +0,0 @@ -
PIIIIIIZDA
\ No newline at end of file diff --git a/resources/personal-properties/personal-properies.css b/resources/personal-properties/personal-properies.css deleted file mode 100644 index e69de29..0000000 diff --git a/resources/personal-properties/personal-properties.tmpl b/resources/personal-properties/personal-properties.tmpl deleted file mode 100644 index 1f0ce1e..0000000 --- a/resources/personal-properties/personal-properties.tmpl +++ /dev/null @@ -1,30 +0,0 @@ -
- RIGHT FILE!!!! - -
-
{{ .Name }}
-
{{ .BasicBio }}
-
-
- -{{ range $props := .allprops }} -
-
- Test Title: -
-
- {{range $prop := $props}} -
-
{{.Key}}:
-
- {{ range $value := .Values }} -
- {{ $value }} -
- {{ end }} -
-
- {{ end }} -
-
-{{ end }} diff --git a/resources/sys/apps/finder/app.js b/resources/sys/apps/finder/app.js new file mode 100644 index 0000000..5c5e973 --- /dev/null +++ b/resources/sys/apps/finder/app.js @@ -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") +} \ No newline at end of file diff --git a/resources/sys/personal-properties/personal-properies.css b/resources/sys/personal-properties/personal-properies.css new file mode 100644 index 0000000..eb8cd93 --- /dev/null +++ b/resources/sys/personal-properties/personal-properies.css @@ -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%; */ + +} \ No newline at end of file diff --git a/resources/personal-properties/personal-properties.js b/resources/sys/personal-properties/personal-properties.js similarity index 58% rename from resources/personal-properties/personal-properties.js rename to resources/sys/personal-properties/personal-properties.js index 4f86d82..83e69f3 100644 --- a/resources/personal-properties/personal-properties.js +++ b/resources/sys/personal-properties/personal-properties.js @@ -1,3 +1,4 @@ +// const simpleScrollbar = require("../wde/simple-scrollbar"); class PersonalProperties{ @@ -11,24 +12,29 @@ class PersonalProperties{ Init(){ 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) => { - let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, "Personal Properties", 350, 750) //TODO Get ~70% of user screen height + //TODO Get ~70% of user screen height + let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, "Personal Properties", 300, 500) newWindow.innerHTML = html - // document.getElementById("closeWindowButton").onclick = function jsFunc() { - // console.log("keeek") - // } - - // console.log(newWindow.children[0].children[0]) let closeButton = newWindow.children[0].children[0] - // console.log(closeButton) - // // closeButton.onclick = this.CloseWindow("test") + 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) }) diff --git a/resources/sys/wde/wde-scrollbar.js b/resources/sys/wde/wde-scrollbar.js new file mode 100644 index 0000000..cd9988e --- /dev/null +++ b/resources/sys/wde/wde-scrollbar.js @@ -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") + // } +} \ No newline at end of file diff --git a/resources/wde.js b/resources/wde.js index 5489367..b870637 100644 --- a/resources/wde.js +++ b/resources/wde.js @@ -12,6 +12,7 @@ class WebDesktopEnvironment{ .then((html) => { WebDesktopEnvironment.SetBasicWindow(html) let app = this.loadApp("personal-properties") + // let finder = this.loadApp("finder") }) .catch((error) => { WebDesktopEnvironment.Alert(error); @@ -30,7 +31,7 @@ class WebDesktopEnvironment{ let script = document.createElement("script") - script.setAttribute("src", "http://localhost: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,7 +40,7 @@ class WebDesktopEnvironment{ }, false) } - /** + /** * @param {string} appId * @param {string} windowName * @param {number} width @@ -71,14 +72,12 @@ class WebDesktopEnvironment{ static basicWindow /** - * * @param {string} html */ static SetBasicWindow(html){ this.basicWindow = html } /** - * * @returns {string} */ static GetBasicWindow(){ @@ -127,7 +126,6 @@ class WindowsCompositor{ } else { } - }) } diff --git a/resources/wdeUI.css b/resources/wdeUI.css index f9f8fe1..aa1975d 100644 --- a/resources/wdeUI.css +++ b/resources/wdeUI.css @@ -1,6 +1,25 @@ .StandartApplicationWindow{ - width: 100%; - min-height: 200px; + /* 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; @@ -13,10 +32,32 @@ flex-direction: column; align-items: flex-start; padding: 4px; - /* padding-bottom: 50px; */ + 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{ @@ -47,6 +88,12 @@ justify-content: space-between; gap: 5px; padding: 0px; + + /* Inside auto layout */ + flex: none; + order: 0; + align-self: stretch; + flex-grow: 0; } .WindowFrameTopBar .WindowFrameTitle{ @@ -76,4 +123,91 @@ 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); } \ No newline at end of file diff --git a/templates/base/index.tmpl b/templates/base/index.tmpl index d8c90a9..c37212d 100644 --- a/templates/base/index.tmpl +++ b/templates/base/index.tmpl @@ -4,6 +4,9 @@ + + + diff --git a/templates/finder/app.tmpl b/templates/finder/app.tmpl new file mode 100644 index 0000000..3bdce64 --- /dev/null +++ b/templates/finder/app.tmpl @@ -0,0 +1,5 @@ +{{ define "finder/app.tmpl" }} + Test Finder +{{ end }} + + \ No newline at end of file diff --git a/templates/personal-properties/app.tmpl b/templates/personal-properties/app.tmpl index b3a8696..195d5f4 100644 --- a/templates/personal-properties/app.tmpl +++ b/templates/personal-properties/app.tmpl @@ -7,18 +7,68 @@ About me
-
-
-
+ +
+
+
My Photo
{{ .Name }}
{{ .BasicBio }}
-
+
{{ 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 }} +
+
+
+
+
+
+
+
+ +
diff --git a/websiteapp/finder/finder.go b/websiteapp/finder/finder.go new file mode 100644 index 0000000..c37345d --- /dev/null +++ b/websiteapp/finder/finder.go @@ -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{} +}