From ea65976d010ef1d41a3ba9ef53efea00f5b7b6e2 Mon Sep 17 00:00:00 2001 From: cyber-dream Date: Sun, 7 May 2023 22:56:40 +0300 Subject: [PATCH] Frontend apps fixes --- resources/sys/blog-viewer/blog-viewer.css | 3 ++- resources/sys/blog-viewer/blog-viewer.js | 2 +- resources/sys/finder/finder.js | 8 ++++---- .../personal-properies.css | 1 + .../personal-properties.js | 7 +++++-- resources/sys/wde/wde-scrollbar.css | 9 +++++---- resources/sys/wde/wde-scrollbar.js | 7 +++++-- resources/wde.js | 6 +++--- templates/blog-viewer/app.tmpl | 20 ++++++++++--------- templates/personal-properties/app.tmpl | 7 ++++--- 10 files changed, 41 insertions(+), 29 deletions(-) diff --git a/resources/sys/blog-viewer/blog-viewer.css b/resources/sys/blog-viewer/blog-viewer.css index ef9b1ee..d1a8b8e 100644 --- a/resources/sys/blog-viewer/blog-viewer.css +++ b/resources/sys/blog-viewer/blog-viewer.css @@ -14,8 +14,9 @@ } .BlogView .Content { + overflow: scroll; width: 100%; - height: auto; + height: 100%; /* Auto layout */ display: flex; flex-direction: column; diff --git a/resources/sys/blog-viewer/blog-viewer.js b/resources/sys/blog-viewer/blog-viewer.js index 9469aef..70f2dc4 100644 --- a/resources/sys/blog-viewer/blog-viewer.js +++ b/resources/sys/blog-viewer/blog-viewer.js @@ -18,7 +18,7 @@ class BlogViewer{ // let fileView = new FileView("/kek", newWindow.querySelector(".FileTileView"), Finder.Click) if (!WebDesktopEnvironment.isMobile){ - // let scrollBar = new WdeScrollBar(newWindow.children[1].children[1], newWindow.children[1].children[0])// TODO to querry selector + let scrollBar = new WdeScrollBar(newWindow.querySelector(".ScrollbarPlace"), newWindow.querySelector(".ScrollContent")) newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) { WebDesktopEnvironment.CloseWindow(newWindow) }) diff --git a/resources/sys/finder/finder.js b/resources/sys/finder/finder.js index 785b8a2..013256b 100644 --- a/resources/sys/finder/finder.js +++ b/resources/sys/finder/finder.js @@ -40,14 +40,14 @@ class Finder{ this.OpenDir('/') }) - // newWindow.querySelector("#HomeButton").addEventListener('click', () =>{ - // this.OpenDir(this.homePath) - // }) + newWindow.querySelector("#HomeButton").addEventListener('click', () =>{ + this.OpenDir('/home/user') + }) this.windowElement = newWindow if (!WebDesktopEnvironment.isMobile){ - // let scrollBar = new WdeScrollBar(newWindow.children[1].children[1], newWindow.children[1].children[0])// TODO to querry selector + let scrollBar = new WdeScrollBar(newWindow.querySelector(".ScrollbarPlace"), newWindow.querySelector(".FileTileView")) // console.log(newWindow.querySelector("#closeWindowButton")) newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) { diff --git a/resources/sys/personal-properties/personal-properies.css b/resources/sys/personal-properties/personal-properies.css index 1ede4f1..2c7c916 100644 --- a/resources/sys/personal-properties/personal-properies.css +++ b/resources/sys/personal-properties/personal-properies.css @@ -108,6 +108,7 @@ } + .PropertiesList .Island{ width: 100%; height: auto; diff --git a/resources/sys/personal-properties/personal-properties.js b/resources/sys/personal-properties/personal-properties.js index 9c48f7c..b35f37f 100644 --- a/resources/sys/personal-properties/personal-properties.js +++ b/resources/sys/personal-properties/personal-properties.js @@ -22,11 +22,14 @@ class PersonalProperties{ let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, 360, document.body.clientHeight*0.8 ) newWindow.innerHTML = html + newWindow.style.height = 'auto' - let scrollBar = new WdeScrollBar(newWindow.querySelector('.ScrollBarScrollElement'), newWindow.querySelector('.PropsView')) + // console.log(newWindow.querySelector('.ScrollBarScrollElement')) + + // let scrollBar = new WdeScrollBar(newWindow.querySelector('.ScrollbarPlace'), newWindow.querySelector('.PropsView')) newWindow.querySelector("#closeWindowButton").addEventListener('click', () => { - console.log("qewqweqweqweqwe") + // console.log("qewqweqweqweqwe") WebDesktopEnvironment.CloseWindow(newWindow) }) }) diff --git a/resources/sys/wde/wde-scrollbar.css b/resources/sys/wde/wde-scrollbar.css index 24eb662..e256900 100644 --- a/resources/sys/wde/wde-scrollbar.css +++ b/resources/sys/wde/wde-scrollbar.css @@ -87,20 +87,21 @@ filter: drop-shadow(1px 1px 0px #333399); } +/* TODO to wde css */ .ScrollContent { - width: 100%; - height: 100%; + /* width: 100%; + height: 100%; */ overflow: scroll; overflow-x: hidden; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Internet Explorer 10+ */ /* Auto layout */ - display: flex; + /* display: flex; flex-direction: row; justify-content: center; align-items: flex-start; - padding: 0px; + padding: 0px; */ } .ScrollContent::-webkit-scrollbar { /* WebKit */ diff --git a/resources/sys/wde/wde-scrollbar.js b/resources/sys/wde/wde-scrollbar.js index 3eb3ddb..9d9099f 100644 --- a/resources/sys/wde/wde-scrollbar.js +++ b/resources/sys/wde/wde-scrollbar.js @@ -5,8 +5,11 @@ class WdeScrollBar{ */ constructor(scrollBarContainer, content){ let nonNativeScroll = false - // console.log(scrollBarContainer) - let handler = scrollBarContainer.children[0] + // console.log(scrollBarContainer, content) + // let handler = scrollBarContainer.children[0] + //TODO On scroll move focus on window? + let handler = scrollBarContainer.querySelector(".ScrollBarScrollElement") //TODO Refactor classes + // console.log(handler) handler.style.height = (content.clientHeight /content.scrollHeight)* handler.parentElement.clientHeight + 'px' diff --git a/resources/wde.js b/resources/wde.js index 80a8891..b1dec9f 100644 --- a/resources/wde.js +++ b/resources/wde.js @@ -4,9 +4,9 @@ document.addEventListener('DOMContentLoaded', function() { // console.log(window.screen.width) wde = new WebDesktopEnvironment if (!WebDesktopEnvironment.isMobile){ - // WebDesktopEnvironment.Open("finder", ["/home/user"]) + WebDesktopEnvironment.Open("finder", ["/home/user"]) // WebDesktopEnvironment.Open("blog-viewer", ["/home/user/blog1.blog"]) - WebDesktopEnvironment.Open("personal-properties", ["/home/user/aboutme.props"]) + // WebDesktopEnvironment.Open("personal-properties", ["/home/user/aboutme.props"]) } else { WebDesktopEnvironment.Open("blog-viewer", ["/home/user/blog/test-1.blog"]) } @@ -186,7 +186,7 @@ class WebDesktopEnvironment{ */ static Alert(alertText){ WebDesktopEnvironment.CreateAlertWindow(alertText) - // console.log(alertText) + console.log(alertText) } /** diff --git a/templates/blog-viewer/app.tmpl b/templates/blog-viewer/app.tmpl index cee653c..9c06849 100644 --- a/templates/blog-viewer/app.tmpl +++ b/templates/blog-viewer/app.tmpl @@ -10,15 +10,17 @@
- {{ range $block := .blocks }} -
- {{ range $data := $block.Data }} -
- {{$data}} -
- {{ end }} -
- {{ end }} +
+ {{ range $block := .blocks }} +
+ {{ range $data := $block.Data }} +
+ {{$data}} +
+ {{ end }} +
+ {{ end }} +
{{template "wde-widgets/scrollbar.tmpl" .}}
diff --git a/templates/personal-properties/app.tmpl b/templates/personal-properties/app.tmpl index e1fe786..8b3bf69 100644 --- a/templates/personal-properties/app.tmpl +++ b/templates/personal-properties/app.tmpl @@ -12,7 +12,7 @@
- My Photo + My Photo
{{ .headerProps.Name }}
{{ .headerProps.Info1 }}
@@ -20,7 +20,8 @@
{{ range $propIsland := .allprops }} -
+ +
{{$propIsland.Header}}:
@@ -49,7 +50,7 @@ {{ end }}
- {{template "wde-widgets/scrollbar.tmpl" .}} +
{{ end }}