Frontend apps fixes

Fixes for apps
2023-05-07 22:56:40 +03:00 · 2023-05-07 15:14:42 +03:00
10 changed files with 70 additions and 36 deletions
--- a/resources/sys/blog-viewer/blog-viewer.css
+++ b/resources/sys/blog-viewer/blog-viewer.css
@ -1,8 +1,22 @@
-.blog-viewer{
-    background-color: #DDDDDD;
+.BlogView{
    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;
--- 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)
                })
--- 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) {
--- a/resources/sys/personal-properties/personal-properies.css
+++ b/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;
--- 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)
            })
        })
--- 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 */
--- 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'
    
--- 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)
    }

    /**
--- a/templates/blog-viewer/app.tmpl
+++ b/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">
-            {{ range $block := .blocks }}
-                <div class="{{$block.Type}}" >
-                    {{ range $data := $block.Data }}
-                        <div style="font-size: inherit;">
-                            {{$data}}
+        <div class="BlogView">
+            <div class="Content">
+                <div class="ScrollContent">
+                    {{ range $block := .blocks }}
+                        <div class="{{$block.Type}}" >
+                            {{ 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 }}

--- a/templates/personal-properties/app.tmpl
+++ b/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 }}
Author	SHA1	Message	Date
cyber-dream	ea65976d01	Frontend apps fixes	2023-05-07 22:56:40 +03:00
cyber-dream	fa50328474	Fixes for apps	2023-05-07 15:14:42 +03:00