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

@@ -1,22 +1,8 @@
-.BlogView{
+.blog-viewer{
+    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;
@@ -24,26 +10,25 @@
     justify-content: flex-start;
     /* gap: 50px; */
     /* row-gap: 20px; */
-    /* padding: 0px 20px 0px 20px; */
+    padding: 0px 20px 0px 20px;
-    margin: 0px 20px 0px 20px;
 }
 
-.BlogView .header-h1{
+.blog-viewer .header-h1{
     font-size:x-large;
     padding-bottom: 10px;
 }
 
-.BlogView .header-h2{
+.blog-viewer .header-h2{
     font-size:large;
     padding-bottom: 6px;
 }
 
-.BlogView .header-h3{
+.blog-viewer .header-h3{
     font-size:larger;
     padding-bottom: 2px;
 }
 
-.BlogView .plain-text{
+.blog-viewer .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.querySelector(".ScrollbarPlace"), newWindow.querySelector(".ScrollContent"))
+                // let scrollBar = new WdeScrollBar(newWindow.children[1].children[1], newWindow.children[1].children[0])// TODO to querry selector
                 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('/home/user')
+            //     this.OpenDir(this.homePath)
-            })
+            // })
 
             this.windowElement = newWindow
 
             if (!WebDesktopEnvironment.isMobile){
-                let scrollBar = new WdeScrollBar(newWindow.querySelector(".ScrollbarPlace"), newWindow.querySelector(".FileTileView"))
+                // let scrollBar = new WdeScrollBar(newWindow.children[1].children[1], newWindow.children[1].children[0])// TODO to querry selector
                 // console.log(newWindow.querySelector("#closeWindowButton"))
 
                 newWindow.querySelector("#closeWindowButton").addEventListener('click', function (params) {

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

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

resources/sys/personal-properties/personal-properties.js

@@ -22,14 +22,11 @@ class PersonalProperties{
             let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, 360, document.body.clientHeight*0.8 ) 
             
             newWindow.innerHTML = html
-            newWindow.style.height = 'auto'
 
-            // console.log(newWindow.querySelector('.ScrollBarScrollElement'))
+            let scrollBar = new WdeScrollBar(newWindow.querySelector('.ScrollBarScrollElement'), newWindow.querySelector('.PropsView'))
-
-            // 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,21 +87,20 @@
     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,11 +5,8 @@ class WdeScrollBar{
     */
     constructor(scrollBarContainer, content){
         let nonNativeScroll = false
-        // console.log(scrollBarContainer, content)
+        // console.log(scrollBarContainer)
-        // 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,27 +3,23 @@
         <button id="closeWindowButton" class="Button" title="Close Window"></button>
         <div id="Drag" class="VisualDragArea"></div>
         <div class="Lable">
-            Blog Viewer
+            {{.header}}
         </div>
         <div id="Drag" class="VisualDragArea"></div>
     </div>
     <div class="ContentBorder AdjectiveElement">
-        <div class="BlogView">
+        <div class="blog-viewer ScrollContent">
-            <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;">
-                                    {{$data}}
-                                </div>
-                            {{ end }}            
                         </div>
-                    {{ end }}
+                    {{ end }}            
                 </div>
-            </div>
+            {{ end }}
-            {{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 class="Image" src="/system/libs/img/get?path={{ .headerProps.IconPath }}" alt="My Photo">
+						<img src="/system/libs/img/get?path={{ .headerProps.IconPath }}" alt="My Photo" style="width: 48px;height: 48px;">
 						<div class="Text">
 							<div class="Name">{{ .headerProps.Name }}</div>
 							<div>{{ .headerProps.Info1 }}</div>
@@ -20,8 +20,7 @@
 						</div>
 					</div> 
 					{{ range $propIsland := .allprops }}
-					<!-- FIXME -->
+						<div class="Island">
-						<div class="Island"> 
 							<div class="Title">
 								{{$propIsland.Header}}:
 							</div>
@@ -50,7 +49,7 @@
 					{{ end }}
 				</div>
 			</div>
-			<!-- {{template "wde-widgets/scrollbar.tmpl" .}} -->
+			{{template "wde-widgets/scrollbar.tmpl" .}}
 		</div>
 	</div>
 {{ end }}