Frontend apps fixes

resources/sys/blog-viewer/blog-viewer.css

@@ -1,8 +1,22 @@
-.blog-viewer{
+.BlogView{
-    background-color: #DDDDDD;
     width: 100%;
     height: 100%;
 
+    /* Auto layout */
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-start;
+    /* gap: 50px; */
+    /* row-gap: 20px; */
+    /* padding: 0px 20px 0px 20px;    */
+    background-color: #FFFFFF;
+}
+
+.BlogView .Content {
+    overflow: scroll;
+    width: 100%;
+    height: 100%;
     /* Auto layout */
     display: flex;
     flex-direction: column;
@@ -10,25 +24,26 @@
     justify-content: flex-start;
     /* gap: 50px; */
     /* row-gap: 20px; */
-    padding: 0px 20px 0px 20px;
+    /* padding: 0px 20px 0px 20px; */
+    margin: 0px 20px 0px 20px;
 }
 
-.blog-viewer .header-h1{
+.BlogView .header-h1{
     font-size:x-large;
     padding-bottom: 10px;
 }
 
-.blog-viewer .header-h2{
+.BlogView .header-h2{
     font-size:large;
     padding-bottom: 6px;
 }
 
-.blog-viewer .header-h3{
+.BlogView .header-h3{
     font-size:larger;
     padding-bottom: 2px;
 }
 
-.blog-viewer .plain-text{
+.BlogView .plain-text{
     /* Auto layout */
     display: flex;
     flex-direction: column;

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)
                 })

resources/sys/finder/finder.js

@@ -40,14 +40,14 @@ class Finder{
                 this.OpenDir('/')
             })
 
-            // newWindow.querySelector("#HomeButton").addEventListener('click', () =>{
+            newWindow.querySelector("#HomeButton").addEventListener('click', () =>{
-            //     this.OpenDir(this.homePath)
+                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) {

resources/sys/personal-properties/personal-properies.css

@@ -77,6 +77,12 @@
     gap:15px;
 }
 
+.ShortBio .Image{
+    width: 32px;
+    height: 32px;
+    padding-left: 10px;
+}
+
 .ShortBio .Text{
     /* width: 100%;
     height: auto; */
@@ -102,6 +108,7 @@
 }
 
 
+
 .PropertiesList .Island{
     width: 100%;
     height: auto;

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)
             })
         })

resources/sys/wde/wde-scrollbar.css

@@ -87,20 +87,21 @@
     filter: drop-shadow(1px 1px 0px #333399);
 }
 
+/* TODO to wde css */
 .ScrollContent {
-    width: 100%;
+    /* width: 100%;
-    height: 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 */

resources/sys/wde/wde-scrollbar.js

@@ -5,8 +5,11 @@ class WdeScrollBar{
     */
     constructor(scrollBarContainer, content){
         let nonNativeScroll = false
-        // console.log(scrollBarContainer)
+        // console.log(scrollBarContainer, content)
-        let handler = scrollBarContainer.children[0]
+        // 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'
     

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)
     }
 
     /**

templates/blog-viewer/app.tmpl

@@ -3,23 +3,27 @@
         <button id="closeWindowButton" class="Button" title="Close Window"></button>
         <div id="Drag" class="VisualDragArea"></div>
         <div class="Lable">
-            {{.header}}
+            Blog Viewer
         </div>
         <div id="Drag" class="VisualDragArea"></div>
     </div>
     <div class="ContentBorder AdjectiveElement">
-        <div class="blog-viewer ScrollContent">
+        <div class="BlogView">
-            {{ range $block := .blocks }}
+            <div class="Content">
-                <div class="{{$block.Type}}" >
+                <div class="ScrollContent">
-                    {{ range $data := $block.Data }}
+                    {{ range $block := .blocks }}
-                        <div style="font-size: inherit;">
+                        <div class="{{$block.Type}}" >
-                            {{$data}}
+                            {{ range $data := $block.Data }}
+                                <div style="font-size: inherit;">
+                                    {{$data}}
+                                </div>
+                            {{ end }}            
                         </div>
                     {{ end }}
                 </div>
-            {{ end }}
+            </div>
+            {{template "wde-widgets/scrollbar.tmpl" .}}
         </div>
-        {{template "wde-widgets/scrollbar.tmpl" .}}
     </div>
 {{ end }}
 

templates/personal-properties/app.tmpl

@@ -12,7 +12,7 @@
 			<div class="PropsView">
 				<div class="PropertiesList">
 					<div class="ShortBio">
-						<img src="/system/libs/img/get?path={{ .headerProps.IconPath }}" alt="My Photo" style="width: 48px;height: 48px;">
+						<img class="Image" src="/system/libs/img/get?path={{ .headerProps.IconPath }}" alt="My Photo">
 						<div class="Text">
 							<div class="Name">{{ .headerProps.Name }}</div>
 							<div>{{ .headerProps.Info1 }}</div>
@@ -20,6 +20,7 @@
 						</div>
 					</div> 
 					{{ range $propIsland := .allprops }}
+					<!-- FIXME -->
 						<div class="Island"> 
 							<div class="Title">
 								{{$propIsland.Header}}:
@@ -49,7 +50,7 @@
 					{{ end }}
 				</div>
 			</div>
-			{{template "wde-widgets/scrollbar.tmpl" .}}
+			<!-- {{template "wde-widgets/scrollbar.tmpl" .}} -->
 		</div>
 	</div>
 {{ end }}