commit))

main.go

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

resources/sys/finder/finder.js

@@ -1,25 +1,28 @@
-
-
 class Finder{
     appId = "finder"
     /**
     * @param {HTMLElement} appElem
     */
     constructor(appElem){
-        this.appElem = appElem        
+        this.appElem = appElem
     }
 
-    Init(){
+    NewWindow(){
         console.log("Init")
-        fetch(`${window.location.origin}/application/${this.appId}/render`) //TODO Move to wde func
+        fetch(`${window.location.origin}/application/${this.appId}/render`) //TODO Move to wde func. Or Not?
         .then((response) => response.text())
         .then((html) => {
-            let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, "Finder", 600, 500) 
+            // console.log(document.body)
+            // 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 closeButton = newWindow.children[0].children[0]
+            
+            // 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)
             })
@@ -28,13 +31,4 @@ 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,8 +36,17 @@ class WebDesktopEnvironment{
         script.setAttribute("async", "false")
         appElem.appendChild(script)
         script.addEventListener("load", function () {
-            let newApp = new PersonalProperties(appElem)
+             newApp
-            newApp.Init()
+            switch (appId) {
+                case "finder":
+                    let newApp = new Finder(appElem)
+                    newApp.NewWindow()
+                    break;
+            
+                default:
+                    break;
+            }
+                  
         }, false)
     }
 
@@ -157,4 +166,3 @@ class WindowsCompositor{
         element.style.top = (posY - element.children[0].clientHeight*0.5) + "px";
     }
 }
-

resources/wdeUI.css

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

templates/about-me/app.tmpl

@@ -0,0 +1,20 @@
+{{ 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,5 +1,13 @@
 {{ define "finder/app.tmpl" }}
-    Test Finder
+    <div id="TestWindowHeader" class="WindowFrameTopBar">
+        <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,65 +49,8 @@
 						{{ end }}
 				</div>
 			</div>
-			<div class="ScrollbarPlace">
+			{{template "wde-widgets/scrollbar.tmpl" .}}
-				<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

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

templates/wde-widgets/scrollbar.tmpl

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