main.go

@@ -90,12 +90,7 @@ func main() {
 				ctx.HTML(http.StatusOK, "personal-properties/app.tmpl", persPropsApp.Render())
 			})
 		}
-		finderAppRoute := app.Group("finder")
+
-		{
-			finderAppRoute.GET("render", func(ctx *gin.Context) {
-				ctx.HTML(http.StatusOK, "finder/app.tmpl", finderApp.Render())
-			})
-		}
 	}
 	router.GET("/test", func(ctx *gin.Context) {
 		ctx.HTML(200, "kek/kek.tmpl", gin.H{})

resources/base.css

@@ -59,7 +59,8 @@ body{
     gap:4px;
 }
 
-/* .WindowFrameTopBar{
+.WindowFrameTopBar{
+    /* background-color: aqua; */
     width: 100%;
     height: 13px;
 
@@ -69,7 +70,7 @@ body{
     justify-content: space-between;
     gap: 5px;
     padding: 0px;
-} */
+}
 
 
 

resources/sys/apps/finder/app.js

@@ -1,28 +1,25 @@
+
+
 class Finder{
     appId = "finder"
     /**
     * @param {HTMLElement} appElem
     */
     constructor(appElem){
-        this.appElem = appElem
+        this.appElem = appElem        
     }
 
-    NewWindow(){
+    Init(){
         console.log("Init")
-        fetch(`${window.location.origin}/application/${this.appId}/render`) //TODO Move to wde func. Or Not?
+        fetch(`${window.location.origin}/application/${this.appId}/render`) //TODO Move to wde func
         .then((response) => response.text())
         .then((html) => {
-            // console.log(document.body)
+            let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, "Finder", 600, 500) 
-            // let heigth = Math.max(document.body.clientHeight*0.8, scrollDiv.children[0].scrollHeight) //TODO
-            let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, "Personal Properties", 500, 400 )
             
             newWindow.innerHTML = html
 
-            
-            // let scrollDiv = newWindow.children[1]
-            // let scrollBar = new WdeScrollBar(scrollDiv.children[1].children[0], scrollDiv.children[0])
-
             let closeButton = newWindow.children[0].children[0]
+
             closeButton.addEventListener('click', function (params) {
                 WebDesktopEnvironment.CloseWindow(newWindow)
             })
@@ -31,4 +28,13 @@ class Finder{
             WebDesktopEnvironment.Alert(error);
         });
     }
+
+    CloseWindow(id){
+        console.log(id+"Close")
+    }
+    
 }
+
+function reply_click(){
+    console.log("QQQQQQQQQQQQQQQQQQQ")
+}

resources/wde.js

@@ -12,8 +12,8 @@ class WebDesktopEnvironment{
         .then((response) => response.text())
         .then((html) => {
             WebDesktopEnvironment.SetBasicWindow(html)
-            // let app = this.loadApp("personal-properties")
+            let app = this.loadApp("personal-properties")
-            let finder = this.loadApp("finder")
+            // let finder = this.loadApp("finder")
         })
         .catch((error) => {
             WebDesktopEnvironment.Alert(error);
@@ -36,17 +36,8 @@ class WebDesktopEnvironment{
         script.setAttribute("async", "false")
         appElem.appendChild(script)
         script.addEventListener("load", function () {
-             newApp
+            let newApp = new PersonalProperties(appElem)
-            switch (appId) {
+            newApp.Init()
-                case "finder":
-                    let newApp = new Finder(appElem)
-                    newApp.NewWindow()
-                    break;
-            
-                default:
-                    break;
-            }
-                  
         }, false)
     }
 
@@ -166,3 +157,4 @@ class WindowsCompositor{
         element.style.top = (posY - element.children[0].clientHeight*0.5) + "px";
     }
 }
+

resources/wdeUI.css

@@ -4,7 +4,6 @@
     flex-direction: column;
     align-items: flex-start;
     padding: 4px;
-    padding-top: 2px;
     padding-right: 6px;
     gap: 4px;
 
@@ -19,6 +18,24 @@
     order: 1;
     align-self: stretch;
     flex-grow: 1;
+    /* width: 100%;
+    
+
+    background-color: #CCCCCC;
+
+    border: 1px solid #000000;
+    box-shadow: 1px 1px 0px #000,
+                inset -1px -1px 0px rgba(0, 0, 0, 0.27), 
+                inset 1px 1px 0px #FFFFFF;
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 4px;
+    
+    gap:4px;
+
+    overflow: hidden; */
 }
 
 .ContentBorder {
@@ -47,8 +64,6 @@
     width: 11px;
     height: 11px;
     padding: 0%;
-    position: relative;
-    top: 1px;
 
     background: linear-gradient(135deg, #999999 18.18%, #FFFFFF 81.82%);
     border: 1px solid #222222;
@@ -74,7 +89,6 @@
     gap: 5px;
     padding: 0px;
 
-
     /* Inside auto layout */
     flex: none;
     order: 0;
@@ -85,7 +99,6 @@
 .WindowFrameTopBar .WindowFrameTitle{
     position: relative;
     top:1px;
-    /* font-size: 13px; */
 
     pointer-events: none;
     white-space: nowrap;
@@ -106,7 +119,7 @@
 .WindowDragArea{
     pointer-events: none;
     width: 100%;
-    height: 11px;
+    height: 100%;
     background: linear-gradient(transparent 0%,white 0%, white 50%, transparent 50%);
     background-size: 2px 2px;
     filter: drop-shadow(1px 1px 0px #777777);
@@ -197,10 +210,4 @@
 
     /* TODO white pixels in rows start */
     filter: drop-shadow(1px 1px 0px #333399);
-}
-
-
-.FileTileView{
-    width: 100%;
-    height: 100%;
 }

templates/about-me/app.tmpl

@@ -1,20 +0,0 @@
-{{ define "about-me/app.tmpl" }}
-
-   <div class="StandartWindowFrame">
-        <div>
-            <div class="StandartWindowFrameTopBar">
-                <button id="closeWindowButton" class="StandartWindowFrameTopBarButton" title="Close Window"></button>
-                <div id="Drag" class="WindowDragArea"></div>
-                <div class="StandartWindowFrameTitle">
-                    About me
-                </div>
-                <div id="Drag" class="WindowDragArea"></div>
-            </div>
-            <div class="ContentBorder">
-                <div class="ScrollContent">
-                    TEST CONTENT
-                </div>
-                {{template "wde-widgets/scrollbar.tmpl" .}}
-        </div>
-   </div>
-{{ end }}

templates/finder/app.tmpl

@@ -1,13 +1,5 @@
 {{ define "finder/app.tmpl" }}
-    <div id="TestWindowHeader" class="WindowFrameTopBar">
+    Test Finder
-        <button id="closeWindowButton" class="WindowFrameTopBarButton" title="Close Window"></button>
-        <div id="Drag" class="WindowDragArea"></div>
-        <div class="WindowFrameTitle">
-            Files
-        </div>
-        <div id="Drag" class="WindowDragArea"></div>
-    </div>
-    {{template "wde-widgets/file-tile-view.tmpl" .}}
 {{ end }}
 
 				

templates/personal-properties/app.tmpl

@@ -49,8 +49,65 @@
 						{{ end }}
 				</div>
 			</div>
-			{{template "wde-widgets/scrollbar.tmpl" .}}
+			<div class="ScrollbarPlace">
+				<div class="ScrollBarScrollElement">
+					<div class="ScrollBarScrollElementDrag">	
+					</div>
+				</div>
+			</div>
+
+			<!-- <div class="TestContent" style="width: 100%; height: auto; background-color: aquamarine;">AAAAAAAAAAAAAA</div>
+				<div id="ContentFrame " class="ContentFrame">
+					<div class="Personal-properties-bio">
+						<img src="res/img/default-avatar-photo-placeholder-profile-picture-vector.jpg" alt="My Photo" style="width: 48px;height: 48px;">
+						<div class="Personal-properties-textbio">
+							<div>{{ .Name }}</div>
+							<div>{{ .BasicBio }}</div>
+						</div>
+					</div> 
+					<div id="Test content" style="width: 100%; height: 1000px; background-color: aqua;">
+
+					</div>
+					 {{ range $propIsland := .allprops }}
+						<div id="prop" class="Personal-properties-prop">
+							<div class="Personal-properties-prop-title">
+								{{$propIsland.Header}}:
+							</div>
+							<div class="Personal-properties-prop-content">
+								{{range $prop := $propIsland.Props}}
+								<div class="Personal-properties-prop-row">
+									<div class="Personal-properties-prop-key">
+										{{$prop.Key}}:
+										{{ range $value := $prop.KeyComments }}
+										<div class="Personal-properties-prop-key-comments">    
+											{{ $value }} 
+										</div>
+										{{ end }}
+									</div>
+									<div class="Personal-properties-prop-values">
+										{{ range $value := $prop.Values }}
+										<div class="Personal-properties-prop-value">    
+											{{ $value }} 
+										</div>
+										{{ end }}
+									</div>
+								</div>
+							{{ end }}
+							</div>
+						</div>  
+
+					
+					{{ end }}
+				</div>
+				<div class="ScrollbarPlace">
+					<div class="ScrollBarScrollElement">
+						<div class="ScrollBarScrollElementDrag">	
+						</div>
+					</div>
+				</div> -->
 		</div>
+    <!-- </div> -->
+	
 {{ end }}
 
 				

templates/wde-widgets/file-tile-view.tmpl

@@ -1,5 +0,0 @@
-{{ define "wde-widgets/file-tile-view.tmpl" }}
-    <div class="FileTileView">
-
-    </div>
-{{ end }}

templates/wde-widgets/scrollbar.tmpl

@@ -1,8 +0,0 @@
-{{ define "wde-widgets/scrollbar.tmpl" }}
-    <div class="ScrollbarPlace">
-        <div class="ScrollBarScrollElement">
-            <div class="ScrollBarScrollElementDrag">	
-            </div>
-        </div>
-    </div>
-{{ end }}