Frontend apps fixes

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;

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

@@ -108,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

@@ -10,15 +10,17 @@
     <div class="ContentBorder AdjectiveElement">
         <div class="BlogView">
             <div class="Content">
-                {{ range $block := .blocks }}
+                <div class="ScrollContent">
-                    <div class="{{$block.Type}}" >
+                    {{ range $block := .blocks }}
-                        {{ range $data := $block.Data }}
+                        <div class="{{$block.Type}}" >
-                            <div style="font-size: inherit;">
+                            {{ range $data := $block.Data }}
-                                {{$data}}
+                                <div style="font-size: inherit;">
-                            </div>
+                                    {{$data}}
-                        {{ end }}            
+                                </div>
-                    </div>
+                            {{ end }}            
-                {{ end }}
+                        </div>
+                    {{ end }}
+                </div>
             </div>
             {{template "wde-widgets/scrollbar.tmpl" .}}
         </div>

templates/personal-properties/app.tmpl

@@ -12,7 +12,7 @@
 			<div class="PropsView">
 				<div class="PropertiesList">
 					<div class="ShortBio">
-						<img class="Image" src="/system/libs/img/get?path={{ .headerProps.IconPath }}" alt="My Photo" >
+						<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,7 +20,8 @@
 						</div>
 					</div> 
 					{{ range $propIsland := .allprops }}
-						<div class="Island">
+					<!-- FIXME -->
+						<div class="Island"> 
 							<div class="Title">
 								{{$propIsland.Header}}:
 							</div>
@@ -49,7 +50,7 @@
 					{{ end }}
 				</div>
 			</div>
-			{{template "wde-widgets/scrollbar.tmpl" .}}
+			<!-- {{template "wde-widgets/scrollbar.tmpl" .}} -->
 		</div>
 	</div>
 {{ end }}